/* ---------------------------------------------------------------
   Design tokens
   A booking ledger for a rental company: the dashboard should read
   like a physical occupancy chart - ruled rows, serif room labels,
   monospace dates/figures, ink-blue for booked, paper for empty.
------------------------------------------------------------------ */
:root {
    --paper: #f6f4ee;
    --paper-raised: #ffffff;
    --ink: #1c2b3a;
    --ink-soft: #4a5a6a;
    --rule: #d8d3c4;
    --booked: #1c2b3a;
    --booked-text: #f6f4ee;
    --free: #ffffff;
    --accent: #3f6e5e;      /* ledger-green, used for actions/success */
    --accent-soft: #e4ede9;
    --warn: #9a4a3a;        /* muted brick, used for errors/overlaps */
    --warn-soft: #f3e3df;
    --gold: #b8902f;        /* used sparingly for totals/highlights */

    --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --radius: 3px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--ink); }

/* ---------- Shell ---------- */
.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px 64px;
}

.login-shell {
    max-width: 380px;
    margin: 12vh auto 0;
    padding: 0 20px;
}

.login-shell .field { margin-bottom: 14px; }

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 28px 0 18px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 28px;
}

.user-menu {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.user-menu .user-name { color: var(--ink-soft); text-decoration: none; }
.user-menu .user-name:hover { color: var(--ink); text-decoration: underline; }

.linklike {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    text-decoration: underline;
    cursor: pointer;
}

.brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.brand .eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
}

.nav {
    display: flex;
    gap: 22px;
}

.nav a {
    font-family: var(--font-mono);
    font-size: 13px;
    text-decoration: none;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

h1.page-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 4px;
}

p.page-sub {
    color: var(--ink-soft);
    margin: 0 0 26px;
    font-size: 14px;
}

/* ---------- Cards / panels ---------- */
.panel {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 24px;
}

.panel-title {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

/* Dashboard cell click opens its form/detail in a popup. The overlay only
   shows while #booking-peek actually holds a panel. */
#cell-modal { display: none; }

#cell-modal:has(#booking-peek:not(:empty)) { display: flex; }

#booking-peek > .panel {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Inline "change the stay dates" editor inside the booking popup. */
.peek-edit {
    margin: 4px 0 16px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--rule);
}

/* ---------- Forms ---------- */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.field label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

/* Inline inputs inside data tables (e.g. the per-row password reset) get the
   same treatment as .field inputs. */
table.data input[type="text"],
table.data input[type="password"] {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 9px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.field input:focus,
.field select:focus,
table.data input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.field-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-soft);
}

.checkbox-field {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: unset;
}

/* Scrollable checkbox list (report room filter). Individually toggleable,
   unlike a native <select multiple> which needs Ctrl+click to deselect. */
.room-checklist {
    max-height: 148px;
    overflow-y: auto;
    padding: 6px 9px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
}

.room-checklist label.room-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

.room-checklist label.room-check input {
    width: 15px;
    height: 15px;
    flex: none;
}

.checkbox-field input { width: 17px; height: 17px; }

.checkbox-field label { text-transform: none; letter-spacing: normal; font-size: 14px; }

.btn {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.82; }

.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { opacity: 0.35; }

.btn-secondary {
    background: transparent;
    color: var(--ink);
}

.btn-small {
    padding: 5px 10px;
    font-size: 11px;
}

.btn-danger {
    background: var(--warn);
    border-color: var(--warn);
    color: var(--paper);
}

/* Right-aligned action cell in data tables (e.g. row "Obriši"). */
td.row-actions { text-align: right; white-space: nowrap; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.pagination-status {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.linklike.danger { color: var(--warn); }

/* ---------- Alerts ---------- */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 13.5px;
    margin-bottom: 16px;
}

.alert-error {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn);
}

.alert-success {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ---------- Modal popup ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 43, 58, 0.45);
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-card-wide { max-width: 640px; }

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--paper-raised);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--ink);
    border-color: var(--ink-soft);
}

.modal-title {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--warn);
}

.modal-body {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--ink);
}

/* Stacked form fields, one per line (used inside the narrow modal card). */
.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-col .field { min-width: 0; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* ---------- Occupancy grid (dashboard signature element) ---------- */
/* .table-scroll wraps ordinary data tables (Sve sobe, Svi korisnici, report
   results) the same way; a wide table scrolls inside its own box instead of
   forcing the whole page to scroll sideways. */
.grid-scroll,
.table-scroll { overflow-x: auto; }

/* Fixed layout with an explicit width on every column: the browser never has
   to guess how to distribute extra width across columns. With auto layout,
   `width: 100%` forced a handful of day columns to stretch to fill whatever
   container width was available, and some browsers rendered that stretch as
   collapsed/invisible cells instead of wider ones - most visible with 7 days
   selected, where the natural width is well under the panel width. Fixed
   layout makes the table render at exactly room-col + (days x 40px), always,
   regardless of how many days are shown or how wide the screen is; anything
   left over is just blank space, and anything short of that scrolls via
   .grid-scroll. */
table.ledger {
    border-collapse: collapse;
    table-layout: fixed;
}

table.ledger th, table.ledger td {
    border: 1px solid var(--rule);
    text-align: center;
    padding: 0;
}

table.ledger thead th {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
    padding: 8px 4px;
    background: var(--paper);
}

/* Column widths are read from this header row only (table-layout: fixed) -
   every other row in the column follows suit. */
table.ledger thead th:not(.room-col) { width: 40px; }

table.ledger thead th.weekend { color: var(--gold); }

table.ledger thead th .dow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

table.ledger thead th .dom {
    display: block;
    font-size: 10px;
    color: var(--ink-soft);
    white-space: nowrap;
}

th.room-col, td.room-col {
    width: 170px;
    text-align: left;
    font-family: var(--font-display);
    font-size: 14.5px;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--paper);
    position: sticky;
    left: 0;
    border-right: 2px solid var(--ink);
}

