/* Tabs (links between index.php, view.php and calendar.php) */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 2px solid #dbe4ee; }
.tab-btn {
    padding: 12px 20px; margin-bottom: -2px; border-bottom: 3px solid transparent;
    font-weight: 700; color: #5b6b7c; text-decoration: none;
    transition: opacity .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.tab-btn.active { color: #123a63; border-bottom-color: #123a63; }
.tab-btn:hover  { opacity: .65; }   /* dims when the cursor is on the tab */
.tab-btn:active { opacity: .4; }    /* dims more while clicking */

/* Edit and Cancel side by side */
.action-cell { white-space: nowrap; min-width: 180px; }
.row-actions { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.row-actions form { display: inline-block; margin: 0; }
.row-actions .btn-edit,
.row-actions .btn-cancel { width: auto; margin: 0; white-space: nowrap; }
.btn-edit {
    appearance: none; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700;
    background: #e3eefa; color: #123a63; cursor: pointer;
}
.btn-edit:hover { background: #cfe1f5; }

/* Edit pop-up */
.modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 30, 50, .55);
    z-index: 1000; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px;
}
.modal-backdrop.open { display: flex; }
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 760px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.modal-close { background: transparent; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #5b6b7c; }

/* Close / Show all buttons */
.btn-plain,
button.btn-plain,
a.btn-plain {
    appearance: none;
    display: inline-block;
    border: 1px solid #123b63;
    background: #fff;
    color: #123b63;
    border-radius: 8px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px;
    text-decoration: none;
}
.btn-plain:hover,
button.btn-plain:hover,
a.btn-plain:hover {
    background: #123b63;
    color: #fff;
}

/* Table heading: bold, blue background */
table thead th {
    background: #123b63;
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 0;
}
table thead th:first-child { border-top-left-radius: 8px; }
table thead th:last-child  { border-top-right-radius: 8px; }

/* Filter row: Filter and Show all on the same line */
.filters { grid-template-columns: 1fr 1fr auto auto; }
.filters .btn-plain,
.filters .btn-secondary {
    margin: 0;
    align-self: end;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .filters { grid-template-columns: 1fr; }
}

/* Page background image (same on index, view and calendar) */
body {
    background: #f4f6f9 url("background.png") no-repeat center center fixed;
    background-size: cover;
}