:root {
    --sidebar-width: 200px;
    --sidebar-width-collapsed: 56px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #1a1a1a;
    background: #f7f7f8;
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: #1f2733;
    color: #fff;
    transition: width 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    padding: 1rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #cbd3e0;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar nav a.active, .sidebar nav a:hover { background: #33415c; color: #fff; }

.sidebar.collapsed .label { display: none; }

.logout-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: #cbd3e0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.logout-button:hover { background: #33415c; color: #fff; }

.content { flex: 1; padding: 1.5rem 2rem; overflow-x: auto; }

.flash { background: #e6f4ea; border: 1px solid #34a853; padding: 0.5rem 1rem; border-radius: 4px; }

table.vacancies { width: 100%; border-collapse: collapse; background: #fff; }
table.vacancies th, table.vacancies td { border: 1px solid #ddd; padding: 0.5rem 0.75rem; text-align: left; }
table.vacancies th a { color: inherit; text-decoration: none; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.actions { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.actions .button, .actions button { padding: 0.5rem 1rem; cursor: pointer; }

.pagination { display: flex; gap: 0.25rem; margin-top: 1rem; }
.pagination a { padding: 0.25rem 0.6rem; border: 1px solid #ccc; text-decoration: none; color: inherit; }
.pagination a.active { background: #1f2733; color: #fff; }

.settings-block { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
.settings-block label { display: block; margin-bottom: 0.5rem; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-form { background: #fff; padding: 2rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 0.75rem; width: 280px; }
.login-form .error { color: #c0392b; }