/* /static/support.css */

/* === Alpine-Dialog-Modale auf der Support-Seite fixen === */

/* Grundlayout: Card im Dialog, kein Rahmen vom <dialog> selbst */
dialog[id$="Modal"] {
  border: none;
  padding: 0;
  background: transparent;
}

/* Geschlossene Dialoge komplett ausblenden */
dialog[id$="Modal"]:not([open]) {
  display: none;
}

/* Geöffnete Dialoge als Overlay zentriert anzeigen */
dialog[id$="Modal"][open] {
  position: fixed;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;           /* leicht unterhalb des oberen Randes */
  justify-content: center;
  z-index: 9000;
}

/* Abstand nach oben + max Breite für die Karte */
dialog[id$="Modal"][open] .modal-card {
  margin-top: 10vh;
  max-width: 640px;
  width: 100%;
}

/* Halbtransparenter Hintergrund */
dialog[id$="Modal"][open]::backdrop {
  background: rgba(15, 23, 42, 0.45);
}



/* — mobile Ticket-Cards — */
@media (max-width: 680px) {

  /* Tabellenstruktur in "Cards" umbauen */
  .table-card .table--card,
  .table-card .table--card thead,
  .table-card .table--card tbody,
  .table-card .table--card tr,
  .table-card .table--card td {
    display: block;
    width: 100%;
  }

  .table-card .table--card thead { display: none; }

  /* Jede Tabellenzeile wird zur Card */
  #ticketsBody tr {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    border: 1px solid var(--color-border-light);
  }

  /* Zellen untereinander, Label oben drüber (aus data-label) */
  #ticketsBody td {
    border: 0;
    padding: var(--spacing-xs) 0;
  }
  #ticketsBody td + td {
    border-top: 1px dashed var(--color-border-light);
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-xs);
  }
  #ticketsBody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--color-text-muted);
  }

  /* Admin-Spalten auch mobil anzeigen, wenn Admin aktiv */
  .is-admin #ticketsBody [data-admin-col] {
    display: block !important;
  }

  /* Badges ein bisschen luftiger im Card-Layout */
  .badge { margin-top: 2px; }
}

/* Kleines Optik-Upgrade für die Tabelle im Card-Kontext (auch Desktop) */
.table-card .table--card {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}



/* ===== Support: Toolbar Mobile Polish (Heading + Filter + Button) ===== */
@media (max-width: 680px) {
  /* Toolbar auf volle Kartenbreite ziehen und als 2-spaltiges Grid */
  .card > .toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-surface);
    padding: var(--spacing-md);
    /* an Kartenränder „andocken“ */
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  }
  .card > .toolbar h2 { margin: 0; font-size: clamp(18px, 5vw, 22px); }
  .card > .toolbar .spacer { display: none; }

  /* Schöner Switch für "nur offene" */
  .toggle-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-text-muted);
  }
  .toggle-inline input[type="checkbox"]{
    appearance: none;
    width: 42px; height: 24px; position: relative; outline: none;
    border-radius: 999px; flex: 0 0 auto;
    background: #e2e8f0; border: 1px solid var(--color-border-light);
    cursor: pointer;
  }
  .toggle-inline input[type="checkbox"]::after{
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05));
    transition: transform .2s ease;
  }
  .toggle-inline input[type="checkbox"]:checked{
    background: var(--color-primary-100, #dbeafe);
    border-color: var(--color-primary, #2563eb);
  }
  .toggle-inline input[type="checkbox"]:checked::after{
    transform: translateX(18px);
  }
  .toggle-inline .label-text{
    font-size: .95rem;
  }

  /* Action-Button als „Pill“ rechtsbündig */
  #btnNewTicket{
    grid-column: 2; justify-self: end;
    border-radius: 999px;
    padding: .55rem .9rem;
    line-height: 1; white-space: nowrap;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.05));
  }
}

/* Noch kürzerer Label-Text auf sehr kleinen Screens */
@media (max-width: 380px){
  .toggle-inline .label-text{ display: none; }
  .toggle-inline::after{
    content: "nur offene";
    font-size: .9rem; color: var(--color-text-muted);
  }
}


/* === Support: Ticket-Historie Boxen (Beschreibung + Anhänge) === */

.support-history-block {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-background);   /* passt sich mit Design-Tokens an Light/Dark an */
  color: var(--color-on-surface);
}

/* Beschreibung: Text wie bisher umbrechen & scollbar machen */
.support-history-message {
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}