/* ===================== BASE STYLES ===================== */
body { 
    font-family: Arial, sans-serif; 
    background: #f7f7f7; 
    margin: 0; 
    padding: 10px; 
    color: #222; 
}
h2 { 
    margin: 0 0 10px; 
    text-align: center; 
    font-size: 18px; 
    word-wrap: break-word; 
}
h3 { 
    margin: 0 0 10px; 
    font-size: 16px; 
    word-wrap: break-word; 
}
.card { 
    background: white; 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid #e3e3e3; 
    box-sizing: border-box; 
    max-width: 400px; 
    margin: 20px auto; 
    word-wrap: break-word; 
}
.header-card { 
    max-width: 1000px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 15px 20px; 
}
.header-logo { 
    height: 50px; 
}
.formlink {
    display: block;
    text-align: center;
    color: #007bff;
    margin-top: 8px;
    text-decoration: none;
    font-size: 14px;
}
.form-link:hover { text-decoration: underline; }

/* ===================== FORM ELEMENTS ===================== */
input, select, textarea { 
    width: 100%; 
    padding: 10px 12px; 
    margin: 5px 0 12px; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
    font-size: 14px; 
    box-sizing: border-box; 
}
textarea { resize: vertical; min-height: 70px; }
input::placeholder, textarea::placeholder { color: #9aa0a6; font-style: italic; opacity: 1; }
input:focus::placeholder, textarea:focus::placeholder { opacity: 0.4; }

/* ===================== BUTTONS ===================== */
button { 
    padding: 10px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 14px; 
    margin-bottom: 8px; 
    width: 100%; 
}
.primary { background: #007bff; color: white; }
.danger { background: #d9534f; color: white; }
.ghost { background: #90d5d2; color: #ffffff; }

/* ===================== REMINDERS LIST ===================== */
.reminder { 
    border: 1px solid #ddd; 
    padding: 10px; 
    border-radius: 6px; 
    margin-bottom: 8px; 
}

/* ===================== MONTHS GRID ===================== */
#monthGrid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 
    gap: 5px; 
    margin-bottom: 10px; 
}
.month-block { 
    text-align: center; 
    padding: 10px; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: default; 
    word-wrap: break-word;
    background: #fff; 
    border: 1px solid #d9c6a5;
}
.month-block.neutral { background: #cecece; color: #212529; }
.month-block.undone { background: #e74c3c; color: white; }
.month-block.upcoming { background: #f1c40f; color: #212529; }
.month-block.done { background: #28a745; color: white; }

/* ===================== SPECIFIC MONTHS ===================== */
#specMonths { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 10px; 
    padding-bottom: 5px; 
    margin-top: 5px; 
}
#specMonths label { 
    flex: 0 0 auto; 
    min-width: 70px; 
    padding: 10px 12px; 
    font-size: 14px; 
    text-align: center; 
    border-radius: 6px; 
    border: 1px solid #ccc; 
    background: #fafafa; 
    cursor: pointer; 
}
#specMonths input { transform: scale(1.3); margin-right: 6px; cursor: pointer; }

/* Spec month rows */
.spec-month-row { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 10px; 
}
.spec-month-row strong { flex: 0 0 70px; font-weight: bold; }
.spec-month-row label { flex: 1 1 calc(50% - 8px); display: flex; flex-direction: column; font-size: 13px; }
.spec-month-row input[type="date"] { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; }

/* Notes */
.note { font-size: 13px; color: #666; margin-top: 6px; }

/* ===================== SLA STATUS ===================== */
.sla-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    min-width: 90px;
    text-align: center;
}
.sla-status.neutral { background: #cecece; color: #212529; }
.sla-status.undone { background: #e74c3c; color: white; }
.sla-status.upcoming { background: #f1c40f; color: #212529; }
.sla-status.done { background: #28a745; color: white; }

/* Status legend */
.status-box {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 4px;
}
.status-box.neutral { background: #cecece; }
.status-box.undone { background: #e74c3c; }   
.status-box.upcoming { background: #f1c40f; color: #212529; } 
.status-box.done { background: #28a745; }

/* ===================== RESPONSIVE / MOBILE ===================== */
@media(max-width:768px){
    .card { max-width: 95%; padding: 12px; }
    input, select, textarea { font-size: 15px; padding: 10px; }
    button { font-size: 15px; padding: 10px; }
    #monthGrid { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
    #specMonths label { font-size: 13px; min-width: 60px; padding: 8px 10px; }
}

@media(max-width:450px){
    #monthGrid { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }
    h2 { font-size: 17px; }
    h3 { font-size: 15px; }
    input, select, textarea { font-size: 14px; padding: 8px; }
    button { font-size: 14px; padding: 8px; }
    #specMonths label { min-width: 55px; font-size: 12px; padding: 6px 8px; }
}

/* ===== FIX DATE RANGE WIDTH ===== */
.spec-month-row input[type="date"] {
    min-width: 140px;
    font-size: 14px;
}

/* Force start + end date to share row nicely */
.spec-month-row .dates-row {
    width: 100%;
}

.spec-month-row .dates-row label {
    flex: 1;
}
/* ===== FIX SPECIFIC MONTH CHECKBOXES ===== */
#specMonths {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    overflow-x: unset;
}

/* Make whole label clickable */
#specMonths label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

/* Checkbox alignment */
#specMonths input[type="checkbox"] {
    transform: scale(1.2);
    margin: 0;
}