/**
 * Ovulation Calendar Styles
 * Atualizado em 31/dez/2025
 * - Flatpickr-inspired modern design
 * - Circular day cells with smooth transitions
 * - Enhanced hover and focus states
 * - Dark theme support
 * - Improved accessibility
 */

/* Ovulation Calendar: Peak Fertility (Day 1) */
.Ovulacao1 {
    background-color: #ec41a0;
    text-align: center;
    width: 39px;
    height: 39px;
    line-height: 39px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    border: 1px solid #ec41a0;
    border-radius: 150px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.Ovulacao1:hover {
    box-shadow: 0 2px 6px rgba(236, 65, 160, 0.3);
    transform: translateY(-1px);
}

/* Ovulation Calendar: High Fertility (Day 2) */
.Ovulacao2 {
    background-color: #e672b3;
    text-align: center;
    width: 39px;
    height: 39px;
    line-height: 39px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    border: 1px solid #e672b3;
    border-radius: 150px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.Ovulacao2:hover {
    box-shadow: 0 2px 6px rgba(230, 114, 179, 0.3);
    transform: translateY(-1px);
}

/* Ovulation Calendar: Moderate Fertility (Day 3) */
.Ovulacao3 {
    background-color: #da91ba;
    text-align: center;
    width: 39px;
    height: 39px;
    line-height: 39px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    border: 1px solid #da91ba;
    border-radius: 150px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.Ovulacao3:hover {
    box-shadow: 0 2px 6px rgba(218, 145, 186, 0.3);
    transform: translateY(-1px);
}

/* Ovulation Calendar: Low Fertility (Day 4) */
.Ovulacao4 {
    background-color: #e2b5ce;
    text-align: center;
    width: 39px;
    height: 39px;
    line-height: 39px;
    color: #c2185b;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    border: 1px solid #e2b5ce;
    border-radius: 150px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.Ovulacao4:hover {
    box-shadow: 0 2px 6px rgba(226, 181, 206, 0.3);
    transform: translateY(-1px);
    background-color: #e8c5d9;
}

/* Ovulation Calendar: Minimal Fertility (Day 5) */
.Ovulacao5 {
    background-color: #efd7e4;
    text-align: center;
    width: 39px;
    height: 39px;
    line-height: 39px;
    color: #c2185b;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    border: 1px solid #efd7e4;
    border-radius: 150px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.Ovulacao5:hover {
    box-shadow: 0 2px 6px rgba(239, 215, 228, 0.3);
    transform: translateY(-1px);
    background-color: #f4e2ec;
}

/* Dark theme adjustments for ovulation classes */
[data-theme="dark"] .Ovulacao1,
[data-theme="dark"] .Ovulacao2,
[data-theme="dark"] .Ovulacao3 {
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .Ovulacao4,
[data-theme="dark"] .Ovulacao5 {
    color: #ff4081;
    background-color: rgba(226, 181, 206, 0.2);
    border-color: rgba(226, 181, 206, 0.3);
}

[data-theme="dark"] .Ovulacao1:hover,
[data-theme="dark"] .Ovulacao2:hover,
[data-theme="dark"] .Ovulacao3:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .Ovulacao1,
    html:not([data-theme="light"]) .Ovulacao2,
    html:not([data-theme="light"]) .Ovulacao3 {
        color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    html:not([data-theme="light"]) .Ovulacao4,
    html:not([data-theme="light"]) .Ovulacao5 {
        color: #ff4081;
        background-color: rgba(226, 181, 206, 0.2);
        border-color: rgba(226, 181, 206, 0.3);
    }

    html:not([data-theme="light"]) .Ovulacao1:hover,
    html:not([data-theme="light"]) .Ovulacao2:hover,
    html:not([data-theme="light"]) .Ovulacao3:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Calendar Month Header */
.estiloMes {
    font-weight: 700;
    font-size: 135%;
    color: inherit;
    text-align: center;
    padding: 7px 0;
    line-height: 1.2;
    background: var(--table-header-bg-c, #3f4458);
    margin: 0;
    user-select: none;
}

/* Calendar Weekday Headers */
.estiloSemana {
    text-align: center;
    font-size: 90%;
    font-weight: 700;
    padding: 8px 0;
    background: var(--table-header-bg-c, #3f4458);
    border: none;
    color: var(--table-header-color, #fff);
    line-height: 1;
    margin: 0;
    user-select: none;
}

/* Calendar Day Cells */
.estiloDia {
    width: 39px;
    height: 39px;
    min-width: 39px;
    text-align: center;
    font-size: 14px;
    line-height: 39px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 150px;
    color: var(--text-c-main);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 400;
    position: relative;
    margin: 0;
}

.estiloDia:hover {
    background: var(--even-row-bg-c, #646c8c);
    border-color: var(--even-row-bg-c, #646c8c);
    outline: 0;
}

.estiloDia:focus {
    outline: 0;
    background: var(--even-row-bg-c, #646c8c);
    border-color: var(--even-row-bg-c, #646c8c);
}

/* Today indicator */
.estiloDia.today {
    border-color: var(--primary-color, #80cbc4);
    font-weight: 600;
}

.estiloDia.today:hover,
.estiloDia.today:focus {
    border-color: var(--primary-color, #80cbc4);
    background: var(--primary-color, #80cbc4);
    color: #fff;
}

/* Disabled/empty days */
.estiloDia.disabled,
.estiloDia:empty {
    color: rgba(var(--text-c-main-rgb, 0, 0, 0), 0.3);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.estiloDia.disabled:hover,
.estiloDia:empty:hover {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* Utility: overline text decoration */
.overline {
    text-decoration: overline;
}

/* Calendar container wrapper */
.calendario-wrapper {
    background: var(--bg-c, #fff);
    border-radius: 5px;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08);
    display: inline-block;
    padding: 0;
    overflow: hidden;
}

/* Dark theme for calendar wrapper */
[data-theme="dark"] .calendario-wrapper {
    background: #3f4458;
    box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c,
                0 1px 0 #20222c, 0 -1px 0 #20222c,
                0 3px 13px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .calendario-wrapper {
        background: #3f4458;
        box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c,
                    0 1px 0 #20222c, 0 -1px 0 #20222c,
                    0 3px 13px rgba(0, 0, 0, 0.08);
    }
}