/* === Windows 95 + dormitory theme === */
:root {
--bg-wall: #c8baa0;
--bg-wall-light: #ddd2bc;
--bg-panel: #e6dcc8;
--bg-panel-dark: #b8a888;
--bg-window: rgba(192, 192, 192, 0.72);
--bg-window-solid: #c0c0c0;
--bg-surface: rgba(240, 240, 240, 0.65);
--bg-surface-strong: rgba(255, 255, 255, 0.82);
--glass-blur: blur(14px);
--bg-title-active: linear-gradient(90deg, rgba(90, 74, 50, 0.88), rgba(138, 115, 80, 0.85));
--bg-title-inactive: linear-gradient(90deg, #808080, #b5b5b5);
--shadow-out: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
--shadow-in:  inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
--text: #1a1408;
--link: #3a2a10;
}

* { box-sizing: border-box; }

html, body {
margin: 0; padding: 0; height: 100%;
font-family: "MS Sans Serif", "Segoe UI", Tahoma, sans-serif;
font-size: 12px;
color: var(--text);
}

body.win95-desktop {
display: flex; flex-direction: column;
min-height: 100vh;
background-color: #7a7268;
background-image:
  linear-gradient(
    180deg,
    rgba(255, 252, 245, 0.45) 0%,
    rgba(220, 210, 195, 0.25) 40%,
    rgba(60, 50, 40, 0.35) 100%
  ),
  url('/static/img/dorm-bg.png');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
background-attachment: fixed;
}

/* === Dorm header panel === */
.dorm-panel {
background: linear-gradient(180deg, rgba(240, 232, 216, 0.72) 0%, rgba(212, 200, 176, 0.68) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 3px solid var(--bg-panel-dark);
box-shadow: 0 3px 12px rgba(40, 30, 10, 0.25);
position: sticky;
top: 0;
z-index: 100;
}

.dorm-panel-inner {
max-width: 1140px;
margin: 0 auto;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}

.dorm-brand {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 200px;
}

.dorm-num {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--bg-window);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-out);
font-weight: bold;
font-size: 11px;
line-height: 1.1;
text-align: center;
color: #3a2a10;
flex-shrink: 0;
}

.dorm-titles { display: flex; flex-direction: column; gap: 2px; }
.dorm-name { font-size: 15px; letter-spacing: 0.02em; color: #2a2010; }
.dorm-sub { font-size: 11px; color: #5a4a38; }

.dorm-nav { display: flex; gap: 6px; }
.dorm-nav-link {
padding: 5px 12px;
background: var(--bg-window);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-out);
color: var(--link);
text-decoration: none;
font-weight: bold;
}
.dorm-nav-link:active { box-shadow: var(--shadow-in); }

.dorm-user-tray {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--shadow-in);
flex-wrap: wrap;
}

.dorm-user { font-weight: bold; white-space: nowrap; }
.dorm-tray-btn {
background: var(--bg-window);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-out);
padding: 3px 10px;
border: none;
font: inherit;
cursor: pointer;
text-decoration: none;
color: #000;
}
.dorm-tray-btn:active { box-shadow: var(--shadow-in); }
.dorm-clock {
font-variant-numeric: tabular-nums;
min-width: 44px;
font-weight: bold;
padding: 2px 6px;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: var(--shadow-in);
}

.dorm-footer {
margin-top: auto;
padding: 6px 16px;
background: linear-gradient(180deg, rgba(212, 200, 176, 0.65), rgba(192, 180, 152, 0.6));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 2px solid var(--bg-panel-dark);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 11px;
color: #2a2010;
}

.dorm-footer-hint { opacity: 0.85; }

.win95-main {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px 16px 24px;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}

/* === Windows (glass) === */
.window {
background: var(--bg-window);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-out), 0 8px 32px rgba(0, 0, 0, 0.28);
padding: 2px;
font-size: 12px;
}
.window-centered { margin: 0 auto; }
.window-large { width: min(1100px, 100%); }

