/* ═══════════════════════════════════════════════════════════════════════
   SOLVEON PULSE · COMPONENT LIBRARY — HF Set primitives (REV-54 Faz 1)
   Depends on: tokens.css
   Pages opt-in: include tokens.css FIRST, then components.css.
   Tailwind/theme.css continue to work side-by-side until migration ends.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. CARDS — base shell
   ───────────────────────────────────────────────────────────────────── */

.s-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.s-card-sunk {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.s-card-interactive { cursor: pointer; }
.s-card-interactive:hover { box-shadow: var(--shadow-hover); }
.s-card-interactive:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   2. HERO CARD — left-border 4px semantic variant, 5 colors
   ───────────────────────────────────────────────────────────────────── */

.hero-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--ink-300);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 110px;
  position: relative;
}

.hero-card__label {
  font-size: var(--fz-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-card__value {
  font-family: var(--font-mono);
  font-size: var(--fz-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-card__unit {
  font-size: var(--fz-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin-left: 4px;
}

.hero-card__sub {
  font-size: var(--fz-xs);
  color: var(--text-faint);
  margin-top: auto;
}

.hero-card__spark {
  height: 28px;
  margin-top: var(--space-2);
}

/* Semantic variants (left border + matching faint background tint) */
.hero-card--tl       { border-left-color: var(--emerald-500); }
.hero-card--kwh      { border-left-color: var(--teal-500); }
.hero-card--peak     { border-left-color: var(--violet-500); }
.hero-card--line     { border-left-color: var(--sky-500); }
.hero-card--ink      { border-left-color: var(--ink-500); }
.hero-card--amber    { border-left-color: var(--amber-500); }

/* ─────────────────────────────────────────────────────────────────────
   3. SYNC BADGE — 3 freshness states
   ───────────────────────────────────────────────────────────────────── */

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.sync-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sync-badge--fresh {
  background: var(--emerald-50);
  color: var(--emerald-700);
}
.sync-badge--stale {
  background: var(--amber-50);
  color: var(--amber-700);
}
.sync-badge--never {
  background: var(--ink-100);
  color: var(--ink-500);
}

/* Live pulse dot (auto-poll indicator) */
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--emerald-500);
  opacity: 0.4;
  animation: pulse-ring 1.6s var(--ease-out) infinite;
}
.pulse-dot--off {
  background: var(--ink-400);
}
.pulse-dot--off::after { animation: none; opacity: 0; }
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2.2);  opacity: 0;   }
}

/* ─────────────────────────────────────────────────────────────────────
   4. SEVERITY BADGE — 3 levels (Kritik / Uyarı / Bilgi)
   ───────────────────────────────────────────────────────────────────── */

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.severity-badge--critical {
  background: var(--red-500);
  color: #ffffff;
}
.severity-badge--warning {
  background: var(--amber-500);
  color: #ffffff;
}
.severity-badge--info {
  background: transparent;
  color: var(--sky-700);
  border: 1px solid var(--sky-500);
}

/* ─────────────────────────────────────────────────────────────────────
   5. RANGE CHIP — Apple-style segmented control
   ───────────────────────────────────────────────────────────────────── */

.range-chips {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.range-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  min-height: 32px;
}
.range-chip:hover { color: var(--text); }
.range-chip[aria-pressed="true"],
.range-chip.is-active {
  background: var(--ink-900);
  color: var(--text-invert);
}
html.dark .range-chip[aria-pressed="true"],
html.dark .range-chip.is-active {
  background: var(--primary);
  color: var(--text-invert);
}

/* ─────────────────────────────────────────────────────────────────────
   6. COMPACT PILL — header-altı tek-satır mono değer
   ───────────────────────────────────────────────────────────────────── */

.compact-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  color: var(--text);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   7. THREE-LABEL PILL — Tüketim/Pik/Ort. saatlik chart üstü
   ───────────────────────────────────────────────────────────────────── */

.three-label-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 6px var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  color: var(--text-muted);
}
.three-label-pill__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.three-label-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.three-label-pill__dot--consume { background: var(--teal-500); }
.three-label-pill__dot--peak    { background: var(--violet-500); }
.three-label-pill__dot--avg     { background: var(--sky-500); }
.three-label-pill__value {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
}

/* ─────────────────────────────────────────────────────────────────────
   8. DRAWER — desktop right-slide, mobile bottom-sheet
   ───────────────────────────────────────────────────────────────────── */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
  z-index: var(--z-overlay);
}
.drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease-out);
}

