/* ============================================================
   CSS ПРОМЕНЛИВИ – СВЕТЛА ТЕМА (по подразбиране)
   ============================================================ */
:root {
    /* ---------- ПОВЪРХНОСТИ (неутрална slate скала) ---------- */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --surface-subtle: #f8fafc;
    --surface-sunken: #f1f5f9;
    
    /* ---------- ТЕКСТ ---------- */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    /* ---------- АКЦЕНТ (интерактивен син) ---------- */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-primary-border: #bfdbfe;
    --primary-text: #1d4ed8;
    --color-success: #15803d;
    --color-danger: #dc2626;
    --color-warning: #b45309;
    --color-info: #0369a1;
    
    /* ---------- СТАТУСНИ ПОВЪРХНОСТИ И ТЕКСТ ---------- */
    --success-soft: #dcfce7;
    --success-border: #86efac;
    --success-text: #15803d;
    --success-ring: rgba(21,128,61,0.35);
    --danger-soft: #fee2e2;
    --danger-border: #fca5a5;
    --danger-text: #c0392b;
    --text-danger: #c0392b;      /* алиас – ползва се от cash/SummaryCards.js */
    --info-soft: #e0f2fe;
    --info-border: #7dd3fc;
    --info-text: #0369a1;
    
    /* ---------- ЛИНИИ, СЕНКИ, ФОКУС ---------- */
    --border-color: #e2e8f0;
    --border-color-dark: #cbd5e1;
    --shadow-color: rgba(15,23,42,0.06);
    --focus-ring: rgba(37,99,235,0.18);
    
    /* ---------- ТАБЛИЦИ ---------- */
    --table-header: #f8fafc;
    --table-row-hover: #f1f5f9;
    
    /* ---------- ФОРМИ ---------- */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-focus: #2563eb;
    
    /* ---------- МОДАЛИ ---------- */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(15,23,42,0.45);
    
    /* ---------- НАВИГАЦИЯ И ХЕДЪР ---------- */
    --nav-bg: #ffffff;
    --nav-link: #334155;
    --nav-link-active: #ffffff;
    --nav-link-hover: #2563eb;
    
    --header-bg: #1e293b;
    --header-text: #f8fafc;
    
    /* ---------- СТАИ И ЛЕГЛА (етажен план) ---------- */
    --room-available-bg: #dcfce7;
    --room-occupied-bg: #fee2e2;
    --bed-free-bg: #15803d;
    --bed-taken-bg: #dc2626;
    
    /* ---------- KPI / ОБОБЩЕНИЯ ---------- */
    --kpi-bg: #ffffff;
    --kpi-border: #e2e8f0;
    --summary-bg: #ffffff;
    --summary-border: #2563eb;
	
    /* ---------- ФУТЪР ---------- */
    --bg-footer: #ffffff;
    --text-footer: #64748b;

    /* Съобщения (inline текст: грешка / успех) */
    --msg-error: #c0392b;
    --msg-success: #15803d;

    /* Предупредителни кутии (warning) */
    --warning-bg: #fef3c7;
    --warning-border: #fcd34d;
    --warning-text: #92400e;

    /* Допълнителни акценти */
    --color-accent: #7c3aed;
    --color-accent-hover: #6d28d9;
    --accent-text: #6d28d9;
    --color-neutral: #64748b;
    --color-neutral-hover: #475569;
}

/* ============================================================
   ТЪМНА ТЕМА (slate палитра)
   Единствен източник на цветове за тъмния режим. Класът се слага на
   <body> от assets/js/main.js (и от standalone страниците), затова
   селекторът е `body.dark-theme` – всички компоненти и тестове виждат
   един и същ източник на токени.
   ============================================================ */
body.dark-theme {
    /* ---------- ПОВЪРХНОСТИ ---------- */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #26334a;
    --surface-subtle: #1b2740;
    --surface-sunken: #172033;
    
    /* ---------- ТЕКСТ ---------- */
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* ---------- АКЦЕНТ ---------- */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: rgba(37,99,235,0.18);
    --color-primary-border: rgba(59,130,246,0.45);
    --primary-text: #93c5fd;
    --color-success: #15803d;
    --color-danger: #dc2626;
    --color-warning: #b45309;
    --color-info: #0369a1;
    
    /* ---------- СТАТУСНИ ПОВЪРХНОСТИ И ТЕКСТ ---------- */
    --success-soft: rgba(34,197,94,0.14);
    --success-border: rgba(34,197,94,0.40);
    --success-text: #4ade80;
    --success-ring: rgba(34,197,94,0.40);
    --danger-soft: rgba(248,113,113,0.14);
    --danger-border: rgba(248,113,113,0.40);
    --danger-text: #ff6b6b;
    --text-danger: #ff6b6b;      /* алиас – ползва се от cash/SummaryCards.js */
    --info-soft: rgba(56,189,248,0.14);
    --info-border: rgba(56,189,248,0.40);
    --info-text: #7dd3fc;
    
    /* ---------- ЛИНИИ, СЕНКИ, ФОКУС ---------- */
    --border-color: #334155;
    --border-color-dark: #475569;
    --shadow-color: rgba(0,0,0,0.45);
    --focus-ring: rgba(59,130,246,0.30);
    
    /* ---------- ТАБЛИЦИ ---------- */
    --table-header: #1e293b;
    --table-row-hover: #26334a;
    
    /* ---------- ФОРМИ ---------- */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-focus: #3b82f6;
    
    /* ---------- МОДАЛИ ---------- */
    --modal-bg: #1e293b;
    --modal-overlay: rgba(2,6,23,0.72);
    
    /* ---------- НАВИГАЦИЯ И ХЕДЪР ---------- */
    --nav-bg: #1e293b;
    --nav-link: #cbd5e1;
    --nav-link-active: #ffffff;
    --nav-link-hover: #60a5fa;
    
    --header-bg: #172033;
    --header-text: #f8fafc;
    
    /* ---------- СТАИ И ЛЕГЛА (етажен план) ---------- */
    --room-available-bg: rgba(34,197,94,0.16);
    --room-occupied-bg: rgba(248,113,113,0.16);
    --bed-free-bg: #15803d;
    --bed-taken-bg: #dc2626;
    
    /* ---------- KPI / ОБОБЩЕНИЯ ---------- */
    --kpi-bg: #1e293b;
    --kpi-border: #334155;
    --summary-bg: #1e293b;
    --summary-border: #3b82f6;
	
	--bg-footer: #172033;
    --text-footer: #94a3b8;

    /* Съобщения (inline текст: грешка / успех) – светли нюанси за тъмен фон */
    --msg-error: #ff6b6b;
    --msg-success: #4ade80;

    /* Предупредителни кутии (warning) */
    --warning-bg: rgba(251,191,36,0.12);
    --warning-border: rgba(251,191,36,0.40);
    --warning-text: #fcd34d;

    /* Допълнителни акценти */
    --color-accent: #7c3aed;
    --color-accent-hover: #6d28d9;
    --accent-text: #a78bfa;
    --color-neutral: #475569;
    --color-neutral-hover: #64748b;
}