td.room-col .loc {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

td.day-cell {
    height: 40px;
    width: 40px;
    background: var(--free);
}

td.day-cell.booked {
    background: var(--booked);
}

/* Reserved but not paid: the soft diagonal hatch (same as the old
   "disabled" cell) instead of a solid fill. */
td.day-cell.booked.unpaid {
    background: repeating-linear-gradient(
        45deg, var(--rule), var(--rule) 4px, var(--paper) 4px, var(--paper) 8px
    );
}

.tag-bcom {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    vertical-align: 1px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-soft);
    align-items: center;
}

.legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--rule);
    margin-right: 6px;
    vertical-align: -2px;
}

.legend .swatch.booked { background: var(--booked); }
.legend .swatch.free { background: var(--free); }
.legend .swatch.unpaid {
    background: repeating-linear-gradient(
        45deg, var(--rule), var(--rule) 3px, var(--paper) 3px, var(--paper) 6px
    );
}

/* ---------- Data tables ---------- */
table.data {
    border-collapse: collapse;
    width: 100%;
    font-size: 13.5px;
}

table.data th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    padding: 8px 10px;
    border-bottom: 2px solid var(--ink);
}

table.data td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
}

table.data td.text { font-family: var(--font-body); }

/* Rows that open an editor on click (e.g. Rooms). */
table.data tr.row-clickable { cursor: pointer; }
table.data tr.row-clickable:hover td { background: var(--paper-raised); }

table.data tfoot td {
    font-family: var(--font-mono);
    font-weight: 600;
    border-top: 2px solid var(--ink);
    border-bottom: none;
}

.report-group-title {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin: 24px 0 10px;
}

.report-group-title:first-of-type { margin-top: 4px; }

.report-group-title + table.data { margin-bottom: 4px; }

.num { text-align: right; }

.pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.pill.off {
    background: var(--warn-soft);
    color: var(--warn);
}

.totals-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}

.totals-strip .total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.totals-strip .total .label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.totals-strip .total .value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
}

.totals-strip .total.highlight .value { color: var(--gold); }
.totals-strip .total.vat-favorable .value { color: var(--accent); }
.totals-strip .total.vat-owed .value { color: var(--warn); }

.empty-state {
    padding: 30px 10px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.cal-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 18px;
}

.cal-nav {
    display: flex;
    gap: 8px;
}

.cal-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    color: var(--ink-soft);
    background: var(--paper-raised);
    cursor: pointer;
}

.cal-btn:hover {
    border-color: var(--ink-soft);
    color: var(--ink);
}

.days-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    margin-left: auto;
}

.days-toggle a {
    font-family: var(--font-mono);
    font-size: 12px;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    color: var(--ink-soft);
}

.days-toggle a.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* ---------- Report panel head (title + Print button) ---------- */
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.panel-head .panel-title { margin-bottom: 16px; }

/* ---------- Print ---------- */
.print-only { display: none; }

@media print {
    .topbar,
    .page-sub,
    .no-print,
    #modal-root,
    #cell-modal { display: none !important; }

    body { background: #fff; color: #000; }
    .shell { max-width: none; margin: 0; padding: 0; }

    .panel {
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        background: #fff;
    }

    .print-only { display: block; }
    .table-scroll { overflow: visible; }
    .print-range {
        margin: 0 0 14px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: #333;
    }

    /* Keep related blocks together across page breaks. */
    table.data,
    .report-group-title,
    .totals-strip { break-inside: avoid; }
    table.data tr { break-inside: avoid; }
    .report-group-title { break-after: avoid; }

    .totals-strip { gap: 12px 24px; }
    .totals-strip .total .value { font-size: 15px; }
}

/* ---------- Responsive (phones) ---------- */
@media (max-width: 640px) {
    .shell { padding: 0 14px 40px; }
    .login-shell { padding: 0 16px; }

    .topbar { padding: 18px 0 14px; gap: 10px 16px; margin-bottom: 20px; }
    .nav { flex-wrap: wrap; gap: 8px 16px; }

    h1.page-title { font-size: 22px; }

    .panel { padding: 16px; }

    .modal-overlay { padding: 10px; }
    .modal-card { padding: 18px; }

    .days-toggle { margin-left: 0; }

    .totals-strip { gap: 12px 20px; }
    .totals-strip .total .value { font-size: 18px; }

    /* Legend: force a clean 2x2 grid instead of a ragged flex-wrap, so it
       never forces the page wider than the screen. */
    .legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        align-items: start;
    }
}