/* Allianz-Konfrontationen (templates/invasion/conflictBox.tpl, gerendert von www/js/tpl/invasion/conflict.js).
   Drei Darstellungen: .ac--classic (Theme-Klassen rahmen/nachricht), .ac--beta (ui-box aus /inc/ui.css), .ac--ext (eigener
   dunkler Look der externen Seite). Seite A blau, Seite B rot.
   Version haengt am rev in cfg/app.conf.php (assetVersion), also nach Aenderungen rev hochzaehlen. */
.ac{ --ac-a:#3b8fef; --ac-b:#e8484a; --ac-surface:#0f1823; --ac-line:rgba(255,255,255,.14); --ac-grid:rgba(255,255,255,.08);
     --ac-ink:#dde6f0; --ac-muted:#9fb0c2; --ac-pop:#0b1520; --ac-pop-line:#3a5a7a; --ac-hover:rgba(88,204,255,.12);
     position:relative; color:var(--ac-ink); font-size:13px; text-align:left; transition:opacity .15s; }
.ac *{ box-sizing:border-box; }
.ac.is-loading{ opacity:.55; pointer-events:none; }
.ac-dim{ color:var(--ac-muted); }
.ac-win{ color:#5cd65c; font-weight:800; }
.ac-lose{ color:#ff6a6a; font-weight:800; }

/* ── Kaesten je Design ── */
.ac-sec{ position:relative; margin:0 0 14px; }
/* Aufklappliste/Overlay im oberen Kasten muessen ueber den folgenden Kaesten liegen (ui-box isoliert jede Ebene) */
.ac-sec--main{ z-index:3; }
.ac-sec--chart, .ac-sec--reports{ z-index:1; }
.ac--classic .ac-sec__hd{ padding:5px 10px; font-size:13px; text-align:left; }
.ac--classic .ac-sec__bd{ padding:10px; }
.ac--beta{ --ac-line:color-mix(in srgb, var(--ui-hl, var(--ui-color, #3a5a7a)) 30%, rgba(255,255,255,.06));
           --ac-grid:color-mix(in srgb, var(--ui-hl, var(--ui-color, #3a5a7a)) 16%, rgba(255,255,255,.04));
           --ac-ink:var(--ui-txt, #e9eff6); --ac-muted:var(--ui-txt-dim, #9fb0c2);
           --ac-pop:var(--ui-base, #0b1520); --ac-pop-line:var(--ui-hl, var(--ui-color, #3a5a7a)); --ac-hover:var(--ui-base-hl, rgba(88,204,255,.12)); }
.ac--beta .ac-sec{ margin:0 0 20px; }
.ac-sec--ext{ background:linear-gradient(180deg, rgba(20,30,44,.92), rgba(11,17,26,.92)); border:1px solid #2f4a66; border-radius:8px; padding:12px 14px; }
.ac-sec--ext .ac-sec__hd{ margin:0 0 10px; font-size:15px; }

/* ── Allianz-Karten (anklickbar) ── */
.ac-uni{ margin:0 0 10px; max-width:100%; }
.ac-head{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin:0 0 12px; }
.ac-ally{ position:relative; display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border-radius:8px;
          border:1px solid var(--ac-line); background:rgba(0,0,0,.18); }
.ac-ally--A{ border-left:4px solid var(--ac-a); }
.ac-ally--B{ border-right:4px solid var(--ac-b); flex-direction:row-reverse; text-align:right; }
.ac-ally--pick{ cursor:pointer; }
.ac-ally--pick:hover, .ac-ally--pick[aria-expanded="true"]{ background:var(--ac-hover); }
.ac-ally--pick:focus-visible{ outline:2px solid #58ccff; outline-offset:2px; }
.ac-caret{ margin-left:auto; color:var(--ac-muted); font-size:12px; }
.ac-ally--B .ac-caret{ margin-left:0; margin-right:auto; }
.ac-logo{ width:44px; height:44px; border-radius:7px; object-fit:cover; background:#101820; border:1px solid #445; flex:0 0 44px; }
.ac-logo--none{ display:inline-block; line-height:44px; text-align:center; font-size:20px; font-weight:800; color:#789; }
.ac-ally__txt{ min-width:0; }
.ac-ally__tag{ font-weight:800; font-size:15px; }
.ac-ally__name{ font-size:11px; color:var(--ac-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-badge{ display:inline-block; font-size:10px; padding:0 6px; border-radius:8px; background:#3a4f66; color:#fff; margin-top:2px; }
.ac-x{ font-size:22px; font-weight:900; color:var(--ac-muted); }

/* Aufklappliste unter der Karte. Im Spiel liefert chat_background (app.css, je Theme) den dunklen Hintergrund,
   die eigene Farbe hier gilt nur extern ohne app.css (dort hat chat_background keine Regel). */
.ac-picker{ position:absolute; z-index:40; display:flex; flex-direction:column; max-height:340px; padding:6px; border-radius:8px;
            background:var(--ac-pop); border:1px solid var(--ac-pop-line); box-shadow:0 10px 26px rgba(0,0,0,.6); }
.ac--classic .ac-picker{ border-radius:0; }
.ac-picker__search{ width:100%; margin:0 0 6px; padding:6px 8px; font-size:12px; }
.ac-picker__list{ overflow:auto; min-height:0; flex:1 1 auto; }
.ac-picker__grp{ padding:6px 6px 3px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--ac-muted); }
.ac-picker__opt{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.ac-picker__opt.is-active{ background:var(--ac-hover); }
.ac-picker__opt.is-cur{ box-shadow:inset 3px 0 0 #58ccff; }
.ac-picker__logo{ width:26px; height:26px; border-radius:5px; object-fit:cover; background:#101820; border:1px solid #445; flex:0 0 26px; }
.ac-picker__logo.ac-logo--none{ line-height:26px; font-size:13px; }
.ac-picker__txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-picker__none{ padding:8px 6px; }

/* ── Modus-Reiter mit "?" + Zeitraum ── */
.ac-ctrl{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.ac-modes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-bottom:2px solid var(--ac-line); }
.ac-mode{ display:flex; align-items:center; justify-content:center; gap:4px; border-bottom:3px solid transparent; margin-bottom:-2px; }
.ac-mode__btn{ background:transparent; border:0; color:var(--ac-muted); font-weight:800; font-size:13px; padding:9px 2px; cursor:pointer; }
.ac-mode__btn:hover{ color:#fff; }
.ac-mode.is-on{ border-bottom-color:#fff; }
.ac-mode.is-on .ac-mode__btn{ color:#fff; }
.ac-mode.is-off .ac-mode__btn{ opacity:.35; cursor:default; }
.ac--beta .ac-mode.is-on{ border-bottom-color:var(--ui-light, var(--ui-color, #fff)); }
.ac--classic .ac-modes{ gap:2px; border-bottom:0; }
.ac--classic .ac-mode{ margin:0; border-bottom:0; }
.ac--classic .ac-mode__btn{ color:inherit; }
.ac--classic .ac-mode:not(.is-on) .ac-mode__btn{ font-weight:normal; }
.ac-q{ width:17px; height:17px; flex:0 0 17px; padding:0; border-radius:50%; border:1px solid currentColor; background:transparent;
       color:var(--ac-muted); font-size:10px; font-weight:800; line-height:15px; text-align:center; cursor:pointer; }
.ac-q:hover, .ac-q[aria-expanded="true"]{ color:#fff; }
.ac-pop{ position:absolute; z-index:40; padding:8px 10px; border-radius:6px; background:var(--ac-pop); border:1px solid var(--ac-pop-line);
         box-shadow:0 8px 20px rgba(0,0,0,.55); font-size:12px; line-height:1.45; }
.ac--classic .ac-pop{ border-radius:0; }
.ac-ranges, .ac-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ac-pill{ padding:5px 11px; border-radius:14px; border:1px solid #3a5a7a; background:rgba(0,0,0,.3); color:var(--ac-ink);
          font-size:12px; font-weight:700; cursor:pointer; }
.ac-pill:hover{ border-color:#7fa6cc; }
.ac--ext .ac-pill.is-on{ background:#dde6f0; border-color:#dde6f0; color:#0c1826; }
.ac--beta .ac-pill{ border-radius:4px; padding:5px 10px; }
.ac--classic .ac-pill{ border-radius:0; color:#E6EFFF; }
.ac--classic .ac-pill:not(.is-on){ font-weight:normal; }
/* aktive Umschalter (Chart-Kategorien, Zeitraum) deutlich markieren: gelber Rand in allen Designs */
.ac .ac-pill.is-on{ border:1px solid #f2c94c; box-shadow:0 0 0 1px #f2c94c inset, 0 0 6px rgba(242,201,76,.45); }
.ac--classic .ac-pill.is-on, .ac--beta .ac-pill.is-on{ color:#fff; }
.ac-mode__btn:focus-visible, .ac-pill:focus-visible, .ac-q:focus-visible, .ac-link:focus-visible, .ac-rep:focus-visible, .ac-svg:focus-visible{
    outline:2px solid #58ccff; outline-offset:2px; }

/* ── Summen ── */
.ac-sums{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ac-sum{ padding:10px 12px; border-radius:8px; background:rgba(0,0,0,.18); border:1px solid var(--ac-line); }
.ac--classic .ac-sum, .ac--classic .ac-ally{ border-radius:0; }
.ac-sum__who{ font-weight:800; display:flex; align-items:center; gap:6px; }
.ac-sum__lbl{ margin-top:6px; font-size:11px; color:var(--ac-muted); text-transform:uppercase; letter-spacing:.4px; }
.ac-sum__big{ font-size:26px; font-weight:800; line-height:1.15; margin:2px 0 8px; word-break:break-all; }
.ac-sum__rows .ac-kv{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid var(--ac-grid); font-size:12px; }
.ac-sum__rows .ac-kv span{ color:var(--ac-muted); }
.ac-sum__rows .ac-kv b{ font-variant-numeric:tabular-nums; }
.ac-key{ display:inline-block; width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.ac-key--A{ background:var(--ac-a); }
.ac-key--B{ background:var(--ac-b); }

/* ── Chart ── */
.ac-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 2px; font-size:12px; }
.ac-legend__it{ display:inline-flex; align-items:center; gap:6px; }
.ac-line{ display:inline-block; width:16px; height:2px; border-radius:1px; flex:0 0 16px; }
.ac-line--A{ background:var(--ac-a); }
.ac-line--B{ background:var(--ac-b); }
.ac-plot{ position:relative; width:100%; }
.ac-svg{ display:block; width:100%; height:auto; touch-action:pan-y; }
.ac-svg .ac-grid{ stroke:var(--ac-grid); stroke-width:1; }
.ac-svg .ac-axis{ stroke:var(--ac-line); stroke-width:1; }
.ac-svg .ac-tick{ fill:var(--ac-muted); font-size:10px; font-family:inherit; }
.ac-svg .ac-cross{ stroke:#7fa6cc; stroke-width:1; }
.ac-svg .ac-dot{ stroke:var(--ac-surface); stroke-width:2; }
.ac-empty{ position:absolute; left:0; right:0; top:42%; text-align:center; color:var(--ac-muted); font-weight:700; pointer-events:none; }
.ac-tip{ position:absolute; z-index:2; min-width:130px; padding:7px 9px; border-radius:6px; background:#0b1520; border:1px solid #3a5a7a;
         box-shadow:0 4px 14px rgba(0,0,0,.5); pointer-events:none; font-size:12px; color:#dde6f0; }
.ac-tip__d{ color:#9fb0c2; margin-bottom:4px; }
.ac-tip__r{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ac-tip__r b{ font-variant-numeric:tabular-nums; }
.ac-tip__s{ color:#9fb0c2; }
.ac-tablewrap{ margin-top:6px; }
.ac-table{ width:100%; margin-top:6px; border-collapse:collapse; }
.ac-table th{ padding:5px; font-size:11px; color:var(--ac-muted); text-align:left; }
.ac-table td{ padding:4px 5px; border-top:1px solid var(--ac-grid); }
.ac-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.ac-link{ background:none; border:0; padding:4px 0; color:#58ccff; cursor:pointer; font-size:12px; text-decoration:underline; }
.ac-link:hover{ color:#fff; }

/* ── Kampfberichte ── */
.ac-rlist{ max-height:360px; overflow:auto; }
.ac-rep{ display:flex; gap:10px; align-items:center; padding:6px 4px; border-top:1px solid var(--ac-grid); cursor:pointer; }
.ac-rep:first-child{ border-top:0; }
.ac-rep:hover{ background:var(--ac-hover); }
.ac-rep__d{ flex:0 0 82px; font-size:11px; }
.ac-rep__who{ display:flex; align-items:center; gap:4px; min-width:0; flex-wrap:wrap; }
.ac-rep__vs{ padding:0 2px; }

/* ── Teilen ── */
.ac-share{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 6px; }
.ac-btn{ padding:6px 12px; cursor:pointer; font-weight:bold; }
.ac-sharebox{ flex:1 1 100%; }
.ac-sharebox summary{ cursor:pointer; font-weight:800; padding:4px 0; }
.ac-field{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; }
.ac-field__l{ flex:0 0 90px; color:var(--ac-muted); font-size:12px; }
.ac-field__i{ flex:1 1 220px; min-width:0; font-size:12px; padding:5px 7px; }
.ac-shareimg{ display:block; max-width:100%; width:600px; margin-top:8px; border-radius:6px; border:1px solid var(--ac-line); }

/* ── Kompakt (Seite einer fremden Allianz) ── */
.ac--compact .ac-sum__big{ font-size:22px; }
.ac--compact .ac-rlist{ max-height:none; }

@media (max-width:640px){
  .ac-head{ gap:6px; }
  .ac-ally{ padding:6px; gap:6px; }
  .ac-logo{ width:32px; height:32px; flex-basis:32px; }
  .ac-logo--none{ line-height:32px; font-size:15px; }
  .ac-ally__tag{ font-size:13px; }
  .ac-x{ font-size:14px; }
  .ac-sums{ grid-template-columns:1fr; }
  .ac-mode__btn{ font-size:11px; padding:8px 1px; }
  .ac-sum__big{ font-size:22px; }
  .ac-field__l{ flex-basis:100%; }
}