/* WarDrix 1.30.0
   Alle Hauptansichten reagieren auf die echte Breite des Inhaltsbereichs,
   nicht auf die Fensterbreite. Dadurch brechen Kopfzeilen, Werkzeugleisten,
   Karten und Spalten auch dann sauber um, wenn das Fenster breit ist, der
   mittlere Bereich aber schmal (viele Seitenleisten offen). Nichts ueberlappt.
   Zusaetzlich werden alle Dialoge auf die Bildschirmgroesse begrenzt. */

/* Inhaltsbereich je Ansicht als Groessen-Container markieren */
.messages.forum-view,
.messages.polls-view,
.messages.ticket-view,
.messages.wd-events-view,
.messages.feedback-view{container-type:inline-size}

/* Kopfzeilen brechen grundsaetzlich um, Buttons rutschen bei Enge nach unten */
.forum-hero,.forum-category-hero-actions,.forum-detail-actions,
.poll-hero,.poll-tools,.poll-card-foot,
.ticket-detail-actions,.forum-category-hero{flex-wrap:wrap}
.forum-hero>*,.poll-hero>*,.ticket-detail-info,.forum-thread-main,.ticket-card-main{min-width:0}

/* ----- Forum: Uebersicht, Kategorie, Themen -----
   Die Forum-Redesign-Regeln setzen feste breite Spalten (Kategorie 260-360px,
   Themen 250px) mit !important. Damit der Umbruch bei schmaler Spalte wirkt,
   brauchen diese Container-Regeln ebenfalls !important. */
@container (max-width:900px){
  .forum-shell{padding:12px 10px 32px}
  .forum-hero{align-items:flex-start}
  .forum-tool-row{grid-template-columns:1fr}
  .forum-detail-head{grid-template-columns:1fr!important}
  .forum-detail-actions{flex-wrap:wrap}
  .forum-original-post,.forum-comment-card{grid-template-columns:34px minmax(0,1fr)!important;padding:11px}
  .forum-post-avatar{width:32px!important;height:32px!important}
}
/* Umbruch der Zeilen und Karten erst, wenn die Spalte wirklich schmal ist,
   damit breite Fenster die reiche Nebeneinander-Ansicht behalten. */