/* ============================================================
   ОБЩИ СТИЛОВЕ
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s, color 0.3s;
    min-height: 100vh;
}

/* Скролбар за тъмна тема */
.dark-theme::-webkit-scrollbar { width: 8px; }
.dark-theme::-webkit-scrollbar-track { background: var(--bg-primary); }
.dark-theme::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.dark-theme::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* ============================================================
   ЛОГИН
   ============================================================ */
.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 0 20px var(--shadow-color);
    transition: background 0.3s;
}
.login-container h1 { text-align:center; color: var(--text-primary); }
.login-container h2 { text-align:center; font-size:1.2rem; margin-bottom:20px; color: var(--text-secondary); }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-weight:600; color: var(--text-secondary); }
.form-group input {
    width:100%; padding:10px;
    background: var(--input-bg);
    border:1px solid var(--input-border);
    border-radius:4px;
    color: var(--text-primary);
    transition: border-color 0.3s;
}
.form-group input:focus { border-color: var(--input-focus); outline: none; }
button[type="submit"] {
    width:100%; padding:12px;
    background: var(--color-primary); color:#fff; border:none; border-radius:4px;
    font-size:1rem; cursor:pointer; transition:0.3s;
}
button[type="submit"]:hover { opacity:0.8; }
.hint { margin-top:15px; text-align:center; color: var(--text-muted); font-size:0.9rem; }
.error { background: var(--danger-soft); color: var(--danger-text); padding:10px; border-radius:4px; margin-bottom:15px; }

/* ============================================================
   ОСНОВЕН ЛАЙАУТ
   ============================================================ */
#app { max-width:1200px; margin:0 auto; padding:20px; }
header {
    display:flex; justify-content:space-between; align-items:center;
    background: var(--header-bg); color: var(--header-text);
    padding:15px 25px; border-radius:8px;
    transition: background 0.3s, color 0.3s;
}
header h1 { font-size:1.5rem; }
/* ---------- МАРКА: ЛОГО НА ХОСТЕЛА (2026-10-03) ----------
   assets/img/logo.png стои ВЛЯВО от името на хостела (в <h1> на хедъра и на
   входната страница). Един прозрачен PNG стига за двете теми: в тъмна тема
   цветовете се инвертират – вж. .dark-theme .brand-logo по-долу.
   Височината е в em, за да следва намаляването на h1 при малки екрани
   (assets/css/responsive.css). Липсва ли файлът, страниците показват
   досегашната емоджи-икона – това правило не се прилага. */
.brand-logo {
    height: 1.5em;
    width: auto;
    vertical-align: middle;
    margin-right: 10px;
    transition: filter 0.3s;
}
.user-info { display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
.btn-logout {
    color: #fff; text-decoration:none; background: var(--color-danger);
    padding:5px 15px; border-radius:4px; transition:0.3s;
}
.btn-logout:hover { opacity:0.8; }

nav { margin:20px 0; }
nav ul { list-style:none; display:flex; gap:5px; flex-wrap:wrap; }
nav ul li a {
    display:block; padding:10px 20px;
    background: var(--nav-bg); color: var(--nav-link);
    text-decoration:none; border-radius:4px;
    transition:0.3s; cursor:pointer;
}
nav ul li a:hover { background: var(--bg-hover); color: var(--text-primary); }
nav ul li a.active { background: var(--color-primary); color: var(--nav-link-active); }

#tab-content {
    background: var(--bg-secondary); padding:25px; border-radius:8px;
    min-height:400px; box-shadow:0 0 10px var(--shadow-color);
    transition: background 0.3s, box-shadow 0.3s;
}

/* ============================================================
   ПРЕВКЛЮЧВАТЕЛ ЗА ТЕМА
   ============================================================ */
#theme-switcher {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: 0.3s;
    line-height: 1;
    color: var(--header-text);
}
#theme-switcher:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.1);
}
.dark-theme #theme-switcher { color: #f0c040; }
.dark-theme #theme-switcher:hover { background: rgba(240,192,64,0.1); }
/* Логото на хостела се ИНВЕРТИРА в тъмна тема (изисква прозрачен PNG –
   светлите щрихи стават тъмни и обратно, т.е. един файл стига за двете теми).
   Класът идва от Branding::logoHtml(); вж. .brand-logo по-горе. */
.dark-theme .brand-logo { filter: invert(1); }

/* ============================================================
   ТАБЛО (DASHBOARD)
   ============================================================ */
.dashboard-stats { display:flex; gap:20px; margin-top:20px; flex-wrap:wrap; }
.stat-card {
    background: var(--kpi-bg); padding:20px; border-radius:8px;
    flex:1; min-width:150px; text-align:center;
    transition: background 0.3s;
}
.stat-card span { display:block; font-weight:bold; font-size:1.2rem; color: var(--text-primary); }

/* ============================================================
   ЕТАЖЕН ПЛАН
   ============================================================ */
