/*============================================================================
   24-cleaner-overview.css — [tr_cleaner_overview] přehled pro úklid (interní)
   Plugin Toret Rooms nedodává CSS → stylujeme jeho výstup `.tr-cl-*` do podoby
   šablony. Komponenta je samostatná (styluje se přímo, ne přes section scope),
   aby fungovala i na holé stránce. Obalová sekce stránky = .nj-cleaner-section
   (sand-1, šířka řady) → v kill-listu 13-divi-vb-fix.css.

   Markup (Cleaner\CleanerOverview.php):
     LOGIN:     .tr-cl-login-wrap ( h3.tr-cl-login-title / p.tr-cl-login-error /
                  form.tr-cl-login-form > label + input[password] + button.tr-cl-login-btn )
     DASHBOARD: .tr-cl-dashboard > .tr-cl-header ( h3.tr-cl-title + form.tr-cl-logout-form>button.tr-cl-logout-btn )
                  + .tr-cl-empty
     SEKCE:     section.tr-cl-section > h4.tr-cl-section-title
       Objednávky: .tr-cl-table-wrap > table.tr-cl-table (status třídy na # buňce
                   .tr-cl-status-reserved/confirmed/paid/paidout; .tr-cl-nowrap/.tr-cl-note)
       Obsazenost: .tr-cl-legend (.tr-cl-legend-dot + .tr-cl-bg-*) +
                   .tr-cl-table-wrap > table.tr-cl-calendar (.tr-cl-date-cell,
                   tr.tr-cl-row-weekend, buňky .tr-cl-bg-free/reserved/confirmed/paid/paidout)
============================================================================*/

