:root {
--bg: #f8f9fb;
--nav-bg: #0f172a;
--nav-bg2: #1e293b;
--card: #f0ede8;
--card2: #e8e4de;
--border: #d0cbc3;
--gold: #2c2c2c;
--gold-light: #1a1a1a;
--text: #1a1a1a;
--text-card: #1a1a1a;
--muted: #888880;
--green: #25D366;
--blue: #1877F2;
--purple: #7360F2;
--teal: #229ED9;
--indigo: #3A5BC7;
}
html { background: #f8f9fb; }
* { box-sizing: border-box; margin: 0; padding: 0; }
.cal-grid a, .cal-grid *[x-apple-data-detectors],
#cal-days-hdr, #cal-days-hdr *, #clean-days-hdr, #clean-days-hdr * { text-decoration: none !important; color: inherit !important; pointer-events: none; }
x-apple-data-detectors { text-decoration: none !important; color: inherit !important; }
.cal-grid, .cal-grid * { -webkit-text-decoration: none !important; }
body {
background: #f8f9fb;
color: var(--text);
font-family: 'DM Sans', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 0 0 60px;
touch-action: pan-x pan-y;
}
.app { width: 100%; max-width: 420px; }
/* ── DESKTOP SIDEBAR NAV ─────────────────────────────── */
.desktop-nav { display: none; }
#gantt-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; box-sizing: border-box; }
.desktop-user-menu { position: relative; }
.desktop-user-dropdown {
display: none;
position: fixed;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(15,30,61,0.18);
min-width: 220px;
z-index: 9999;
overflow: hidden;
}
.desktop-user-dropdown.open { display: block; }
.desktop-user-dropdown-header {
padding: 12px 16px 10px;
border-bottom: 1px solid #eaecf0;
}
.desktop-user-dropdown-header .dud-name {
font-size: 13px; font-weight: 700; color: #0f172a;
font-family: ‘DM Sans’, sans-serif;
}
.desktop-user-dropdown-header .dud-role {
font-size: 11px; color: #94a3b8;
font-family: ‘DM Sans’, sans-serif; margin-top: 1px;
}
.desktop-user-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px; font-size: 13px; font-weight: 600;
font-family: ‘DM Sans’, sans-serif; cursor: pointer;
border: none; background: none; width: 100%; text-align: left;
color: #0f172a; transition: background 0.15s;
}
.desktop-user-dropdown-item:hover { background: #f7f8fa; }
.desktop-user-dropdown-item.danger { color: #e53e3e; }
.desktop-user-dropdown-item.danger:hover { background: #fff5f5; }
.desktop-user-dropdown-sep { height: 1px; background: #eaecf0; }
.desktop-nav-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 16px; }
.desktop-nav-btn {
display: flex; align-items: center; gap: 14px;
padding: 12px 20px; border: none; background: none;
font-size: 14px; font-weight: 500;
color: rgba(255,255,255,0.7); cursor: pointer;
font-family: ‘DM Sans’, sans-serif;
text-align: left; white-space: nowrap; width: 100%;
transition: background 0.15s, color 0.15s;
}
.desktop-nav-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }
.desktop-nav-btn.active { background: rgba(255,255,255,0.12); color: #fff; }
.desktop-nav-btn svg { flex-shrink: 0; opacity: 0.7; }
.desktop-nav-btn.active svg { opacity: 1; }
.desktop-nav-header {
padding: 28px 20px 20px;
background: linear-gradient(135deg, #1a2e5a 0%, #0f172a 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 8px;
}
.desktop-nav-logo {
width: 48px; height: 48px; background: rgba(255,255,255,0.1);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.15); overflow: hidden;
}
.desktop-nav-name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 2px; font-family: ‘DM Sans’, sans-serif; }
.desktop-nav-sub { font-size: 11px; color: rgba(255,255,255,0.4); font-family: ‘DM Sans’, sans-serif; }
.desktop-nav-logout {
margin: auto 16px 16px;
display: flex; align-items: center; gap: 12px;
padding: 11px 16px; cursor: pointer;
color: rgba(255,100,100,0.8); font-size: 13px; font-weight: 600;
font-family: ‘DM Sans’, sans-serif; transition: all 0.15s;
border: 1px solid rgba(255,100,100,0.2); background: none;
border-radius: 12px; width: calc(100% - 32px);
}
.desktop-nav-logout:hover { background: rgba(255,100,100,0.1); color: #ff6464; }
/* ── TABLET (768px – 1099px) ─────────────────────────── */
@media (min-width: 768px) {
body { padding: 20px 32px 40px; overflow-x: hidden; }
.app { max-width: 780px; margin: 0 auto; }
.panel-content { padding: 20px 24px; }
.panel-section-header { padding: 18px 24px 14px; }
.tabs { overflow-x: auto; }
#cal-gantt-view { margin: 0 -24px; padding: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#gantt-container { overflow-x: visible; }
/* Avatar dropdown */
.desktop-user-menu { position: relative; display: flex; align-items: center; }
}
/* ── DESKTOP (1100px+) ───────────────────────────────── */
@media (min-width: 1100px) {
body {
padding: 24px 32px 40px;
justify-content: flex-start;
align-items: flex-start;
}
.app {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr;
min-height: calc(100vh - 48px);
}
/* Topbar only over right column */
.topbar {
grid-column: 2;
grid-row: 1;
}
/* Tabs hidden on desktop */
.tabs {
display: none !important;
}
/* Sidebar spans all rows */
.desktop-nav {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
background: #0f172a;
border-right: none;
grid-column: 1;
grid-row: 1 / -1;
align-self: stretch;
border-radius: 16px 0 0 16px;
overflow: hidden;
}
.app {
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* Panels */
.panel {
grid-column: 2;
grid-row: 2;
border-radius: 0 0 16px 0;
display: none;
}
.panel.active {
display: block;
}
.panel-content { padding: 24px 32px; }
.panel-section-header { padding: 20px 32px 14px; }
#cal-monthly-view { max-width: 480px; }
#cal-gantt-view { max-width: 100%; }
/* Hide hamburger and topbar title on desktop */
.topbar-hamburger { display: none !important; }
.topbar-left { display: none !important; }
/* Topbar: avatar on right */
.topbar { justify-content: flex-end !important; padding: 10px 20px; min-height: 52px; }
.desktop-user-menu { margin-left: auto; }
/* Wider modals */
.modal { max-width: 580px !important; }
}
/* ── LARGE DESKTOP (1440px+) ─────────────────────────── */
@media (min-width: 1440px) {
body { padding: 28px 48px 48px; }
.app {
grid-template-columns: 240px 1fr;
max-width: 1600px;
}
.panel-content { padding: 28px 40px; }
}
/* ── TOP BAR ─────────────────────────────────────────── */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px 10px;
background: var(–nav-bg, #0f172a);
position: relative; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-hamburger {
width: 38px; height: 38px; border: none; cursor: pointer;
background: rgba(255,255,255,0.08); border-radius: 8px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
flex-shrink: 0; transition: background 0.15s;
}
.topbar-hamburger:hover { background: rgba(255,255,255,0.14); }
.topbar-hamburger span {
display: block; width: 16px; height: 1.5px;
background: rgba(255,255,255,0.9); border-radius: 2px;
}
.topbar-title {
font-family: ‘DM Sans’, sans-serif;
font-size: 16px; font-weight: 700; color: #fff;
letter-spacing: -0.3px;
}
.topbar-subtitle { font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.3px; }
.topbar-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
border: 1px solid rgba(255,255,255,0.18);
flex-shrink: 0; cursor: pointer;
}
/* Tab strip — ukryty na mobile, widoczny na desktop */
.tabs {
display: flex; overflow-x: auto; gap: 0;
background: #0f172a;
padding: 0 12px 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 16px;
border-radius: 0;
}
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 600px) {
.tabs { display: none; }
.topbar { }
}
.tab {
flex-shrink: 0;
padding: 8px 12px; text-align: center;
font-size: 0; font-weight: 600;
color: rgba(255,255,255,0.5);
cursor: pointer; transition: all 0.18s;
border: none; background: none;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
gap: 6px; line-height: 1; min-height: 38px;
font-family: ‘DM Sans’, sans-serif;
white-space: nowrap;
}
.tab.active {
background: rgba(255,255,255,0.13); color: #fff;
box-shadow: none;
}
.tab:hover:not(.active) { color: rgba(255,255,255,0.8); }
/* TOPBAR RADIUS OVERRIDE */
.topbar { border-radius: 0 !important; }
.tabs { border-radius: 0 !important; }
/* ── DRAWER MENU ─────────────────────────────────────── */
#drawer-backdrop {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.6); z-index: 500;
opacity: 0; transition: opacity 0.25s;
}
#drawer-backdrop.open { display: block; opacity: 1; }
#drawer {
position: fixed; top: 0; left: 0; bottom: 0;
width: 280px; background: linear-gradient(160deg, var(–nav-bg2, #1e293b) 0%, var(–nav-bg, #0f172a) 100%);
z-index: 501; transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
display: flex; flex-direction: column;
padding: 0 0 32px; overflow-y: auto;
}
#drawer.open { transform: translateX(0); }
.drawer-header {
padding: 56px 20px 18px;
background: transparent;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.drawer-app-logo {
width: 48px; height: 48px; background: rgba(255,255,255,0.1);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 12px;
border: 1px solid rgba(255,255,255,0.15);
}
.drawer-app-name {
font-family: ‘DM Sans’, sans-serif;
font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 2px;
}
.drawer-app-sub { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1px; }
.drawer-section-label {
font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
color: rgba(255,255,255,0.25); text-transform: uppercase;
padding: 16px 20px 6px;
}
.drawer-item {
display: flex; align-items: center; gap: 14px;
padding: 13px 20px; cursor: pointer;
color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500;
font-family: ‘DM Sans’, sans-serif; transition: all 0.15s;
border: none; background: none; width: 100%; text-align: left;
}
.drawer-item:hover { background: rgba(255,255,255,0.07); color: #fff; border-left: 3px solid rgba(255,255,255,0.3); padding-left: 17px; }
.drawer-item.active {
background: rgba(255,255,255,0.09); color: #fff;
border-left: 3px solid rgba(255,255,255,0.9); padding-left: 17px;
font-weight: 600;
}
.drawer-item svg { flex-shrink: 0; opacity: 0.6; }
.drawer-item.active svg { opacity: 1; }
.drawer-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 20px; }
.drawer-logout {
margin: auto 20px 0;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; cursor: pointer;
color: rgba(255,100,100,0.8); font-size: 13px; font-weight: 600;
font-family: ‘DM Sans’, sans-serif; transition: all 0.15s;
border: 1px solid rgba(255,100,100,0.2); background: none;
border-radius: 12px; width: calc(100% - 40px);
}
.drawer-logout:hover { background: rgba(255,100,100,0.1); color: #ff6464; }
.drawer-user {
padding: 14px 20px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; align-items: center; gap: 12px;
margin-top: auto;
}
.drawer-user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0;
}
.drawer-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.drawer-user-role { font-size: 11px; color: rgba(255,255,255,0.4); }
/* legacy header kept for login screen only */
.header { display: none; }
/* Section titles (naglowki sekcji panelu) */
.label, .section-title {
font-size: 11px; font-weight: 700;
letter-spacing: 0.5px; color: var(–muted);
text-transform: none; margin-bottom: 10px;
font-family: ‘DM Sans’, sans-serif;
}
/* Field labels (etykiety pol formularza) */
.field-label {
font-size: 10px; font-weight: 600;
letter-spacing: 1.2px; color: var(–muted);
text-transform: uppercase; margin-bottom: 6px;
font-family: ‘DM Sans’, sans-serif;
}
/* Inputs */
.field { margin-bottom: 20px; }
.input-wrap {
display: flex; align-items: center;
background: var(–card2); border: 1px solid var(–border);
border-radius: 10px; overflow: hidden; height: 52px;
box-sizing: border-box;
}
.input-wrap input {
flex: 1; background: none; border: none; outline: none;
padding: 14px 16px; color: var(–text);
font-family: ‘DM Sans’, sans-serif; font-size: 15px;
}
.input-wrap input::placeholder { color: var(–muted); }
.btn-paste {
padding: 8px 12px; margin: 6px;
background: #f7f8fa; border: 1px solid #eaecf0;
border-radius: 8px; color: #0f172a;
font-size: 11px; font-weight: 700;
cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s;
display: flex; align-items: center; gap: 5px;
font-family: ‘DM Sans’, sans-serif;
}
.btn-paste:hover { background: #e8edf8; border-color: #c8d0e0; }
select {
width: 100%; background: var(–card2);
border: 1px solid var(–border); border-radius: 10px;
padding: 0 16px; height: 52px; color: var(–text);
font-family: ‘DM Sans’, sans-serif; font-size: 15px;
outline: none; cursor: pointer; appearance: none;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘12’ height=‘8’ viewBox=‘0 0 12 8’%3E%3Cpath d=‘M1 1l5 5 5-5’ stroke=’%23666’ stroke-width=‘1.5’ fill=‘none’ stroke-linecap=‘round’/%3E%3C/svg%3E”);
background-repeat: no-repeat; background-position: right 16px center;
box-sizing: border-box;
}
select option { background: var(–card); color: var(–text); }
/* PIN display */
.pin-display {
background: var(–card2); border: 1px solid var(–border);
border-radius: 10px; padding: 6px 18px;
text-align: center; margin-bottom: 20px;
display: flex; align-items: center; gap: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pin-display:focus-within {
border-color: #1a1a1a;
box-shadow: 0 0 0 3px rgba(26,26,26,0.1);
}
.pin-digits {
flex: 1; font-size: 36px; font-weight: 300;
letter-spacing: 14px; color: #1a1a1a;
font-family: ‘DM Sans’, sans-serif;
background: none; border: none; outline: none;
text-align: center; width: 100%; padding: 12px 0;
}
.pin-digits::placeholder { color: #ccc; letter-spacing: 8px; font-size: 28px; }
/* Message preview */
.preview-header {
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 10px;
}
.btn-copy-small {
display: flex; align-items: center; gap: 6px;
background: var(–card2); border: 1px solid var(–border);
border-radius: 8px; padding: 7px 12px;
color: var(–text); font-size: 12px; font-weight: 500;
cursor: pointer; transition: all 0.2s;
}
.btn-copy-small:hover { background: #e8e4dd; }
.message-box {
background: var(–card); border: 1.5px solid var(–border);
border-radius: 10px; padding: 16px;
font-size: 14px; line-height: 1.65;
color: var(–text) !important;
white-space: pre-wrap; outline: none;
margin-bottom: 20px; resize: none;
font-family: ‘DM Sans’, sans-serif;
width: 100%; overflow: hidden;
box-sizing: border-box; color-scheme: light; display: block;
}
/* Send buttons */
.send-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-whatsapp {
width: 100%; padding: 15px; border-radius: 10px; border: none;
background: #25D366 !important; color: #fff;
font-size: 15px; font-weight: 600; cursor: pointer;
display: flex; align-items: center; justify-content: center;
gap: 8px; transition: opacity 0.2s;
font-family: ‘DM Sans’, sans-serif;
}
.btn-whatsapp:hover { opacity: 0.9; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-msg {
padding: 13px; border-radius: 10px; border: none;
color: #fff; font-size: 14px; font-weight: 600;
cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 7px; transition: opacity 0.2s;
font-family: ‘DM Sans’, sans-serif;
}
.btn-msg:hover { opacity: 0.85; }
.btn-sms { background: #007AFF !important; }
.btn-viber { background: #7360F2 !important; }
.btn-telegram { background: #229ED9 !important; }
.btn-signal { background: #3A5BC7 !important; }
.btn-copy-text {
width: 100%; padding: 13px 16px; border-radius: 10px;
border: 1px solid #eaecf0; background: #f7f8fa;
color: #0f172a; font-size: 13px; font-weight: 700;
cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 8px; transition: all 0.2s;
font-family: ‘DM Sans’, sans-serif;
}
.btn-copy-text:hover { background: #e8edf8; border-color: #c8d0e0; }
/* Apartments */
.apt-item {
display: flex; flex-direction: column;
background: #ffffff; border: 1px solid #eaecf0;
border-radius: 10px; padding: 14px 16px;
gap: 10px; color: #0f172a; margin-bottom: 10px;
}
.apt-row { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.apt-ical-row { display: flex; align-items: center; gap: 8px; }
.apt-ical-wrap {
flex: 1; display: flex; align-items: center;
background: #f7f8fa; border: 1px solid #eaecf0;
border-radius: 10px; padding: 0 10px; gap: 6px; overflow: hidden;
height: 42px; box-sizing: border-box;
}
.apt-ical-icon { font-size: 13px; flex-shrink: 0; color: #5a6480; display: flex; align-items: center; }
.apt-ical-input {
flex: 1; background: none; border: none; outline: none;
font-size: 11px; color: #0f172a;
font-family: ‘DM Sans’, sans-serif;
padding: 9px 0; min-width: 0;
}
.apt-ical-input::placeholder { color: #94a3b8; }
.apt-ical-ok { color: #16a34a; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.btn-ical-fetch {
width: 36px; height: 36px; background: #0f172a;
border: none; border-radius: 10px; color: #fff;
font-size: 16px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.2s;
}
.btn-ical-fetch:hover { opacity: 0.8; }
.apt-emoji { font-size: 22px; flex-shrink: 0; cursor: pointer; }
.apt-name {
flex: 1; min-width: 0; font-size: 15px; font-weight: 600;
outline: none; background: none; border: none;
color: #0f172a; font-family: ‘DM Sans’, sans-serif;
}
.btn-template {
background: #f7f8fa; border: 1px solid #eaecf0;
border-radius: 8px; padding: 7px 12px; color: #0f172a;
font-size: 12px; font-weight: 600; cursor: pointer;
display: flex; align-items: center; gap: 5px;
white-space: nowrap; transition: all 0.2s;
}
.btn-template:hover { background: #eaecf0; }
.btn-remove {
background: #f7f8fa; border: 1px solid #eaecf0;
border-radius: 10px; padding: 8px 10px; color: #94a3b8;
cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.btn-remove:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.btn-add {
width: 100%; padding: 14px;
border: 1px dashed #d1d5db; border-radius: 10px;
background: none; color: #0f172a;
font-size: 14px; font-weight: 600; cursor: pointer;
transition: all 0.2s; font-family: ‘DM Sans’, sans-serif;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-add:hover { background: #f0f2f7; border-color: #0f172a; }
/* Msg subtabs */
.msg-subtabs {
display: flex; gap: 4px; margin-bottom: 16px;
background: transparent; padding: 0;
border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;
overflow-x: auto; scrollbar-width: none;
}
.msg-subtab {
flex: 1; padding: 10px 8px; background: transparent;
border: none; border-radius: 9px; color: #5a6480;
font-size: 13px; font-weight: 600; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: all 0.2s;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.msg-subtab.active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: none; }
.msg-subtab:hover:not(.active) { background: rgba(255,255,255,0.5); color: #0f172a; }
/* Modal */
.modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.75); z-index: 400;
justify-content: center; align-items: center;
padding: 16px; overflow: hidden;
box-sizing: border-box;
}
.modal-overlay.open { display: flex; }
/* Blokada zoom iOS na inputach w modalach */
.modal input, .modal textarea, .modal select,
.modal-overlay input, .modal-overlay textarea, .modal-overlay select,
.booking-popup-sheet input, .booking-popup-sheet textarea {
  font-size: 16px !important;
  touch-action: pan-x pan-y;
}

.modal {
background: #ffffff;
border-radius: 14px; padding: 24px; width: 100%; box-shadow: 0 4px 24px rgba(15,23,42,0.10);
max-width: 480px; position: relative; z-index: 401;
box-sizing: border-box; margin: auto;
max-height: calc(100vh - 32px); overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
.modal-overlay { padding: 8px; }
.modal { border-radius: 12px; padding: 16px; }
}
@media (min-width: 768px) {
.modal-overlay { align-items: center; padding: 24px; }
.modal-wide { max-width: 1400px; width: calc(100vw - 32px); }
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
}

.modal-close-btn {
position: absolute; top: 14px; right: 14px;
width: 28px; height: 28px; border-radius: 50%;
background: #f1f5f9; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #64748b; line-height: 1;
font-family: ‘DM Sans’, sans-serif; z-index: 10;
}
.modal-close-btn:hover { background: #e2e8f0; color: #0f172a; }

.modal h3 { font-family: ‘DM Sans’, sans-serif; font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.modal p { font-family: ‘DM Sans’, sans-serif; font-size: 13px; color: #94a3b8; margin-bottom: 16px; }
.modal label { font-family: ‘DM Sans’, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #0f172a; text-transform: none; display: block; margin-bottom: 6px; }
#modal-welcome, #modal-welcome-en, #modal-welcome-uk,
#modal-pin, #modal-pin-en, #modal-pin-uk {
width: 100%; background: #ffffff;
border: 1px solid #eaecf0; border-radius: 12px;
padding: 13px; color: #0f172a; font-size: 13px;
line-height: 1.65; font-family: ‘DM Sans’, sans-serif;
resize: none; outline: none; min-height: 80px;
height: auto; margin-bottom: 14px; overflow: hidden;
box-sizing: border-box;
}
#modal-welcome:focus, #modal-welcome-en:focus, #modal-welcome-uk:focus,
#modal-pin:focus, #modal-pin-en:focus, #modal-pin-uk:focus {
border-color: var(–accent, #3b5bdb); box-shadow: 0 0 0 3px rgba(59,91,219,0.1);
}
.modal-actions { display: flex; gap: 10px; }
.btn-save {
flex: 1; padding: 13px; background: #0f172a;
border: none; border-radius: 12px; color: #fff;
font-size: 14px; font-weight: 600; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: opacity 0.2s;
}
.btn-save:hover { opacity: 0.85; }
.btn-cancel {
padding: 13px 20px; background: #f0f2f7;
border: 1px solid #eaecf0; border-radius: 12px;
color: #5a6480; font-size: 14px; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: all 0.2s;
}
.btn-cancel:hover { background: #eaecf0; }
/* Toast */
.toast {
position: fixed; bottom: 30px; left: 50%;
transform: translateX(-50%) translateY(80px);
background: #1a1a1a; border: 1px solid #333;
color: #fff; padding: 12px 22px; border-radius: 50px;
font-size: 13px; font-weight: 500;
transition: transform 0.3s ease; z-index: 200; white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
@keyframes slideUp {
from { transform: translateX(-50%) translateY(100%); }
to { transform: translateX(-50%) translateY(0); }
}
/* Lang tabs */
.lang-tabs {
display: flex; gap: 0; margin-bottom: 4px;
background: #242424; border-radius: 10px; padding: 4px;
}
.lang-tab {
flex: 1; padding: 10px 8px;
background: rgba(255,255,255,0.06);
border: none;
border-radius: 9px; color: rgba(255,255,255,0.65);
font-size: 13px; font-weight: 600; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
line-height: 1.2;
}
.lang-tab.active {
background: var(–card); border-color: transparent;
color: #1a1a1a; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.lang-tab:hover:not(.active) { background: rgba(255,255,255,0.12); color: #ffffff; }
/* iCal */
.ical-apt-item {
background: #ffffff; border: 1px solid #eaecf0;
border-radius: 10px; padding: 14px 16px;
margin-bottom: 10px; color: #0f172a;
}
.ical-apt-label {
font-size: 14px; font-weight: 700; color: #0f172a;
margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
/* Calendar pills */
.cal-apt-pills {
display: flex; gap: 4px; margin-bottom: 16px;
background: transparent; border-radius: 0;
padding: 0; flex-wrap: wrap;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 12px;
}
.cal-apt-pill {
flex: 1; padding: 8px 12px; background: #f9fafb;
border: 1px solid #e5e7eb; border-radius: 8px; color: #5a6480;
font-size: 13px; font-weight: 600; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: all 0.15s;
display: flex; align-items: center; justify-content: center;
white-space: nowrap; gap: 6px; line-height: 1.2;
}
.cal-apt-pill.active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: none; }
.cal-apt-pill:hover:not(.active) { background: rgba(255,255,255,0.5); color: #0f172a; }
/* Calendar */
.cal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; padding: 4px 0;
}
.cal-nav {
width: 36px; height: 36px;
background: #f9fafb; border: 1px solid #e5e7eb;
border-radius: 8px; font-size: 18px; color: #5a6480;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all 0.15s; font-family: ‘DM Sans’, sans-serif;
}
.cal-nav:hover { background: rgba(255,255,255,0.2); }
.cal-title { font-size: 15px; font-weight: 700; color: #fff; text-transform: capitalize; letter-spacing: 0.3px; }
.cal-grid { display: block; width: 100%; margin-bottom: 16px; }
.cal-legend {
display: flex; flex-wrap: wrap; gap: 6px 12px;
font-size: 11px; color: #94a3b8; margin-top: 12px;
align-items: center; padding: 8px 0;
border-top: 1px solid #f1f5f9;
}
.legend-dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 2px; margin-right: 5px; flex-shrink: 0;
}
.legend-dot.occupied { background: #0f172a; }
.legend-dot.ical { background: #2563eb; }
.legend-dot.airbnb { background: #e8433a; }
.legend-dot.active-res { background: #16a34a; }
.legend-dot.free { background: #ffffff; border: 1.5px solid #c0c8d8; border-radius: 3px; }
/* View toggle */
.view-toggle-icon {
width: 36px; height: 36px;
border: 1px solid #e5e7eb; border-radius: 8px;
background: #f9fafb; color: #5a6480;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s; padding: 0;
}
.view-toggle-icon:hover { background: #f0f2f7; border-color: #d1d5db; color: #0f172a; }
.view-toggle-icon.active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,0.15); }
.view-toggle-icon:hover:not(.active) { background: #f0f2f7; color: #0f172a; }
/* Booking */
.btn-add-booking {
width: 100%; padding: 13px;
background: #f0ede8; border: 1.5px dashed #d0cbc3;
border-radius: 12px; color: #1a1a1a;
font-size: 14px; font-family: ‘DM Sans’, sans-serif;
font-weight: 600; cursor: pointer; margin-bottom: 12px;
transition: background 0.2s;
}
.btn-add-booking:hover { background: #e8e4dd; }
.booking-popup {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5); z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-popup-box {
background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.13);
width: 100%; max-width: 360px;
font-family: ‘DM Sans’, sans-serif; color: #0f172a;
border: 1px solid #eaecf0;
}
.booking-popup-title {
font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #0f172a;
display: flex; justify-content: space-between; align-items: center;
}
.booking-popup-close {
background: #f0f2f7; border: none; border-radius: 50%;
width: 30px; height: 30px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #5a6480; line-height: 1; padding: 0; flex-shrink: 0;
}
.booking-popup-row {
display: flex; gap: 12px; align-items: flex-start;
padding: 10px 0; border-bottom: 1px solid #eaecf0; font-size: 14px;
}
.booking-popup-row:last-child { border-bottom: none; }
.booking-popup-icon { flex-shrink: 0; width: 32px; height: 32px; background: #f0f2f7; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.booking-popup-label { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; font-weight: 600; }
.booking-popup-val { font-weight: 600; color: #0f172a; }
.date-input, .guest-input {
display: block; width: 100%; min-width: 0; max-width: 100%;
box-sizing: border-box; background: #f7f8fa;
border: 1px solid #eaecf0; border-radius: 12px;
padding: 0 14px; height: 48px; color: #0f172a;
font-size: 16px; font-family: ‘DM Sans’, sans-serif;
outline: none; color-scheme: light; transition: border-color 0.2s;
-webkit-appearance: none; appearance: none; line-height: 48px;
touch-action: pan-x pan-y;
}
.date-input:focus, .guest-input:focus { border-color: var(–accent, #3b5bdb); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }
.date-input::placeholder, .guest-input::placeholder { color: #94a3b8; }
/* Pole z etykietą */
.field-wrap { margin-bottom: 10px; }
.field-wrap .field-lbl {
display: block; font-size: 11px; font-weight: 600; color: #94a3b8;
text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px;
}
html.dark .field-wrap .field-lbl { color: #6e7681; }
.field-wrap .date-input, .field-wrap textarea.date-input { margin-bottom: 0; }
.field-wrap-row { display: flex; gap: 8px; margin-bottom: 10px; }
.field-wrap-row .field-wrap { flex: 1; margin-bottom: 0; }
/* Reservation table */
.res-table { width: 100%; border-collapse: collapse; }
.res-table-row {
display: grid;
grid-template-columns: 36px 1fr 90px 28px;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid #e8e4de;
gap: 0 10px;
cursor: pointer;
transition: background 0.12s;
}
.res-table-row:hover { background: rgba(0,0,0,0.025); border-radius: 10px; }
.res-table-row:last-child { border-bottom: none; }
.res-id {
font-size: 11px; font-weight: 700; color: #fff;
background: #0f172a; border-radius: 7px;
padding: 3px 5px; text-align: center;
font-family: ‘DM Sans’, sans-serif; letter-spacing: 0;
}
.res-id.airbnb { background: #e8433a; }
.res-id.ical { background: #2563eb; }
.res-main { min-width: 0; }
.res-guest { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-apt { font-size: 11px; color: #888880; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-dates { text-align: right; }
.res-date-from { font-size: 12px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.res-date-nights { font-size: 10px; color: #aaa; margin-top: 1px; }
.res-chevron { color: #ccc; display: flex; align-items: center; justify-content: center; }
.res-status {
display: inline-block; font-size: 10px; font-weight: 700;
letter-spacing: 0.3px; border-radius: 6px; padding: 2px 7px;
white-space: nowrap;
}
.res-status.active { background: #d1fae5; color: #16a34a; }
.res-status.future { background: #eff6ff; color: #2563eb; }
.res-status.past { background: #f8f9fb; color: #94a3b8; }
.res-section-header {
font-size: 10px; font-weight: 700; color: #aaa;
letter-spacing: 1px; text-transform: uppercase;
padding: 14px 0 6px; margin-top: 4px;
}
/* Booking detail popup (shared with gantt) */
.booking-popup-sheet {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 420px;
background: #fff; border-radius: 16px 16px 0 0;
padding: 20px 20px 36px;
box-shadow: 0 -2px 20px rgba(15,23,42,0.10);
z-index: 301; animation: slideUp 0.25s ease;
}
.bpop-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
padding-bottom: 14px; border-bottom: 1px solid #eaecf0;
}
.bpop-source {
font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
color: #64748b; background: #f1f5f9;
border-radius: 5px; padding: 2px 8px;
}
.bpop-source.airbnb { background: #fef2f2; color: #e8433a; }
.bpop-source.ical { background: #eff6ff; color: #1d4ed8; }
.bpop-title { font-size: 15px; font-weight: 600; color: #0f172a; flex: 1; letter-spacing: -0.2px; }
.bpop-close {
background: #f7f8fa; border: 1px solid #eaecf0; border-radius: 8px;
width: 28px; height: 28px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #94a3b8; flex-shrink: 0;
}
.bpop-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.bpop-icon {
width: 28px; height: 28px; border-radius: 0; background: none;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: #94a3b8;
}
.bpop-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; font-weight: 600; }
.bpop-val { font-size: 13px; font-weight: 500; color: #0f172a; }
.bpop-actions {
display: flex; gap: 8px; margin-top: 16px;
padding-top: 14px; border-top: 1px solid #eaecf0;
}
.bpop-btn-edit {
width: 32px; height: 32px; padding: 0;
background: #f9fafb; color: #5a6480;
border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bpop-btn-edit:hover { background: #e8edf8; border-color: #0f172a; color: #0f172a; }
.bpop-btn-del {
width: 32px; height: 32px; padding: 0;
background: #fef2f2; color: #dc2626;
border: 1px solid #fca5a5; border-radius: 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* legacy — keep for calendar day popup */
.bcard {
background: #fff; border-radius: 10px;
padding: 12px 14px; font-family: ‘DM Sans’, sans-serif;
border: 1px solid #ede9e3;
}
.bcard-header { display: flex; align-items: center; gap: 8px; }
.bcard-dates { font-size: 13px; font-weight: 600; color: #1a1a1a; flex: 1; }
.bcard-nights {
font-size: 11px; font-weight: 600; color: #fff;
background: #3b82f6; border-radius: 20px; padding: 2px 9px; white-space: nowrap;
}
.bcard-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0ece6; }
.bcard-person { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.bcard-name { font-size: 13px; color: #1a1a1a; font-weight: 500; }
.bcard-phone { font-size: 13px; color: #888; text-decoration: none; font-weight: 400; }
.bcard-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.bchip { font-size: 11px; background: #f4f1ec; border-radius: 20px; padding: 2px 9px; color: #555; font-weight: 500; }
.bcard-note { font-size: 12px; color: #aaa; margin-top: 4px; line-height: 1.45; }
.bcard-actions { display: flex; gap: 2px; }
.bcard-apt-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
color: #bbb; text-transform: uppercase;
margin: 14px 0 5px; padding-left: 2px;
}
.booking-del {
width: 32px; height: 32px;
background: #f9fafb; border: 1px solid #e5e7eb;
border-radius: 8px; color: #5a6480;
cursor: pointer; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; transition: all 0.15s;
padding: 0;
}
.booking-del:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.user-edit-btn { color: #5a6480 !important; }
.user-edit-btn:hover { background: #e8edf8 !important; border-color: #0f172a !important; color: #0f172a !important; }
/* Panels */
.panel { display: none; }
.panel.active {
display: block; background: #f8f9fb;
border-radius: 0; padding: 0; color: #1a1a1a;
}
/* Panel section header (like “Ogólne” title in reference) */
.panel-section-header {
display: flex; align-items: center; gap: 10px;
padding: 20px 16px 8px;
}
.panel-section-header svg { display: none !important; }
.panel-section-title {
font-size: 11px; font-weight: 700; color: #94a3b8;
text-transform: uppercase; letter-spacing: 1px;
font-family: ‘DM Sans’, sans-serif;
}
/* Akcenty nagłówków paneli */
.acc{display:inline-block;width:4px;min-width:4px;border-radius:2px;flex-shrink:0;align-self:stretch}
.panel-section-header{display:flex;align-items:center;gap:10px}
/* Panel content wrapper */
.panel-content {
padding: 12px 16px 24px;
}
.panel.active .label { color: #5a6480; font-size: 12px; font-weight: 600; }
.panel.active .section-title { color: #0f172a; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.panel.active .section-subtitle { font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
.panel.active .field-label { color: #0f172a; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.panel.active .input-wrap { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; }
.panel.active .input-wrap:focus-within { border-color: var(–accent, #3b5bdb); }
.panel.active .input-wrap input { color: #1a1a1a; }
.panel.active select { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; color: #1a1a1a; }
.panel.active select option { background: #ffffff; color: #1a1a1a; }
.panel.active .pin-display { background: #ffffff; border-color: #eaecf0; }
.panel.active .message-box { background: #ffffff; color: #1a1a1a !important; border: 1px solid #eaecf0; border-radius: 12px; }
.panel.active .btn-copy-small { background: #f0f2f8; border-color: #eaecf0; color: #0f172a; }
.panel.active .btn-copy-text { background: #f0f2f8; border-color: #eaecf0; color: #0f172a; }
.panel.active .lang-tabs { background: #eaecf0 !important; border-radius: 12px !important; padding: 4px !important; gap: 0 !important; display: flex !important; }
.panel.active .lang-tab { color: #5a6480 !important; padding: 10px 8px !important; min-height: 0 !important; height: auto !important; border: none !important; background: transparent !important; border-radius: 9px !important; font-size: 13px !important; line-height: 1.2 !important; }
.panel.active .lang-tab.active { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; }
.panel.active .cal-apt-pills { background: #eaecf0; border-radius: 12px; padding: 4px; gap: 0; }
.panel.active .cal-header { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid #eaecf0 !important; }
.panel.active .cal-nav { background: #f7f8fa !important; color: #0f172a !important; border: 1px solid #eaecf0 !important; }
.panel.active .cal-nav:hover { background: #eaecf0 !important; }
.panel.active .cal-title { color: #0f172a !important; }
/* Login */
#login-screen {
position: fixed; inset: 0;
background: #f8f9fb;
z-index: 9999;
display: flex; align-items: center; justify-content: center;
font-family: ‘DM Sans’, sans-serif;
padding: 24px;
}
#login-screen.hidden { display: none; }
.login-box {
background: #fff; border-radius: 16px; padding: 28px 24px 24px;
width: 100%; max-width: 380px;
box-shadow: 0 2px 20px rgba(0,0,0,0.07);
}
.login-logo {
width: 72px; height: 72px; background: #0f172a;
border-radius: 18px; margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
}
.login-title {
font-size: 22px; font-weight: 700; color: #0f172a;
text-align: center; margin-bottom: 4px;
font-family: ‘DM Sans’, sans-serif;
}
.login-sub {
font-size: 13px; color: #94a3b8; text-align: center; margin-bottom: 30px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
display: block; font-size: 13px; font-weight: 600;
color: #0f172a; margin-bottom: 6px;
}
.login-field input {
width: 100%; box-sizing: border-box;
background: #f7f8fa;
border: 1px solid #eaecf0; border-radius: 12px;
padding: 13px 16px;
font-size: 15px; font-family: ‘DM Sans’, sans-serif;
color: #0f172a; outline: none; transition: border-color 0.2s, background 0.2s;
}
.login-field input:focus {
border-color: var(–accent, #3b5bdb); background: #fff;
box-shadow: 0 0 0 3px rgba(59,91,219,0.1);
}
.login-btn {
width: 100%; background: var(–accent, #3b5bdb); color: #fff;
border: none; border-radius: 12px; padding: 14px;
font-size: 15px; font-weight: 600; font-family: ‘DM Sans’, sans-serif;
cursor: pointer; margin-top: 6px; transition: background 0.2s, opacity 0.2s;
letter-spacing: 0.2px;
}
.login-btn:hover { background: #2f4ac0; }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-error {
background: #fef2f2; color: #dc2626; border-radius: 10px;
padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: none;
border: 1px solid #fecaca;
}
/* Header user */
.header-user { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 2px; }
.header-user-name { font-size: 12px; color: rgba(255,255,255,0.7); flex: 1; }
.header-user-role {
font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
background: rgba(255,255,255,0.15); color: #fff; border-radius: 20px; padding: 2px 8px;
}
.header-logout-btn {
background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.7);
border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
font-family: ‘DM Sans’, sans-serif; transition: background 0.2s;
}
.header-logout-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
/* User screen */
/* User cards */
.user-card {
background: #fff; border-radius: 10px;
padding: 0; border: 1px solid #f1f5f9;
display: block; margin-bottom: 6px;
box-sizing: border-box; width: 100%; overflow: hidden;
}
.user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #0f172a; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; overflow: hidden; }
.user-name { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-login { font-size: 12px; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role-badge {
font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
text-transform: uppercase; padding: 2px 8px; border-radius: 5px;
flex-shrink: 0; box-sizing: border-box; white-space: nowrap;
}
.role-admin { background: #f8f9fb; color: #64748b; }
.role-reception { background: #eff6ff; color: #2563eb; }
.role-cleaner { background: #f0fdf4; color: #16a34a; }
.role-viewer { background: #f8f9fb; color: #94a3b8; }
/* ── DARK MODE ───────────────────────────────────────── */
/* Palette:
bg-deep: #0d1117 (page background)
bg-card: #161b22 (cards, panels, modals)
bg-input: #21262d (inputs, secondary surfaces)
border: #30363d (all borders)
text-main: #e6edf3 (primary text)
text-muted:#8b949e (secondary text)
text-dim: #6e7681 (placeholder, very muted)
accent: #58a6ff (interactive blue)
*/
html.dark { color-scheme: dark; }
html.dark body {
background: #0d1117 !important;
color: #e6edf3 !important;
}
/* ─ Navigation ─ */
html.dark /* dark topbar uses var(–nav-bg) */
html.dark .desktop-nav { background: #0d1117 !important; border-right: 1px solid #30363d !important; }
html.dark .desktop-nav-header { background: #161b22 !important; border-bottom-color: #30363d !important; }
html.dark .desktop-nav-btn { color: rgba(255,255,255,0.55) !important; }
html.dark .desktop-nav-btn:hover { background: rgba(255,255,255,0.06) !important; color: #e6edf3 !important; }
html.dark .desktop-nav-btn.active { background: rgba(88,166,255,0.12) !important; color: #58a6ff !important; }
html.dark .desktop-nav-logout { color: rgba(255,120,120,0.8) !important; border-color: rgba(255,120,120,0.2) !important; }
html.dark .desktop-nav-sep { background: #30363d !important; }
html.dark /* dark drawer uses var(–nav-bg) */
html.dark .drawer-header { background: #161b22 !important; border-bottom-color: #30363d !important; }
html.dark .drawer-item { color: rgba(255,255,255,0.55) !important; }
html.dark .drawer-item.active { background: rgba(88,166,255,0.12) !important; color: #58a6ff !important; }
html.dark .drawer-divider { background: #30363d !important; }
html.dark .drawer-user { border-top-color: #30363d !important; }
html.dark .drawer-user-name { color: #e6edf3 !important; }
html.dark .drawer-logout { color: rgba(255,120,120,0.8) !important; border-color: rgba(255,120,120,0.2) !important; }
/* ─ Tabs ─ */
html.dark .tabs { background: #161b22 !important; border-radius: 0 0 20px 20px !important; }
html.dark .tab { color: rgba(255,255,255,0.38) !important; }
html.dark .tab.active { background: rgba(88,166,255,0.15) !important; color: #58a6ff !important; }
html.dark .tab:hover:not(.active) { color: rgba(255,255,255,0.7) !important; }
/* ─ Panel backgrounds ─ */
html.dark .panel.active { background: #0d1117 !important; color: #e6edf3 !important; }
html.dark .panel-section-title { color: #e6edf3 !important; }
html.dark .panel-section-header svg { display: none !important; }
/* ─ Cards (CSS classes) ─ */
html.dark .apt-item,
html.dark .user-card,
html.dark .bcard,
html.dark .booking-popup-box,
html.dark .ical-apt-item { background: #161b22 !important; border-color: #30363d !important; }
/* ─ Inputs ─ */
html.dark .date-input,
html.dark .guest-input,
html.dark select,
html.dark .field-input,
html.dark .panel-content .input-wrap {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
html.dark .date-input:focus,
html.dark .guest-input:focus { border-color: #58a6ff !important; box-shadow: 0 0 0 3px rgba(88,166,255,0.15) !important; }
html.dark .date-input::placeholder,
html.dark .guest-input::placeholder { color: #6e7681 !important; }
html.dark select option { background: #161b22 !important; color: #e6edf3 !important; }
html.dark textarea.date-input { color: #e6edf3 !important; }
/* ─ Inline style overrides — backgrounds ─ */
html.dark [style*=“background:#fff”]:not([style*=“background:#fff8”]),
html.dark [style*=“background: #fff”]:not([style*=“background: #fff8”]),
html.dark [style*=“background:#ffffff”],
html.dark [style*=“background: #ffffff”] { background: #161b22 !important; }
html.dark [style*=“background:#f7f8fa”],
html.dark [style*=“background: #f7f8fa”],
html.dark [style*=“background:#f8f9fb”],
html.dark [style*=“background: #eef1f7”],
html.dark [style*=“background:#f0f2f7”],
html.dark [style*=“background: #f0f2f7”],
html.dark [style*=“background:#f7f8fb”],
html.dark [style*=“background: #f7f8fb”],
html.dark [style*=“background:#f8f9fb”],
html.dark [style*=“background: #f8f9fb”],
html.dark [style*=“background:#f8f9ff”],
html.dark [style*=“background: #f8f9ff”],
html.dark [style*=“background:#f0ede8”],
html.dark [style*=“background: #f0ede8”],
html.dark [style*=“background:#e8e4de”],
html.dark [style*=“background: #e8e4de”] { background: #21262d !important; }
/* ─ Inline style overrides — text colors ─ */
html.dark [style*=“color:#0f172a”],
html.dark [style*=“color: #0f172a”],
html.dark [style*=“color:#1a1a1a”],
html.dark [style*=“color: #1a1a1a”],
html.dark [style*=“color:#0f172a”],
html.dark [style*=“color: #0f172a”] { color: #e6edf3 !important; }
html.dark [style*=“color:#5a6480”],
html.dark [style*=“color: #5a6480”] { color: #8b949e !important; }
html.dark [style*=“color:#94a3b8”],
html.dark [style*=“color: #94a3b8”] { color: #6e7681 !important; }
html.dark [style*=“color:#aaa”],
html.dark [style*=“color: #aaa”],
html.dark [style*=“color:#ccc”],
html.dark [style*=“color:#bbb”],
html.dark [style*=“color:#c0c8d8”],
html.dark [style*=“color: #c0c8d8”] { color: #484f58 !important; }
/* ─ Inline style overrides — borders ─ */
html.dark [style*=“border:1px solid #eaecf0”],
html.dark [style*=“border: 1px solid #eaecf0”],
html.dark [style*=“border:1px solid #eaecf0”],
html.dark [style*=“border: 1px solid #eaecf0”],
html.dark [style*=“border:1px solid #ede9e3”],
html.dark [style*=“border-bottom:1px solid #eaecf0”],
html.dark [style*=“border-bottom: 1px solid #eaecf0”],
html.dark [style*=“border-top:1px solid #eaecf0”],
html.dark [style*=“border-top: 1px solid #eaecf0”],
html.dark [style*=“border-bottom:1px solid #f0f2f7”],
html.dark [style*=“border-bottom: 1px solid #f0f2f7”],
html.dark [style*=“border-bottom:1px solid #f0ece6”],
html.dark [style*=“border-top:1px solid #f0ece6”] { border-color: #30363d !important; }
/* ─ Dashboard cards (rendered by JS) ─ */
html.dark #dash-content { background: transparent !important; }
html.dark #dash-content > div { color: #e6edf3 !important; }
/* Bar chart bars — override gray empty bars */
html.dark [style*=“background:#eaecf0”]:not(.dm-slider) { background: #30363d !important; }
/* ─ Gantt ─ */
html.dark #gantt-container { background: transparent !important; }
html.dark #gantt-container > div > div { background: #161b22 !important; border-color: #30363d !important; }
/* Header row */
html.dark #gantt-container [style*=“background:#f0f2f7”],
html.dark #gantt-container [style*=“background: #f0f2f7”] { background: #21262d !important; }
/* Day cells */
html.dark #gantt-container [style*=“background:#ffffff”],
html.dark #gantt-container [style*=“background: #ffffff”],
html.dark #gantt-container [style*=“background:#fff”] { background: #161b22 !important; }
html.dark #gantt-container [style*=“background:#f7f8fb”],
html.dark #gantt-container [style*=“background: #f7f8fb”] { background: #1c2128 !important; }
/* Today column */
html.dark #gantt-container [style*=“background:#eaecf0”] { background: #2d333b !important; }
/* Row label sticky */
html.dark #gantt-container [style*=“position:sticky”] { background: #161b22 !important; }
/* Borders inside gantt */
html.dark #gantt-container [style*=“border-right:1px solid #eaecf0”],
html.dark #gantt-container [style*=“border-bottom:1px solid #eaecf0”],
html.dark #gantt-container [style*=“border-bottom:2px solid #eaecf0”] { border-color: #30363d !important; }
html.dark #gantt-container [style*=“background:#0f172a”] { background: #21262d !important; }
/* Today vertical line */
html.dark #gantt-container [style*=“background:#0f172a”][style*=“width:2px”] { background: #58a6ff !important; opacity: 0.4 !important; }
/* Apt name text in gantt */
html.dark #gantt-container [style*=“color:#0f172a”] { color: #8b949e !important; }
/* ─ Calendar SVG ─ */
html.dark #cal-grid,
html.dark #clean-cal-grid { background: transparent !important; }
html.dark #cal-days-hdr,
html.dark #clean-days-hdr { background: #161b22 !important; border-bottom-color: #30363d !important; }
html.dark .cal-card { background: #161b22 !important; border-color: #30363d !important; }
html.dark .cal-hdr { background: #21262d !important; }
html.dark .cal-legend { background: #161b22 !important; border-color: #30363d !important; }
/* SVG calendar — white fill in day grid squares */
html.dark .cal-grid svg rect[fill=”#ffffff”],
html.dark #clean-cal-grid svg rect[fill=”#ffffff”] { fill: #161b22 !important; }
/* ─ Modals ─ */
html.dark .modal-overlay { background: rgba(0,0,0,0.88) !important; }
html.dark .modal { background: #161b22 !important; border-color: #30363d !important; }
html.dark .modal h3 { color: #e6edf3 !important; }
html.dark .modal p { color: #8b949e !important; }
html.dark .modal label { color: #e6edf3 !important; }
html.dark .btn-cancel { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .btn-save:not([style*=“dc2626”]):not([style*=“background:#dc”]) { background: #1f6feb !important; }
/* ─ Booking popup sheet ─ */
html.dark .booking-popup-sheet { background: #161b22 !important; box-shadow: 0 -4px 30px rgba(0,0,0,0.5) !important; }
html.dark .bpop-header { border-bottom-color: #30363d !important; }
html.dark .bpop-title { color: #e6edf3 !important; }
html.dark .bpop-val { color: #e6edf3 !important; }
html.dark .bpop-label { color: #6e7681 !important; }
html.dark .bpop-icon { background: #21262d !important; }
html.dark .bpop-actions { border-top-color: #30363d !important; }
html.dark .bpop-close { background: #21262d !important; color: #8b949e !important; }
html.dark .bpop-btn-del { background: rgba(220,38,38,0.15) !important; }
/* ─ Message boxes ─ */
html.dark .message-box,
html.dark .panel.active .message-box { background: #21262d !important; color: #e6edf3 !important; border-color: #30363d !important; }
/* ─ Login screen ─ */
html.dark #login-screen { background: #0d1117 !important; }
html.dark .login-box { background: #161b22 !important; border-color: #30363d !important; box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important; }
html.dark .login-title { color: #e6edf3 !important; }
html.dark .login-sub { color: #8b949e !important; }
html.dark .login-field label { color: #c9d1d9 !important; }
html.dark .login-field input { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
html.dark .login-field input:focus { border-color: #58a6ff !important; background: #1c2128 !important; box-shadow: 0 0 0 3px rgba(88,166,255,0.12) !important; }
html.dark .login-btn { background: #1f6feb !important; }
html.dark .login-btn:hover { background: #388bfd !important; }
html.dark .login-error { background: rgba(220,38,38,0.12) !important; border-color: rgba(220,38,38,0.3) !important; }
/* ─ Toast ─ */
html.dark .toast { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
/* ─ Reservation list ─ */
html.dark .res-table-row { border-color: #30363d !important; }
html.dark .res-guest { color: #e6edf3 !important; }
html.dark .res-apt { color: #6e7681 !important; }
html.dark .res-date-from { color: #e6edf3 !important; }
html.dark .res-id { background: #30363d !important; color: #8b949e !important; }
html.dark .res-section-header { color: #484f58 !important; }
html.dark .res-status.future { background: #21262d !important; color: #8b949e !important; }
html.dark .res-status.past { background: #1c2128 !important; color: #484f58 !important; }
/* ─ Role badges ─ */
html.dark .role-admin { background: #3d2e00 !important; color: #e3a008 !important; }
html.dark .role-reception { background: #0d2444 !important; color: #58a6ff !important; }
html.dark .role-cleaner { background: #0a3622 !important; color: #3fb950 !important; }
html.dark .role-viewer { background: #21262d !important; color: #8b949e !important; }
/* ─ Buttons ─ */
html.dark .btn-add { border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark .btn-add:hover { background: #1c2128 !important; border-color: #58a6ff !important; }
html.dark .btn-remove:hover { background: rgba(220,38,38,0.12) !important; border-color: rgba(220,38,38,0.3) !important; }
html.dark .btn-template { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark .btn-copy-text { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark .btn-copy-small { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark .btn-paste { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
/* ─ Message subtabs / lang tabs ─ */
html.dark .msg-subtabs,
html.dark .lang-tabs,
html.dark .cal-apt-pills { background: transparent !important; border-bottom-color: #21262d !important; }
html.dark .msg-subtab { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .msg-subtab.active { background: #2d333b !important; color: #e6edf3 !important; }
html.dark .panel.active .lang-tab { background: transparent !important; color: #8b949e !important; }
html.dark .panel.active .lang-tab.active { background: #2d333b !important; color: #e6edf3 !important; }
html.dark .cal-apt-pill { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .cal-apt-pill.active { background: #2d333b !important; color: #e6edf3 !important; }
/* ─ User form modal (dynamic) ─ */
html.dark #user-form-modal > div { background: #161b22 !important; border-color: #30363d !important; }
html.dark #user-form-modal input,
html.dark #user-form-modal textarea { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
html.dark #user-form-modal [id=“uf-role-btn”] { background: #21262d !important; border-color: #30363d !important; }
html.dark #user-form-modal [id=“uf-role-list”] { background: #161b22 !important; border-color: #30363d !important; }
html.dark #user-form-modal .uf-role-opt { background: #161b22 !important; color: #e6edf3 !important; }
html.dark #user-form-modal .uf-role-opt:hover { background: #21262d !important; }
/* ─ Guest picker modal ─ */
html.dark #guest-picker-modal > div { background: #161b22 !important; }
html.dark #gp-search { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
/* ─ Suggestions dropdown ─ */
html.dark #guest-suggestions { background: #161b22 !important; border-color: #30363d !important; }
/* ─ View toggle icons ─ */
html.dark .view-toggle-icon { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .view-toggle-icon.active { background: #1f6feb !important; border-color: #1f6feb !important; color: #fff !important; }
/* ─ Desktop user dropdown ─ */
html.dark .desktop-user-dropdown { background: #161b22 !important; border-color: #30363d !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important; }
html.dark .desktop-user-dropdown-header { border-bottom-color: #30363d !important; }
html.dark .desktop-user-dropdown-header .dud-name { color: #e6edf3 !important; }
html.dark .desktop-user-dropdown-item { color: #c9d1d9 !important; }
html.dark .desktop-user-dropdown-item:hover { background: #21262d !important; }
html.dark .desktop-user-dropdown-item.danger { color: #f85149 !important; }
html.dark .desktop-user-dropdown-sep { background: #30363d !important; }
html.dark .topbar-avatar { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.15) !important; }
/* ─ App wrapper border (desktop) ─ */
html.dark .app { box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important; }
/* ─ Pin display ─ */
html.dark .pin-display { background: #21262d !important; border-color: #30363d !important; }
html.dark .pin-digits { color: #e6edf3 !important; }
/* Dark mode toggle switch */
.dm-toggle-wrap {
display: flex; align-items: center; justify-content: space-between;
background: #fff; border: 1px solid #eaecf0; border-radius: 10px;
padding: 14px 16px; margin-bottom: 4px;
transition: background 0.2s, border-color 0.2s;
}
html.dark .dm-toggle-wrap { background: #161b22 !important; border-color: #30363d !important; }
.dm-toggle-label { display: flex; align-items: center; gap: 10px; }
.dm-toggle-label svg { color: #0f172a; flex-shrink: 0; }
html.dark .dm-toggle-label svg { color: #e6edf3 !important; }
.dm-toggle-text { font-size: 14px; font-weight: 600; color: #0f172a; font-family: ‘DM Sans’, sans-serif; }
html.dark .dm-toggle-text { color: #e6edf3 !important; }
.dm-toggle-sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }
html.dark .dm-toggle-sub { color: #6e7681 !important; }
.dm-switch {
position: relative; width: 48px; height: 26px; cursor: pointer;
flex-shrink: 0;
}
.dm-switch input { opacity: 0; width: 0; height: 0; }
.dm-slider {
position: absolute; inset: 0;
background: #eaecf0; border-radius: 13px;
transition: background 0.25s;
}
.dm-slider:before {
content: ‘’;
position: absolute; left: 3px; top: 3px;
width: 20px; height: 20px; border-radius: 50%;
background: #fff; transition: transform 0.25s;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.dm-switch input:checked + .dm-slider { background: #0f172a; }
html.dark .dm-switch input:checked + .dm-slider { background: #58a6ff !important; }
/* ── DARK: inline color:#0f172a w nagłówkach sekcji (Ustawienia, Użytkownicy) ── */
html.dark [style*=“font-weight:700;color:#0f172a”],
html.dark [style*=“font-weight: 700; color: #0f172a”],
html.dark [style*=“font-weight:700; color:#0f172a”] { color: #c9d1d9 !important; }
html.dark [style*=“font-size:15px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:13px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:14px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:18px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:16px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:22px;font-weight:700;color:#0f172a”],
html.dark [style*=“font-size:20px;font-weight:700;color:#0f172a”] { color: #e6edf3 !important; }
/* ── DARK: małe szare opisy ── */
html.dark [style*=“font-size:12px;color:#94a3b8”],
html.dark [style*=“font-size:12px; color:#94a3b8”],
html.dark [style*=“font-size:11px;color:#94a3b8”],
html.dark [style*=“font-size:13px;color:#94a3b8”],
html.dark [style*=“font-size:12px;color:#5a6480”],
html.dark [style*=“font-size:11px;color:#5a6480”] { color: #6e7681 !important; }
/* ── DARK: etykiety sekcji (LINIA 1, itp.) ── */
html.dark [style*=“font-size:11px;font-weight:600;color:#94a3b8”],
html.dark [style*=“font-size:10px;font-weight:600;color:#94a3b8”],
html.dark [style*=“font-size:10px;font-weight:700;color:#94a3b8”],
html.dark [style*=“font-size:11px;font-weight:700;color:#94a3b8”] { color: #6e7681 !important; }
/* ── DARK: booking-del i btn-edit-apt (białe przyciski ✏️🗑️) ── */
html.dark .booking-del {
background: #21262d !important;
border-color: #30363d !important;
color: #8b949e !important;
}
html.dark .booking-del:hover {
background: rgba(248,81,73,0.12) !important;
border-color: rgba(248,81,73,0.3) !important;
color: #f85149 !important;
}
html.dark .btn-edit-apt {
color: #8b949e !important;
}
html.dark .btn-edit-apt:hover { color: #58a6ff !important; }
/* ── DARK: user-card ── */
html.dark .user-card {
background: #161b22 !important;
border-color: #30363d !important;
}
html.dark .user-name { color: #e6edf3 !important; }
html.dark .user-login { color: #6e7681 !important; }
html.dark .user-avatar { background: #1f6feb !important; }
/* ── DARK: btn-add (przycisk dodaj apartament) ── */
html.dark .btn-add {
border-color: #30363d !important;
color: #8b949e !important;
background: transparent !important;
}
html.dark .btn-add:hover {
background: #1c2128 !important;
border-color: #58a6ff !important;
color: #58a6ff !important;
}
/* ── DARK: panel-content subheaders (font-size:13px font-weight:700) ── */
html.dark .panel.active .label { color: #6e7681 !important; }
html.dark .panel.active .section-title { color: #e6edf3 !important; }
html.dark .panel.active .section-subtitle { color: #6e7681 !important; }
html.dark .panel.active .field-label { color: #c9d1d9 !important; }
/* ── DARK: karty z inline background w Ustawieniach (logo, name, backup) ── */
html.dark [style*=“background:#fff;border:1px solid #eaecf0;border-radius:10px”] {
background: #161b22 !important;
border-color: #30363d !important;
}
html.dark [style*=“background:#fff;border:1px solid #eaecf0;border-radius:12px”] {
background: #161b22 !important;
border-color: #30363d !important;
}
/* ── DARK: “PNG, JPG lub SVG” text w logo sekcji ── */
html.dark [style*=“font-size:12px;color:#94a3b8;flex:1”] { color: #6e7681 !important; }
/* ── DARK: input-like divs (guest-link-url) ── */
html.dark [style*=“background:#f7f8fa;border:1px solid #eaecf0;border-radius:10px”],
html.dark [style*=“background:#f7f8fa;border:1px solid #eaecf0;border-radius:12px”] {
background: #21262d !important;
border-color: #30363d !important;
color: #8b949e !important;
}
/* ── DARK: dodatkowe overrides dla “Użytkownicy systemu” + “Dodaj” button ── */
html.dark [style*=“font-size:15px;font-weight:700;color:#0f172a”] { color: #e6edf3 !important; }
html.dark #btn-add-user { background: #1f6feb !important; }
/* ── DARK: apt-item icon background ── */
html.dark [style*=“background:#f8f9fb;border:1px solid #eaecf0”] {
background: #21262d !important;
border-color: #30363d !important;
}
html.dark [style*=“background:#f8f9fb”] { background: #21262d !important; }
/* ── DARK: .panel.active label (sekcja headings via CSS class) ── */
html.dark .panel.active [style*=“font-weight:700;color:#0f172a”] { color: #c9d1d9 !important; }
/* ── DARK: modal label i h3 kolory ── */
html.dark .modal label { color: #c9d1d9 !important; }
html.dark #user-screen-title { color: #e6edf3 !important; }
/* ── DARK: input w user-screen modalu ── */
html.dark #user-screen input,
html.dark #user-screen select,
html.dark #user-screen textarea {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
/* ── DARK: apt-address-text (ikona + adres pod mapą) ── */
html.dark #apt-address { background: #161b22 !important; color: #c9d1d9 !important; }
/* ── DARK: info-box (niebieski baner) ── */
html.dark .info-box {
background: rgba(30,64,175,0.15) !important;
border-color: rgba(59,130,246,0.25) !important;
color: #93c5fd !important;
}
/* ── DARK: success screen ── */
html.dark .success { background: #161b22 !important; border-color: #30363d !important; }
html.dark .success h2 { color: #e6edf3 !important; }
html.dark .success p { color: #6e7681 !important; }
html.dark .success-icon { background: rgba(22,163,74,0.15) !important; }
/* ── DARK: lang-menu (selektor języka w oferta.html) ── */
html.dark .lang-menu { background: #161b22 !important; border-color: #30363d !important; }
html.dark .lang-opt { background: #161b22 !important; color: #e6edf3 !important; border-color: #30363d !important; }
html.dark .lang-opt:hover { background: #21262d !important; }
html.dark .lang-opt.active { background: #21262d !important; color: #e6edf3 !important; }
/* ── DARK: Rezerwacje — tabela desktop (białe tło wierszy) ── */
html.dark [style*=“background:#fff;border-radius:10px;border:1px solid #eaecf0;overflow:hidden”] {
background: #161b22 !important;
border-color: #30363d !important;
}
html.dark [style*=“display:grid”][style*=“border-bottom:2px solid #eaecf0”] {
background: #21262d !important;
border-bottom-color: #30363d !important;
}
/* ── DARK: Goście — karty ── */
html.dark [style*=“background:#fff;border:1px solid #eaecf0;border-radius:10px;margin-bottom:10px”] {
background: #161b22 !important;
border-color: #30363d !important;
}
html.dark .guest-detail { background: #1c2128 !important; border-top-color: #30363d !important; }
.dm-switch input:checked + .dm-slider:before { transform: translateX(22px); }
/* ── DARK: apt-ical wiersz (iCal input) ── */
html.dark .apt-ical-wrap {
background: #21262d !important;
border-color: #30363d !important;
}
html.dark .apt-ical-input { color: #e6edf3 !important; }
html.dark .apt-ical-input::placeholder { color: #6e7681 !important; }
html.dark .apt-ical-icon { color: #8b949e !important; }
html.dark .btn-ical-fetch { background: #1f6feb !important; }
/* ── DARK: btn-remove (apt/booking delete) ── */
html.dark .btn-remove {
background: #21262d !important;
border-color: #30363d !important;
color: #6e7681 !important;
}
/* ── DARK: booking popup close button ── */
html.dark .booking-popup-close {
background: #21262d !important;
color: #8b949e !important;
}
html.dark .booking-popup-row { border-bottom-color: #30363d !important; }
html.dark .booking-popup-icon { background: #21262d !important; }
html.dark .booking-popup-val { color: #e6edf3 !important; }
html.dark .booking-popup-label { color: #6e7681 !important; }
/* ── DARK: bcard (calendar day popup) ── */
html.dark .bcard { background: #161b22 !important; border-color: #30363d !important; }
html.dark .bcard-dates { color: #e6edf3 !important; }
html.dark .bcard-body { border-top-color: #30363d !important; }
html.dark .bcard-name { color: #e6edf3 !important; }
html.dark .bchip { background: #21262d !important; color: #8b949e !important; }
html.dark .bcard-note { color: #6e7681 !important; }
html.dark .bcard-apt-label { color: #484f58 !important; }
/* ── DARK: Support panel — admin messages list (inline style) ── */
html.dark #admin-messages-list [style*=“border-bottom:1px solid #f0f2f7”],
html.dark #admin-messages-list [style*=“border-bottom: 1px solid #f0f2f7”],
html.dark #admin-messages-list > div { border-bottom-color: #30363d !important; }
/* ── DARK: Support panel — ticket cards (generowane przez JS) ── */
html.dark #my-tickets-list > div { background: #161b22 !important; border-color: #30363d !important; }
/* Odpowiedź admina w tickecie (niebieski bubble) */
html.dark [style*=“background:#eff6ff”] {
background: rgba(30,64,175,0.12) !important;
border-color: rgba(59,130,246,0.2) !important;
}
html.dark [style*=“color:#1e40af”] { color: #93c5fd !important; }
html.dark [style*=“color:#93c5fd”] { color: #6e7681 !important; }
/* ── DARK: Plan panel — aktualny plan karta (gradient) ── */
/* gradient box jest hardcoded linear-gradient - zostaje jak jest (ciemny) */
/* ── DARK: Plan panel — karty planów (background:#f0f4ff = aktualny plan) ── */
html.dark [style*=“background:#f0f4ff”] { background: rgba(31,111,235,0.1) !important; }
html.dark [style*=“background: #f0f4ff”] { background: rgba(31,111,235,0.1) !important; }
/* ── DARK: Plan panel — “Dostępne plany” header, “Pytania” box ── */
html.dark [style*=“font-size:14px;font-weight:700;color:#0f172a;margin-bottom:14px”] { color: #e6edf3 !important; }
html.dark [style*=“font-size:14px;font-weight:700;color:#0f172a;margin-bottom:6px”] { color: #e6edf3 !important; }
html.dark [style*=“font-size:16px;font-weight:800;color:#0f172a”] { color: #e6edf3 !important; }
html.dark [style*=“font-size:28px;font-weight:800”] { color: #e6edf3 !important; }
/* Plan card upgrade button */
html.dark .upgbtn { background: #1f6feb !important; }
html.dark [style*=“background:#0f172a;color:#fff;border:none;border-radius:10px”] { background: #1f6feb !important; }
/* ── DARK: Zapytania (inq) — karty inline ── */
html.dark #inq-list [style*=“background:#fff”] { background: #161b22 !important; }
html.dark #inq-list [style*=“background:#f0f4ff”] { background: rgba(31,111,235,0.1) !important; }
html.dark #inq-list [style*=“border-bottom:1px solid #eaecf0”] { border-bottom-color: #30363d !important; }
html.dark #inq-list [style*=“color:#0f172a”] { color: #e6edf3 !important; }
html.dark #inq-list [style*=“color:#5a6480”] { color: #8b949e !important; }
html.dark #inq-list [style*=“color:#94a3b8”] { color: #6e7681 !important; }
/* ── DARK: Gantt — nawigacja miesiącami (year nav + pills) ── */
html.dark #gantt-month-nav [style*=“background:#f0f2f7”] { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark #gantt-month-nav [style*=“background:#eaecf0”] { background: #30363d !important; }
html.dark #gantt-month-nav [style*=“background:#0f172a”] { background: #1f6feb !important; }
html.dark #gantt-month-nav [style*=“color:#5a6480”] { color: #8b949e !important; }
html.dark #gantt-month-nav [style*=“color:#0f172a”] { color: #c9d1d9 !important; }
/* ── DARK: Rezerwacje — pagination buttons ── */
html.dark #res-pagination button { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark #res-pagination button[style*=“background:#0f172a”] { background: #1f6feb !important; border-color: #1f6feb !important; color: #fff !important; }
/* ── DARK: Rezerwacje — filtr select ── */
html.dark #res-apt-select { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
/* ── DARK: Cal gantt — separator pionowy między rokiem a miesiącami ── */
html.dark #gantt-month-nav [style*=“background:#eaecf0;flex-shrink”] { background: #30363d !important; }
/* ── DARK: app-lang buttons ── */
html.dark .app-lang-btn[style*=“background:#f7f8fa”] {
background: #21262d !important;
border-color: #30363d !important;
color: #8b949e !important;
}
/* ── DARK: modal wewnętrzne inputy/selecty (textarea szablony) ── */
html.dark #modal-welcome, html.dark #modal-welcome-en, html.dark #modal-welcome-uk,
html.dark #modal-pin, html.dark #modal-pin-en, html.dark #modal-pin-uk {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
/* ── DARK: Support — ticket form select/input ── */
html.dark #ticket-type,
html.dark #ticket-subject,
html.dark #ticket-message {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
/* ── DARK: #clean-day-detail (karty dnia sprzątania generowane przez JS) ── */
html.dark #clean-day-detail [style*=“background:#fff”] { background: #161b22 !important; }
html.dark #clean-day-detail [style*=“background:#f0f2f7”] { background: #21262d !important; }
html.dark #clean-day-detail [style*=“color:#0f172a”] { color: #e6edf3 !important; }
html.dark #clean-day-detail [style*=“color:#5a6480”] { color: #8b949e !important; }
html.dark #clean-day-detail [style*=“border”] { border-color: #30363d !important; }
/* ── DARK: Pulpit (dash) — wszystkie karty i elementy ── */
html.dark #dash-content [style*=“background:#fff”],
html.dark #dash-content [style*=“background: #fff”],
html.dark #dash-content [style*=“background:#ffffff”] { background: #161b22 !important; border-color: #30363d !important; }
html.dark #dash-content [style*=“background:#f7f8fa”],
html.dark #dash-content [style*=“background:#f0f2f7”] { background: #21262d !important; }
html.dark #dash-content [style*=“border:1px solid #eaecf0”],
html.dark #dash-content [style*=“border: 1px solid #eaecf0”],
html.dark #dash-content [style*=“border:1px solid #eaecf0”] { border-color: #30363d !important; }
html.dark #dash-content [style*=“color:#0f172a”] { color: #e6edf3 !important; }
html.dark #dash-content [style*=“color:#0f172a”] { color: #8b949e !important; }
html.dark #dash-content [style*=“color:#5a6480”] { color: #8b949e !important; }
html.dark #dash-content [style*=“color:#94a3b8”] { color: #6e7681 !important; }
/* Bar chart fill and separator */
html.dark #dash-content [style*=“border-top:1px solid #f0f2f7”],
html.dark #dash-content [style*=“border-top: 1px solid #f0f2f7”] { border-top-color: #30363d !important; }
/* ── DARK: Goście — panel-level fixes ── */
html.dark #panel-guests [style*=“background:#f0f2f7”] { background: #21262d !important; }
html.dark #gp-list [style*=“background:#fff”] { background: #161b22 !important; }
/* ── DARK: poprawka dla modali textarea z color-scheme:light ── */
html.dark .date-input, html.dark .guest-input { color-scheme: dark !important; }
/* ── DARK: cal legend ── */
html.dark .cal-legend { color: #8b949e !important; }
html.dark .legend-dot.free { border-color: #484f58 !important; background: #21262d !important; }
/* ── DARK: bpop-btn-edit ── */
html.dark .bpop-btn-edit { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
/* ── DARK: panel.active .lang-tab.active — nadpisanie białego tła ── */
html.dark .panel.active .lang-tab.active { background: #2d333b !important; color: #e6edf3 !important; box-shadow: none !important; }
html.dark .panel.active .lang-tab { background: transparent !important; color: #8b949e !important; }
/* ── DARK: panel.active — naprawka kolorów klas (nadpisują inline style) ── */
html.dark .panel.active .field-label { color: #c9d1d9 !important; }
html.dark .panel.active .section-title { color: #e6edf3 !important; }
html.dark .panel.active .label { color: #6e7681 !important; }
html.dark .panel.active select { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
html.dark .panel.active select option { background: #161b22 !important; color: #e6edf3 !important; }
html.dark .panel.active .input-wrap { background: #21262d !important; border-color: #30363d !important; }
html.dark .panel.active .input-wrap input { color: #e6edf3 !important; background: transparent !important; }
html.dark .panel.active .input-wrap input::placeholder { color: #6e7681 !important; }
html.dark .panel.active .pin-display { background: #21262d !important; border-color: #30363d !important; }
/* ── DARK: Support — etykiety label (font-size:12px) niewidoczne ── */
html.dark #panel-support label { color: #c9d1d9 !important; }
html.dark #panel-support .panel-content * { color: inherit; }
/* Jawne kolory tekstów w support */
html.dark #panel-support [style*=“color:#0f172a”] { color: #e6edf3 !important; }
html.dark #panel-support [style*=“color:#0f172a”] { color: #e6edf3 !important; }
html.dark #panel-support [style*=“color:#5a6480”] { color: #8b949e !important; }
html.dark #panel-support [style*=“color:#94a3b8”] { color: #6e7681 !important; }
/* “Moje zgłoszenia” div z inline color */
html.dark #panel-support div[style*=“font-size:13px;font-weight:700;color:#0f172a”] { color: #c9d1d9 !important; }
html.dark #admin-messages-wrap,
html.dark #panel-support .panel-content > div:nth-child(2) {
background: #161b22 !important;
border-color: #30363d !important;
}
/* Wszystkie białe divy bezpośrednio w panel-content support */
html.dark #panel-support .panel-content > div[style] {
background: #161b22 !important;
border-color: #30363d !important;
}
html.dark .dm-heading { color: #e6edf3 !important; }
html.dark .dm-label { color: #8b949e !important; }
html.dark .dm-muted { color: #8b949e !important; }
html.dark .dm-muted2 { color: #6e7681 !important; }
html.dark .dark-card { background: #161b22 !important; border-color: #30363d !important; }
/* Subtelna animacja kart */
.dark-card { transition: box-shadow 0.12s; }
html.dark .dark-input { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .dm-lang-inactive { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .dm-lang-active { background: #1f6feb !important; border-color: #1f6feb !important; color: #fff !important; }
/* ── DARK: Gantt year nav buttons ── */
html.dark .gantt-year-btn { background: #21262d !important; border-color: #30363d !important; color: #c9d1d9 !important; }
html.dark .gantt-year-label { color: #0f172a !important; font-weight: 700 !important; font-size: 13px !important; }
html.dark .gantt-year-sep { background: #30363d !important; }
/* ── Ujednolicone pole daty ── */
.date-field-wrap { position: relative; flex: 1; }
.date-field-input {
display: block; width: 100%; box-sizing: border-box;
padding: 20px 12px 6px; height: 52px;
background: #f7f8fa; border: 1px solid #eaecf0; border-radius: 12px;
font-size: 14px; font-family: ‘DM Sans’, sans-serif; color: #0f172a;
outline: none; appearance: none; -webkit-appearance: none;
transition: border-color .2s;
}
.date-field-input:focus { border-color: var(–accent, #3b5bdb); box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }
.date-field-label {
position: absolute; top: 7px; left: 12px;
font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
color: #94a3b8; pointer-events: none; text-transform: uppercase;
}
html.dark .date-field-input { background: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; }
html.dark .date-field-label { color: #6e7681 !important; }
/* ── Custom Date Picker ── */
.cdp-btn {
display: flex; align-items: center; justify-content: space-between;
width: 100%; height: 52px; padding: 0 14px;
background: #f7f8fa; border: 1px solid #eaecf0; border-radius: 12px;
font-size: 14px; font-family: ‘DM Sans’, sans-serif; color: #0f172a;
cursor: pointer; box-sizing: border-box; transition: border-color .2s;
position: relative;
}
.cdp-btn:focus { border-color: var(–accent, #3b5bdb); outline: none; box-shadow: 0 0 0 3px rgba(59,91,219,0.1); }
.cdp-btn .cdp-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: #94a3b8; text-transform: uppercase; position: absolute; top: 7px; left: 14px; }
.cdp-btn .cdp-val { margin-top: 10px; font-size: 14px; color: #0f172a; font-weight: 500; }
.cdp-btn .cdp-val.empty { color: #c0c8d8; }
.cdp-popup {
position: fixed; background: #fff; border: 1px solid #eaecf0;
border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,0.18);
z-index: 9999; padding: 16px; width: 320px; max-width: calc(100vw - 32px);
}
.cdp-popup.hidden { display: none; }
.cdp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cdp-month-label { font-size: 15px; font-weight: 700; color: #0f172a; }
.cdp-nav { background: #f7f8fa; border: none; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; color: #0f172a; display: flex; align-items: center; justify-content: center; }
.cdp-nav:hover { background: #e8eaf0; }
.cdp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cdp-day-name { text-align: center; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; padding: 4px 0; }
.cdp-day {
text-align: center; padding: 7px 2px; font-size: 13px; border-radius: 8px;
cursor: pointer; color: #0f172a; font-family: ‘DM Sans’, sans-serif;
border: none; background: none; width: 100%;
}
.cdp-day:hover { background: #f0f4ff; color: #0f172a; }
.cdp-day.today { font-weight: 700; color: var(–accent, #3b5bdb); }
.cdp-day.selected { background: var(–nav-bg, #0f172a); color: #fff; font-weight: 700; border-radius: 10px; }
.cdp-day.other-month { color: #c0c8d8; }
.cdp-day.disabled { color: #ddd; cursor: default; pointer-events: none; }
.cdp-actions { display: flex; gap: 8px; margin-top: 12px; }
.cdp-clear { flex: 1; padding: 10px; background: #f7f8fa; border: 1px solid #eaecf0; border-radius: 10px; font-size: 13px; font-weight: 600; color: #5a6480; cursor: pointer; font-family: ‘DM Sans’, sans-serif; }
.cdp-ok { flex: 1; padding: 10px; background: #0f172a; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; font-family: ‘DM Sans’, sans-serif; }
html.dark .cdp-btn { background: #21262d !important; border-color: #30363d !important; }
html.dark .cdp-btn .cdp-val { color: #e6edf3 !important; }
html.dark .cdp-popup { background: #161b22 !important; border-color: #30363d !important; }
html.dark .cdp-month-label { color: #e6edf3 !important; }
html.dark .cdp-day { color: #e6edf3 !important; }
html.dark .cdp-day:hover { background: #21262d !important; }
html.dark .cdp-day.selected { background: #1f6feb !important; color: #fff !important; }
html.dark .cdp-day.other-month { color: #484f58 !important; }
html.dark .cdp-nav { background: #21262d !important; color: #e6edf3 !important; }
/* ── DARK: Pola dat w modalu rezerwacji ── */
html.dark .book-date-input {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
color-scheme: dark !important;
}
/* Native date input dark mode */
html.dark input[type=“date”]#book-from,
html.dark input[type=“date”]#book-to {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
color-scheme: dark !important;
}
html.dark .book-date-label { color: #8b949e !important; }
/* ── DARK: Przywróć backup — nadpisanie color:#0f172a inline przez dark-card+dm-label ── */
html.dark .dark-card.dm-label { color: #8b949e !important; }
/* Goście — Usuń wszystkich */
html.dark .btn-danger-outline { background: rgba(220,38,38,0.08) !important; border-color: rgba(248,81,73,0.35) !important; }
/* lang-tabs container w panel.active — wyższe specificity niż poprzednia reguła */
html.dark .panel.active .lang-tabs { background: #21262d !important; }
/* Kopiuj button w link dla gości */
html.dark #panel-apts button[style*=“background:#0f172a;color:#fff;border:none;border-radius:10px”] { background: #1f6feb !important; }
/* nagłówki w kartach support */
html.dark #panel-support [style*=“font-size:14px;font-weight:700;color:#0f172a”] { color: #e6edf3 !important; }
html.dark #panel-support label[style*=“color:#0f172a”] { color: #c9d1d9 !important; }
/* inputy w formularzu support */
html.dark #ticket-type,
html.dark #ticket-subject,
html.dark #ticket-message {
background: #21262d !important;
border-color: #30363d !important;
color: #e6edf3 !important;
}
html.dark #ticket-type option { background: #161b22 !important; color: #e6edf3 !important; }
/* przycisk wyślij */
html.dark #panel-support button[style*=“background:#0f172a”] { background: #1f6feb !important; }
/* “Moje zgłoszenia” nagłówek */
html.dark #panel-support [style*=“font-size:13px;font-weight:700;color:#0f172a;margin-bottom:10px”] { color: #c9d1d9 !important; }
/* ── DARK: Ustawienia — sekcje z białymi kartami ── */
/* Karty: Logo w menu, Nazwa, Język, Link, Backup, Motyw */
html.dark #panel-apts .panel-content > div[style*=“background:#fff”] {
background: #161b22 !important;
border-color: #30363d !important;
}
/* Nagłówki sekcji w ustawieniach: “Logo w menu”, “Nazwa w nagłówku” itd. */
/* Te mają color:#0f172a który jest błędnie nadpisywany — naprawiamy */
html.dark #panel-apts [style*=“font-size:13px;font-weight:700;color:#0f172a”] { color: #c9d1d9 !important; }
/* label “Wgraj” w logo sekcji */
html.dark #panel-apts label[style*=“color:#0f172a”] { color: #8b949e !important; }
/* Przycisk backup “Przywróć” */
html.dark #panel-apts label[style*=“background:#fff;border:1px solid #eaecf0”] {
background: #21262d !important;
border-color: #30363d !important;
color: #c9d1d9 !important;
}
/* ── DARK: Goście — przycisk “Usuń wszystkich” ── */
html.dark button[style*=“background:#fff;border:1.5px solid #fca5a5”] {
background: rgba(220,38,38,0.1) !important;
border-color: rgba(248,81,73,0.4) !important;
}
/* ── DARK: Lang tabs (PL/EN/UA) — białe tło aktywnej zakładki ── */
/* Zakładki języka w panelu wiadomości mają background:#fff gdy active */
html.dark .lang-tab.active {
background: #2d333b !important;
color: #e6edf3 !important;
box-shadow: none !important;
}
/* Zakładki nieaktywne już są obsłużone, ale upewniamy się: */
html.dark .lang-tab:not(.active) {
color: #6e7681 !important;
background: transparent !important;
}
/* Kontener lang-tabs już ma ciemne tło z wcześniejszych reguł */
/* ── DARK: wel-lang-tab (zakładki języka w powitaniu) ── */
html.dark .wel-lang-tab.active {
background: #2d333b !important;
color: #e6edf3 !important;
}
/* ── DARK: btn-copy-text na białym tle (kopiuj do schowka) ── */
html.dark .btn-copy-text {
background: #21262d !important;
border-color: #30363d !important;
color: #c9d1d9 !important;
}
/* ── DARK: sekcja nagłówków w Ustawieniach (niebieskie litery) ── */
/* Problem: color:#0f172a jest nadpisywany na #8b949e zbyt agresywnie w section headers */
/* Naprawka — nagłówki sekcji (‘Logo w menu’ itp.) to bezpośrednie dzieci panel-content */
html.dark #panel-apts .panel-content > div[style*=“font-weight:700;color:#0f172a”] {
color: #c9d1d9 !important;
}
/* color:#0f172a w kontekście linku/przycisku wgraj — zostawiamy muted, OK */
/* ── DARK: Backup — przycisk pobierz (ciemny kolor) ── */
html.dark #panel-apts button[style*=“background:#0f172a;color:#fff;border:none;border-radius:10px”] {
background: #1f6feb !important;
}
/* Settings sections - admin style */
.sec{background:#fff;border:1px solid #f1f5f9;border-radius:10px;margin-bottom:10px;overflow:hidden}
.sec-hdr{padding:10px 14px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px}
.sec-title{font-size:9px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}
.sec-accent{display:inline-block;width:3px;height:14px;border-radius:2px;flex-shrink:0}
.sec-body{padding:12px 14px}
html.dark .sec{background:#161b22!important;border-color:#21262d!important}
html.dark .sec-hdr{border-bottom-color:#21262d!important}
html.dark .sec-title{color:#8b949e!important}
/* Panel section title - admin style */
.panel-section-title {
font-size: 11px !important; font-weight: 700 !important;
color: #94a3b8 !important; text-transform: uppercase !important;
letter-spacing: 1px !important;
}
html.dark .panel-section-title { color: #6e7681 !important; }
html.dark .cal-header { }
html.dark .cal-nav { background: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html.dark .cal-nav:hover { background: #2d333b !important; color: #e6edf3 !important; }
html.dark .cal-title { color: #e6edf3 !important; }
/* Accent color swatches */
.accent-swatch {
width: 32px; height: 32px; border-radius: 50%;
cursor: pointer; border: 3px solid transparent;
transition: all 0.15s; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.accent-swatch.active {
border-color: #fff;
box-shadow: 0 0 0 2px var(–accent, #3b5bdb);
}
.accent-swatch:hover { transform: scale(1.12); }
.btn-primary-add {
background: var(–nav-bg, #0f172a); color: #fff;
border: none; border-radius: 10px;
padding: 10px 16px; font-size: 13px; font-weight: 600;
font-family: ‘DM Sans’, sans-serif; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: opacity 0.15s;
}
.btn-primary-add:hover { opacity: 0.85; }
.sec-accent-themed { background: var(–accent, #3b5bdb) !important; }

.apt-edit-section { margin-bottom: 20px; }
.apt-edit-section-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.field-lbl-sm { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.field-group { margin-bottom: 0; }


/* Role-based desktop nav visibility */
body[data-role="cleaner"] .desktop-nav-btn { display: none !important; }
body[data-role="cleaner"] .desktop-nav-btn[data-tab="dash"],
body[data-role="cleaner"] .desktop-nav-btn[data-tab="cal"],
body[data-role="cleaner"] .desktop-nav-btn[data-tab="clean"] { display: flex !important; }

body[data-role="viewer"] .desktop-nav-btn { display: none !important; }
body[data-role="viewer"] .desktop-nav-btn[data-tab="dash"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="cal"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="res"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="msg"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="clean"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="support"],
body[data-role="viewer"] .desktop-nav-btn[data-tab="plan"] { display: flex !important; }

body[data-role="reception"] .desktop-nav-btn { display: none !important; }
body[data-role="reception"] .desktop-nav-btn[data-tab="dash"],
body[data-role="reception"] .desktop-nav-btn[data-tab="cal"],
body[data-role="reception"] .desktop-nav-btn[data-tab="res"],
body[data-role="reception"] .desktop-nav-btn[data-tab="msg"],
body[data-role="reception"] .desktop-nav-btn[data-tab="inq"],
body[data-role="reception"] .desktop-nav-btn[data-tab="support"],
body[data-role="reception"] .desktop-nav-btn[data-tab="plan"],
body[data-role="reception"] .desktop-nav-btn[data-tab="guests"],
body[data-role="reception"] .desktop-nav-btn[data-tab="clean"] { display: flex !important; }