@container (max-width:760px){
  /* Themen-Karten: Statistik unter den Titel statt in feste 250px-Spalte */
  .forum-thread-card{grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important;padding:9px 10px!important}
  .forum-thread-icon{width:34px;height:34px}
  .forum-thread-stats{grid-column:2!important;width:100%!important;min-width:0!important;justify-items:start!important;text-align:left!important;display:flex;gap:12px;flex-wrap:wrap}
  .forum-thread-stats small{width:100%}
  .forum-thread-stats-row{justify-content:flex-start!important}
  .forum-thread-context,.forum-thread-latest{text-align:left!important}
  /* Kategorie-Zeilen: Aktivitaet unter den Titel statt in feste 260-360px-Spalte */
  .forum-category-row-clean{grid-template-columns:38px minmax(0,1fr) 18px!important}
  .forum-category-clean-activity{grid-column:2/3;padding-left:0;border-left:0;margin-top:4px;display:flex;align-items:center;gap:6px;min-width:0}
  .forum-category-clean-activity>small{display:none}
  .forum-category-clean-activity>strong{max-width:60%}
  .forum-category-clean-place,.forum-category-clean-byline,.forum-category-clean-activity>strong{white-space:normal}
  .forum-category-clean-arrow{grid-column:3;grid-row:1/3}
}
@container (max-width:820px){
  .forum-category-grid{grid-template-columns:1fr}
  .forum-category-card{grid-template-columns:46px minmax(0,1fr) auto}
  .forum-category-card-icon{width:44px;height:44px}
  .forum-category-hero{align-items:stretch}
  .forum-category-hero-actions{justify-content:flex-start}
  .forum-category-editor-style{grid-template-columns:1fr}
}
@container (max-width:620px){
  .forum-category-row-clean{grid-template-columns:34px minmax(0,1fr) 16px!important;gap:9px;padding:10px 5px;min-height:70px}
  .forum-category-clean-icon{width:31px;height:31px}
  .forum-category-clean-title strong{font-size:14px}
  .forum-hero{display:grid}
  .forum-new-post{width:100%;justify-content:center}
  .forum-category-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .forum-category-tabs button{white-space:nowrap}
  .forum-search{grid-template-columns:auto minmax(0,1fr)}
  .forum-search-submit{width:34px;padding:0!important;justify-content:center}
  .forum-search-submit>span:last-child{display:none}
  .forum-sort{width:100%}
  .forum-thread-title strong{font-size:14px!important}
  .forum-thread-main>p{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .forum-thread-context,.forum-thread-latest{white-space:normal!important}
  .forum-reply-footer{align-items:stretch;flex-direction:column}
  .forum-reply-footer button{justify-content:center}
  .forum-post-head{align-items:flex-start}
  .forum-detail-info h2{white-space:normal}
}
@container (max-width:560px){
  .forum-category-card{grid-template-columns:42px minmax(0,1fr);padding:12px}
  .forum-category-card-actions{grid-column:2}
  .forum-category-card-stats small{width:100%;margin-left:0}
  .forum-category-card-title{align-items:flex-start;flex-direction:column;gap:5px}
  .forum-category-important{font-size:8px}
  .forum-category-hero-actions>*{width:100%;justify-content:center}
}

/* ----- Kopfleiste der Chat-Spalte: Knoepfe duerfen sich bei schmaler Spalte
   nicht mehr ueberlagern. Jeder Knopf bekommt eine feste Groesse und einen
   klaren Abstand, das Benachrichtigungs-Badge wird gezaehmt (es ragte mit
   position:absolute rechts ueber den Knopf hinaus und schob sich mit dem
   Support-Knopf zusammen). Greift sowohl ueber die echte Spaltenbreite
   (Container) als auch ueber die Fensterbreite (Desktop-App mit breiten
   Seitenleisten faellt unter Container, schmales Browserfenster unter Media). */
@container (max-width:900px){
  .chat-header{gap:8px!important}
  .chat-header .header-action-btn>span:not(.material-symbols-rounded){display:none!important}
  .chat-header .header-action-btn{min-width:34px!important;justify-content:center!important;padding:0 8px!important;margin:0!important}
  .chat-header .header-action-btn>.material-symbols-rounded{margin:0!important}
  .chat-header .notification-center-wrap{flex:0 0 auto;margin-right:2px}
  .chat-header .notification-center-btn{width:34px!important;height:34px!important;padding:0!important;display:inline-grid!important;place-items:center!important;flex:0 0 auto}
  .chat-header .notification-center-badge{right:-2px!important;top:-3px!important;box-shadow:none!important}
  .chat-header .support-request-btn{width:34px!important;height:34px!important;padding:0!important;justify-content:center!important;margin:0!important;box-sizing:border-box!important;flex:0 0 auto}
  .chat-header .support-request-btn>span:last-child{display:none!important}
}
@media (max-width:900px){
  .chat-header{gap:8px!important}
  .chat-header .header-action-btn>span:not(.material-symbols-rounded){display:none!important}
  .chat-header .header-action-btn{min-width:34px!important;justify-content:center!important;padding:0 8px!important;margin:0!important}
  .chat-header .notification-center-wrap{flex:0 0 auto;margin-right:2px}
  .chat-header .notification-center-btn{width:34px!important;height:34px!important;padding:0!important;display:inline-grid!important;place-items:center!important;flex:0 0 auto}
  .chat-header .notification-center-badge{right:-2px!important;top:-3px!important;box-shadow:none!important}
  .chat-header .support-request-btn{width:34px!important;height:34px!important;padding:0!important;justify-content:center!important;margin:0!important;box-sizing:border-box!important;flex:0 0 auto}
  .chat-header .support-request-btn>span:last-child{display:none!important}
}
@container (max-width:470px){
  .chat-header .search-box{display:none!important}
}
@media (max-width:470px){
  .chat-header .search-box{display:none!important}
}

/* ----- Umfragen ----- */
@container (max-width:760px){
  .poll-hero{align-items:flex-start;flex-direction:column;padding:14px}
  .poll-hero h2{font-size:20px}
  .poll-new-button{width:100%;justify-content:center}
  .poll-tools{align-items:stretch;flex-direction:column}
  .poll-filter-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
  .poll-filter-tabs button{padding:7px 5px}
  .poll-card{padding:12px}
  .poll-card-head{gap:8px}
  .poll-status small{max-width:120px;text-align:right}
  .poll-option-top{align-items:flex-start;flex-direction:column;gap:4px}
  .poll-option-stats{align-self:flex-end}
  .poll-card-foot{align-items:flex-start;flex-wrap:wrap}
  .poll-result{order:3;width:100%;margin-left:0;text-align:left}
  .poll-delete{margin-left:auto}
}

/* ----- Tickets ----- */
@container (max-width:760px){
  .ticket-form-grid{grid-template-columns:1fr}
  .ticket-form-grid .full-row{grid-column:auto}
  .ticket-detail-head{grid-template-columns:1fr}
  .ticket-detail-actions{justify-content:flex-start;flex-wrap:wrap}
  .ticket-message-log{height:52vh}
  .ticket-reply{grid-template-columns:1fr}
  .ticket-reply button{height:38px}
  .ticket-status-filters{grid-template-columns:1fr 1fr}
}

/* ----- Chat-Hauptspalte: Kopf und Nachrichtenfeld richten sich nach der
   echten Spaltenbreite, nicht nach der Fensterbreite. So wird der
   Senden-Knopf nie abgeschnitten und nichts ueberlappt, auch wenn das
   Fenster klein ist oder viele Seitenleisten offen sind. ----- */
.chat-main{container-type:inline-size}
.composer textarea{min-width:0}
.chat-title{min-width:0}

@container (max-width:620px){
  /* Werkzeugknoepfe oben, Eingabefeld volle Breite, Senden rechts darunter */
  .composer-row{flex-wrap:wrap;align-items:center}
  .composer-row textarea{flex:1 1 100%;order:0;width:100%}
  .composer-row>.attach-btn,
  .composer-row>.emoji-plus-btn,
  .composer-row>.composer-format-btn,
  .composer-row>.composer-link-btn,
  .composer-row>.voice-record-btn{order:1}
  .composer-row>.send-button{order:2;margin-left:auto}
  .composer-tabs{width:100%;max-width:100%}
  .code-meta{grid-template-columns:1fr}
}
@container (max-width:420px){
  .composer-row{gap:5px}
  .composer-help{flex-wrap:wrap;gap:2px 8px}
}

/* ----- Alle Dialoge auf Bildschirmgroesse begrenzen ----- */
dialog[open]{
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 16px);
  box-sizing:border-box;
  overflow:auto;
}