.window-titlebar {
background: var(--bg-title-active);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
padding: 3px 4px;
display: flex; align-items: center; justify-content: space-between;
font-weight: bold;
user-select: none;
}
.window-title { display: flex; align-items: center; gap: 6px; }
.window-title img { width: 16px; height: 16px; }
.window-controls { display: flex; gap: 2px; }
.win-btn {
background: var(--bg-window);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #000;
border: none;
box-shadow: var(--shadow-out);
padding: 4px 12px;
font: inherit;
cursor: pointer;
min-width: 24px;
}
.win-btn:active { box-shadow: var(--shadow-in); }
.win-btn:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }
.win-btn.small { padding: 2px 8px; font-size: 11px; }
.win-btn.primary { font-weight: bold; }
.win-btn.danger { color: #a00; font-weight: bold; }
.window-controls .win-btn { padding: 1px 7px; min-width: 18px; height: 18px; font-size: 11px; }

.window-body {
padding: 12px;
background: rgba(224, 224, 224, 0.42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

/* === Forms === */
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { display: flex; flex-direction: column; gap: 3px; }
.form input, .form select {
padding: 3px 4px;
background: rgba(255, 255, 255, 0.88);
border: none;
box-shadow: var(--shadow-in);
font: inherit;
}
.form-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.hint { color: #404040; font-size: 11px; margin-top: 10px; }
.muted { color: #606060; }

.msg-error {
background: rgba(255, 224, 224, 0.88); color: #800; padding: 6px 8px;
box-shadow: var(--shadow-in); margin-bottom: 10px;
}

/* === Status bar === */
.status-bar {
display: flex; align-items: center; gap: 12px;
padding: 4px 6px; margin-bottom: 10px;
box-shadow: var(--shadow-in);
background: rgba(239, 239, 239, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.status-ok { color: #007000; font-weight: bold; }
.status-closed { color: #a00000; font-weight: bold; }
.spacer { flex: 1; }

/* === Legend === */
.legend { display: flex; gap: 8px; margin: 8px 0; }
.legend .cell { padding: 2px 8px; box-shadow: var(--shadow-out); backdrop-filter: blur(4px); }
.legend .cell.free   { background: rgba(224, 255, 224, 0.78); }
.legend .cell.taken  { background: rgba(255, 224, 224, 0.78); }
.legend .cell.mine   { background: rgba(255, 248, 160, 0.82); font-weight: bold; }
.legend .cell.wait   { background: rgba(208, 224, 255, 0.78); }

/* === Slot grid === */
.grid-wrap { overflow-x: auto; }
.slot-grid {
width: 100%; border-collapse: collapse;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(6px);
box-shadow: var(--shadow-in);
}
.slot-grid th, .slot-grid td {
border: 1px solid rgba(128, 128, 128, 0.6);
padding: 6px; text-align: center; min-width: 80px;
}
.slot-grid thead th { background: rgba(212, 208, 200, 0.82); }
.slot-grid .machine { background: rgba(212, 208, 200, 0.82); text-align: left; white-space: nowrap; }

/* === My bookings === */
.my-bookings {
background: rgba(240, 240, 240, 0.68);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px; box-shadow: var(--shadow-in); margin-bottom: 10px;
}
.my-bookings h3 { margin: 0 0 6px; font-size: 12px; }
.my-bookings ul { list-style: none; padding: 0; margin: 0; }
.my-bookings li { padding: 3px 0; display: flex; gap: 8px; align-items: center; }

/* === Tabs (admin + day tabs) === */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #808080; margin-bottom: 8px; flex-wrap: wrap; }
.tab-btn {
background: var(--bg-window);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--shadow-out);
padding: 4px 14px; border: none; font: inherit; cursor: pointer;
}
.tab-btn.active { box-shadow: var(--shadow-in); font-weight: bold; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Day tabs (index page) === */
.day-tabs { gap: 3px; margin-bottom: 10px; }
.day-tab-btn { padding: 6px 14px; min-width: 64px; line-height: 1.15; text-align: center; }
.day-tab-btn small { color: #404040; font-size: 10px; }
.day-tab-btn.active small { color: #000; }

/* === Day panel + machine cards === */
.day-panel { padding-top: 4px; }
.machine-cards { display: flex; flex-direction: column; gap: 14px; }
.machine-card {
background: rgba(244, 243, 238, 0.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-in);
padding: 8px;
}
.machine-card-title {
background: rgba(212, 208, 200, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 4px 6px;
margin: -8px -8px 6px;
box-shadow: var(--shadow-out);
font-size: 12px;
}
.machine-card-title b { font-size: 13px; }

.machine-table { width: 100%; background: transparent; }
.machine-table th, .machine-table td { text-align: left; padding: 4px 6px; min-width: 0; }
.machine-table thead th {
background: rgba(212, 208, 200, 0.78);
backdrop-filter: blur(4px);
font-weight: bold;
}
.machine-table .col-time   { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: bold; width: 110px; }
.machine-table .col-room   { width: 70px; }
.machine-table .col-booked { width: 80px; font-variant-numeric: tabular-nums; color: #404040; }
.machine-table .col-action { width: 110px; text-align: right; white-space: nowrap; }

.machine-table .row-free   { background: rgba(224, 255, 224, 0.72); }
.machine-table .row-taken  { background: rgba(255, 232, 232, 0.72); }
.machine-table .row-mine   { background: rgba(255, 248, 160, 0.78); font-weight: bold; }
.machine-table .row-wait   { background: rgba(208, 224, 255, 0.72); }

/* === Admin toolbar === */
.admin-toolbar {
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.admin-toolbar .win-btn {
text-decoration: none;
display: inline-block;
}

/* === Data tables (admin) === */
.data-table {
width: 100%; border-collapse: collapse;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
box-shadow: var(--shadow-in);
}
.data-table th, .data-table td { border: 1px solid rgba(128, 128, 128, 0.55); padding: 4px 6px; }
.data-table thead th { background: rgba(212, 208, 200, 0.82); }
.audit-list {
background: transparent;
padding: 0; min-height: 120px; max-height: 520px; overflow: auto;
}
.audit-list .row { white-space: pre-wrap; }

/* === Audit log table (4 columns: when · what · who · details) === */
.audit-table { font-size: 11px; }
.audit-table td { vertical-align: top; }
.audit-when { white-space: nowrap; width: 1%; }
.audit-who { white-space: nowrap; width: 1%; font-weight: bold; }
.audit-details { color: #303030; }

.audit-badge {
display: inline-block; white-space: nowrap;
padding: 1px 6px; font-size: 10px; font-weight: bold;
box-shadow: var(--shadow-out);
background: var(--bg-window-solid); color: #1a1408;
}
.audit-badge.audit-ok    { background: #cfeacf; color: #045004; }
.audit-badge.audit-warn  { background: #f6ecc8; color: #6a5000; }
.audit-badge.audit-bad   { background: #f2d0d0; color: #800000; }
.audit-badge.audit-info  { background: #d6e2f5; color: #123a70; }
.audit-badge.audit-muted { background: #dcdcdc; color: #505050; }

/* === Privacy policy page === */
.privacy-doc h3 { margin: 14px 0 4px; font-size: 12px; }
.privacy-doc p { margin: 0 0 6px; line-height: 1.5; max-width: 70ch; }

/* === Admin: create-resident consent checkbox === */
.consent-row {
display: flex; align-items: flex-start; gap: 6px;
font-size: 11px; line-height: 1.4; color: #303030;
max-width: 62ch; margin: 6px 0;
}
.consent-row input[type="checkbox"] { margin-top: 2px; flex: none; }

/* === Footer privacy link === */
.dorm-footer-link { color: #2a2010; text-decoration: underline; opacity: 0.85; }
.dorm-footer-link:hover { opacity: 1; }

/* === Modal overlay (welcome / personal-data notice) === */
.modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(20, 16, 8, 0.55);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.modal-window { width: 100%; max-width: 460px; }
.modal-window .window-body p { margin: 0 0 8px; line-height: 1.5; }
.modal-window .form-buttons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Booking grid: nickname column next to the first name. */
.col-nick { white-space: nowrap; color: #303030; }

/* === Admin: add-residents tab (single + file import side by side) === */
.add-blocks {
display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;
margin-bottom: 12px;
}
.add-blocks > .form-card { flex: 1 1 320px; margin: 0; }

/* Import results: the password list must stay readable and printable. */
.import-results { margin-top: 12px; }
.import-results .form-buttons { margin: 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.import-ok-table, .import-bad-table { margin-top: 8px; font-size: 11px; }
.import-ok-table code { font-size: 13px; }

/* Print only the generated password list, so a handout sheet comes out clean. */
@media print {
body.win95-desktop > header,
body.win95-desktop > footer,
.admin-toolbar, .admin-tabs, .add-blocks,
#tab-users, #tab-audit, #tab-window,
.import-results .form-buttons { display: none !important; }
.modal-overlay { display: none !important; }
.window, .window-body, .form-card {
box-shadow: none !important; background: #fff !important;
backdrop-filter: none !important;
}
.data-table { background: #fff !important; }
.import-results .msg-error { border: 1px solid #000; background: #fff !important; color: #000; }
}

/* === Admin: one-time password panel after creating a resident === */
.created-user-panel {
background: rgba(255, 252, 214, 0.92);
box-shadow: var(--shadow-out);
padding: 10px 12px; margin: 0 0 12px;
}
.created-user-title { margin: 0 0 8px; font-weight: bold; }
.created-user-pw-row { margin: 0 0 6px; }
.created-user-pw {
display: inline-block;
font-family: "Courier New", monospace; font-size: 14px; font-weight: bold;
letter-spacing: 1px;
background: #fff; color: #1a1408;
padding: 3px 8px; box-shadow: var(--shadow-in);
user-select: all;
}
.created-user-panel .form-buttons { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* === Taskbar (legacy — kept for error pages) === */
.taskbar {
position: sticky; bottom: 0; left: 0; right: 0;
background: var(--bg-window); box-shadow: var(--shadow-out);
height: 34px; display: flex; align-items: center; padding: 2px 4px; gap: 4px;
}
.start-btn {
font-weight: bold; padding: 3px 8px; display: flex; align-items: center; gap: 4px;
background: var(--bg-window); box-shadow: var(--shadow-out); border: none; font: inherit; cursor: pointer;
}
.start-btn img { width: 16px; height: 16px; }
.taskbar-items { flex: 1; display: flex; gap: 4px; padding-left: 6px; }
.task-item { padding: 3px 12px; box-shadow: var(--shadow-out); min-width: 160px; }
.task-item.active { box-shadow: var(--shadow-in); font-weight: bold; }
.tray { display: flex; align-items: center; gap: 8px; padding: 2px 6px; box-shadow: var(--shadow-in); height: 28px; }
.tray-btn { background: var(--bg-window); box-shadow: var(--shadow-out); padding: 2px 8px; border: none; font: inherit; cursor: pointer; text-decoration: none; color: #000; }
.tray-clock { font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.tray-user { font-weight: bold; }

@media (max-width: 700px) {
body.win95-desktop {
  background-attachment: scroll;
  background-position: center 25%;
}
.dorm-panel-inner { padding: 8px 10px; gap: 8px; }
.dorm-num { width: 44px; height: 44px; font-size: 10px; }
.dorm-name { font-size: 13px; }
.dorm-user-tray { width: 100%; justify-content: space-between; }
.dorm-footer { flex-direction: column; text-align: center; }
.slot-grid th, .slot-grid td { padding: 3px; min-width: 50px; font-size: 11px; }
.machine-table .col-time   { width: auto; }
.machine-table .col-room   { width: auto; }
.machine-table .col-booked { width: auto; }
.machine-table .col-action { width: auto; }
.win95-main { padding: 10px 4px 50px; }
.day-tab-btn { padding: 4px 8px; min-width: 48px; }

/* === Forms on mobile === */
.window-centered { width: auto !important; max-width: 380px; margin: 0 8px; }
.form-row { display: flex; gap: 8px; }
.form-row > label { flex: 1; }
.form input, .form select { font-size: 16px !important; /* prevent iOS zoom */ }
.form-buttons { flex-wrap: wrap; }
.win-btn { min-height: 44px; min-width: 44px; /* touch target */ }
.win-btn.small { min-height: 36px; }

/* === Admin table on mobile === */
.data-table { display: block; overflow-x: auto; white-space: nowrap; }
.data-table th, .data-table td { white-space: nowrap; }
.schedule-table { font-size: 12px; }
.row-form { flex-wrap: wrap; }
.row-form input, .row-form select { min-height: 40px; }

/* === Login on very small screens === */
.window-centered .form-buttons { justify-content: stretch; }
.window-centered .form-buttons .win-btn { flex: 1; }
}