:root {
    --bg: #181a20;
    --header-height: 72px;
    --controls-height: 52px;
    --fg: #e4e6eb;
    --accent: #ffa908; /* primary accent kept for UI elements */
    --accent-subtle: rgba(255, 251, 0, 0.678); /* extremely subtle highlight for 'today' */
    --accent-weak: rgba(255,214,0,0.12);
    --green: #23cf57d5; /* darker, less saturated green for bookings */
    --booking-blue: #3499fa;
    --cell-border: #333;
    --cell-hover: #23262e;
    --cell-selected: rgba(255, 213, 0, 0.315);
    --border-radius: 12px;
    --modal-bg: rgba(34, 34, 34, 0.8);
}



body.dark {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    /* use fallback values so layout is OK before JS measures heights */
    padding-top: var(--header-height, 72px); /* leave space for the fixed header */
}

header {
    /* make header slightly more compact to avoid large empty band */
    padding: 0.6rem 1rem 0.4rem 1rem;
    background: #14161c;
    border-bottom: 1px solid #222;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     /* do not force a CSS height — allow header to size to its content
         and let JS set --header-height to the measured value */
     z-index: 10002 !important;
}

header h1 { margin: 0 0 0.5em 0; font-size: 1.3em; }
nav a {
    color: var(--fg);
    text-decoration: none;
    margin-right: 1em;
    padding: 0.25em 0.5em;
    border-radius: 8px;
    transition: background 0.2s;
}
nav a.active, nav a:hover { background: #222; color: var(--accent); }

/* Profile button in header */
.profile-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; overflow:hidden; background:transparent; border:1px solid transparent; margin-left:0.5rem }
.profile-btn { position: absolute; right: 12px; top: 12px; z-index: 11000; }
.profile-btn img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:8px }
.profile-initials{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:700; color:var(--fg); background:#2a2c33; }

#chessboard-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* center the month navigation */
    gap: 1em;
    margin: 0.2em 0 0 0; /* sit higher inside the fixed bar */
    padding-left: 0;
    max-width: calc(100% - 16px);
}
#chessboard-controls button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--accent); /* Make arrows visible */
    font-size: 1.5em; /* Make arrows bigger */
}
#chessboard-controls button.nav-btn {
    background: #ffaf01;
    color: #181a20;
    border: none;
    border-radius: 10px;
    width: 2.0em; height: 2.0em; /* slightly smaller so arrows sit closer to month label */
    display:inline-flex;align-items:center;justify-content:center;
    font-size: 0.95em;
    padding: 0.14em;
}
#chessboard-controls .nav-btn:hover { filter:brightness(0.95); }

/* Mode toggle buttons: rectangular and roomy so text fits */
.mode-group { display:flex; gap:0.6rem; align-items:center; }
.mode-btn {
    background: #222;
    color: var(--fg);
    border: 1px solid #333;
    padding: 0.45em 1em;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    min-width: 92px;
    text-align: center;
}
.mode-btn { box-shadow: 0 2px 6px #0006; }
.mode-btn:hover { filter: brightness(1.06); }
.mode-btn.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 4px 10px #0008; }

/* Keep mode controls fixed above the board (not horizontally scrollable) */
/* Stronger rule for the top controls — make it difficult for other stylesheets to override
   so the month-nav lives centered and at the same vertical level as the mode buttons. */
#fixed-controls {
    /* Make the controls bar fixed beneath the header so it always stays visible */
    position: fixed !important;
    top: calc(var(--header-height, 72px) - 1px) !important; /* overlap header border by 1px to remove visible gap */
    left: 0 !important;
    right: 0 !important;
    height: var(--controls-height) !important;
    background: #14161c !important;
    z-index: 10001 !important; /* ensure controls are above other UI */
    display: flex !important;
    justify-content: flex-start !important; /* keep mode buttons at left */
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 0 0.8rem !important; /* horizontal padding; vertical alignment via height */
    margin-bottom: 0 !important;
}

#chessboard-mode-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 0.6rem; /* a small left inset so it doesn't touch the viewport edge */
}

#chessboard-controls {
    /* center the month nav inside the fixed-controls bar by absolute centering */
    position: absolute !important;
    left: 50% !important;
    /* center horizontally and vertically inside the controls bar so it aligns with mode buttons */
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
}