/* Desktop: right slide-in */
@media (min-width: 768px) {
  .drawer {
    top: 0; right: 0;
    height: 100%;
    width: min(520px, 90vw);
    transform: translateX(100%);
    border-top-left-radius: var(--radius-drawer);
    border-bottom-left-radius: var(--radius-drawer);
  }
  .drawer.is-open { transform: translateX(0); }
}

/* Mobile: bottom-sheet — avoid sticky+dvh trap (feedback_ios_safari_hittest) */
@media (max-width: 767.98px) {
  .drawer {
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    transform: translateY(100%);
    border-top-left-radius: var(--radius-drawer);
    border-top-right-radius: var(--radius-drawer);
  }
  .drawer.is-open { transform: translateY(0); }
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.drawer__title {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semi);
}
.drawer__close {
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: var(--radius-button);
  cursor: pointer;
  color: var(--text-muted);
  min-width: 44px; min-height: 44px;
}
.drawer__close:hover { background: var(--surface-2); color: var(--text); }
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────────────
   9. GANTT ROW — 24sa makine çalışma timeline
   ───────────────────────────────────────────────────────────────────── */

.gantt-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}
.gantt-row__label {
  font-size: var(--fz-sm);
  color: var(--text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-row__track {
  position: relative;
  height: 18px;
  background: var(--surface-2);
  border-radius: var(--radius-button);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.gantt-row__bar {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--violet-500);
  opacity: 0.85;
}
.gantt-row__bar--ref { background: var(--ink-300); }

.gantt-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.gantt-legend__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 4px;
}
.gantt-legend__dot--puant   { background: var(--tou-puant); }
.gantt-legend__dot--gunduz  { background: var(--tou-gunduz); }
.gantt-legend__dot--gece    { background: var(--tou-gece); }
.gantt-legend__dot--makine  { background: var(--violet-500); }

/* ─────────────────────────────────────────────────────────────────────
   10. BAR CHART — kümülatif kWh, violet → teal gradient
   ───────────────────────────────────────────────────────────────────── */

.bar-chart {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 80px;
  padding: var(--space-2) 0;
}
.bar-chart__bar {
  flex: 1;
  background: linear-gradient(to top, var(--teal-500), var(--violet-500));
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   11. GAP OVERLAY — veri boşluğu dashed amber
   ───────────────────────────────────────────────────────────────────── */

.gap-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(245, 158, 11, 0.12) 6px,
    rgba(245, 158, 11, 0.12) 12px
  );
  border: 1px dashed var(--amber-500);
  border-radius: var(--radius-button);
}
.gap-overlay__label {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--amber-50);
  color: var(--amber-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   12. BOTTOM NAV — mobile 4+Daha (local & cloud variants)
   ───────────────────────────────────────────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  justify-content: space-around;
}
@media (max-width: 767.98px) {
  .bottom-nav { display: flex; }
  body.has-bottom-nav { padding-bottom: 70px; }
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  min-height: 44px;
  border: none;
  background: transparent;
}
.bottom-nav__item.is-active {
  color: var(--primary);
}
.bottom-nav__item svg {
  width: 22px; height: 22px;
  stroke-width: 2;
}

/* ─────────────────────────────────────────────────────────────────────
   13. KVKK BANNER — min-disclosure pattern (her sayfa dip)
   ───────────────────────────────────────────────────────────────────── */

.kvkk-banner {
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fz-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-8);
}
.kvkk-banner strong {
  color: var(--text);
  font-weight: var(--fw-semi);
}

/* ─────────────────────────────────────────────────────────────────────
   14. PWA INSTALL HINT — dashed mavi pill
   ───────────────────────────────────────────────────────────────────── */

.pwa-install-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-pill);
  background: var(--primary-bg);
  color: var(--primary);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}
.pwa-install-hint__close {
  background: transparent;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 2px;
  margin-left: 4px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────
   15. MULTI-GATEWAY CHIP — cloud panel'de seçici
   ───────────────────────────────────────────────────────────────────── */

.gateway-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.gateway-chip:hover { border-color: var(--primary); }
.gateway-chip[aria-pressed="true"],
.gateway-chip.is-active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────
   16. EMPTY STATE — dashed kart + ikon + CTA
   ───────────────────────────────────────────────────────────────────── */

.empty-state {
  border: 1.5px dashed var(--hairline-strong);
  background: var(--surface-2);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-3);
  color: var(--text-faint);
  stroke-width: 1.5;
}
.empty-state__title {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.empty-state__body {
  font-size: var(--fz-sm);
  margin-bottom: var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────────
   17. BUTTON — primary + secondary, 44px tap zone (Apple HIG)
   ───────────────────────────────────────────────────────────────────── */

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
}
.s-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.s-btn--primary {
  background: var(--primary);
  color: var(--primary-fg);
}
.s-btn--primary:hover  { background: var(--primary-hover); }
.s-btn--primary:active { background: var(--primary-active); }

.s-btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline-strong);
}
.s-btn--secondary:hover { background: var(--surface-2); }