/* ── obalová sekce stránky ────────────────────────────────────────────────── */
.nj-cleaner-section { background: var(--sand-1); padding: 40px 0 84px; }
.nj-cleaner-section > .et_pb_row {
	max-width: var(--container) !important;
	width: 92% !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

/* status barvy (sdílené legenda + buňky) — výrazně odlišené, ať legenda sedí
   s tabulkou: volno=neutrální / rezervováno=červená / záloha=amber /
   zaplaceno=zelená / vyplaceno=modrá (sémanticky jako admin přehled). */
.tr-cl-bg-free      { background: #eef3f0; color: #557a68; }
.tr-cl-bg-reserved  { background: #fbe0de; color: #b3382f; }
.tr-cl-bg-confirmed { background: #fceccc; color: #8a6313; }
.tr-cl-bg-paid      { background: #d2ecd9; color: #1e7a45; }
.tr-cl-bg-paidout   { background: #d9e6fb; color: #1f5b8f; }

/* ── PŘIHLÁŠENÍ ───────────────────────────────────────────────────────────── */
.tr-cl-login-wrap {
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--r-card);
	box-shadow: var(--shadow);
	padding: 32px;
}
.tr-cl-login-title {
	margin: 0 0 1.2rem;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	color: var(--navy);
	text-align: center;
}
.tr-cl-login-error {
	background: #fdecec;
	border: 1px solid var(--coral);
	color: #a3322a;
	border-radius: var(--r-btn);
	padding: .7rem 1rem;
	font-size: .9rem;
	margin: 0 0 1rem;
}
.tr-cl-login-form { display: flex; flex-direction: column; gap: .5rem; }
.tr-cl-login-form label {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.tr-cl-login-form input[type="password"] {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--navy);
	background: #fff;
}
.tr-cl-login-form input[type="password"]:focus { outline: none; border-color: var(--accent); }
.tr-cl-login-btn {
	margin-top: .6rem;
	height: 46px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: var(--r-btn);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .05em;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(251, 173, 36, .35);
	transition: background .2s;
}
.tr-cl-login-btn:hover { background: var(--accent-2); }

/* ── DASHBOARD ────────────────────────────────────────────────────────────── */
.tr-cl-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.tr-cl-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.7rem;
	color: var(--navy);
}
.tr-cl-logout-form { margin: 0; }
.tr-cl-logout-btn {
	background: transparent;
	border: 1.5px solid var(--line-2);
	color: var(--muted);
	border-radius: var(--r-btn);
	padding: .55rem 1.1rem;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
}
.tr-cl-logout-btn:hover { border-color: var(--navy); color: var(--navy); }
.tr-cl-empty {
	background: #fff;
	border: 1px dashed var(--line-2);
	border-radius: var(--r-card);
	padding: 24px;
	text-align: center;
	color: var(--muted);
}

/* ── SEKCE (objednávky / obsazenost) ──────────────────────────────────────── */
.tr-cl-section {
	background: #fff;
	border-radius: var(--r-card);
	box-shadow: var(--shadow);
	padding: 24px;
	margin-top: 28px;
}
.tr-cl-section:first-of-type { margin-top: 0; }
.tr-cl-section-title {
	margin: 0 0 1.2rem;
	font-family: var(--font-serif);
	font-size: 1.35rem;
	color: var(--navy);
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--line);
}

/* ── TABULKY (společné) ───────────────────────────────────────────────────── */
.tr-cl-table-wrap { overflow-x: auto; }
.tr-cl-table,
.tr-cl-calendar {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
}
.tr-cl-table th,
.tr-cl-calendar th {
	background: var(--navy) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: left;
	padding: 10px 12px;
	white-space: nowrap;
}
.tr-cl-table td,
.tr-cl-calendar td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--line);
	color: var(--navy);
	vertical-align: top;
}
.tr-cl-table tbody tr:hover { background: var(--sand-1); }
.tr-cl-nowrap { white-space: nowrap; }
.tr-cl-note { color: var(--muted); max-width: 220px; }
.tr-cl-note--internal { font-style: italic; }

/* status objednávky — barevná tečka na # buňce */
.tr-cl-table td[class*="tr-cl-status-"] { font-weight: 700; position: relative; padding-left: 22px; }
.tr-cl-table td[class*="tr-cl-status-"]::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
/* stejná sémantika barev jako legenda obsazenosti (rezervováno=červená,
   záloha=amber, zaplaceno=zelená, vyplaceno=modrá) */
.tr-cl-status-reserved::before  { background: #e0524a; }
.tr-cl-status-confirmed::before { background: #d99a14; }
.tr-cl-status-paid::before      { background: #1e7a45; }
.tr-cl-status-paidout::before   { background: #2f6fb0; }

/* legenda u tabulky objednávek — tečky ve stejné barvě jako status na # buňce */
.tr-cl-legend-dot.tr-cl-status-reserved  { background: #e0524a; }
.tr-cl-legend-dot.tr-cl-status-confirmed { background: #d99a14; }
.tr-cl-legend-dot.tr-cl-status-paid      { background: #1e7a45; }
.tr-cl-legend-dot.tr-cl-status-paidout   { background: #2f6fb0; }

/* ── PŘEHLED OBSAZENOSTI (kalendář matice) ────────────────────────────────── */
.tr-cl-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.2rem;
	margin-bottom: 1.2rem;
	font-size: .82rem;
	color: var(--muted);
}
.tr-cl-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.tr-cl-legend-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0, 0, 0, .12); }

.tr-cl-calendar td,
.tr-cl-calendar th { text-align: center; padding: 7px 10px; white-space: nowrap; }
/* lepivý sloupec data + hlavička */
.tr-cl-calendar thead th:first-child,
.tr-cl-date-cell {
	position: sticky;
	left: 0;
	text-align: left;
	font-weight: 600;
	background: var(--sand-2);
	color: var(--navy);
	z-index: 1;
}
.tr-cl-calendar thead th:first-child { background: var(--navy); color: #fff; z-index: 2; }
.tr-cl-row-weekend .tr-cl-date-cell { background: var(--sand-3); }
.tr-cl-calendar tbody td { font-size: .72rem; color: inherit; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.tr-cl-section { padding: 18px; }
	.tr-cl-header { gap: .6rem; }
	.tr-cl-title { font-size: 1.4rem; }
}