/* ----- WarDrix 1.28.0: Forum-Kategorie-Berechtigungen pro Rolle (Dialog) ----- */
.forum-category-perms{display:grid;gap:6px;margin-top:4px}
.forum-category-perms>strong{font-size:13.5px;color:#f3f4f6}
.forum-category-perms>small{color:#9aa0ab;font-size:11.5px;line-height:1.45}
.forum-category-perm-list{display:grid;gap:4px;max-height:240px;overflow:auto;border:1px solid #ffffff14;border-radius:9px;padding:7px;background:#ffffff05}
.forum-category-perm-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:6px 7px;border-radius:7px}
.forum-category-perm-row:hover{background:#ffffff07}
.forum-category-perm-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:#e7e9ee}
.forum-category-perm-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forum-category-perm-name .role-color{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.forum-category-perm-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#c4c8d0;white-space:nowrap;cursor:pointer}
.forum-category-perm-check input{accent-color:#f97316;width:15px;height:15px;cursor:pointer}
.forum-category-perm-empty{margin:0;padding:10px 4px;color:#9aa0ab;font-size:12px;text-align:center}
@container (max-width:620px){
  .forum-category-perm-row{grid-template-columns:1fr;gap:5px}
  .forum-category-perm-check{justify-content:flex-start}
}
@media (max-width:620px){
  .forum-category-perm-row{grid-template-columns:1fr;gap:5px}
}