.rooms-grid { display:flex; flex-wrap:wrap; gap:15px; margin-top:10px; }
.room {
    border:1px solid var(--border-color); padding:15px; border-radius:8px;
    min-width:150px; flex:1;
    transition: background 0.3s, border-color 0.3s;
    /* Референция за .room-gender-corner (икона горе вдясно, Вариант A 2026-10-09) */
    position: relative;
}
.room.available { background: var(--room-available-bg); border-color: var(--color-success); }
.room.occupied { background: var(--room-occupied-bg); border-color: var(--color-danger); }
.beds { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.bed {
    padding:4px 10px; border-radius:4px; font-size:0.8rem;
    transition: background 0.3s, color 0.3s;
}
.bed.free { background: var(--bed-free-bg); color: #fff; }
.bed.taken { background: var(--bed-taken-bg); color: #fff; }
.room.available:hover { border-color: var(--color-success); box-shadow: 0 0 10px var(--success-ring); }
.room.occupied { opacity: 0.6; }
.bed.free:hover { border-color: var(--color-success); box-shadow: 0 0 10px var(--success-ring); }
#selected-space {
    padding: 10px;
    background: var(--room-available-bg);
    border-radius: 4px;
    border-left: 4px solid var(--color-success);
    transition: background 0.3s;
}

/* ============================================================
   KPI КАРТИ
   ============================================================ */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px; margin:20px 0; }
.kpi-card {
    background: var(--kpi-bg); padding:15px; border-radius:8px; text-align:center;
    transition: background 0.3s;
}
.kpi-card span { display:block; font-weight:bold; font-size:1.1rem; color: var(--text-primary); }

/* ============================================================
   ТАБЛИЦИ
   ============================================================ */
table { width:100%; border-collapse:collapse; margin:10px 0; }
th, td { padding:10px; border-bottom:1px solid var(--border-color); text-align:left; }
th { background: var(--table-header); color: var(--text-primary); }
td { color: var(--text-secondary); }
tr:hover td { background: var(--table-row-hover); }

/* ============================================================
   ФОРМИ
   ============================================================ */
form { margin:15px 0; }
form label { display:inline-block; margin-right:10px; color: var(--text-secondary); }
form input, form select {
    padding:8px;
    background: var(--input-bg);
    border:1px solid var(--input-border);
    border-radius:4px;
    color: var(--text-primary);
    transition: border-color 0.3s, background 0.3s;
}
form input:focus, form select:focus {
    border-color: var(--input-focus);
    outline: none;
}
form button {
    padding:8px 20px;
    background: var(--color-primary);
    color:#fff; border:none; border-radius:4px;
    cursor:pointer;
    transition:0.3s;
}
form button:hover { opacity:0.8; }

.loading { text-align:center; padding:40px; color: var(--text-muted); }

/* ============================================================
   ОБОБЩЕНИЕ (SUMMARY CARDS)
   ============================================================ */
.summary-card {
    background: var(--summary-bg);
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--summary-border);
    flex: 1;
    min-width: 120px;
    text-align: center;
    transition: background 0.3s, border-color 0.3s;
}
.summary-card .value {
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    color: var(--text-primary);
}
.summary-card span.label { color: var(--text-secondary); }

/* ============================================================
   ЦВЕТОВЕ НА РЕДОВЕТЕ В ТАБЛИЦА (Резервации)
   ============================================================ */
.booking-active { background-color: var(--room-available-bg) !important; }
.booking-past { background-color: var(--room-occupied-bg) !important; opacity: 0.7; }
.booking-future { background-color: var(--info-soft) !important; }

/* ============================================================
   МОДАЛИ
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--modal-overlay);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-in-out;
}
.modal-content {
    background: var(--modal-bg);
    padding: 25px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: slideDown 0.3s ease-out;
    transition: background 0.3s;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.3s;
}
.modal-close:hover { color: var(--color-danger); }

.btn-confirm {
    background: var(--color-success);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}
.btn-confirm:hover { opacity:0.8; }
.btn-cancel {
    background: var(--color-neutral);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}
.btn-cancel:hover { opacity:0.8; }

.modal-content form label {
    display: block;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-secondary);
}
.modal-content form input,
.modal-content form select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.3s, background 0.3s;
}
.modal-content form input:focus,
.modal-content form select:focus {
    border-color: var(--input-focus);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.modal-content .success {
    color: var(--success-text);
    background: var(--success-soft);
    padding: 10px;
    border-radius: 4px;
}
.modal-content .error {
    color: var(--danger-text);
    background: var(--danger-soft);
    padding: 10px;
    border-radius: 4px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   БЛОКЧЕТА ЗА РЕЗЕРВАЦИИ (в модала)
   ============================================================ */
