/* ── Shared components for every page (loaded last in base.html) ── */

/* Universal back button — the Balans page style. `a.mw-back` outranks each page's own *-back-btn rules. */
a.mw-back {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
a.mw-back:hover {
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px);
}
a.mw-back svg {
  width: 20px;
  height: 20px;
}

/* ── Card grid: 2 cards side by side ─────────────────────────────── */
.mw-grid2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  align-content: start;
}
.spt-panel.mw-grid2:not(.active) { display: none !important; }   /* Sport tabs hide inactive panels */
.mw-contents { display: contents; }   /* group wrapper: its children are grid items */
.mw-grid2 > *, .mw-grid2 > .mw-contents > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; }   /* buttons, dividers, empty states: full row */
.mw-grid2 :is(.bal-month-card:not(.bal-summary-card), .drm-card, .trv-card, .vsa-card,
               .acc-entry, .spt-hist-card, .pln-wday, .ua-card, .fl-folder):is(.mw-grid2 > *, .mw-contents > *) { grid-column: auto; min-width: 0; }

/* Half-width card headers: keep titles on one line */
.mw-grid2 :is(.bal-month-title-wrap, .pln-wday-info, .drm-card-title-wrap, .trv-card-title-row, .acc-entry-title-wrap, .ua-card-info) {
  min-width: 0; overflow: hidden; flex: 1 1 auto;
}
/* Compact half-width headers: icon + title only; the extra controls appear once the card is opened */
.mw-grid2 > .trv-card:not(.mw-focus) .trv-curr-badge,
.mw-grid2 .acc-entry:not(.mw-focus) :is(.acc-type-badge, .acc-entry-actions),
.mw-grid2 > .ua-card:not(.mw-focus) .ua-badge,
.mw-grid2 > .vsa-card:not(.mw-focus) :is(.vsa-card-acts, .vsa-card-info > :not(.vsa-country)) { display: none; }
.mw-grid2 > .vsa-card:not(.mw-focus) .vsa-card-header { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.mw-grid2 > .vsa-card:not(.mw-focus) .vsa-country { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* My Week: half-width day cards show name, date, count and + ; bar and chevron only when opened */
.mw-grid2 > .pln-wday:not(.mw-focus) :is(.pln-wday-bar, .pln-wday-toggle) { display: none; }
.mw-grid2 > .pln-wday .pln-wday-head { gap: 6px; }
.mw-grid2 :is(.bal-month-name, .trv-card-name, .drm-card-name, .acc-entry-title, .ua-username, .ua-fullname, .vsa-country) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Focus mode: the open card jumps to the top at full width, everything else fades out ── */
.mw-grid2 .mw-focus:is(.mw-grid2 > *, .mw-contents > *) {
  grid-column: 1 / -1 !important;
  order: -1;
  position: relative;
  z-index: 5;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(89,195,255,0.25);
}
.mw-grid2.mw-focusing > :not(.mw-focus):not(.mw-contents),
.mw-grid2.mw-focusing > .mw-contents > :not(.mw-focus),
.mw-dimmed {
  animation: none !important;   /* cards' fadeInUp (fill: both) would otherwise pin opacity at 1 */
  opacity: 0.07;
  filter: blur(3px);
  pointer-events: none;
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.mw-grid2 > * { transition: opacity 0.22s ease, filter 0.22s ease; }
.mw-gone { display: none !important; }   /* focus mode: dimmed items below the fold add no scroll length */

/* ── Balans: divider between the fixed cards and the user's months ── */
.bal-divider {
  height: 1px;
  margin: 6px 4px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  border: none;
}

/* ── Phones: no zoom when typing ──
   iOS Safari zooms into any field with font-size < 16px (and ignores user-scalable=no for that),
   so fields use 16px on small screens; double-tap zoom is disabled too. */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 560px) {
  input, select, textarea, [contenteditable="true"] { font-size: 16px !important; }
}

/* ── Header "+" (top-right, same look as Visa / Travel) ── */
.mw-head-add {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.mw-head-add:hover, .mw-head-add.active {
  background: rgba(89,195,255,0.15);
  border-color: rgba(89,195,255,0.35);
  color: var(--active, #59c3ff);
}
.mw-head-add svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.mw-head-add.active svg { transform: rotate(45deg); }
.mw-proxied { display: none !important; }   /* old in-list "add" buttons, now driven by the header "+" */

/* Form fields inside flex rows must be allowed to shrink (otherwise they overflow narrow cards) */
input, select, textarea { min-width: 0; max-width: 100%; }
[hidden] { display: none !important; }