.hourly-day-label {
    color: var(--fg);
    font-weight: 600;
}

/* nav group (prev/next) stays inside wrapper and scrolls with grid */
.nav-group { display:flex; gap:0.35rem; align-items:center; }
#chessboard-controls .nav-group { display:flex; gap:0.35rem; align-items:center; justify-content:center; }
#current-month { padding: 0 0.35rem !important; color: var(--fg) !important; font-weight:600 !important; }

/* Make the month label visually interactive on hover/focus */
#current-month:hover, #current-month[role="button"]:hover { background: rgba(255,255,255,0.03); border-radius: 6px; }
#current-month:focus, #current-month:focus-visible { outline: 2px solid rgba(255,170,8,0.25); outline-offset: 2px; border-radius: 6px; }
.mode-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

#chessboard-wrapper {
    overflow-x: auto;
    background: #14161c;
    border-radius: var(--border-radius);
    /* push the chessboard down so it doesn't hide under fixed header+controls */
    margin: calc(var(--controls-height,52px) + 8px) 0.5em 1em 0.5em;
    box-shadow: 0 2px 8px #0003;
    min-height: 60vh;
}

/* hourly grid tweaks - do not set overflow here; outer wrapper should handle scrolling so CSS sticky works */
#chessboard-inner-hourly { overflow: visible; }

/* make object name column sticky specifically inside hourly grid cells */
#chessboard-inner-hourly .chess-object-name {
    position: sticky;
    top: var(--chess-sticky-top, 0px); /* set from JS to avoid overlapping fixed controls */
    left: 0;
    z-index: var(--chess-sticky-z, 15); /* controlled from JS so it can be lowered while controls are visible */
    /* default: use cheap semi-opaque background for all devices */
    background: rgba(34,38,46,0.85);
    height: 2.6em;
    min-width: 220px; /* ensure left column width matches grid column and names don't compress */
}

/* Ensure right hourly grid cells match the overall chess-cell sizing */
#chessboard-inner-hourly .chess-header.chess-cell.chess-header-hour {
    height: 2.6em; line-height: 2.6em;
}
#chessboard-inner-hourly .chess-cell {
    height: 2.6em; box-sizing: border-box;
}
.chess-header.chess-header-hour { font-size: 0.9em; padding: 0.25em 0.2em; }
.chess-cell { min-width: 0; }
.chess-cell[style*="width:"] { padding: 0; }
.booking-bar .info { font-size: 0.86em; }

#chessboard {
    border-collapse: collapse;
    position: relative;
    width: max-content;
    min-width: 100%;
    /* Grid задаётся через js */
}

.chess-header {
    position: sticky;
    top: 0;
    background: #181a20;
    z-index: 2;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid var(--cell-border);
    height: 2.6em;
    line-height: 2.6em;
}

.chess-object-name {
    position: sticky;
    left: 0;
    background: rgba(34,38,46,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10; /* Поверх баров! */
    padding: 0 0.7em;
    min-width: 220px;
    max-width: 320px;
    white-space: nowrap;
    border-right: 1px solid var(--cell-border);
    display: flex;
    align-items: center;
    height: 2.6em;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
    /* --- Добавлено для адаптива --- */
    text-overflow: ellipsis;
}

/* On phones / coarse pointers, disable backdrop-filter and use an opaque background to avoid repaint jank */
@media (pointer: coarse), (max-width: 700px) {
    .chess-object-name,
    #chessboard-inner-hourly .chess-object-name {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #222 !important; /* fully opaque on mobile to avoid any transparency repaint */
        box-shadow: none !important;
    }
}

