/* ============================================================
   plan.css — Utility-Klassen für den vendorisierten Lageplan-Renderer
   ============================================================

   assets-src/plan/ ist wortgleich aus MOEP übernommen (VENDOR.md) und stylt
   seine Bedienelemente mit Tailwind. Dieses Projekt hat kein Tailwind, also
   tat KEINE dieser Klassen etwas: der Ebenen-Umschalter stand als nackte
   Buttons über dem Plan statt in dessen Ecke, die Legende war unsichtbar, und
   die absolut positionierten Elemente sprengten den Container von innen.

   Diese Datei definiert genau die Klassen nach, die der Renderer benutzt —
   mit Tailwinds VORGABEWERTEN, nicht mit den Design-Tokens dieser App. Der
   Plan soll aussehen wie in MOEP; Abweichungen wären genau das, was der
   wortgleiche Port vermeiden will.

   Jede Regel ist unter `.plan-root` gescopet. Utility-Namen wie `border` oder
   `flex` sind gewöhnlich genug, dass sie ungescopet irgendwann mit app.css
   kollidieren würden.

   ÄNDERT SICH DER RENDERER, muss diese Datei nachziehen. Dass das niemand
   vergisst, sichert tests/Unit/PlanUtilityCssTest.php: er liest die Klassen
   aus assets-src/plan/ und schlägt fehl, sobald eine hier fehlt.
   ============================================================ */

/* ── Position & Sichtbarkeit ───────────────────────────────── */
.plan-root .relative          { position: relative; }
.plan-root .absolute          { position: absolute; }
.plan-root .inset-0           { top: 0; right: 0; bottom: 0; left: 0; }
.plan-root .top-2             { top: 0.5rem; }
.plan-root .left-2            { left: 0.5rem; }
.plan-root .right-2           { right: 0.5rem; }
.plan-root .right-3           { right: 0.75rem; }
.plan-root .bottom-3          { bottom: 0.75rem; }
.plan-root .z-10              { z-index: 10; }
.plan-root .z-20              { z-index: 20; }
.plan-root .pointer-events-none { pointer-events: none; }

/* Blendet Text visuell aus, lässt ihn aber für Screenreader stehen. */
.plan-root .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Layout ────────────────────────────────────────────────── */
.plan-root .flex              { display: flex; }
.plan-root .inline-block      { display: inline-block; }
.plan-root .grid              { display: grid; }
.plan-root .flex-col          { flex-direction: column; }
.plan-root .flex-wrap         { flex-wrap: wrap; }
.plan-root .flex-shrink-0,
.plan-root .shrink-0          { flex-shrink: 0; }
.plan-root .grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-root .items-start       { align-items: flex-start; }
.plan-root .items-center      { align-items: center; }
.plan-root .items-end         { align-items: flex-end; }

/* ── Masse ─────────────────────────────────────────────────── */
.plan-root .w-full            { width: 100%; }
.plan-root .w-4               { width: 1rem; }
.plan-root .w-12              { width: 3rem; }
.plan-root .h-4               { height: 1rem; }
.plan-root .h-12              { height: 3rem; }
.plan-root .min-h-0           { min-height: 0; }
.plan-root .min-w-0           { min-width: 0; }
.plan-root .max-h-40          { max-height: 10rem; }
.plan-root .max-h-\[85\%\]    { max-height: 85%; }
.plan-root .max-w-\[48\%\]    { max-width: 48%; }

/* ── Überlauf & Objektanpassung ────────────────────────────── */
.plan-root .overflow-hidden   { overflow: hidden; }
.plan-root .overflow-y-auto   { overflow-y: auto; }
.plan-root .object-contain    { object-fit: contain; }
.plan-root .object-cover      { object-fit: cover; }

/* ── Abstände ──────────────────────────────────────────────── */
.plan-root .p-1               { padding: 0.25rem; }
.plan-root .p-3               { padding: 0.75rem; }
.plan-root .p-4               { padding: 1rem; }
.plan-root .px-2              { padding-left: 0.5rem;    padding-right: 0.5rem; }
.plan-root .px-2\.5           { padding-left: 0.625rem;  padding-right: 0.625rem; }
.plan-root .px-3              { padding-left: 0.75rem;   padding-right: 0.75rem; }
.plan-root .px-4              { padding-left: 1rem;      padding-right: 1rem; }
.plan-root .py-1              { padding-top: 0.25rem;    padding-bottom: 0.25rem; }
.plan-root .py-1\.5           { padding-top: 0.375rem;   padding-bottom: 0.375rem; }
.plan-root .pt-2              { padding-top: 0.5rem; }
.plan-root .pt-4              { padding-top: 1rem; }
.plan-root .pb-0              { padding-bottom: 0; }
.plan-root .pb-4              { padding-bottom: 1rem; }
.plan-root .mt-0\.5           { margin-top: 0.125rem; }
.plan-root .mt-1              { margin-top: 0.25rem; }
.plan-root .mt-2              { margin-top: 0.5rem; }
.plan-root .mt-2\.5           { margin-top: 0.625rem; }
.plan-root .mt-3              { margin-top: 0.75rem; }
.plan-root .mb-1\.5           { margin-bottom: 0.375rem; }
.plan-root .gap-1             { gap: 0.25rem; }
.plan-root .gap-1\.5          { gap: 0.375rem; }
.plan-root .gap-3             { gap: 0.75rem; }
.plan-root .gap-x-4           { column-gap: 1rem; }
.plan-root .gap-y-1\.5        { row-gap: 0.375rem; }
.plan-root .gap-y-2           { row-gap: 0.5rem; }
.plan-root .space-y-1\.5 > * + * { margin-top: 0.375rem; }

