/* Responsive layout + theme finishing pass.
   Keep the existing navy/blue identity while letting the original dashboard
   breathe on larger screens and reflow safely on compact phones. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--grad);
  background-color: var(--bg);
}

.app {
  width: min(100%, 680px);
  max-width: 100%;
  padding-inline: clamp(12px, 3.5vw, 24px);
}

.top,
.brand,
.tr,
.meta,
.sheetrow,
.cards,
.summary,
.panel,
.adv,
.total-wrap,
.dsec {
  min-width: 0;
  max-width: 100%;
}

.top {
  align-items: center;
}

.title {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tr {
  min-width: 0;
}

.month {
  max-width: min(42vw, 220px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meta > .mi {
  width: 100%;
  min-width: 0;
}

.tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards > *,
.summary > *,
.mini,
.tc-card,
.tc-card > *,
.rate-wrap > *,
.adv-f > * {
  min-width: 0;
}

.tc-card {
  grid-template-columns: minmax(0, max-content) 1ch minmax(0, 1fr) minmax(76px, auto);
}

.tc-v,
.tc-earn,
.tc-side strong {
  overflow-wrap: anywhere;
}

.adv-t {
  align-items: flex-start;
  gap: 12px;
}

.adv-t > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dstrip {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.dpage {
  min-width: 0;
}

.dpage table {
  width: 100%;
  max-width: 100%;
}

#setd {
  width: min(100vw, 560px);
  max-width: calc(100vw - 24px);
}

#setd .shead,
#setd .sbody,
#setd .sbrand,
#setd .srow,
#setd .scard,
#setd .stx {
  min-width: 0;
  max-width: 100%;
}

#setd .srow select.mi,
#setd .srow .dd.mi,
#setd .srow input.mi {
  min-width: 0;
}

.srow,
button,
[role="button"],
.status,
.nav {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
.status,
.nav {
  min-height: 40px;
}

.status {
  min-width: 40px;
  min-height: 40px;
}

.mi,
.ci,
.dd,
.tmbtn {
  min-height: 42px;
}

/* Compact phones: put the action bar on its own row rather than compressing
   the brand or forcing the month selector off-screen. */
@media (max-width: 380px) {
  .app {
    padding-inline: 12px;
  }

  .top {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
  }

  .brand {
    flex: 1 1 100%;
  }

  .tr {
    width: 100%;
    margin-inline-start: 0;
  }

  .month {
    flex: 1 1 auto;
    max-width: none;
  }

  .meta {
    gap: 8px;
  }

  .tc-card {
    grid-template-columns: minmax(0, max-content) 1ch minmax(0, 1fr);
    column-gap: 6px;
  }

  .tc-side {
    grid-column: 1 / -1;
    grid-row: auto;
    align-items: flex-start;
    text-align: start;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.18);
  }

  .tc-l {
    white-space: normal;
  }

  .tc-l-earn {
    grid-column: 1;
  }

  .tc-earn {
    grid-column: 3;
  }

  .summary {
    gap: 8px;
  }

  .mini {
    padding: 10px;
  }

  .mini.lt {
    grid-template-columns: minmax(0, 1fr);
  }

  .adv-f {
    grid-template-columns: minmax(0, 1fr);
  }

  .adv-t {
    flex-direction: column;
  }

  #setd .shead {
    padding-inline: 16px;
  }

  #setd .sbody {
    padding-inline: 14px;
  }

  .srow {
    gap: 9px;
    padding: 12px;
  }

  .stx b {
    overflow-wrap: anywhere;
  }
}

/* Larger phones and small tablets: retain the compact dashboard, with roomier
   controls and a stable single-line brand/action header. */
@media (min-width: 381px) and (max-width: 767px) {
  .app {
    width: min(100%, 600px);
    padding-inline: clamp(16px, 4vw, 24px);
  }

  .top {
    gap: 12px;
  }

  .tr {
    gap: 8px;
  }

  .month {
    max-width: 190px;
  }

  .primary {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  }

  .adv-f {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet: wider work area, balanced dashboard summaries, and a contained
   settings dialog instead of a full-viewport sheet. */
@media (min-width: 768px) {
  .app {
    width: min(100% - 40px, 980px);
    padding: 28px 0 calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .top {
    margin-bottom: 20px;
  }

  .title {
    font-size: clamp(20px, 2vw, 26px);
  }

  .sub {
    font-size: 13px;
  }

  .meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .sheetrow {
    grid-column: 1 / -1;
  }

  .sheetrow select,
  .sheetrow .dd {
    flex-basis: 100%;
  }

  .total-wrap {
    margin-block: 14px 18px;
  }

  .cards {
    gap: 12px;
  }

  .summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mini.lt {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #setd {
    width: min(560px, calc(100vw - 48px));
    max-width: min(560px, calc(100vw - 48px));
    height: min(88dvh, 900px);
    max-height: min(88dvh, 900px);
    margin: auto;
    border: 1px solid var(--b);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,.32);
  }

  #setd .shead {
    padding: 20px 24px 14px;
  }

  #setd .sbody {
    padding: 18px 24px 28px;
  }

  .bnav {
    width: min(100%, 980px);
    border-radius: 22px 22px 0 0;
  }
}

/* Desktop: use the full canvas without stretching text fields, and preserve
   the original single-column daily table as the visual anchor. */
@media (min-width: 1024px) {
  .app {
    width: min(100% - 64px, 1080px);
  }

  .meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sheetrow {
    flex-wrap: nowrap;
    align-items: center;
  }

  .sheetrow select,
  .sheetrow .dd {
    flex: 1 1 0;
  }

  .sheetrow .tiles {
    flex: 0 0 min(48%, 420px);
    flex-basis: min(48%, 420px);
  }

  .cards {
    gap: 14px;
  }

  .primary {
    padding: 18px 22px;
  }
}