:root {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17231c;
    background: #f4f7f5;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, .button-link, input, select, textarea { font: inherit; }
button, .button-link {
    border: 1px solid #b7c4bc;
    background: #fff;
    border-radius: 8px;
    padding: .65rem .9rem;
    color: #17231c;
    text-decoration: none;
    cursor: pointer;
}
button.primary { background: #17633d; color: #fff; border-color: #17633d; }
button.danger { color: #a52020; border-color: #e6b6b6; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid #d9e1dc;
    position: sticky;
    top: 0;
    z-index: 2;
}
.topbar strong, .topbar span { display: block; }
.topbar span { font-size: .8rem; color: #66756c; }
.top-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.top-actions form { margin: 0; }

.layout {
    width: 100%;
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.summary div, .panel { background: #fff; border: 1px solid #d9e1dc; border-radius: 12px; }
.summary div { min-width: 0; padding: 1rem; }
.summary strong, .summary span { display: block; }
.summary strong { font-size: 1.6rem; }
.summary span { color: #66756c; }

.panel { margin-bottom: 1rem; overflow: hidden; }

.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(190px, .8fr) auto auto auto;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e1e7e3;
}
.filters input[type="search"],
.filters select,
.edit-form input,
.edit-form select,
.edit-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #b7c4bc;
    border-radius: 8px;
    padding: .7rem;
    background: #fff;
}
.filters button, .filters .button-link { white-space: nowrap; text-align: center; }
.check { display: flex !important; align-items: center; gap: .45rem; white-space: nowrap; }
.check input { width: auto !important; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 850px; border-collapse: collapse; }
th, td { text-align: left; padding: .85rem; border-bottom: 1px solid #edf1ee; vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; color: #66756c; }
td small { display: block; color: #66756c; margin-top: .2rem; }
td:last-child, th:last-child { text-align: right; }

.badge, .status {
    display: inline-block;
    border-radius: 999px;
    padding: .22rem .55rem;
    font-size: .75rem;
    background: #edf1ee;
    margin: .1rem;
    white-space: nowrap;
}
.badge.warning { background: #fff2cc; color: #765500; }
.badge.edited { background: #e4eefb; color: #24558a; }
.status-open { background: #dff3e7; color: #17633d; }
.status-temporarily_closed, .status-capacity_reached { background: #fde3e3; color: #922; }
.status-restricted { background: #fff2cc; color: #765500; }
.status-unknown { background: #edf1ee; color: #526057; }

.panel-heading { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem; border-bottom: 1px solid #e1e7e3; }
.panel-heading h2, .panel-heading p { margin: 0; }
.panel-heading p { color: #66756c; font-size: .8rem; overflow-wrap: anywhere; }
.edit-form { padding: 1.2rem; }
.edit-form fieldset { border: 1px solid #d9e1dc; border-radius: 10px; margin: 0 0 1rem; padding: 1rem; }
.edit-form label { display: block; font-weight: 600; font-size: .9rem; }
.edit-form textarea { resize: vertical; }
.grid2, .grid3 { display: grid; gap: 1rem; margin-bottom: 1rem; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.current { color: #66756c; }
.form-actions { margin-top: 1rem; }
.delete-form { padding: 0 1.2rem 1.2rem; }
.alert { padding: 1rem; border-radius: 10px; margin-bottom: 1rem; }
.alert-success { background: #dff3e7; color: #17633d; }
.alert-error { background: #fde3e3; color: #922; }

.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: min(420px, calc(100% - 2rem)); background: #fff; padding: 2rem; border: 1px solid #d9e1dc; border-radius: 14px; }
.login-card label { display: block; font-weight: 600; }
.login-card input { width: 100%; padding: .75rem; border: 1px solid #b7c4bc; border-radius: 8px; margin: .4rem 0 1rem; }
.login-card button { width: 100%; background: #17633d; color: #fff; }
code { background: #edf1ee; padding: .15rem .3rem; border-radius: 4px; }

@media (max-width: 980px) {
    .filters { grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto; }
    .filters button, .filters .button-link { width: 100%; }
}

@media (max-width: 760px) {
    .topbar { align-items: flex-start; padding: 1rem; }
    .top-actions { justify-content: flex-end; }
    .summary, .grid2, .grid3, .filters { grid-template-columns: 1fr; }
    .filters .button-link, .filters button { width: 100%; text-align: center; }
    table { min-width: 720px; }
}

.bulk-form { margin: 0; }
.bulk-actions {
    display: grid;
    grid-template-columns: auto minmax(180px, .8fr) minmax(160px, .6fr) minmax(240px, 1.4fr) auto;
    gap: .75rem;
    align-items: end;
    padding: 1rem;
    border-bottom: 1px solid #e1e7e3;
    background: #f8faf9;
}
.bulk-actions label { display: block; font-size: .82rem; font-weight: 600; }
.bulk-actions input,
.bulk-actions select {
    width: 100%;
    min-width: 0;
    margin-top: .3rem;
    border: 1px solid #b7c4bc;
    border-radius: 8px;
    padding: .65rem;
    background: #fff;
}
.bulk-selection { align-self: center; white-space: nowrap; color: #526057; }
.bulk-selection strong { color: #17231c; }
.select-column { width: 44px; text-align: center !important; }
.select-column input { width: 1rem; height: 1rem; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1050px) {
    .bulk-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bulk-selection, .bulk-actions button { align-self: end; }
}

@media (max-width: 760px) {
    .bulk-actions { grid-template-columns: 1fr; }
    .bulk-actions button { width: 100%; }
}