.booking-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.booking-block {
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--success-soft);
    border: 1px solid var(--color-success);
    font-size: 0.8rem;
    min-width: 80px;
    transition: background 0.3s, border-color 0.3s;
}
.booking-block.past {
    background: var(--surface-sunken);
    border-color: var(--border-color-dark);
}
.booking-block.active {
    background: var(--info-soft);
    border-color: var(--color-info);
}
.booking-block.future {
    background: var(--room-available-bg);
    border-color: var(--color-success);
}
.booking-block .days {
    font-weight: bold;
    display: block;
    color: var(--text-primary);
}
.booking-block .dates {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ============================================================
   БУТОНИ ЗА ДЕЙСТВИЯ В ТАБЛИЦИ
   ============================================================ */
.btn-extend-small, .btn-shorten-small, .btn-transfer-small,
.btn-checkout-small, .btn-details-small, .btn-add-amenity-small,
.btn-add-consumable-small, .btn-pay-small {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 0.75rem;
    margin: 2px;
    transition: 0.3s;
}
.btn-extend-small { background: var(--color-warning); }
.btn-shorten-small { background: var(--color-warning); }
.btn-transfer-small { background: var(--color-primary); }
.btn-checkout-small { background: var(--color-danger); }
.btn-details-small { background: var(--color-info); text-decoration: none; display: inline-block; }
.btn-pay-small { background: var(--color-success); }
.btn-extend-small:hover, .btn-shorten-small:hover,
.btn-transfer-small:hover, .btn-checkout-small:hover,
.btn-details-small:hover, .btn-pay-small:hover { opacity:0.8; }

/* ============================================================
   СПИСЪК С РЕЗЕРВАЦИИ – КОЛОНИ „КЛИЕНТ“, „ПРЕСТОЙ“, „НОЩУВКИ“ И
   „УСЛУГИ/ЕКСТРИ“ (2026-10-16)
   ============================================================
   Ползва се от assets/js/modules/reservations.js (renderBookingsTable()).
   Три от колоните носят по ДВА реда – име + тип настаняване, настаняване +
   напускане – затова редовете са блокове в самата клетка, а не <br>.
   Цветовете идват от променливите по-горе, за да работят и в тъмна тема. */
.bookings-client {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

.cell-sub {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
}

a.cell-sub:hover { text-decoration: underline; }

.cell-sub--muted { color: var(--text-muted); font-style: italic; }

/* Сортиращо се заглавие (2026-10-16, §9.47): клик върху „ID“ обръща реда на
   списъка – вж. window.sortBookingsById() в assets/js/modules/reservations.js.
   Стрелката (⇅ / ▲ / ▼) е част от текста на заглавието, затова редът не се
   пренася, а курсорът подсказва, че заглавието се натиска. */
.bookings-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.bookings-th-sort:hover {
    color: var(--color-primary);
}

/* Клетка „Статус“ (2026-10-16, §9.48): статусът на плащането и ВСЕКИ бадж
   (🛎️ Настанен / ⏳ Чака настаняване / ♾️ Отворен / 🕒 N извън плана) стоят на
   СВОЙ ред, един под друг. Стекът е flex-КОЛОНА, т.е. чистият текст и всеки
   <span> от assets/js/modules/reservations.js стават отделни редове – без <br>,
   без нови клетки в таблицата и без промяна в броя на колоните. Празните
   интервали между баджовете flex-ът не ги рендира (анонимен елемент само с
   интервали не се показва), затова между тях има точно една „пролука“.
   Баджовете пазят инлайн стиловете си (цвят/радиус/шрифт) – тук не се пипат,
   само се подреждат по вертикала. */
.status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.status-stack > span {
    max-width: 100%;
}

.cell-line { display: block; line-height: 1.3; }

.cell-line--muted { color: var(--text-muted); font-size: 0.85rem; }

/* Нулева/незначителна стойност – клетката не се набива на очи. */
.cell-muted { color: var(--text-muted); }

/* ============================================================
   ЕТАЖЕН ПЛАН В МОДАЛА
   ============================================================ */
#transfer-floor-plan .room {
    border: 1px solid var(--border-color);
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    min-width: 120px;
    transition: background 0.3s, border-color 0.3s;
}
#transfer-floor-plan .room.available { background: var(--room-available-bg); }
#transfer-floor-plan .room.occupied { background: var(--room-occupied-bg); opacity: 0.6; }
#transfer-floor-plan .bed {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: background 0.3s, color 0.3s;
}
#transfer-floor-plan .bed.free { background: var(--bed-free-bg); color: #fff; cursor: pointer; }
#transfer-floor-plan .bed.taken { background: var(--bed-taken-bg); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
    header { flex-direction:column; text-align:center; gap:10px; }
    nav ul { justify-content:center; }
    .user-info { flex-wrap:wrap; justify-content:center; }
}
/* ============================================================
   СТРУКТУРА – СПЕЦИФИЧНИ СТИЛОВЕ
   ============================================================ */
.structure-forms-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.structure-form-container {
    flex: 1;
    min-width: 250px;
    background: var(--bg-card);
    padding: 15px;
    border-radius: 8px;
    transition: background 0.3s;
}
.structure-form-container h3 {
    color: var(--text-primary);
}
.structure-form-container input,
.structure-form-container select {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-primary);
    box-sizing: border-box;
}
.structure-form-container button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}
.structure-form-container button:hover {
    opacity: 0.8;
}

.floor-item {
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary);
    padding-left: 15px;
    background: var(--bg-card);
    border-radius: 4px;
    padding: 15px;
    transition: background 0.3s, border-color 0.3s;
}
.floor-item h4 {
    color: var(--text-primary);
}
.floor-item .no-rooms {
    color: var(--text-muted);
    font-style: italic;
}

.room-item {
    margin-left: 20px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 5px;
    border: 1px solid var(--border-color);
    transition: background 0.3s, border-color 0.3s;
}
.room-item .room-status {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}
.room-item .status-active {
    color: var(--success-text);
    background: var(--success-soft);
}
.room-item .status-maintenance {
    color: var(--warning-text);
    background: var(--warning-bg);
}
.room-item .status-dirty {
    color: var(--danger-text);
    background: var(--danger-soft);
}

.btn-edit-small, .btn-delete-small {
    padding: 2px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: 0.3s;
    margin-left: 5px;
}
.btn-edit-small {
    background: var(--color-warning);
    color: #fff;
}
.btn-delete-small {
    background: var(--color-danger);
    color: #fff;
}
.btn-edit-small:hover, .btn-delete-small:hover {
    opacity: 0.8;
}

.beds-list {
    margin-left: 20px;
    font-size: 0.9rem;
    margin-top: 5px;
}
.bed-item {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: background 0.3s, border-color 0.3s;
}
.bed-item.bed-active {
    background: var(--room-available-bg);
    border-color: var(--color-success);
}
.bed-item.bed-inactive {
    background: var(--room-occupied-bg);
    border-color: var(--color-danger);
}
.btn-edit-bed, .btn-delete-bed {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 3px;
    color: var(--text-primary);
    transition: color 0.3s;
}
.btn-edit-bed:hover { color: var(--color-warning); }
.btn-delete-bed:hover { color: var(--color-danger); }

.btn-delete-floor {
    background: var(--color-danger);
    color: #fff;
    border: none;
    padding: 4px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}
.btn-delete-floor:hover {
    opacity: 0.8;
}
/* ============================================================
   УИКЕНД НАДЦЕНКА – НОВА СЕКЦИЯ В НАСТРОЙКИТЕ
   ============================================================ */

