/* ═══════════════════════════════════════════════════════════════════════════
 * Agency Portal — Theme-Übersteuerung an Formularfeldern zurücknehmen
 *
 * WARUM ES DIESE DATEI GIBT
 * Das Portal stylt alles über Tailwind-Utilities. Eine Utility ist genau EINE
 * Klasse und hat damit die Spezifität (0,1,0). Themes stylen Formularelemente
 * dagegen über Element+Attribut-Selektoren, und die sind spezifischer:
 *
 *   nectar-blocks-theme (portal.gs3.at), style.css:
 *     input[type=date],input[type=email],…,input[type=text],textarea {
 *       background-color:#f1f1f1; border:none; font-size:14px;
 *       padding:10px; width:100% }                                    (0,1,1)
 *     .container-wrap input[type=text] …                              (0,2,1)
 *
 * Folge, am 05.08.2026 bei 375px im echten Theme gemessen: von `pl-8` (32px
 * Platz für das Lupensymbol) blieben 10px übrig — das Symbol lag auf dem
 * Platzhaltertext. `rounded-lg` wurde zu 4px, `text-xs` zu 14px. Über alle
 * Portalseiten hinweg waren es 135 überstimmte Klassen.
 *
 * WIE DIESE DATEI ES LÖST
 * Die Regeln unten liegen bei (0,2,1) und gewinnen damit gegen die
 * Theme-Grundregel. Sie setzen bewusst EINEN einheitlichen Feldstil für das
 * ganze Portal, statt zu versuchen, jede einzelne Tailwind-Variante zu retten:
 * gegen (0,1,1) käme eine Utility ohnehin nie an, und ein einheitliches Feld
 * ist besser als eines, dessen Aussehen davon abhängt, welches Theme gerade
 * aktiv ist. Abweichungen, die wirklich gebraucht werden (Platz für ein Icon),
 * stehen als eigene Regeln darunter.
 *
 * ABSENDE-KNÖPFE STEHEN NICHT HIER
 * Die haben denselben Konflikt (`button[type=submit]` = (0,1,1), im Theme bis
 * (0,3,2) hinauf), aber eine bessere Lösung: dem <button> fehlt jetzt schlicht
 * das Attribut `type="submit"`. Ein Button ohne type IST ein Absende-Knopf
 * (HTML-Standard), der Selektor `button[type=submit]` greift aber nicht mehr.
 * Damit behält jeder Knopf sein eigenes Tailwind-Aussehen samt seiner eigenen
 * Größe — ein CSS-Reset hätte alle über einen Kamm geschoren.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Wurzel-Container der Portal-Blöcke. Neuen Block gebaut? Hier eintragen.
 *
 * NUR KLASSEN, KEINE IDs: :is() erbt die höchste Spezifität seiner Argumente.
 * Eine einzige ID in dieser Liste hebt die ganze Grundregel auf (1,1,1) — die
 * Feinregeln darunter (Icon-Abstand, Fokus) kommen dann nie mehr zum Zug. Genau
 * das ist beim Bau dieser Datei passiert und fiel erst beim Nachmessen auf; der
 * Shooting-Editor trägt deshalb zusätzlich die Klasse ap-shootings. */
