/**
 * whazDatepicker v1.0.0
 * A lightweight, dependency-free datepicker with Ant Design-like UX
 * 
 * Usage:
 *   <link rel="stylesheet" href="lib/whazDatepicker/whazDatepicker.css">
 *   <script src="lib/whazDatepicker/whazDatepicker.js"></script>
 *   
 *   new WhazDatepicker('#my-input', { minDate: 'tomorrow' });
 */

/* Container */
.whaz-datepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.whaz-datepicker-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #6f7b86;
    border-radius: 2px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.whaz-datepicker-input:hover {
    border-color: #5f6b77;
}

.whaz-datepicker-input:focus {
    outline: none;
    border-color: #e65100;
    box-shadow: 0 0 0 2px rgba(230, 81, 0, 0.15);
}

.whaz-datepicker-input::placeholder {
    color: #bfbfbf;
}

/* Popup */
.whaz-datepicker-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 
                0 6px 16px 0 rgba(0,0,0,0.08), 
                0 9px 28px 8px rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.whaz-datepicker-popup.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Header */
.whaz-datepicker-header {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.whaz-datepicker-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #00000040;
    font-size: 12px;
    border-radius: 2px;
    transition: color 0.2s, background 0.2s;
}

.whaz-datepicker-nav-btn:hover {
    color: #333;
    background: #f5f5f5;
}

.whaz-datepicker-nav-btn:disabled {
    color: #d9d9d9;
    cursor: not-allowed;
    background: transparent;
}

.whaz-datepicker-header-content {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.whaz-datepicker-header-btn {
    padding: 2px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-radius: 2px;
    transition: color 0.2s, background 0.2s;
}

.whaz-datepicker-header-btn:hover {
    color: #e65100;
    background: #f5f5f5;
}

/* Panel body */
.whaz-datepicker-body {
    padding: 8px;
    min-width: 280px;
}

/* Days grid */
.whaz-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.whaz-datepicker-weekday {
    padding: 4px 0;
    font-size: 12px;
    color: #00000073;
    font-weight: 400;
}

.whaz-datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.whaz-datepicker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}

.whaz-datepicker-day:hover:not(.disabled):not(.selected) {
    background: #f5f5f5;
}

.whaz-datepicker-day.other-month {
    color: #00000040;
}

.whaz-datepicker-day.today:not(.selected) {
    border: 1px solid #ffab7a;
}

.whaz-datepicker-day.selected {
    background: #ff9966;
    color: #fff;
    border-radius: 6px;
}

.whaz-datepicker-day.disabled {
    color: #d9d9d9;
    cursor: not-allowed;
    background: transparent;
}

/* Months grid */
.whaz-datepicker-months,
.whaz-datepicker-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 8px;
}

.whaz-datepicker-month,
.whaz-datepicker-year {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}

.whaz-datepicker-month:hover:not(.disabled):not(.selected),
.whaz-datepicker-year:hover:not(.disabled):not(.selected) {
    background: #f5f5f5;
}

.whaz-datepicker-month.selected,
.whaz-datepicker-year.selected {
    background: #ff9966;
    color: #fff;
}

.whaz-datepicker-month.disabled,
.whaz-datepicker-year.disabled {
    color: #d9d9d9;
    cursor: not-allowed;
}

.whaz-datepicker-month.current:not(.selected),
.whaz-datepicker-year.current:not(.selected) {
    border: 1px solid #ffab7a;
}

/* Footer */
.whaz-datepicker-footer {
    padding: 8px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

.whaz-datepicker-today-btn {
    padding: 4px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #e65100;
    transition: color 0.2s;
}

.whaz-datepicker-today-btn:hover {
    color: #ff7d33;
}

.whaz-datepicker-today-btn:disabled {
    color: #d9d9d9;
    cursor: not-allowed;
}

/* Calendar icon in input */
.whaz-datepicker-wrapper .whaz-datepicker-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #bfbfbf;
    pointer-events: none;
    font-size: 14px;
}

/* Animation for view transitions */
.whaz-datepicker-body-inner {
    transition: opacity 0.15s;
}

.whaz-datepicker-body-inner.switching {
    opacity: 0.5;
}