/* Бутон за таб "Уикенд надценка" */
.btn-tab-weekend {
    background: var(--color-accent);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-tab-weekend:hover {
    background: var(--color-accent-hover);
    opacity: 0.9;
}

/* Контейнер на формата за уикенд настройки */
.weekend-settings-container {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: background 0.3s, border-color 0.3s;
    margin-bottom: 15px;
}

/* Заглавие и описание */
.weekend-settings-container h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}
.weekend-settings-container .subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* Форма – грид с две колони */
.weekend-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    align-items: end;
}
@media (max-width: 600px) {
    .weekend-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Групиране на полета */
.weekend-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.weekend-form-group label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.weekend-form-group input {
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.3s, background 0.3s;
    width: 100%;
    box-sizing: border-box;
}
.weekend-form-group input:focus {
    border-color: var(--input-focus);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.weekend-form-group small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Бутон за запазване */
.btn-save-weekend {
    background: var(--color-success);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
    white-space: nowrap;
}
.btn-save-weekend:hover {
    opacity: 0.8;
}
.dark-theme .btn-save-weekend {
    background: var(--color-success);
}
.dark-theme .btn-save-weekend:hover {
    background: var(--color-success);
}

/* Съобщение след запазване */
.weekend-message {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: 500;
}
.weekend-message.success {
    background: var(--success-soft);
    color: var(--success-text);
    border-left: 4px solid var(--color-success);
}
.weekend-message.error {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-left: 4px solid var(--color-danger);
}

/* Помощен текст под формата */
.weekend-help {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}
.weekend-help strong {
    color: var(--text-secondary);
}
/* ============================================================
   МОДАЛИ – разширени стилове
   ============================================================ */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--modal-overlay);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-in-out;
}

.modal-content {
    background: var(--modal-bg);
    padding: 25px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideDown 0.3s ease-out;
    transition: background 0.3s;
    position: relative;
}

.modal-content h3, .modal-content h2 {
    color: var(--text-primary);
    margin-top: 0;
}

.modal-content p {
    color: var(--text-secondary);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.3s;
}
.modal-close:hover {
    color: var(--color-danger);
}

/* Бутони в модалите */
.btn-confirm {
    background: var(--color-success);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.3s;
}
.btn-confirm:hover {
    opacity: 0.8;
}

.btn-cancel {
    background: var(--color-neutral);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.3s;
}
.btn-cancel:hover {
    opacity: 0.8;
}

/* Форми в модалите */
.modal-content form label {
    display: block;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-secondary);
}
.modal-content form input,
.modal-content form select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.3s, background 0.3s;
}
.modal-content form input:focus,
.modal-content form select:focus {
    border-color: var(--input-focus);
    outline: none;
}

/* Съобщения в модалите */
.modal-content .success {
    color: var(--success-text);
    background: var(--success-soft);
    padding: 10px;
    border-radius: 4px;
}
.modal-content .error {
    color: var(--danger-text);
    background: var(--danger-soft);
    padding: 10px;
    border-radius: 4px;
}

/* Избрано място */
.selected-place {
    font-weight: bold;
    color: var(--success-text);
    margin-top: 5px;
}

/* Етажен план в модала */
#floor-plan-modal .room,
#transfer-floor-plan-container .room {
    border: 1px solid var(--border-color);
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    min-width: 120px;
    cursor: pointer;
    transition: 0.2s;
}
#floor-plan-modal .room.available,
#transfer-floor-plan-container .room.available {
    background: var(--room-available-bg);
    border-color: var(--color-success);
}
#floor-plan-modal .room.occupied,
#transfer-floor-plan-container .room.occupied {
    background: var(--room-occupied-bg);
    border-color: var(--color-danger);
    opacity: 0.6;
    cursor: not-allowed;
}
#floor-plan-modal .room .bed,
#transfer-floor-plan-container .room .bed {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
#floor-plan-modal .room .bed.free,
#transfer-floor-plan-container .room .bed.free {
    background: var(--bed-free-bg);
    color: #fff;
}
#floor-plan-modal .room .bed.free:hover,
#transfer-floor-plan-container .room .bed.free:hover {
    box-shadow: 0 0 8px var(--success-ring);
}
#floor-plan-modal .room .bed.taken,
#transfer-floor-plan-container .room .bed.taken {
    background: var(--bed-taken-bg);
    color: #fff;
    cursor: not-allowed;
}
#floor-plan-modal .room .bed.maintenance,
#transfer-floor-plan-container .room .bed.maintenance {
    background: var(--color-warning);
    color: #fff;
    cursor: not-allowed;
}
#floor-plan-modal .rooms-grid,
#transfer-floor-plan-container .rooms-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}
#floor-plan-modal .floor,
#transfer-floor-plan-container .floor {
    margin-bottom: 20px;
}

/* Дубликатът „Цветни блокчета за резервации“ е премахнат –
   .booking-block се дефинира еднократно по-горе (модалът за резервации). */

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* ============================================================
   ДОПЪЛНИТЕЛНИ СТИЛОВЕ ЗА ТЪМНА ТЕМА (partner_details и подобни)
   ============================================================ */

/* Тъмната тема е дефинирана ЕДНОКРАТНО в `body.dark-theme` в началото на
   файла. Вторият, дублиращ списък с токени тук е премахнат – иначе две места
   трябва да се поддържат в синхрон при всяка промяна на палитрата.
   Компонентните корекции за тъмна тема продължават да се пишат с
   `body.dark-theme` по-долу. */

/* Специфични корекции за елементите в partner_details.php */

/* Обобщаващи карти */
body.dark-theme .summary-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-theme .summary-card .label {
    color: var(--text-secondary);
}
body.dark-theme .summary-card .value {
    color: var(--text-primary);
}
body.dark-theme .summary-card.balance-card .value {
    color: var(--success-text);
}
body.dark-theme .summary-card.auto-card .value {
    color: var(--accent-text);
}
body.dark-theme .summary-card.active-card .value {
    color: var(--primary-text);
}

/* Филтри */
body.dark-theme .filters-row {
    background: var(--bg-card);
    border-color: var(--border-color);
}
body.dark-theme .filters-row label {
    color: var(--text-secondary);
}
body.dark-theme .filters-row input,
body.dark-theme .filters-row select {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}
body.dark-theme .filters-row input:focus,
body.dark-theme .filters-row select:focus {
    border-color: var(--input-focus);
}

