/* Global styles */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f7fa;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}
h1 {
    margin-top: 8px;
    font-size: 24px;
}
label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}
input {
    width: 95%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 2px solid #d0d7de;
    font-size: 14px;
}
button {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

/* Login box */
.card { 
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.06);
    margin-top: 12px;
}
.card h2 {
    font-size:18px;
    margin-top:0;
}
.card p {
    font-size:13px;
    color:#6b7280;
}
#loginBtn {
    background: #8002c9;
    color: white;
    width: 100%;
    font-weight: bold;
}


.hidden {
    display: none;
}

/* Calendar View */
#refreshBtn {
    background: #1e90ff;
    color: white;
    font-weight: bold;
}
#createEvent {
    background: #ec1e1ed3;
    color: white;
    font-weight: bold;
}
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Events List */
.events-list { /* The container for the list of events */ 
    margin-top: 12px; /* margin before the border */
    max-height: 500px;
    overflow: auto; /* Scroll if too tall */
    border-top: 1.5px solid #8002c9;
}
.week-grid { /* The header with weekdays labels */
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr); /* Turns into columns. First column for time labels, then 7 equal columns for days */
    font-size: 15px;
    border-collapse: collapse; /* Ensures borders are shared */
}
.week-cell { /* Each cell/weekday in the header */
    /* border: 1px solid #d1d5db; */ /* Optional cell borders, it too much maybe*/
    padding: 6px;
    text-align: center;
    background: #f9fafb;
}
.week-hour-cell { /* hours colunm */
    background: #f9fafb;
    text-align: right;
    padding-right: 8px;
    color: #6b7280;
    font-size: 11px;
}

/* cells */
.week-day-cell {
    cursor: pointer;
}
.week-day-cell:hover {
    background: #eef2ff;
}