/* GLOBAL RESET & BASE */
* {
    box-sizing: border-box;
}

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#f7f7f8;
    font-family:-apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:40px;
}

/* CARD */
.card {
    background:white;
    padding:70px 50px;
    border-radius:32px;
    box-shadow:0 12px 36px rgba(0,20,60,0.12);
    width:85%;
    max-width:1200px;
    min-width:340px;
}

.wide-card {
    width:90%;
    max-width:1400px;
}

/* HEADINGS */
h1 {
    font-size:40px;
    font-weight:700;
    text-align:center;
    margin-bottom:20px;
    color:#111;
}

h2 {
    font-size:32px;
    font-weight:600;
    margin-bottom:20px;
}

.subtitle {
    font-size:22px;
    text-align:center;
    color:#555;
    margin-bottom:40px;
}

/* INPUT */
input[type=text] {
    width:100%;
    padding:20px 22px;
    border-radius:22px;
    border:1px solid #d0d0d4;
    font-size:22px;
    margin-bottom:32px;
}

/* BUTTON */
.button {
    width:70%;
    margin:0 auto;
    padding:20px;
    border-radius:24px;
    font-size:22px;
    background:#007AFF;
    color:white;
    border:none;
    box-shadow:0 4px 14px rgba(0,20,60,0.18);
    display:block;
}

/* LINKS */
.logout {
    text-align:right;
    margin-top:-10px;
    margin-bottom:20px;
}

.logout a {
    color:#007AFF;
    text-decoration:none;
    font-size:18px;
}

/* SCROLL AREA */
.scroll-area {
    max-height:60vh;
    overflow-y:auto;
    padding-right:6px;
}

/* LEGEND */
.legend {
    display:flex;
    gap:14px;
    margin:10px 0 26px 0;
    flex-wrap:wrap;
}

.legend-item {
    display:flex;
    align-items:center;
    gap:8px;
    background:#f0f0f3;
    padding:10px 14px;
    border-radius:14px;
    font-size:18px;
}

.legend-color {
    width:18px;
    height:18px;
    border-radius:4px;
}

.legend-free { background:#c8f7c5; }
.legend-maybe { background:#ffe4b3; }
.legend-busy { background:#ffb3b3; }
.legend-unset { background:#e5e5e7; }

/* TABS */
.month-tabs,
.overview-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:26px;
}

.month-tab,
.overview-tab {
    padding:14px 22px;
    background:#f0f0f3;
    border-radius:16px;
    font-size:18px;
    cursor:pointer;
    white-space:nowrap;
}

.month-tab.active,
.overview-tab.active {
    background:#007AFF;
    color:white;
}

/* MONTH CONTAINER */
.month-container,
.overview-month-container {
    display:none;
}

.month-container.active,
.overview-month-container.active {
    display:block;
}

/* WEEKDAYS */
.weekdays {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    font-size:18px;
    color:#666;
    margin-bottom:10px;
    text-align:center;
}

/* CALENDAR */
.calendar {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    margin-bottom:26px;
}

.empty {
    background:transparent;
}

/* DAY CELL */
.day-cell {
    border-radius:14px;
    padding:14px 6px;
    text-align:center;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

.free { background:#c8f7c5; }
.maybe { background:#ffe4b3; }
.busy { background:#ffb3b3; }
.unset { background:#e5e5e7; }

.day-cell.disabled {
    background:white !important;
    box-shadow:none !important;
    cursor:default !important;
    color:#bbb;
}

/* OVERVIEW MONTH CARDS */
.month-card {
    background:white;
    padding:26px;
    border-radius:22px;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    margin-bottom:30px;
}

.month-title {
    font-size:26px;
    font-weight:600;
    background:#f0f0f3;
    padding:12px 18px;
    border-radius:16px;
    display:inline-block;
    margin-bottom:20px;
}

/* GRID */
.month-grid {
    display:grid;
    gap:10px;
}

.month-grid-header {
    font-weight:600;
    text-align:center;
    padding:12px;
    border-radius:14px;
    font-size:18px;
}

/* HEATMAP */
.hm-green-1 { background:#f4fbf4 !important; }
.hm-green-2 { background:#e6f7e6 !important; }
.hm-green-3 { background:#d2f0d2 !important; }
.hm-green-4 { background:#b8e6b8 !important; }

.hm-red-1 { background:#fff4f4 !important; }
.hm-red-2 { background:#ffeaea !important; }
.hm-red-3 { background:#ffd4d4 !important; }
.hm-red-4 { background:#ffbcbc !important; }

/* PERSON NAME */
.month-grid-name {
    padding:12px;
    background:#fafafa;
    border-radius:14px;
    font-size:18px;
}

/* CELLS */
.month-grid-cell {
    height:50px;
    border-radius:14px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* POINT */
.point {
    font-size:24px;
    line-height:1;
}

/* POPUP */
#popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    display:none;
    justify-content:center;
    align-items:center;
}

#popup.visible {
    display:flex;
}

.popup-content {
    background:white;
    padding:26px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.popup-content button {
    padding:16px;
    border-radius:16px;
    border:none;
    font-size:20px;
}