/* Бутони за връщане */
body.dark-theme .btn-back {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
body.dark-theme .btn-back:hover {
    background: var(--bg-hover);
}
body.dark-theme .btn-back.primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Бутон за депозит и плащания */
body.dark-theme .btn-deposit {
    background: var(--color-success);
}
body.dark-theme .btn-payments {
    background: var(--color-accent);
}

/* Таблици */
body.dark-theme table th {
    background: var(--table-header);
    color: var(--text-primary);
}
body.dark-theme table td {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}
body.dark-theme .guest-name {
    color: var(--text-primary);
}

/* Визуално разграничение на редовете */
body.dark-theme .booking-active td {
    background-color: var(--room-available-bg) !important;
}
body.dark-theme .booking-past td {
    background-color: var(--room-occupied-bg) !important;
    opacity: 0.8;
}
body.dark-theme .booking-future td {
    background-color: var(--info-soft) !important;
}

/* Badge статуси */
body.dark-theme .badge-status.future {
    background: var(--info-soft);
    color: var(--info-text);
}
body.dark-theme .badge-status.active {
    background: var(--success-soft);
    color: var(--success-text);
}
body.dark-theme .badge-status.past {
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* Модали */
body.dark-theme .modal-content {
    background: var(--modal-bg);
}
body.dark-theme .modal-content h2,
body.dark-theme .modal-content h3 {
    color: var(--text-primary);
}
body.dark-theme .modal-content p,
body.dark-theme .modal-content label {
    color: var(--text-secondary);
}
body.dark-theme .modal-content input,
body.dark-theme .modal-content select {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}
body.dark-theme .modal-content input:focus,
body.dark-theme .modal-content select:focus {
    border-color: var(--input-focus);
}
body.dark-theme .modal-content .btn-cancel {
    background: var(--color-neutral);
}
body.dark-theme .modal-content .btn-confirm {
    background: var(--color-success);
}

/* Модал за история на плащанията */
body.dark-theme #payment-history-modal .modal-content table {
    color: var(--text-secondary);
}
body.dark-theme #payment-history-modal .modal-content th {
    background: var(--table-header);
    color: var(--text-primary);
}

/* Модал за редакция на партньор – кредитен баланс */
body.dark-theme #edit-partner-modal .modal-content div[style*="background:var(--bg-card)"] {
    background: var(--bg-card) !important;
    border-color: var(--color-success);
}
body.dark-theme #edit-credit-balance-display {
    color: var(--success-text) !important;
}

/* Скролбар за тъмна тема (опционално) */
body.dark-theme::-webkit-scrollbar {
    width: 8px;
}
body.dark-theme::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
body.dark-theme::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
body.dark-theme::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 16px 25px;
    margin-top: 40px;
    border-top: 2px solid var(--border-color);
    background: var(--bg-footer, var(--bg-secondary));
    color: var(--text-footer, var(--text-secondary));
    font-size: 0.9rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    border-radius: 0 0 8px 8px;
}

.footer-left {
    flex: 1;
    min-width: 200px;
}

.footer-left strong {
    color: var(--text-primary);
    font-weight: 600;
}

.footer-right {
    flex-shrink: 0;
}

.footer-manual-link {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 6px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s, opacity 0.3s;
    font-size: 0.9rem;
}

