/* ============================================================
   TRT Tracker – Desktop Section Overrides
   Per-section styles for the desktop single-page layout
   ============================================================ */

/* ── Dashboard Section ───────────────────────────────────── */

/* Hero card – horizontal layout on desktop */
.desktop-mode .next-injection-card {
  display: grid;
  grid-template-columns: auto 1fr 240px;
  gap: 4px 20px;
  text-align: left;
  padding: 24px 32px;
  align-items: center;
}

.desktop-mode .next-injection-card .label {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 14px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 0;
}

.desktop-mode .next-injection-card .date {
  grid-column: 1;
  grid-row: 2;
  font-size: 24px;
  white-space: nowrap;
}

.desktop-mode .next-injection-card .countdown {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 15px;
  opacity: 0.75;
  text-align: center;
  align-self: center;
}

.desktop-mode .next-injection-card .progress-bar-container {
  grid-column: 3;
  grid-row: 1 / 3;
  margin-top: 0;
  align-self: center;
}

/* Stats grid — responsive columns */
.desktop-mode .stats-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.desktop-mode .suggested-dose-card {
  grid-column: auto;
}

.desktop-mode .card-value {
  font-size: 26px;
}

/* ── Log Injection Section ───────────────────────────────── */

.desktop-mode #tab-log .card {
  border-left: 2px solid var(--primary);
}

.desktop-mode #tab-log .card:hover {
  border-left-color: var(--primary-light);
}

/* Editing indicator */
.desktop-mode #tab-log.editing .card {
  border-left-color: var(--accent);
}

/* ── Calendar Section ────────────────────────────────────── */

.desktop-mode #tab-calendar,
.desktop-mode #tab-calendar.active {
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  overflow: hidden;
  max-height: 600px;
}

.desktop-mode .cal-sticky-header {
  position: static;
  flex-shrink: 0;
}

.desktop-mode .cal-scroll {
  max-height: 380px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.desktop-mode .cal-day-detail {
  position: static;
  flex-shrink: 0;
  margin-top: 8px;
}

.desktop-mode .cal-day {
  transition: background 0.1s, box-shadow 0.1s, transform 0.1s;
}

.desktop-mode .cal-day:hover:not(.empty):not(.cal-day-inactive) {
  transform: scale(1.15);
  z-index: 2;
}

/* ── History Section ─────────────────────────────────────── */

.desktop-mode #tab-history {
  max-height: 580px;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.desktop-mode #tab-history::before {
  flex-shrink: 0;
}

.desktop-mode #history-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.desktop-mode #history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.desktop-mode .history-item {
  transition: background 0.1s;
  padding: 12px 8px;
  border-radius: 8px;
  margin: 0 -8px;
}

.desktop-mode .history-item:hover {
  background: var(--surface2);
}

.desktop-mode .history-actions button {
  transition: color 0.15s, background 0.15s;
  border-radius: 6px;
  padding: 6px;
}

.desktop-mode .history-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Vials Section ───────────────────────────────────────── */

.desktop-mode #tab-vials {
  max-height: 580px;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.desktop-mode #tab-vials::before {
  flex-shrink: 0;
}

/* Scrollable vials content */
.desktop-mode #tab-vials .vials-page-header,
.desktop-mode #tab-vials #vial-form-card {
  flex-shrink: 0;
}

.desktop-mode #vials-active-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.desktop-mode .vial-card {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.desktop-mode .vial-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.desktop-mode .vial-card-actions button {
  transition: color 0.15s, background 0.15s, transform 0.1s;
}

.desktop-mode .vial-card-actions button:hover {
  transform: scale(1.1);
}

/* ── Summary & Settings Section ──────────────────────────── */

.desktop-mode #tab-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Section header spans full width */
.desktop-mode #tab-summary::before {
  grid-column: 1 / -1;
}

/* Remove bottom margins (gap handles spacing) */
.desktop-mode #tab-summary > .card {
  margin-bottom: 0;
}

/* Weekly chart card spans full width */
.desktop-mode #tab-summary > .card:nth-child(3) {
  grid-column: 1 / -1;
}

/* Divider spans full width */
.desktop-mode #tab-summary > .more-section-divider {
  grid-column: 1 / -1;
  margin: 4px 0;
}

/* Summary stat rows get hover effect */
.desktop-mode .summary-stat {
  transition: background 0.1s;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 6px;
}

.desktop-mode .summary-stat:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Settings items get hover effect */
.desktop-mode .setting-item {
  transition: background 0.1s;
  padding: 14px 8px;
  margin: 0 -8px;
  border-radius: 6px;
}

.desktop-mode .setting-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Responsive Tweaks Within Desktop ────────────────────── */

/* Narrower desktops: stack log + calendar */
@media (max-width: 1200px) {
  .desktop-mode .tab-content {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px;
  }

  .desktop-mode .next-injection-card {
    grid-template-columns: auto 1fr;
  }

  .desktop-mode .next-injection-card .progress-bar-container {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 4px;
  }

  .desktop-mode .next-injection-card .countdown {
    grid-row: 1 / 3;
  }
}

/* Wide desktops: more breathing room */
@media (min-width: 1600px) {
  .desktop-mode .tab-content {
    padding: 36px 48px;
    gap: 28px;
    max-width: 1500px !important;
  }

  .desktop-mode .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}