.s-btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.s-btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.s-btn--sm  { min-height: 36px; padding: 6px 12px; font-size: var(--fz-xs); }

/* ─────────────────────────────────────────────────────────────────────
   18. ANOMALY BANNER — header altı amber strip
   ───────────────────────────────────────────────────────────────────── */

.anomaly-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--amber-50);
  border: 1px solid var(--amber-500);
  border-radius: var(--radius-card);
  color: var(--amber-700);
  font-size: var(--fz-sm);
  line-height: var(--lh-snug);
}
.anomaly-banner__icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  stroke-width: 2;
}
.anomaly-banner__body { flex: 1; }
.anomaly-banner__cta {
  font-weight: var(--fw-semi);
  color: var(--amber-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   19. TOU SLICE — 3-tier dilim göstergesi
   ───────────────────────────────────────────────────────────────────── */

.tou-slice {
  display: flex;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.tou-slice__seg            { height: 100%; }
.tou-slice__seg--puant     { background: var(--tou-puant); }
.tou-slice__seg--gunduz    { background: var(--tou-gunduz); }
.tou-slice__seg--gece      { background: var(--tou-gece); }

/* ─────────────────────────────────────────────────────────────────────
   20. TABLE — base data table
   ───────────────────────────────────────────────────────────────────── */

.s-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fz-sm);
}
.s-table thead th {
  text-align: left;
  font-weight: var(--fw-semi);
  font-size: var(--fz-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0;
}
.s-table tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  vertical-align: middle;
}
.s-table tbody tr:hover td { background: var(--surface-2); }
.s-table td.num,
.s-table th.num { text-align: right; font-family: var(--font-mono); }

/* ─────────────────────────────────────────────────────────────────────
   21. ALARM ROW — sağ sütun listesi (desktop)
   ───────────────────────────────────────────────────────────────────── */

.alarm-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.alarm-row:hover { background: var(--surface-2); }
.alarm-row__rail {
  width: 3px;
  height: 100%;
  min-height: 36px;
  border-radius: var(--radius-pill);
  background: var(--ink-300);
}
.alarm-row--critical .alarm-row__rail { background: var(--red-500); }
.alarm-row--warning  .alarm-row__rail { background: var(--amber-500); }
.alarm-row--info     .alarm-row__rail { background: var(--sky-500); }

.alarm-row__title {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.alarm-row__meta {
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.alarm-row__time {
  font-size: var(--fz-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   22. FORM CONTROLS — 44px tap-zone (Apple HIG mobil)
   ───────────────────────────────────────────────────────────────────── */

.s-input,
.s-select,
.s-textarea {
  display: block;
  width: 100%;
  padding: 10px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-button);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fz-sm);
  min-height: 44px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.s-input:focus,
.s-select:focus,
.s-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.s-textarea { min-height: 88px; resize: vertical; }

/* ─────────────────────────────────────────────────────────────────────
   23. FOUC GUARD — paired with theme.css; inline <script> sets .dark
       on <html> before first paint. CSS hides body until ready.
   ───────────────────────────────────────────────────────────────────── */

html.theme-loading body { visibility: hidden; }
html:not(.theme-loading) body { visibility: visible; }

/* ─────────────────────────────────────────────────────────────────────
   24. MOBILE OVERFLOW GUARD — REV-54 Faz 1 saha smoke (11 May 2026):
   Onur "gövde sola çekili, sağda boşluk" raporu. Sebep: bottom-nav fixed
   left:0 right:0 + main flex-1 padding kombinasyonu viewport'tan dışarı
   taşma yapıyor. Fix: html/body overflow-x kilidi + main min-width:0 +
   bottom-nav box-sizing border-box. Mobile-only (≤767.98px).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  main {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bottom-nav {
    box-sizing: border-box;
    max-width: 100vw;
  }
  /* Page header'da long span'lerin satır kırılmasına izin ver */
  .overview-header,
  header.overview-header {
    min-width: 0;
  }
  .overview-header h1 {
    min-width: 0;
    word-break: break-word;
  }
}