/* Mobile tweaks: compact mode buttons and move month nav to the right so it fits */
@media (max-width: 700px) {
    /* Make header text slightly smaller to gain space */
    header h1 { font-size: 1.05em; }

    /* On small screens prefer a floating popover near the month label. Do not force it to
       become a full-width bottom sheet — allow JS to set top/left so the popover appears
       next to the date. We still limit max width and height for small viewports. */
    .month-picker-popover {
        position: fixed;
        /* let JS set top/left; avoid forcing left/right/bottom with !important which
           would override inline styles applied by JS */
        margin: 0 auto;
        border-radius: 12px 12px 8px 8px;
        min-width: unset;
        width: auto;
        max-width: calc(100% - 1.2rem);
        box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
        padding: 0.8rem;
        /* ensure popover doesn't extend under the mobile nav and can scroll internally */
        max-height: calc(60vh - var(--mobile-nav-height, 70px));
        overflow: auto;
        left: auto; /* explicit auto to avoid inherited right/left rules */
        right: auto;
        bottom: auto;
    }

    /* Compact mode buttons */
    .mode-group { gap: 0.4rem; }
    .mode-btn {
        padding: 0.24em 0.6em !important;
        font-size: 0.92em !important;
        min-width: 64px !important; /* smaller min width so buttons are narrower */
    }
    .mode-btn.active { box-shadow: 0 3px 6px #0006; }

    /* Make nav arrows slightly smaller and keep them touch-friendly */
    #chessboard-controls button.nav-btn {
        width: 2.0em !important;
        height: 2.0em !important;
        font-size: 0.9em !important;
        padding: 0.12em !important;
    }

    /* Move the month nav to the right side on narrow screens to avoid overlap with left controls */
    #chessboard-controls {
        left: auto !important;
        right: 0.6rem !important;
        /* keep it right-aligned but vertically center it with the mode buttons */
        top: 50% !important; /* center vertically inside the controls bar */
        transform: translateY(-50%) !important;
    }

    /* Slightly tighten the fixed-controls padding to save horizontal space */
    #fixed-controls { padding: 0 0.6rem !important; }
}

/* Scrolling performance hints: temporarily disable heavy visual effects while the user is scrolling
   to avoid repaints caused by backdrop-filter/box-shadow on many rows. The class `is-scrolling`
   is added to <body> from JS during active scroll. */
body.is-scrolling .chess-object-name,
body.is-scrolling #chessboard-inner-hourly .chess-object-name {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    /* keep a solid background while scrolling */
    background: rgba(34,38,46,0.9) !important;
}
/* Note: backdrop-filter is enabled by default on all devices (including touch/mobile) */

/* Layer promotion / hint to browser to reduce layout thrash for the scrolling grid. Use sparingly. */
.chessboard-inner, #chessboard {
    will-change: transform; /* helps the browser prepare compositing for smoother scroll */
}

@media (max-width:700px) {
    #chessboard-inner-hourly .chess-object-name,
    .chess-object-name { min-width: 52px; }
}

.chess-cell {
    position: relative;
    min-width: 2.9em;
    height: 2.6em;
    border: 1px solid var(--cell-border);
    box-sizing: border-box;
    background: transparent;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 1em;
    overflow: visible;
}

/* Strong fallback: when modal is open, hide fixed/sticky header and mobile nav to prevent any stacking-context interference */
body.modal-open header,
body.modal-open #fixed-controls,
body.modal-open .mobile-nav,
body.modal-open #chessboard-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Also ensure the left sticky object-name column does not float above the modal on some browsers
   (some sticky/fixed elements create new stacking contexts). Lower its z-index and hide it
   while a modal is open as a strong fallback. */
body.modal-open .chess-object-name,
body.modal-open #chessboard-inner-hourly .chess-object-name {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


.chess-cell.today {
    background: var(--accent-subtle); /* very subtle yellow, not screaming */
    color: var(--fg);
    font-weight: 600;
}

.chess-cell.selected { background: var(--cell-selected); }

.booking-bar {
    background: var(--green);
        border-radius: 6px;
        color: #fff;
        font-weight: bold;
        overflow: hidden;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 4;  /* ниже, чем у chess-object-name */
        cursor: pointer;
        /* draw a single inner frame so adjacent bars look continuous */
        box-shadow: inset 0 0 0 2px var(--accent);
}

