/* Custom styles for Absence Management */

/* Container */
.absence-management-container {
    display: flex;
    flex-direction: column;
    height: 90vh;
    background-color: #f8f9fa;
}

/* Header */
.absence-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.absence-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.absence-stats {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Main content */
.absence-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar */
.absence-sidebar {
    width: 16rem;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.absence-search {
    padding: 1rem;
    height: 70px;
    border-bottom: 1px solid #dee2e6;
}

.absence-filters {
    flex: 1;
    overflow: auto;
}

.absence-filter-section {
    height: 25%;
    min-height: 8rem;
    border-bottom: 1px solid #dee2e6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.absence-filter-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin: 0;
    padding: 1rem 1rem 0.5rem;
}

.absence-filter-list {
    padding: 0 1rem;
    overflow-y: auto;
    flex: 1;
}

.absence-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.absence-filter-count {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.absence-type-indicator {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

/* Calendar */
.absence-calendar {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.absence-calendar-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
    height:70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.absence-date-display {
    font-size: 0.875rem;
    color: #6c757d;
    display: flex;
    align-items: center;
}

.absence-calendar-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

/* Month tabular: jedan scrollport (H+V) na rubu kalendara */
.absence-calendar-content.absence-calendar-content--tabular {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

.absence-month-tabular-root {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Jedan scroll-area: H + V skrol na rubu panela (ne na desnom rubu širokog unutrašnjeg grida) */
.absence-month-tabular-scrollport {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 #e9ecef;
}

.absence-month-tabular-scrollport::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.absence-month-tabular-scrollport::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 6px;
}

.absence-month-tabular-scrollport::-webkit-scrollbar-thumb {
    background: #868e96;
    border-radius: 6px;
    border: 2px solid #e9ecef;
}

.absence-month-tabular-scrollport::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

.absence-week-view.absence-tabular-wide {
    display: block;
    min-height: 0;
    overflow: visible;
    background-color: #fff;
}

.absence-week-view.absence-tabular-wide .absence-tabular-header-row {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 6;
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(33, 37, 41, 0.08);
}

.absence-tabular-rows {
    background-color: #fff;
}

.absence-tabular-rows.absence-tabular-rows--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

.absence-tabular-empty-msg {
    width: 100%;
}

/* Week view */
.absence-week-view {
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.absence-week-header {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.absence-employee-header {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
}

.absence-day-header {
    padding: 0.5rem;
    text-align: center;
    border-left: 1px solid #dee2e6;
}

.absence-weekday {
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
}

.absence-date {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.absence-today {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-radius: 50%;
    width: 2.5rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem auto 0;
}

.absence-today-star {
    margin-left: 0.125rem;
    color: #ffc107;
}

.absence-employee-row {
    display: grid;
    grid-template-columns: 200px repeat(7, 1fr);
    border-bottom: 1px solid #dee2e6;
}

.absence-employee-info {
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
}

.absence-employee-name {
    font-weight: 500;
    color: #212529;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.absence-employee-details {
    margin-left: 0.5rem;
    flex-shrink: 0;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 500;
    background: none;
    padding: 0;
}

.absence-day-cell {
    padding: 0.25rem;
    border-left: 1px solid #dee2e6;
    position: relative;
}

.absence-event {
    padding: 0.125rem 0.25rem;
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
    color: #fff;
    border-radius: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.absence-no-data {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
}

/* Month view */
.absence-month-view {
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.absence-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #dee2e6;
    text-align: center;
}

.absence-month-day-header {
    background-color: #fff;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.absence-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #dee2e6;
}

.absence-month-cell {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 8rem;
    max-height: 8rem;
    overflow: hidden;
}

.absence-month-day-header-strip {
    display: block;
    width: 100%;
    border: none;
    background: #fff;
    padding: 0.35rem 0.45rem 0.25rem;
    flex-shrink: 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    border-radius: 0;
    font: inherit;
    color: inherit;
}

.absence-month-day-header-strip:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.35);
}

.absence-month-cell.today .absence-month-day-header-strip,
.absence-month-day-header-strip.is-today {
    background-color: inherit;
}

.absence-month-day-title {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

.absence-month-day-count-bold {
    font-weight: 700;
    color: #343a40;
}


.absence-day-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.45) !important;
}

.absence-day-popup-dialog.modal-dialog {
    max-width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
}

.absence-day-popup-dialog .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.absence-day-popup-dialog .modal-header {
    flex: 0 0 auto;
}

.absence-day-popup-dialog .modal-body.absence-day-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto; /* safety net ako ipak nešto pretekne */
}

/* Tall mode: 20+ redova → modal zauzme 90% screena, grid popuni cijelu raspoloživu visinu. */
.absence-day-popup-dialog--tall.modal-dialog {
    max-width: min(640px, calc(100vw - 2rem));
    max-height: 90vh;
    height: 90vh;
}

.absence-day-popup-dialog--tall .modal-content {
    height: 100%;
    max-height: 100%;
}

/* Modal-body postaje strict flex container — ne skrola, grid skrola interno. */
.absence-day-popup-dialog--tall .modal-body.absence-day-popup-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Filter ostaje fiksan na vrhu. */
.absence-day-popup-dialog--tall .absence-day-popup-type-filter {
    flex: 0 0 auto;
}

/* Wrapper popunjava preostali prostor; SfGrid sa Height="100%" sjedne unutra. */
.absence-day-popup-grid-wrap--tall {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.absence-day-popup-grid-wrap--tall .e-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* MultiSelect u modalu: popup ide na body; bez ovoga Syncfusion + filter + w-100 razvuče listu preko cijelog ekrana (vidi AdminAbsenceImportModal). */
#abs-day-popup-type-ms_popup.e-popup {
    width: 320px !important;
    max-width: min(320px, calc(100vw - 2rem)) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#abs-day-popup-type-ms_popup .e-dropdownbase,
#abs-day-popup-type-ms_popup .e-filter-parent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.absence-day-popup-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.absence-day-popup-empty {
    padding: 0.25rem 0 0.25rem;
}

/* Day popup SfGrid: --fit auto; --scroll fiksna px (11 redova); --tall grid Height 100% u 90vh modalu */
.absence-day-popup-grid-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Zaglavlje grida u modalu: blago tamnija siva od body pozadine (čitljivo, ne „teško”). */
.absence-day-popup-grid-wrap .e-grid .e-gridheader,
.absence-day-popup-grid-wrap .e-grid .e-gridheader .e-headercell,
.absence-day-popup-grid-wrap .e-grid .e-gridheader .e-headercelldiv {
    background-color: #eef1f4 !important;
}

/* Scroll: SfGrid sam upravlja visinom i internim scrollom — wrapper se ne miješa. */
.absence-day-popup-grid-wrap--scroll {
    overflow: visible;
}

.absence-day-popup-grid-wrap--fit .e-grid {
    height: auto !important;
    max-height: none !important;
}

.absence-day-popup-grid-wrap--fit .e-grid .e-gridcontent {
    height: auto !important;
    max-height: none !important;
}

.absence-day-popup-grid-wrap--fit .e-grid .e-content.e-yscroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
}

.absence-day-popup-table-wrap {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.absence-day-popup-table {
    margin-bottom: 0 !important;
    border-collapse: collapse;
}

.absence-day-popup-table th,
.absence-day-popup-table td {
    vertical-align: middle;
    padding: 0.6rem 0.95rem !important;
    border-color: #dee2e6 !important;
}

.absence-day-popup-table thead th {
    border-bottom: 2px solid #ced4da !important;
    font-weight: 600;
    color: #343a40;
}

.absence-day-popup-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(248, 249, 250, 0.85);
}

.absence-day-popup-table tbody tr:hover {
    background-color: #eaf4fb !important;
}

.absence-month-cell.empty {
    background-color: #f8f9fa;
    display: block;
    min-height: 0;
}

.absence-month-cell.today {
    background-color: #e3f2fd;
}

.absence-month-day-header-strip.is-today {
    border-bottom-color: #bbdefb;
}

.absence-month-date {
    font-size: inherit;
    font-weight: 500;
    color: #495057;
}

.absence-month-date.today {
    background-color: #bbdefb;
    color: #0d47a1;
    border-radius: 999px;
    padding: 0 0.35rem;
    display: inline-block;
    min-width: 1.35rem;
    text-align: center;
}

.absence-month-events {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    margin-top: 0;
    padding: 0.2rem 0.35rem 0.35rem;
}

.absence-more-events {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Bootstrap 4.3 missing classes */
.bg-blue-500 { background-color: #2196f3 !important; }
.bg-red-400 { background-color: #ef5350 !important; }
.bg-purple-500 { background-color: #9c27b0 !important; }
.bg-green-500 { background-color: #4caf50 !important; }
.bg-yellow-500 { background-color: #ffeb3b !important; }
.bg-indigo-500 { background-color: #3f51b5 !important; }
.bg-gray-500 { background-color: #9e9e9e !important; }

/* Custom scrollbar */
.absence-filters::-webkit-scrollbar,
.absence-filter-list::-webkit-scrollbar,
.absence-calendar-content::-webkit-scrollbar,
.absence-month-cell::-webkit-scrollbar {
    width: 6px;
}

.absence-filters::-webkit-scrollbar-track,
.absence-filter-list::-webkit-scrollbar-track,
.absence-calendar-content::-webkit-scrollbar-track,
.absence-month-cell::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.absence-filters::-webkit-scrollbar-thumb,
.absence-filter-list::-webkit-scrollbar-thumb,
.absence-calendar-content::-webkit-scrollbar-thumb,
.absence-month-cell::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.absence-filters::-webkit-scrollbar-thumb:hover,
.absence-filter-list::-webkit-scrollbar-thumb:hover,
.absence-calendar-content::-webkit-scrollbar-thumb:hover,
.absence-month-cell::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}