/* ================== Main Popup Container ================== */
.smDateTime-datetimepicker-popup {
    position: absolute;
    background-color: var(--sm-bg, #fff);
    color: var(--sm-text, #000);
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    user-select: none;
    z-index: 99999;
    width: 260px;
    font-family: var(--sm-font-family, sans-serif);
    font-size: 14px;
    border-radius: 6px;
}

.smDateTime-with-week-numbers {
    width: 290px;
}

/* ================== Header (< Month/Year >) ================== */
.smDateTime-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 4px;
}

.smDateTime-header button {
    background-color: transparent;
    border: 1px solid var(--sm-header-btn-border, rgba(0,0,0,0.2));
    color: var(--sm-btn-bg, #007bff);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
    font-weight: bold;
}

.smDateTime-header button:not(.smDateTime-header-display) {
    padding: 4px 14px;
    min-width: 30px;
    font-size: 16px;
    line-height: 1;
}

.smDateTime-header-display {
    font-size: 13px;
    padding: 4px 3px;
    flex-grow: 1;
    text-align: center;
    border-color: transparent;
}

.smDateTime-header-display:disabled {
    cursor: default;
    border-color: transparent !important;
}


/* ================== Main Views Container ================== */
.smDateTime-views-container {
    position: relative;
}
.smDateTime-view {
    display: none;
}
.smDateTime-days-view {
    display: block;
}

/* ================== Days View (Table) ================== */
.smDateTime-daysGrid {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 8px;
    user-select: none;
}

.smDateTime-daysGrid th,
.smDateTime-daysGrid td {
    padding: 6px 4px;
    width: 14.2857%;
}

.smDateTime-daysGrid th:not(.smDateTime-week-header) {
    color: var(--sm-btn-bg, #007bff);
    font-weight: 600;
}

.smDateTime-daysGrid td {
    cursor: pointer;
    border-radius: 0;
}

.smDateTime-daysGrid td:empty {
    cursor: default;
}

.smDateTime-daysGrid td.smDateTime-other-month {
    color: #ccc;
    cursor: default;
}


/* Hover for Days remains a frame, as it's a grid selection */
.smDateTime-daysGrid td:hover:not(.smDateTime-selected):not(:empty):not(.smDateTime-weekNumber):not(.smDateTime-other-month) {
     box-shadow: inset 0 0 0 1px var(--sm-selected-bg, #007bff);
}

.smDateTime-daysGrid td.smDateTime-selected {
    background-color: var(--sm-selected-bg, #007bff);
    color: var(--sm-selected-text, #fff);
    font-weight: bold;
    box-shadow: none;
}

.smDateTime-daysGrid td.smDateTime-weekNumber,
.smDateTime-daysGrid th.smDateTime-week-header {
    cursor: default;
    font-weight: normal;
    color: #999;
    box-shadow: none;
}

.smDateTime-daysGrid td.smDateTime-weekNumber {
    font-size: 12px;
    border-right: 1px solid var(--sm-header-btn-border, #eee);
}

/* ================== Months, Years, Hours, Minutes Views (Grids) ================== */
.smDateTime-months-view,
.smDateTime-years-view,
.smDateTime-hours-view,
.smDateTime-minutes-view {
    display: grid;
    gap: 5px;
    padding: 5px;
}

.smDateTime-months-view { grid-template-columns: repeat(3, 1fr); }
.smDateTime-years-view { grid-template-columns: repeat(4, 1fr); }
.smDateTime-hours-view { grid-template-columns: repeat(6, 1fr); }
.smDateTime-minutes-view { grid-template-columns: repeat(4, 1fr); }

.smDateTime-month, .smDateTime-year, .smDateTime-hour, .smDateTime-minute {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
    color: var(--sm-btn-bg, #007bff); /* Ensures text is always visible */
}

.smDateTime-hour, .smDateTime-minute {
    padding: 5px 0;
}

/* ================== Time Display (inside Days View) ================== */
.smDateTime-timeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    user-select: none;
}
.smDateTime-time-display {
    flex: 1;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--sm-header-btn-border, rgba(0,0,0,0.2));
    background-color: var(--sm-bg, #fff);
    color: var(--sm-text, #000);
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.1s ease-in-out;
}

/* ================== UNIFIED HOVER RULE ================== */
.smDateTime-header button:not([disabled]):hover,
.smDateTime-time-display:hover,
.smDateTime-month:hover,
.smDateTime-year:hover,
.smDateTime-hour:hover,
.smDateTime-minute:hover {
    background-color: var(--sm-hover-bg, #707070);
    color: var(--sm-hover-text, var(--sm-selected-text, #fff));
}

/* Ειδική περίπτωση: Εμφανίζει το πλαίσιο ΜΟΝΟ στην επικεφαλίδα στο hover */
.smDateTime-header-display:not([disabled]):hover {
    border-color: var(--sm-header-btn-border, rgba(0,0,0,0.2));
}


/* ================== Action Buttons (OK, Today, Clear) ================== */
.smDateTime-buttonsContainer {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 10px;
}
.smDateTime-buttonsContainer button {
    flex: 1;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    user-select: none;
    border: 1px solid;
    transition: all 0.1s ease-in-out;
}
.smDateTime-btnToday,
.smDateTime-btnClear {
    background-color: transparent;
    color: var(--sm-btn-bg, #007bff);
    border-color: var(--sm-btn-bg, #007bff);
}
.smDateTime-btnToday:hover,
.smDateTime-btnClear:hover {
    background-color: var(--sm-btn-bg, #007bff);
    color: var(--sm-btn-text, #fff);
}
.smDateTime-btnOk {
    background-color: var(--sm-btn-bg, #007bff);
    color: var(--sm-btn-text, #fff);
    border-color: var(--sm-btn-bg, #007bff);
    font-weight: normal;
}
.smDateTime-btnOk:hover {
    filter: brightness(110%);
}
.smDateTime-btnToday:active,
.smDateTime-btnClear:active,
.smDateTime-btnOk:active {
    filter: brightness(85%);
    transform: translateY(1px);
    transition-duration: 0.05s;
}



.smDateTime-day-with-event {
    position: relative !important;
}

.smDateTime-day-with-event .smDateTime-event-marker {
    position: absolute !important;
    bottom: 3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    height: 3px !important;
    border-radius: 2px !important;
    pointer-events: none !important;
}

.smDateTime-datetimepicker-popup .smDateTime-daysGrid td, /* Αριθμοί ημερών */
.smDateTime-datetimepicker-popup .smDateTime-year, /* Έτη στην προβολή ετών */
.smDateTime-datetimepicker-popup .smDateTime-hour, /* Ώρες στην προβολή ώρας */
.smDateTime-datetimepicker-popup .smDateTime-minute { /* Λεπτά στην προβολή λεπτών */
    font-family: var(--sm-numerical-font-family, var(--sm-font-family, sans-serif));
}