/* Objects page: card grid */
.objects-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1rem 0; }
.objects-empty { color:#9a9a9a; padding:2rem 0; text-align:center; }
.objects-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.object-card {
    background: #14161c;
    border: 1px solid #232628;
    border-radius: 12px;
    padding: 0.5rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.object-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.object-media { height:120px; border-radius:8px; overflow:hidden; background:#111; display:flex; align-items:center; justify-content:center; }
.object-media img { width:100%; height:100%; object-fit:cover; display:block; }
.object-body { padding:0 0.25rem; flex:1 1 auto; }
.object-title { margin:0; font-size:1rem; color:var(--fg); }
.object-short { margin:0.25rem 0 0 0; color:#a8a8a8; font-size:0.9rem; }
.object-actions { display:flex; gap:0.4rem; justify-content:flex-end; }
.btn.small { padding:0.25rem 0.5rem; font-size:0.95em; min-width:44px; }
.btn.danger { background:#d9534f; color:#fff; }

@media (max-width:700px) {
    .object-media { height:96px; }
}

.chess-booking {
    position: absolute;
    height: calc(100% - 8px);
    top: 4px;
    background: var(--booking-blue);
    color: white;
    border-radius: 5px;
    padding: 4px 8px;
    box-sizing: border-box;
    font-size: 0.85em;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.booking-bar .info {
    margin: 0 auto;
    text-shadow: 0 2px 4px #000a;
    font-size: 0.95em;
}

/* Cells that are part of a booking get special classes to hide internal borders between cells
   so multi-day bookings look like one continuous block without doubled grid lines */
.chess-cell.booking-covered { background: transparent; }
.chess-cell.booking-hide-right { border-right-color: transparent; }
.chess-cell.booking-hide-left { border-left-color: transparent; }
.add-booking-hint {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 4px;
    color: var(--accent);
    font-size: 1.2em;
    pointer-events: none;
}

/* Highlight the numeric date in header when it's today */
.date-num {
    display: inline-block;
    padding: 0.08em 0.25em;
    border-radius: 4px;
}
.date-num.today {
    background: var(--accent-subtle);
    color: var(--fg);
    font-weight: 600;
}

.chess-cell:hover .add-booking-hint {
    display: inline;
}

/* When a cell is covered by a booking bar, hide its grid border to prevent double lines */
    .chess-cell:hover .add-booking-hint {
        display: inline;
    }

    /* booking bars should sit flush over the grid without creating visible gaps; we nudge them to cover the 1px cell borders */
    .booking-bar .info { pointer-events: none; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(24,26,32,0.6);
    /* Must be above sticky/fixed controls (which use z-index:9999) */
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* prevent overlay itself from scrolling */
}
    .modal-overlay { overflow-x: hidden; }

/* overlay close hidden by default (we'll show overlay-close only on mobile) */
.overlay-close { display: none; }
.modal-overlay > .close-btn { display: none; }
/* hide overlay-level close button by default (desktop) */
.modal-overlay > .close-btn { display: none; }

.modal {
    position: fixed; /* Changed from relative to fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Keep modal above other UI (match overlay) */
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24,26,32,0.6);
}

.modal.hidden { display: none; }

.modal-content {
    background: #23262e;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 24px #0004;
    padding: 0.9em 1em;
    min-width: 320px;
    /* Desktop: constrain width so modal is not huge */
    max-width: 680px;
    width: 90vw;
    /* Try to fit content without internal scroll where possible */
    max-height: calc(100vh - 90px);
    overflow: auto;
    position: relative;
    color: var(--fg);
    margin: 20px;
}

/* Mode toggle buttons */
.mode-btn {
    background: #222;
    color: var(--fg);
    border: 1px solid #333;
    padding: 0.4em 0.8em;
    border-radius: 8px;
    cursor: pointer;
}
.mode-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

/* hourly header */
.hourly-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; }
.hourly-left { display:flex; gap:0.6rem; align-items:center; }
.hourly-day-label { font-weight:600; color:var(--fg); }
.hourly-right { font-size:0.9rem; color:#ccc }
.hourly-header button { background: var(--accent); color: #181a20; border:none; padding:0.25em 0.5em; border-radius:6px; }

/* Align hourly header with the grid content (leave space for the object name column) */
.hourly-header { padding-left: 220px; }
@media (max-width:700px) { .hourly-header { padding-left: 52px; } }

input, select, textarea {
    width: 100%;
    margin-bottom: 1em;
    padding: 0.7em;
    font-size: 1em;
    background: #23262e;
    color: var(--fg);
    border: 1px solid #333;
    border-radius: 8px;
}

button, .btn {
    background: var(--accent);
    color: #181a20;
    border: none;
    padding: 0.7em 1.2em;
    border-radius: 9px;
    font-size: 1em;
    cursor: pointer;
    margin-bottom: .3em;
    transition: background 0.2s;
}
button:hover, .btn:hover { background: #fff200; }

@media (max-width: 700px) {
    #chessboard { min-width: 100vw; font-size: 0.97em; }
    .modal-content { min-width: unset; }

    /* СУЖАЕМ СТОЛБЕЦ С ИМЕНЕМ ОБЪЕКТА и делаем троеточие */
    .chess-object-name {
        min-width: 36px;
        max-width: 64px;
        font-size: 15px;
        padding: 0 0.3em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

/* More aggressive desktop compaction to avoid scroll: smaller paddings and fonts on wide screens */
@media (min-width: 1000px) {
    .modal-content { padding: 0.6em 0.75em; max-width: 720px; }
    /* stronger nudge to align the select tops visually */
    .grouped-responsible .grouped-item:nth-child(2) { margin-top: -10px; }
    .modal-content label input, .modal-content label select, .modal-content label textarea { padding: 0.45em 0.5em; font-size: 0.92em; }
    .booking-tabs .tab-btn { font-size: 1.4em; }
}
.grouped-responsible .grouped-item + .grouped-item { margin-top: 0.18rem; }
.grouped-responsible .grouped-item label { margin-bottom: 0.08rem; }

/* Mobile: ensure grouped block absolutely stacks and remove extra margins from labels/inputs */
@media (max-width: 700px) {
    /* Keep two compact columns on narrow devices; reduce horizontal gap so both fit comfortably */
    .grouped-responsible { flex-direction: row !important; gap: 0.3rem !important; flex-wrap: wrap; align-items: center; }
    .grouped-responsible .grouped-item { width: 48% !important; margin: 0 !important; box-sizing: border-box; }
    .grouped-responsible .grouped-item label { margin-bottom: 0.12rem !important; }
    .grouped-responsible .grouped-item select { width: 100% !important; }
}
@media (min-width: 701px) {
    /* ensure the overlay centers content and modal is centered on screen */
    .modal { align-items: center; justify-content: center; }
    /* place close button top-right inside modal */
    /* place close button inside modal-content, top-right of the content box */
    .modal-content .close-btn {
        position: absolute;
        right: 12px;
        top: 12px;
        background: var(--accent);
        color: #181a20;
        border: none;
    font-size: 1.4em;
        line-height: 1;
        cursor: pointer;
        padding: 0.35em 0.6em; /* slightly larger hit area */
        min-width: 44px;
        border-radius: 8px;
        box-shadow: 0 2px 6px #0006;
        z-index: 60;
    }
    /* reduce the size of form action buttons on desktop (less huge) */
    .modal-content button[type="submit"], .modal-content button[type="button"], .modal-content .btn {
        padding: 0.4em 0.75em;
        font-size: 0.95em;
        border-radius: 8px;
    }
    /* tab buttons in modal header smaller on desktop too */
    .booking-tabs .tab-btn {
        font-size: 1.6em;
        padding: 0 0.4em 0.12em 0.4em;
    }

    /* Desktop: prefer native date inputs and compact spacing */
    .field-dates .date-native { position: static; left: auto; opacity: 1; width: 100%; height: auto; pointer-events: auto; z-index: auto; display: block; }
    .field-dates .date-display { display: none; }
    .fields-row { gap: 1rem; }
    /* two-cols helper: use grid for perfect horizontal alignment */
    .fields-row.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
    /* money-row: make sum wider than deposit and ensure both align vertically */
    .fields-row.money-row { grid-template-columns: 1.4fr 0.6fr; align-items: center; }
    /* Ensure paired fields sit on the same row and aligned at their inputs */
    .fields-row { align-items: flex-start; }
    .fields-row > label { margin-bottom: 0; }
    .fields-row > label > .date-native, .fields-row > label > input, .fields-row > label > .date-display { margin-top: 0; padding-top: 0; }
    /* enforce exact equal heights for paired inputs to avoid vertical shift */
    .fields-row.two-cols input, .fields-row.two-cols .date-native, .fields-row.two-cols .date-display { height: 36px; box-sizing: border-box; padding-top: 0.25em; padding-bottom: 0.25em; }
    /* Force consistent input heights for date/money inputs so they align horizontally */
    .field-dates .date-native, .field-money input, .modal-content input[type="date"] { min-height: 2.4em; }
    .modal-content input[type="date"] { padding-left: 0.7em; }
    /* Desktop: two-column layout for paired fields; labels are block so inputs align horizontally */
    .fields-row { display: flex; flex-wrap: nowrap; }
    .fields-row > label { display: block; flex: 1 1 50%; min-width: 0; box-sizing: border-box; }
    .modal-content label { font-size: 0.98em; }
    .modal-content input, .modal-content select, .modal-content textarea { padding: 0.5em 0.6em; box-sizing: border-box; }
    .modal-content input[type="date"], .field-dates .date-native, .field-money input { width: 100%; display: block; box-sizing: border-box; }
    /* Make inputs visually consistent height */
    .modal-content input, .modal-content select, .modal-content textarea { min-height: 2.2em; line-height: 1.4; }
    .fields-row > label { display: flex; flex-direction: column; justify-content: flex-start; }
    .fields-row > label .date-native, .fields-row > label input, .fields-row > label .date-display { min-height: 2.2em; }
}

/* Make labels and inputs in modal more compact and align date inputs with other fields */
.modal-content label { display:block; margin-bottom:0.45em; font-size:0.95em; }
.modal-content label input, .modal-content label select, .modal-content label textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55em 0.6em;
    font-size: 0.95em;
}
.modal-content #nights-label { margin-bottom:0.5em; font-size:0.95em; }

/* Reduce spacing between fields so more fits vertically */
.modal-content label + label { margin-top: 0.4em; }
.modal-content label { margin-bottom: 0.28em; }

/* Buttons area compact */
.modal-content form button, .modal-content form .btn { margin-top: 0.45em; margin-bottom: 0.25em; }
.modal-content form button + button { margin-left: 0.5em; }

/* Extra bottom spacing for action buttons on mobile to avoid being hidden behind UI */
@media (max-width:700px) {
    .modal-content form button, .modal-content form .btn { margin-bottom: 0.8rem; }
}

/* Inline date and money fields (two columns) */
.field-dates, .field-money { display:block; }
.field-dates label, .field-money label { display:block; }
.field-dates input, .field-money input { width: 100%; }

/* Mobile: show left floating close pill like original, hide in-content close button */
@media (max-width: 700px) {
    /* mobile: anchor modal to right edge to avoid horizontal overflow; left close pill centered vertically */
    /* prevent horizontal panning/navigation and lock to vertical scrolling */
    html, body, .modal-overlay, .modal, .modal-content { overflow-x: hidden; }
    html, body { overscroll-behavior-x: none; }
    .modal-overlay, .modal, .modal-content { touch-action: pan-y; overscroll-behavior-x: none; }
    .modal { position: fixed; inset: 0; display: flex; justify-content: flex-start; align-items: stretch; }
    .modal-content {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    width: calc(100vw - 84px);
    max-width: calc(100vw - 84px);
        height: 100vh;
        max-height: 100vh;
        border-radius: 0 12px 12px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        padding-bottom: 3.5rem; /* space for bottom buttons and safe area */
    }
    .modal-content .in-modal { display: none; }
    .overlay-close { display:block; position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 70; background: var(--accent); border-radius: 14px; padding: 0.9em 1em; min-width: 48px; font-size: 1.28em; color: #181a20; box-shadow: 0 6px 16px #0008; display: flex; align-items: center; justify-content: center; }
    .modal-overlay { overflow-x: hidden; }
}

/* On wider screens show fields-row as two columns */
@media (min-width: 900px) {
    .fields-row { display:flex; gap: 0.8rem; }
    .fields-row label { flex: 1 1 50%; }
}

/* Grouped responsible+source block: occupy a single column block but stack the two selects vertically
   so they take less horizontal space while remaining compact on mobile */
.grouped-responsible { display:flex; gap:0.6rem; align-items:flex-start; }
.grouped-responsible .grouped-item { display:flex; flex-direction:column; flex:1 1 50%; }

/* On small screens show grouped items side-by-side (two compact columns) */
@media (max-width: 900px) {
    .grouped-responsible { flex-direction: row; gap:0.45rem; flex-wrap: wrap; align-items: center; }
    .grouped-responsible .grouped-item { width:48%; box-sizing: border-box; }
}

/* On wide screens nudge the second grouped field up a little so the selects align visually */
@media (min-width: 900px) {
    .grouped-responsible { align-items: flex-start; }
    .grouped-responsible .grouped-item:nth-child(2) { margin-top: -10px; }
}

/* Override generic label spacing inside grouped block to make it a tight single column on mobile */
.grouped-responsible .grouped-item + .grouped-item { margin-top: 0.28rem; }
/* ensure labels inside grouped items don't add extra margins */
.grouped-responsible .grouped-item label { margin-bottom: 0.15rem; }

/* allow flex children to shrink so inputs (dates) don't push content to the right */
.fields-row label { min-width: 0; }

/* ensure date inputs show localized date on the left, not centered/right */
.modal-content input[type="date"] { text-align: left; }

/* Prevent date inputs from overflowing their container on WebKit by constraining inner parts */
.field-dates input, .field-dates input::-webkit-datetime-edit, .field-dates input::-webkit-datetime-edit-fields-wrapper, .field-dates input::-webkit-datetime-edit-month-field, .field-dates input::-webkit-datetime-edit-day-field, .field-dates input::-webkit-datetime-edit-year-field {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* make sure long localized date strings do not overflow their input visually */
.field-dates input { overflow: hidden; text-overflow: ellipsis; }

/* Stronger constraints for WebKit-based browsers (Safari on iOS) to prevent the internal
   date text from flowing outside the input. We make inner parts inline-block and clamp width. */
.field-dates input,
.field-dates input::-webkit-datetime-edit,
.field-dates input::-webkit-datetime-edit-fields-wrapper,
.field-dates input::-webkit-datetime-edit-day-field,
.field-dates input::-webkit-datetime-edit-month-field,
.field-dates input::-webkit-datetime-edit-year-field,
.field-dates input::-webkit-datetime-edit-week-field,
.field-dates input::-webkit-datetime-edit-hour-field,
.field-dates input::-webkit-datetime-edit-minute-field {
    box-sizing: border-box;
    max-width: 100%;
}
.field-dates input::-webkit-datetime-edit,
.field-dates input::-webkit-datetime-edit-fields-wrapper,
.field-dates input::-webkit-datetime-edit-day-field,
.field-dates input::-webkit-datetime-edit-month-field,
.field-dates input::-webkit-datetime-edit-year-field,
.field-dates input::-webkit-datetime-edit-week-field,
.field-dates input::-webkit-datetime-edit-hour-field,
.field-dates input::-webkit-datetime-edit-minute-field {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Ensure the visible input respects padding and doesn't center the long localized label */
.field-dates input { text-align: left; padding-left: 0.6em; }

/* On very small screens reduce font-size of date value to give more room */
@media (max-width:380px) {
    .field-dates input { font-size: 0.9em; }
}

@media (max-width:700px) {
    /* Use a visible date-display and hide the native input visually to avoid platform rendering quirks on mobile */
    .field-dates { position: relative; }
    .field-dates .date-native {
        /* place native input exactly over the display so user taps trigger the native picker */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border: none;
        background: transparent;
        z-index: 2;
        cursor: pointer;
    }
    .field-dates .date-display {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 0.55em 0.6em; /* match other inputs */
        border: 1px solid #333;
        border-radius: 8px;
        background: transparent;
        color: var(--fg);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: text;
        font-size: 1rem; /* avoid iOS auto-zoom */
        line-height: 1.4;
        min-height: 2.2em;
        padding-left: 0.7em;
    }
    .field-dates .date-display { padding-left: 0.7em; }
    /* Ensure the native input's internal text/pseudo-elements are invisible to avoid duplicated text */
    .field-dates .date-native {
        opacity: 0;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-size: 0.1px; /* hide internal text rendering */
        z-index: 3; /* keep on top to receive taps */
    }
    .field-dates .date-native::-webkit-datetime-edit,
    .field-dates .date-native::-webkit-datetime-edit-fields-wrapper,
    .field-dates .date-native::-webkit-datetime-edit-day-field,
    .field-dates .date-native::-webkit-datetime-edit-month-field,
    .field-dates .date-native::-webkit-datetime-edit-year-field,
    .field-dates .date-native::-webkit-datetime-edit-hour-field,
    .field-dates .date-native::-webkit-datetime-edit-minute-field {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 0.1px !important;
    }
    .field-dates .date-display { z-index: 2; position: relative; }
}

@media (max-width:420px) {
    /* reduce font-size for date inputs to keep localized strings inside */
    .modal-content input[type="date"] { font-size: 0.92em; }
}

.login-main { display: flex; align-items: center; justify-content: center; height: 90vh; }
.login-form {
    background: #23262e;
    padding: 2em;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 350px;
    box-shadow: 0 2px 10px #0006;
}
.login-form h2 { margin: 0 0 1em 0; }
.error { color: #f33; margin-bottom: 1em; }

.report-table {
    margin: 1.5em 0;
    border-collapse: collapse;
    width: 60%;
    min-width: 400px;
}
.report-table th, .report-table td {
    border: 1px solid #555;
    padding: 0.5em 1.2em;
    text-align: left;
    font-size: 1.08em;
    background: #26282f;
}
.report-table th {
    background: #191b20;
    font-weight: bold;
}
.report-table tr:last-child td {
    background: #21252b;
    font-weight: bold;
}

/* Mobile navigation bar */
.mobile-nav {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1f2128;
    border-top: 1px solid #333;
    z-index: 100;
    height: 60px;
}

.mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.75em;
    padding: 4px 0;
}

.mobile-nav .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    width: 24px;
    height: 24px;
}

.mobile-nav .icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-nav .icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mobile-nav a.active {
    color: var(--accent);
}

@media (max-width: 700px) {
    body {
        padding-bottom: 60px; /* Space for the mobile nav bar */
    }
    .desktop-nav {
        display: none; /* Hide desktop nav on mobile */
    }
    /* on mobile keep profile button inside mobile nav; hide header absolute profile */
    .profile-btn { display: none; }
    header h1 {
        font-size: 1.1em; /* Smaller title on mobile */
    }
    .mobile-nav {
        display: flex; /* Show mobile nav */
        padding: 12px 0 10px !important; /* slightly taller */
        gap: 6px !important;
    }
}

/* Profile page - mobile improvements */
@media (max-width: 700px) {
    .profile-page{
        margin: 0.6rem;
        padding: 14px;
        border-radius: 10px;
    }
    .profile-top{ flex-direction: row; align-items:center; gap:12px }
    .profile-avatar{ width:84px; height:84px; border-radius:50%; flex:0 0 84px }
    .profile-avatar img{ border-radius:50%; }
    .profile-info { flex: 1 1 auto; padding-right: 6px }
    .profile-info h2{ font-size:20px; margin-bottom:4px }
    .profile-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
    .profile-actions .btn{ flex: 1 1 auto; min-width: 44%; padding:10px; font-size:15px }
    .profile-actions .btn.ghost{ background: transparent; color: var(--fg); border:1px solid rgba(255,255,255,0.06) }
    .profile-actions .btn{ border-radius:10px }

    /* Make edit form compact and full width */
    form.profile-form{ margin-top:12px; padding-bottom: 12px }
    form.profile-form label{ margin-bottom:10px }
    form.profile-form input[type="text"], form.profile-form input[type="file"]{ font-size: 16px }
    form.profile-form .btn{ width: 48%; display: inline-block; }
    form.profile-form .btn.ghost{ width:48%; }

    /* When avatar is large (if no custom avatar), keep initials centered */
    .profile-avatar div { font-size: 32px; }

    /* Ensure the profile header doesn't collide with fixed header */
    header { padding-top: 10px }
}

/* Final override: force grouped responsible+source into two compact columns on narrow screens.
   Placed at the end to ensure it wins over earlier, conflicting rules. Uses !important sparingly
   to ensure behavior even if other styles are more specific. */
@media (max-width: 900px) {
    .grouped-responsible {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.22rem !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .grouped-responsible .grouped-item {
        flex: 0 0 46% !important;
        max-width: 46% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .grouped-responsible .grouped-item label { margin-bottom: 0.08rem !important; }
    .grouped-responsible .grouped-item select { width: 100% !important; box-sizing: border-box !important; padding-left: 0.52em !important; padding-right: 0.52em !important; }
}