.footer-manual-link:hover {
    opacity: 0.8;
    background: var(--color-primary-dark, #1d4ed8);
}

/* Тъмна тема – специфични настройки, ако променливите не са достатъчни */
.dark-theme .app-footer {
    background: var(--bg-footer, #172033);
    border-top-color: var(--border-color-dark, #475569);
}

.dark-theme .footer-manual-link {
    background: var(--color-primary-dark, #1d4ed8);
}

/* Скрит елемент – задължително с !important, защото авторският
   display: inline-block на .footer-manual-link иначе отменя
   атрибута [hidden] от браузъра. */
[hidden] {
    display: none !important;
}

/* Бутон „📲 Инсталирай“ – инсталиране на начален екран (PWA) */
.footer-install-btn {
    background: var(--color-success);
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-right: 10px;
}
.footer-install-btn:hover {
    background: var(--color-success);
    opacity: 0.8;
}

/* Адаптивност за малки екрани */
@media (max-width: 600px) {
    .app-footer {
        flex-direction: column;
        text-align: center;
        padding: 14px 18px;
    }
    .footer-left {
        min-width: unset;
    }
}
/* ============================================================
   CRON СТАТУС ИНДИКАТОРИ
   ============================================================ */
.cron-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
}

.cron-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.cron-status-item .cron-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.cron-status-item .cron-dot {
    font-size: 1.2rem;
    line-height: 1;
    transition: 0.3s;
}

.cron-status-item .cron-status-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ★ I3.8d.2b-F: изричното стартиране на автоматична задача (само за роли с
   правото cron.trigger). Зареждането на таблото НЕ стартира задачи. */
.cron-status-item .cron-run-btn {
    margin-left: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-surface, transparent);
    color: var(--text-secondary);
    cursor: pointer;
}

.cron-status-item .cron-run-btn:hover:not(:disabled) {
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

.cron-status-item .cron-run-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.cron-status-hint {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.dark-theme .cron-status-item .cron-label {
    color: var(--text-secondary);
}

.dark-theme .cron-status-item .cron-status-text {
    color: var(--text-muted);
}

/* ============================================================
   ГРИД КЛАСОВЕ ЗА ФОРМИ (заместват инлайн grid стиловете)
   Използват се от всички JS модули и от partner_details.php.
   Мобилната адаптация (една колона на телефон) е в
   assets/css/responsive.css – не тук, за да не се пипа
   десктоп изгледът.
   ============================================================ */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* Дете на .form-grid-2, което заема целия ред (и двете колони) */
.form-grid-full { grid-column: 1 / 3; }
/* Дете на .form-grid-2, което заема само лявата/дясната колона */
.form-col-1 { grid-column: 1 / 2; }
.form-col-2 { grid-column: 2 / 3; }

/* Табло – етажен план на самостоятелен ред (цялата ширина) */
.dash-row-floor-plan {
    width: 100%;
}
/* Табло – две колони на новия ред (списъци | партньорски баланси) */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* Децата на грида не бива да „изтичат“ към страницата */
.dash-grid-2 > * {
    min-width: 0;
}

/* ============================================================
   МОБИЛНА ПОДГОТОВКА НА ТАБЛИЦИ
   .table-scroll – обвивка (добавя се автоматично от main.js), за да
   скролва само таблицата, а не цялата страница на телефон.
   .table-cards  – таблица, която на телефон се показва като карти
   (етикетите идват от data-label, добавен от main.js).
   ============================================================ */
.table-scroll {
    max-width: 100%;
}
.table-cards {
    width: 100%;
}
/* ============================================================
   ПОЛИТИКА ПО ПОЛ (2026-09-30)
   ============================================================
   Използва се от етажния план (reservations.js, availability.js,
   FloorPlanModal.js, TransferFloorPlanModal.js) и от структурата/клиентите.

   .bed.gender-blocked / .room.gender-blocked – мястото е СВОБОДНО, но полът на
   госта не съвпада с политиката на стаята (сървърът връща gender_allowed=false).
   Такова място не може да се избере; администратор може да наложи
   „⚠️ Смесено настаняване“ (override), който се записва в booking_logs.
   ============================================================ */
.bed.gender-blocked,
.room.gender-blocked {
    background: repeating-linear-gradient(
        45deg,
        var(--room-occupied-bg),
        var(--room-occupied-bg) 6px,
        var(--bg-secondary) 6px,
        var(--bg-secondary) 12px
    ) !important;
    color: var(--text-secondary) !important;
    border: 1px dashed var(--color-warning) !important;
    cursor: not-allowed !important;
    opacity: 0.85;
    position: relative;
}

.bed.gender-blocked::after,
.room.gender-blocked::after {
    content: ' 🚫';
    font-size: 0.75rem;
}

.gender-blocked-note {
    color: var(--warning-text);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   ИКОНА ЗА РЕАЛНАТА ЗАЕТОСТ ПО ПОЛ (Вариант A, 2026-10-09)
   ------------------------------------------------------------
   Горе вдясно във всяка карта на стая в етажния план (табло, таб „Наличност“,
   нова резервация, преместване, модалите на guest_details.php).
   Показва КОЙ Е НАСТАНЕН в стаята за периода (от gender_state на сървъра):
     🚺 само жени · 🚹 само мъже · 🚺🚹 смесено · ❓ неизвестен пол.
   Празна стая → без икона. Това е РАЗЛИЧНО от .gender-badge, който показва
   ПОЛИТИКАТА на стаята и се появява само при gender_enforced. */
.room-gender-corner {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: -0.15em;
    cursor: help;
    user-select: none;
    pointer-events: none;   /* не краде клика върху стаята/леглото */
}

/* Забележка: при .room.occupied { opacity: 0.6 } цялата карта (и тази икона)
   се вижда на 60% – това е съществуващото поведение на етажния план и тук НЕ се
   променя (opacity на родителя не може да се „върне“ от дете). */

.gender-badge {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.gender-badge.gender-policy-female,
.gender-badge.gender-female { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.gender-badge.gender-policy-male,
.gender-badge.gender-male   { background: var(--color-primary-soft); color: var(--primary-text); border-color: var(--color-primary-border); }
.gender-badge.gender-policy-any,
.gender-badge.gender-unspecified { background: var(--bg-secondary); color: var(--text-secondary); }
.gender-badge.gender-mixed { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }

/* Phase 5: the configured policy (including occupancy-based) and the actual
   reservation composition are deliberately separate visual channels. */
.gender-policy-meta { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.gender-badge.gender-composition-female_only,
.gender-badge.gender-composition-male_only { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); }
.gender-badge.gender-composition-mixed { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.gender-badge.gender-composition-unknown { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-color); }
.gender-policy-muted { color: var(--text-muted); font-size: 0.85rem; line-height: 1.35; }
.gender-policy-summary,
.gender-policy-scope { margin-top: 6px; padding: 8px 10px; border-radius: 4px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.85rem; }
.gender-policy-status { margin-top: 8px; padding: 8px 10px; border-left: 4px solid var(--color-info); border-radius: 4px; background: var(--bg-secondary); font-size: 0.85rem; line-height: 1.35; }
.gender-policy-status.is-ok { border-left-color: var(--color-success); background: var(--room-available-bg); }
.gender-policy-status.is-warn { border-left-color: var(--color-warning); background: var(--warning-bg); }
.gender-policy-status.is-error { border-left-color: var(--color-danger); background: var(--room-occupied-bg); }
.gender-policy-new-booking { border-top: 1px dashed var(--border-color); padding-top: 10px; }
.gender-policy-overlay { z-index: 1200; }
.gender-policy-dialog { max-width: 760px; width: min(92vw, 760px); max-height: 86vh; overflow-y: auto; position: relative; }
.gender-policy-facts { display: grid; gap: 4px; margin: 10px 0; font-size: 0.9rem; }
.gender-policy-fieldset { border: 1px solid var(--border-color); border-radius: 6px; margin: 10px 0; padding: 10px; }
.gender-policy-fieldset legend { padding: 0 4px; font-weight: 600; }
.gender-policy-auth-type,
.gender-policy-participant-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.gender-policy-auth-type span,
.gender-policy-participant-row span { flex: 1; }
.gender-policy-participant-row { flex-wrap: wrap; }
.gender-policy-role-pair { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.gender-policy-role-pair label { display: inline-flex; gap: 3px; align-items: center; font-size: 0.78rem; color: var(--text-secondary); }
.gender-policy-participant-row select { min-width: 130px; }
.gender-policy-field { display: block; margin: 10px 0; font-weight: 600; }
.gender-policy-field textarea,
.gender-policy-field select { display: block; width: 100%; margin-top: 4px; font-weight: normal; }
.gender-policy-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gender-policy-message { margin-top: 10px; padding: 8px 10px; border-radius: 4px; font-size: 0.9rem; }
.gender-policy-message.is-error { background: var(--room-occupied-bg); color: var(--text-danger); }
.gender-policy-message.is-success { background: var(--room-available-bg); color: var(--color-success); }
.gender-policy-members { display: grid; gap: 6px; margin: 10px 0; }
.gender-policy-member { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 4px; }
.gender-policy-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.gender-policy-add select { flex: 1; min-width: 220px; }

.floor-plan-legend .gender-badge { margin-right: 5px; }

/* Тъмна тема: само женският бадж има нужда от собствен розов нюанс –
   мъжкият вече ползва акцентните променливи (--color-primary-soft и др.). */
body.dark-theme .gender-badge.gender-policy-female,
body.dark-theme .gender-badge.gender-female { background: rgba(236,72,153,0.18); color: #f9a8d4; border-color: rgba(236,72,153,0.40); }

/* ============================================================
   ДОКУМЕНТИ НА ГОСТ (Фаза 1–2, 2026-10-03/04)
   Ползва се от assets/js/modules/guest_documents.js:
     • guest_details.php  → секция „📎 Документи на гост“;
     • index.php#clients  → модалът „✏️ Редакция на гост“.
   Всички цветове идват от променливите по-горе, за да работят и в тъмна тема.
   ============================================================ */
.guest-docs { display:flex; flex-direction:column; gap:12px; }

.guest-docs-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.guest-docs-title { font-weight:600; color:var(--text-primary); }
.guest-docs-count { color:var(--text-muted); font-weight:600; }
.guest-docs-note { margin:0; color:var(--text-muted); font-size:0.85rem; }

.guest-docs-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:12px;
}

.guest-docs-card {
    display:flex; flex-direction:column; gap:8px;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:10px;
}

.guest-docs-thumb {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:130px;
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    border-radius:6px;
    overflow:hidden;
}
.guest-docs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.guest-docs-icon { font-size:2.4rem; line-height:1; }
.guest-docs-ext {
    position:absolute; right:4px; bottom:4px;
    background:rgba(0,0,0,0.65); color:#fff;
    font-size:0.7rem; font-weight:600; letter-spacing:0.5px;
    padding:1px 5px; border-radius:4px;
}

.guest-docs-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.guest-docs-name { color:var(--text-primary); word-break:break-word; }
.guest-docs-meta { color:var(--text-secondary); font-size:0.8rem; word-break:break-word; }

.guest-docs-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }

.guest-docs-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--bg-secondary); color:var(--text-primary);
    border:1px solid var(--border-color); border-radius:6px;
    padding:5px 9px; font-family:inherit; font-size:0.82rem;
    text-decoration:none; cursor:pointer;
}
.guest-docs-btn:hover { background:var(--bg-hover); }
.guest-docs-btn.primary { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.guest-docs-btn.danger { color:var(--color-danger); border-color:var(--color-danger); }
.guest-docs-btn:disabled { opacity:0.6; cursor:default; }

/* Форма за качване и форма за редакция на метаданните (JavaScript ги строи). */
.guest-docs-upload,
.guest-docs-edit-form { display:flex; flex-direction:column; gap:8px; }
.guest-docs-field { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.guest-docs-field input[type="file"] { flex:1 1 100%; }
.guest-docs-upload select,
.guest-docs-upload input[type="text"],
.guest-docs-edit-form select,
.guest-docs-edit-form input[type="text"] {
    background:var(--input-bg); color:var(--text-primary);
    border:1px solid var(--input-border); border-radius:6px;
    padding:6px 8px; font-family:inherit; font-size:0.85rem;
    max-width:100%; flex:1 1 160px;
}
.guest-docs-edit form,
.guest-docs-edit-form {
    margin-top:8px; padding-top:8px;
    border-top:1px dashed var(--border-color);
}
.guest-docs-msg { font-size:0.85rem; word-break:break-word; }

/* ------------------------------------------------------------
   Фаза 2 (2026-10-04): качване на два етапа.
   .guest-docs-staged   – приетият („етап“) файл: preview + данни + „Отмени“.
   .guest-docs-progress – лента за напредък (i = запълване, b = процент).
   И двата се скриват с атрибута hidden – глобалното правило [hidden] го
   прави с !important, затова тук НЕ се ползва !important.
   ------------------------------------------------------------ */
.guest-docs-staged {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:var(--bg-secondary);
    border:1px dashed var(--color-primary);
    border-radius:8px;
    padding:8px 10px;
}
.guest-docs-staged-preview {
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px;
    background:var(--bg-hover);
    border:1px solid var(--border-color);
    border-radius:6px;
    overflow:hidden;
}
.guest-docs-staged-img { width:100%; height:100%; object-fit:cover; display:block; }
.guest-docs-staged-icon { font-size:1.6rem; line-height:1; }
.guest-docs-staged-body { display:flex; flex-direction:column; gap:2px; flex:1 1 180px; min-width:0; }

.guest-docs-progress {
    position:relative;
    height:16px;
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    border-radius:999px;
    overflow:hidden;
}
.guest-docs-progress i {
    display:block; height:100%; width:0;
    background:var(--color-primary);
    transition:width 0.15s linear;
}
.guest-docs-progress b {
    position:absolute; inset:0; z-index:1;
    display:flex; align-items:center; justify-content:center;
    font-size:0.68rem; font-weight:600; color:var(--text-primary);
    line-height:1;
    text-shadow:0 0 3px var(--bg-card);
}

/* Панелът в модала: отделя документите от полетата на формата. */
.edit-guest-documents { margin-top:15px; padding-top:10px; border-top:1px solid var(--border-color); }

/* Лайтбокс (преглед): тъмна завеса – еднаква в светла и тъмна тема. */
.guest-docs-lightbox {
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.75);
    padding:20px;
}
.guest-docs-lightbox-panel {
    display:flex; flex-direction:column; gap:10px;
    width:100%; max-width:900px; max-height:90vh;
    background:var(--modal-bg); color:var(--text-primary);
    border:1px solid var(--border-color); border-radius:8px;
    padding:12px;
}
.guest-docs-lightbox-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.guest-docs-lightbox-body { overflow:auto; text-align:center; }
.guest-docs-lightbox-img { max-width:100%; max-height:75vh; border-radius:6px; }
.guest-docs-lightbox-frame { width:100%; height:75vh; border:1px solid var(--border-color); border-radius:6px; }

@media (max-width:600px) {
    .guest-docs-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
    .guest-docs-lightbox { padding:8px; }
    .guest-docs-lightbox-frame { height:65vh; }
}