/* ROSE CRM – Listen und Kopfbereiche (ab 0.47.0), Bereich: seiten
 * Tickets, Zeiten, Wiederkehrend, Checklisten, Wissen, IT-Status, Kalender, Hinweis-Banner.
 * Bausteine aus app/src/ListeHilfe.php (rcrm-sk__…), Leiste/Chips/Avatare aus der Kundenliste (rcrm-kl__… in crm-wp.css). */

/* ---------- Gemeinsam ---------- */
.rcrm-app .rcrm-sk__n { display: inline-block; margin-left: 4px; font-weight: 600; opacity: .7; }
.rcrm-app .rcrm-sk__leiste .rcrm-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rcrm-app .rcrm-sk__leiste .rcrm-suche input[type="search"] { width: 260px; max-width: 100%; }
.rcrm-app .rcrm-sk__leiste .rcrm-suche select { max-width: 220px; }
.rcrm-app .rcrm-sk__check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #3d4f60; white-space: nowrap; }
.rcrm-app .rcrm-sk__chips a.rcrm-sk__chip--rot { border-color: #efc6c0; color: #b32d2e; }
.rcrm-app .rcrm-sk__chips a.rcrm-sk__chip--warn { border-color: #f0d9b5; color: #a8660a; }
.rcrm-app .rcrm-sk__leer { text-align: center; padding: 28px; }
.rcrm-app .rcrm-sk__leer p { margin: 0; }
.rcrm-app .rcrm-sk__kunde { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rcrm-app .rcrm-sk__kunde > div { min-width: 0; }
.rcrm-app .rcrm-sk__kname { font-weight: 600; color: #10273a; }
.rcrm-app .rcrm-kl__av.rcrm-sk__av--klein { width: 32px; height: 32px; font-size: 11.5px; }
.rcrm-app .rcrm-kl__av.rcrm-sk__av--leer { background: #e9eef3; color: #8a9aa8; }
/* Balken in Ui::zahlen: .rcrm-bk__balken gibt es schon bei den Berichten (dort margin-left: 17px) – hier ohne Einzug */
.rcrm-app .rcrm-ui__zahlen .rcrm-bk__balken { margin: 8px 0 0; }

/* ⋯-Menü für Zeilenaktionen (ListeHilfe::mehr) */
.rcrm-app .rcrm-sk__mehr { position: relative; display: inline-block; vertical-align: middle; }
.rcrm-app .rcrm-sk__mehr > summary { list-style: none; display: inline-grid; place-items: center; width: 34px; height: 32px; border: 1px solid #d5dee7; border-radius: 8px; background: #fff; color: #5b6e7f; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; user-select: none; }
.rcrm-app .rcrm-sk__mehr > summary::-webkit-details-marker { display: none; }
.rcrm-app .rcrm-sk__mehr > summary:hover, .rcrm-app .rcrm-sk__mehr[open] > summary { border-color: #b9cfdf; color: #10273a; background: #f6f9fb; }
.rcrm-app .rcrm-sk__menue { position: absolute; right: 0; top: calc( 100% + 6px ); z-index: 30; min-width: 200px; padding: 6px; background: #fff; border: 1px solid var( --rc-linie, #e3e9ef ); border-radius: 10px; box-shadow: 0 12px 30px rgba( 16, 39, 58, .14 ); text-align: left; }
.rcrm-app .rcrm-sk__mehr.ist-oben .rcrm-sk__menue { top: auto; bottom: calc( 100% + 6px ); }
.rcrm-app .rcrm-sk__menue > a,.rcrm-app .rcrm-sk__menue form button, .rcrm-app .rcrm-sk__menue form .button-link { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13.5px; line-height: 1.35; color: #1b2a38; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.rcrm-app .rcrm-sk__menue > a:hover, .rcrm-app .rcrm-sk__menue form button:hover { background: #f1f5f9; }
.rcrm-app .rcrm-sk__menue .rcrm-rot, .rcrm-app .rcrm-sk__menue form .button-link.rcrm-rot { color: #b32d2e; }
.rcrm-app .rcrm-sk__menue form { display: block; margin: 0; }
.rcrm-app .rcrm-sk__menue hr { border: 0; border-top: 1px solid var( --rc-linie, #e3e9ef ); margin: 4px 0; }
.rcrm-app .rcrm-sk__akt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.rcrm-app .rcrm-sk__akt form { margin: 0; }
.rcrm-app .rcrm-knopf.rcrm-sk__klein, .rcrm-app .rcrm-sk__akt .rcrm-knopf { padding: 5px 11px; font-size: 12.5px; min-height: 0; }
/* Tabellen mit ⋯-Menü dürfen das Menü nicht abschneiden (widefat hat overflow: hidden) */
.rcrm-app table.widefat.rcrm-sk__tab { overflow: visible; }
.rcrm-app table.widefat.rcrm-sk__tab > thead > tr > :first-child { border-top-left-radius: 12px; }
.rcrm-app table.widefat.rcrm-sk__tab > thead > tr > :last-child { border-top-right-radius: 12px; }
.rcrm-app table.widefat.rcrm-sk__tab > tbody > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
.rcrm-app table.widefat.rcrm-sk__tab > tbody > tr:last-child > :last-child { border-bottom-right-radius: 12px; }
.rcrm-app table.rcrm-sk__tab td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.rcrm-app table.rcrm-sk__tab > tbody > tr:hover > td { background: #f8fbfd; }
.rcrm-app .rcrm-sk__marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

/* Ausgegraute Zeilen (pausiert …): Aktionsspalte nicht ausgrauen, sonst wird das ⋯-Menü durchsichtig */
.rcrm-app .rcrm-sk__tab tr.ist-aus td.rcrm-aktionen { opacity: 1; }

/* ---------- Tickets ---------- */
.rcrm-app .rcrm-sk__tliste .rcrm-tl__kunde .rcrm-sk__kunde { align-items: flex-start; }
.rcrm-app .rcrm-sk__tliste .rcrm-tl__kunde .rcrm-kl__av { margin-top: 1px; }
.rcrm-app .rcrm-sk__tliste + .rcrm-tk-massen { margin-top: 12px; }

@media ( max-width: 782px ) {
	.rcrm-app .rcrm-sk__leiste { gap: 10px; }
	.rcrm-app .rcrm-sk__leiste .rcrm-suche { width: 100%; }
	.rcrm-app .rcrm-sk__leiste .rcrm-suche input[type="search"] { flex: 1 1 100%; width: auto; }
	.rcrm-app .rcrm-sk__leiste .rcrm-suche select { flex: 1 1 0; min-width: 0; max-width: none; }
	.rcrm-app .rcrm-sk__chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
	.rcrm-app .rcrm-sk__chips::-webkit-scrollbar { display: none; }
	.rcrm-app .rcrm-sk__chips a { white-space: nowrap; flex: none; }
	.rcrm-app .rcrm-sk__tliste .rcrm-tl__kunde .rcrm-kl__av { display: none; }
	.rcrm-app .rcrm-sk__tliste .rcrm-tl__kunde .rcrm-sk__kunde, .rcrm-app .rcrm-sk__tliste .rcrm-tl__kunde .rcrm-sk__kunde > div { display: inline; }
	.rcrm-app .rcrm-sk__tliste .rcrm-sk__kname { font-weight: 500; }
	.rcrm-app .rcrm-titel__aktionen { flex-wrap: wrap; }
	.rcrm-app .rcrm-sk__akt { justify-content: flex-start; }
	/* Zeilen als Karten: ⋯ oben rechts statt einsam unten */
	.rcrm-app table.rcrm-sk__tab > tbody > tr > td.rcrm-aktionen { position: absolute; top: 8px; right: 10px; padding: 0 !important; width: auto; }
	.rcrm-app table.rcrm-sk__tab > tbody > tr > td:first-child { padding-right: 44px !important; }
}
.rcrm-app .rcrm-sk__marken--eng { margin-top: 0; align-items: center; }
@media ( max-width: 782px ) {
	.rcrm-app table.rcrm-sk__tab td > .rcrm-badge { justify-self: start; }
}
.rcrm-app .rcrm-sk__zuletzt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---------- Checklisten: Nutzung je Vorlage unter dem Titel ---------- */
.rcrm-app .rcrm-cl-v .rcrm-karte__kopf:has( .rcrm-sk__clinfo ) { flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 12px; }
.rcrm-app .rcrm-sk__clinfo { font-size: 12.5px; color: #6a7a8b; }
.rcrm-app .rcrm-sk__clinfo b { color: #a8660a; font-weight: 600; }

/* ---------- Hinweis-Banner ---------- */
.rcrm-app .rcrm-sk__btext { color: #1b2a38; text-decoration: none; }
.rcrm-app .rcrm-sk__btext:hover { color: #165f85; text-decoration: underline; }
.rcrm-app .rcrm-sk__alle { color: #3d4f60; }
.rcrm-app .rcrm-sk__avs { display: inline-flex; vertical-align: middle; }
.rcrm-app .rcrm-sk__avs .rcrm-kl__av { box-shadow: 0 0 0 2px #fff; }
.rcrm-app .rcrm-sk__avs .rcrm-kl__av + .rcrm-kl__av { margin-left: -8px; }
.rcrm-app .rcrm-banner-tab .rcrm-kl__av { width: 32px; height: 32px; font-size: 11.5px; }
.rcrm-app .rcrm-banner-tab .rcrm-sk__kunde strong { font-weight: 500; }
.rcrm-app .rcrm-banner-tab tr.ist-aus td:not( .rcrm-aktionen ) { opacity: .55; }

/* ---------- IT-Status:Kunden mit Kürzel in den Tabellen der Übersicht ---------- */
.rcrm-app .rcrm-sk__istab td { vertical-align: middle; }
.rcrm-app .rcrm-sk__istab .rcrm-kl__av { width: 32px; height: 32px; font-size: 11.5px; }
.rcrm-app .rcrm-sk__istab .rcrm-sk__kunde strong { font-weight: 500; }

/* ---------- Zeiten: Kennzahlen (ZeitenPage::kennzahlen) in der Optik von Ui::zahlen ----------
 * Inhalt bleibt (Verlauf, Ring, Anteile), nur Kachelform, Abstände und Farben wie die Kundenliste:
 * keine farbigen Oberkanten/Flächen mehr, der Farbpunkt im Titel bleibt als Legende. */
.rcrm-app .rcrm-zk { gap: 14px; }
.rcrm-app .rcrm-zk__k { border-radius: 12px; padding: 14px 18px; }
.rcrm-app .rcrm-zk__k.ist-blau, .rcrm-app .rcrm-zk__k.ist-orange, .rcrm-app .rcrm-zk__k.ist-lila { border-top: 1px solid var( --rc-linie, #e3e9ef ); background: #fff; }
.rcrm-app .rcrm-zk__k.ist-blau { padding-right: 84px; }
.rcrm-app .rcrm-zk__k b { font-size: 26px; }
.rcrm-app .rcrm-zk__k.ist-haupt b { font-size: 30px; }
.rcrm-app .rcrm-zk__k.ist-warn b { color: #b26a00; }
@media ( max-width: 640px ) {
	.rcrm-app .rcrm-zk { gap: 8px; }
	.rcrm-app .rcrm-zk__k { padding: 11px 12px; }
	.rcrm-app .rcrm-zk__k.ist-blau { padding-right: 12px; }
	.rcrm-app .rcrm-zk__k b { font-size: 21px; }
	.rcrm-app .rcrm-zk__k.ist-haupt b { font-size: 24px; }
}