/* ── Flächen & Rahmen ──────────────────────────────────────────
   `border` setzt in Tailwind nur die BREITE — Stil und Vorgabefarbe kommen
   dort aus Preflight, das dieses Projekt nicht lädt. Ohne `border-style`
   bliebe der Rahmen unsichtbar, darum steht er hier mit drin. */
.plan-root .bg-white          { background-color: #ffffff; }
.plan-root .bg-white\/90      { background-color: rgb(255 255 255 / 0.9); }
.plan-root .bg-black          { background-color: #000000; }
.plan-root .bg-black\/30      { background-color: rgb(0 0 0 / 0.3); }
.plan-root .bg-gray-900       { background-color: #111827; }
.plan-root .border           { border: 1px solid #e5e7eb; }
.plan-root .border-t         { border-top: 1px solid #e5e7eb; }
.plan-root .border-black\/5  { border-color: rgb(0 0 0 / 0.05); }
.plan-root .border-black\/10 { border-color: rgb(0 0 0 / 0.1); }
.plan-root .rounded           { border-radius: 0.25rem; }
.plan-root .rounded-lg        { border-radius: 0.5rem; }
.plan-root .rounded-xl        { border-radius: 0.75rem; }
.plan-root .rounded-t-xl      { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.plan-root .shadow            { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.plan-root .shadow-lg         { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* ── Schrift ───────────────────────────────────────────────── */
.plan-root .text-xs           { font-size: 0.75rem;  line-height: 1rem; }
.plan-root .text-sm           { font-size: 0.875rem; line-height: 1.25rem; }
.plan-root .font-medium       { font-weight: 500; }
.plan-root .font-semibold     { font-weight: 600; }
.plan-root .leading-tight     { line-height: 1.25; }
.plan-root .underline         { text-decoration-line: underline; }
.plan-root .truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-root .whitespace-pre-line { white-space: pre-line; }
.plan-root .text-white        { color: #ffffff; }
.plan-root .text-gray-500     { color: #6b7280; }
.plan-root .text-gray-600     { color: #4b5563; }
.plan-root .text-gray-700     { color: #374151; }
.plan-root .text-gray-800     { color: #1f2937; }
.plan-root .text-gray-900     { color: #111827; }

/* ── Zeiger ────────────────────────────────────────────────── */
.plan-root .cursor-grab                  { cursor: grab; }
.plan-root .active\:cursor-grabbing:active { cursor: grabbing; }

/* ── Zustände ──────────────────────────────────────────────────
   Nach den Grundregeln, damit sie diese bei gleicher Spezifität schlagen. */
.plan-root .hover\:bg-white:hover        { background-color: #ffffff; }
.plan-root .hover\:bg-gray-700:hover     { background-color: #374151; }
.plan-root .hover\:text-gray-900:hover   { color: #111827; }
.plan-root .hover\:underline:hover       { text-decoration-line: underline; }

/* `focus:outline-none` nimmt den Ring nicht ersatzlos weg, sondern macht ihn
   durchsichtig — im Modus für hohen Kontrast bleibt der Fokus so sichtbar.
   Genau wie bei Tailwind. */
.plan-root .focus\:outline-none:focus    { outline: 2px solid transparent; outline-offset: 2px; }
.plan-root .focus-visible\:outline:focus-visible              { outline-style: solid; }
.plan-root .focus-visible\:outline-2:focus-visible            { outline-width: 2px; }
.plan-root .focus-visible\:outline-offset-2:focus-visible     { outline-offset: 2px; }
.plan-root .focus-visible\:outline-gray-800:focus-visible     { outline-color: #1f2937; }

/* ── Breakpoint `sm` ───────────────────────────────────────────
   640px, Tailwinds Wert — nicht die 768px, mit denen diese App sonst
   arbeitet. Der Renderer wurde gegen Tailwinds Skala geschrieben. */
@media (min-width: 640px) {
    .plan-root .sm\:w-80            { width: 20rem; }
    .plan-root .sm\:items-center    { align-items: center; }
    .plan-root .sm\:justify-center  { justify-content: center; }
    .plan-root .sm\:rounded-xl      { border-radius: 0.75rem; }
}