:is(.ap-login-form,
    .ap-social-manager,
    .ap-social-calendar,
    .ap-model-manager,
    .ap-shootings,
    .ap-shooting-responses,
    .ap-shoot-model,
    .ap-admin-dash,
    .ap-mw-step)
  :is(input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="url"],
      input[type="number"],
      input[type="date"],
      input[type="time"],
      select,
      textarea) {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    color: #1f2937;
    font-family: inherit;
    /* 16px ist kein Geschmack, sondern Pflicht: iOS Safari zoomt beim
       Fokussieren in jedes Feld unter 16px hinein und zoomt NICHT zurück.
       Danach ist die Seite breiter als der Bildschirm. Das Theme liefert
       maximum-scale=5, unterdrückt den Effekt also nicht. */
    font-size: 16px;
    line-height: 1.4;
    padding: .625rem .75rem;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Ab Tablet darf es wieder kompakter sein — dort gibt es keinen Auto-Zoom. */
@media (min-width: 640px) {
    :is(.ap-login-form,
        .ap-social-manager,
        .ap-social-calendar,
        .ap-model-manager,
        .ap-shootings,
        .ap-shooting-responses,
        .ap-shoot-model,
        .ap-admin-dash,
        .ap-mw-step)
      :is(input[type="text"], input[type="email"], input[type="password"],
          input[type="search"], input[type="tel"], input[type="url"],
          input[type="number"], input[type="date"], input[type="time"],
          select, textarea) {
        font-size: 14px;
        padding: .5rem .75rem;
    }
}

/* Suchfelder mit Lupensymbol davor. Steht NACH der Grundregel, gleiche
   Spezifität (0,2,1) — die spätere Regel gewinnt. */
:is(.ap-social-manager, .ap-social-calendar, .ap-model-manager, .ap-shootings)
  input.pl-8 { padding-left: 2rem; }
:is(.ap-social-manager, .ap-social-calendar, .ap-model-manager, .ap-shootings)
  input.pl-10 { padding-left: 2.5rem; }
:is(.ap-social-manager, .ap-social-calendar, .ap-model-manager, .ap-shootings)
  input.pr-8 { padding-right: 2rem; }

/* Selects tragen ihr eigenes Pfeil-Symbol als Overlay — Platz dafür lassen. */
:is(.ap-social-manager, .ap-social-calendar, .ap-model-manager, .ap-shootings)
  select.appearance-none { padding-right: 1.75rem; }

/* Fokus sichtbar machen. Das Theme setzt hier nichts Brauchbares, und ohne
   diese Regel ist auf dem Handy nicht erkennbar, in welchem Feld man steht. */
:is(.ap-login-form, .ap-social-manager, .ap-social-calendar, .ap-model-manager,
    .ap-shootings, .ap-shooting-responses, .ap-shoot-model, .ap-admin-dash,
    .ap-mw-step)
  :is(input, select, textarea):focus {
    border-color: var(--ap-ring, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
    outline: none;
}

/* Beschriftungen: das Theme setzt text-transform:uppercase auf <label>.
   Gemessen: „Angemeldet bleiben" brach dadurch dreizeilig um und stieß bei
   375px direkt an „Passwort vergessen?". */
:is(.ap-login-form, .ap-social-manager, .ap-social-calendar, .ap-model-manager,
    .ap-shootings, .ap-shooting-responses, .ap-shoot-model, .ap-admin-dash,
    .ap-mw-step) label {
    text-transform: none;
    letter-spacing: normal;
}

/* ────────────────────────────────────────────────────────────────
   Antippbare Kästchen am Handy.
   Gemessen im Handy-Durchlauf (402px): die Einwilligungs-Checkbox auf dem
   Zusage-Bildschirm und im Beitrags-Editor war 13×13px groß — das Theme
   setzt für Checkboxen keine Größe, also gilt die Browser-Vorgabe. Apple
   und Google nennen 44 bzw. 48px als Mindestmaß; 13px trifft man mit dem
   Daumen nicht zuverlässig, und bei einer Einwilligung ist ein Fehlgriff
   besonders ärgerlich. Der Text daneben ist ohnehin per <label> verknüpft,
   die Kästchen bekommen hier zusätzlich echte Fläche.
   ──────────────────────────────────────────────────────────────── */
:is(.ap-login-form, .ap-social-manager, .ap-social-calendar, .ap-model-manager,
    .ap-shootings, .ap-shooting-responses, .ap-shoot-model, .ap-admin-dash,
    .ap-mw-step, .ap-review-queue)
  :is(input[type="checkbox"], input[type="radio"]) {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    accent-color: var(--ap-ring, #4f46e5);
    flex-shrink: 0;
}

/* Die Beschriftung daneben ist die eigentliche Trefferfläche — sie bekommt
   genug Höhe, damit der ganze Streifen sicher 44px hoch ist. */
:is(.ap-shoot-model, .ap-mw-step, .ap-login-form)
  label:has(> :is(input[type="checkbox"], input[type="radio"])) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ════════════════════════════════════════════════════════════════
   HANDY: Trefferflächen
   Gemessen bei 402 px: das wiederkehrende Muster ist text-xs (12 px Schrift,
   16 px Zeilenhöhe) plus py-1.5/py-2 = 28–34 px. Apple nennt 44 px als
   Mindestmaß, Google 48. Betroffen sind durchgängig Knöpfe — die Feldbreiten
   und -höhen stimmen bereits.

   Warum hier zentral und nicht an jedem Knopf einzeln: es sind über 60 Stellen
   in sieben Dateien, und die Theme-Regel button[type=submit] greift nicht, weil
   die Absende-Knöpfe im Plugin bewusst ohne type auskommen. Eine Media-Query an
   den bekannten Block-Wurzeln erwischt alle auf einmal und ändert am PC nichts.

   Absichtlich nur <button> und Knopf-artige Links (die tragen in diesem
   Projekt durchweg eine rounded-Klasse) — ein blankes „a" hätte auch
   Fließtext-Links im Absatz auf 44 px aufgeblasen.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Wurzel-Auswahl bewusst über den Klassen-PRÄFIX statt über eine Aufzählung:
     die Blöcke haben über zwanzig verschiedene Wurzelklassen (.ap-timeline,
     .ap-post-card, .ap-social-shortcut …), eine Liste wäre beim nächsten neuen
     Block wieder unvollständig — genau das ist beim ersten Anlauf passiert, der
     Zuklapp-Pfeil in .ap-timeline blieb übrig.

     ACHTUNG beim Ändern: [class*="ap-"] wäre falsch, das trifft auch „gap-2"
     und „snap-x". Nur [class^="ap-"] plus [class*=" ap-"] matcht wirklich ein
     Klassen-Token, das mit ap- beginnt. */
  :is([class^="ap-"], [class*=" ap-"])
    :is(button, a[class*="rounded"], summary) {
      min-height: 44px;
  }

  /* Zweiter Fall, im Klicktest gefunden: Elemente, die die ap-Klasse SELBST
     tragen und in KEINEM ap-Container liegen. Die Regel oben verlangt einen
     Vorfahren und ließ sie durchfallen. Gemessen auf der Login-Seite:
     .ap-login-tab (Kunde/Model) 134×38 und .ap-model-act (Einloggen /
     Neu registrieren) 134×30 — letzterer ist der einzige Weg in die
     Registrierung. Beide standen mit min-height:auto da. */
  :is(button, a, summary):is([class^="ap-"], [class*=" ap-"]) {
      min-height: 44px;
  }

  /* Reine Symbolknöpfe scheiterten nach der Höhenregel nur noch an der Breite
     (gemessen: 20×44 und 34×44 im Social-Manager). „Nur ein Icon drin" lässt
     sich in CSS nicht abfragen — min-width kann aber gefahrlos pauschal gelten,
     weil es an allem wirkungslos ist, was ohnehin breiter als 44 px ist. */
  :is([class^="ap-"], [class*=" ap-"]) button {
      min-width: 44px;
  }

  /* Ausgenommen: Kalenderzellen und Chips sitzen in einem festen Raster bzw.
     im Textfluss — dort würde erzwungene Breite das Layout sprengen. */
  :is(.apcal-m-zelle, .ap-chip, .ap-chip-x, .ap-cal-grid button) {
      min-width: 0;
  }

  /* Der Aufklapp-Pfeil der Kartenliste war rund 18×28 px und ist zugleich der
     einzige Weg zurück, wenn die Liste einmal zu ist. */
  :is(.ap-social-manager, .ap-model-manager, .ap-social-calendar) button[aria-expanded] {
      min-width: 44px;
      min-height: 44px;
  }

  /* Lange Wörter — eine URL in Caption, Idee oder Korrekturwunsch ist bei
     Social-Posts der Normalfall. Im gesamten Manager-Block gab es keinen
     einzigen Treffer für break-words/overflow-wrap, und overflow-hidden auf
     der Karte schnitt sie hart ab. */
  :is(.ap-social-manager, .ap-model-manager, .ap-design-detail, .ap-social-detail)
    :is(p, dd, li, .ap-sm-caption, .ap-post-card) {
      overflow-wrap: anywhere;
  }
}

/* ────────────────────────────────────────────────────────────────
   Luft zwischen zwei Portal-Blöcken.

   Das Theme setzt zwischen Blöcken 19px. Zwischen dem Karten-Raster samt
   Blätterleiste und dem Verlaufs-Block darunter wirkte das, als gehörte beides
   zusammen — gemessen 19px zwischen der Blätterleiste und der Verlaufs-Karte.

   Nur unten, nicht oben: der Abstand nach oben kommt vom vorherigen Block, sonst
   addieren sich beide.
   ──────────────────────────────────────────────────────────────── */
/* Nachtrag: Die Liste zählte nur sechs Blöcke auf. Die Kundenseite besteht aber
   aus .ap-social-detail und .ap-timeline — und der erste stand nicht darin, also
   blieb es zwischen den beiden bei den 19px des Themes. Gemessen und bestätigt.
   Jetzt sind alle Block-Wrapper des Portals aufgeführt.

   Die doppelte Aufzählung ist Absicht: Sie hebt das Gewicht auf (0,2,0) und
   sticht damit die Theme-Regel, die mit (0,1,1) sonst gewinnen würde. */
:is(.ap-social-manager, .ap-model-manager, .ap-shootings, .ap-admin-dash,
    .ap-shooting-responses, .ap-timeline, .ap-social-detail, .ap-design-detail,
    .ap-social-calendar, .ap-review-queue, .ap-packages, .ap-social-shortcut):is(.ap-social-manager, .ap-model-manager, .ap-shootings, .ap-admin-dash,
    .ap-shooting-responses, .ap-timeline, .ap-social-detail, .ap-design-detail,
    .ap-social-calendar, .ap-review-queue, .ap-packages, .ap-social-shortcut) {
    margin-bottom: 2rem;
}
/* Die Klasse steht doppelt und das ist Absicht: Das ergibt (0,2,0) statt (0,1,0).
   Das Theme setzt den Blockabstand mit derselben Spezifitaet wie eine einfache
   Klasse, und portal-theme-fix.css wird VOR den Theme-Stilen ausgeliefert — bei
   Gleichstand gewinnt die spaetere Regel, also das Theme. Gemessen: mit einfacher
   Klasse blieb margin-bottom auf 0px. Kein !important noetig, wenn man die
   Spezifitaet ehrlich erhoeht. */


/* ═══════════════════════════════════════════════════════════════
   Aufklapp-Abschnitte (details.ap-acc)
   ═══════════════════════════════════════════════════════════════
   Lag bis 6.7.1 im <style> des Social-Manager-Blocks und galt darum nur
   dort. Das Shooting-Formular benutzte dieselben Klassen, bekam sie aber
   nie zu sehen: Seine Abschnitte standen als nackte <details> mit dem
   Standard-Dreieck des Browsers da. Jetzt eine Fassung für beide.
   ═══════════════════════════════════════════════════════════════ */
:is(.ap-social-manager, .ap-shootings) details.ap-acc {
    border: 1px solid #E5E7EB; border-radius: .5rem; background: #F9FAFB;
}
:is(.ap-social-manager, .ap-shootings) details.ap-acc + details.ap-acc { margin-top: .75rem; }
:is(.ap-social-manager, .ap-shootings) details.ap-acc > summary {
    list-style: none; cursor: pointer; padding: .7rem .9rem;
    display: flex; align-items: center; gap: .55rem;
    font-size: .875rem; font-weight: 600; color: #374151;
}
:is(.ap-social-manager, .ap-shootings) details.ap-acc > summary::-webkit-details-marker { display: none; }
/* Pfeil: war .7rem und damit kaum als Bedienelement erkennbar. */
:is(.ap-social-manager, .ap-shootings) details.ap-acc > summary::before {
    content: "\25B8"; color: #9CA3AF; font-size: 1rem; line-height: 1;
    transition: transform .15s; flex: none;
}
:is(.ap-social-manager, .ap-shootings) details.ap-acc[open] > summary::before { transform: rotate(90deg); }
:is(.ap-social-manager, .ap-shootings) details.ap-acc > summary:hover::before { color: #4B5563; }
:is(.ap-social-manager, .ap-shootings) details.ap-acc > summary:focus-visible {
    outline: 2px solid #4F46E5; outline-offset: -2px; border-radius: .5rem;
}
:is(.ap-social-manager, .ap-shootings) details.ap-acc .ap-acc-hint {
    margin-left: auto; font-weight: 400; font-size: .75rem; color: #6B7280; text-align: right;
}
:is(.ap-social-manager, .ap-shootings) details.ap-acc .ap-acc-body { padding: 0 .9rem .9rem; }