/**
 * home-v2.css — Home tab v2 conversion (MMB-17491)
 * Non-modal Home surfaces: hero stats, cards, lists, FAB
 * Loaded AFTER v2-theme.css.
 *
 * Key components:
 *   - Home shell with v2 topbar
 *   - Widget grid and widget tiles
 *   - Home toolbar (edit mode)
 *   - Add widget button
 *   - Widget size picker
 */

/* =============================================================================
   HOME SHELL
   ========================================================================== */

/* Home screen uses .screen from style.css, v2-theme adds surface tokens */
#screen-home {
  background: var(--bg);
}

#screen-home .topbar {
  background: var(--s1);
  border-bottom: 1px solid var(--line);
}

#screen-home .topbar h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink-hi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Topbar action buttons (edit icon) */
#screen-home .topbar-actions .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#screen-home .topbar-actions .icon-btn:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

#screen-home .topbar-actions .icon-btn:active {
  background: var(--s3);
}

#screen-home .topbar-actions .icon-btn[aria-pressed="true"] {
  background: var(--olive-dim);
  color: var(--olive);
}

/* Scroll area container */
#screen-home .scroll-area {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* =============================================================================
   HOME TOOLBAR (Edit mode)
   ========================================================================== */

.home-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  background: transparent;
}

.home-toolbar h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.home-toolbar #home-mode-label {
  color: var(--ink-mid);
  transition: color 200ms ease;
}

/* Edit mode active state */
.home-edit-mode .home-toolbar #home-mode-label {
  color: var(--olive);
}

/* Done button in toolbar */
.home-toolbar .btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.home-toolbar .btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.home-toolbar .btn-ghost:hover {
  background: var(--s2);
  border-color: var(--line2);
  color: var(--ink-hi);
}

/* =============================================================================
   WIDGET GRID
   ========================================================================== */

.widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 24px;
  position: relative;
}

/* Widget tile - v2 themed */
.widget {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-height: 110px;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 150ms ease,
              min-height 200ms ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  /* Prevent native browser long-press menus on touch */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.widget:hover {
  border-color: var(--line2);
  box-shadow: var(--shadow-sm);
}

/* Widget size variants */
.widget[data-w="1"][data-h="1"] { grid-column: span 1; min-height: 110px; }
.widget[data-w="2"][data-h="1"] { grid-column: span 2; min-height: 110px; }
.widget[data-w="2"][data-h="2"] { grid-column: span 2; min-height: 200px; }
.widget[data-w="1"][data-h="2"] { grid-column: span 1; min-height: 200px; }
.widget[data-w="2"][data-h="3"] { grid-column: span 2; min-height: 310px; }

/* Widget header (icon + label) */
.widget-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-mid);
  font-weight: 700;
  margin-bottom: 2px;
}

.widget-icon {
  width: 14px;
  height: 14px;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.widget-icon svg {
  width: 14px;
  height: 14px;
}

.widget-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-mid);
}

/* Widget body content */
.widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Widget content rows */
.widget-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.widget-row-primary {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-hi);
}

.widget-row-secondary {
  font-size: 11px;
  color: var(--ink);
}

.widget-row-meta {
  font-size: 10px;
  color: var(--ink-mid);
  margin-left: auto;
}

/* Widget title/value/meta (legacy classes) */
.widget-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-hi);
}

.widget-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-hi);
  letter-spacing: -0.5px;
  font-family: var(--font-display);
}

.widget-meta {
  font-size: 11px;
  color: var(--ink);
}

.widget-footer {
  margin-top: auto;
  font-size: 10px;
  color: var(--ink-low);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Widget states */
.widget-empty,
.widget-loading,
.widget-error {
  font-size: 11px;
  color: var(--ink-mid);
  padding: 4px 0;
  line-height: 1.35;
}

.widget-error {
  color: var(--bad);
}

/* =============================================================================
   WIDGET EDIT MODE
   ========================================================================== */

/* iOS-style jiggle animation */
@keyframes widget-jiggle {
  0%   { transform: rotate(-0.5deg) translateY(0); }
  25%  { transform: rotate(0.6deg)  translateY(-0.5px); }
  50%  { transform: rotate(-0.4deg) translateY(0); }
  75%  { transform: rotate(0.5deg)  translateY(0.5px); }
  100% { transform: rotate(-0.5deg) translateY(0); }
}

@keyframes widget-jiggle-alt {
  0%   { transform: rotate(0.5deg)  translateY(0); }
  25%  { transform: rotate(-0.6deg) translateY(0.5px); }
  50%  { transform: rotate(0.4deg)  translateY(0); }
  75%  { transform: rotate(-0.5deg) translateY(-0.5px); }
  100% { transform: rotate(0.5deg)  translateY(0); }
}

.home-edit-mode .widget-grid .widget {
  cursor: grab;
  animation: widget-jiggle 420ms ease-in-out infinite;
  transform-origin: 50% 50%;
}

.home-edit-mode .widget-grid .widget:nth-child(2n) {
  animation: widget-jiggle-alt 460ms ease-in-out infinite;
  animation-delay: -100ms;
}

.home-edit-mode .widget-grid .widget:nth-child(3n) { animation-delay: -60ms; }
.home-edit-mode .widget-grid .widget:nth-child(5n) { animation-delay: -200ms; }

.home-edit-mode .widget-grid .widget:hover {
  border-color: var(--line);
}

/* Remove handle (top-left badge) */
.widget-remove {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 22px;
  height: 22px;
  background: var(--ink-hi);
  color: var(--bg);
  border: 2px solid var(--bg);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  padding: 0;
  padding-bottom: 2px;
  user-select: none;
}

.home-edit-mode .widget-grid .widget .widget-remove {
  display: flex;
}

.widget-remove:active {
  transform: scale(0.92);
}

/* Active drag state */
.widget.dragging {
  animation: none !important;
  opacity: 0.92;
  z-index: 100;
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transform: scale(1.04) rotate(0deg);
  transition: none;
}

/* Placeholder during drag */
.widget.dragging-placeholder {
  visibility: hidden;
  animation: none !important;
}

/* Smooth reflow animation */
.home-edit-mode .widget-grid .widget.reflow {
  animation: none;
  transform: translate(var(--reflow-x, 0), var(--reflow-y, 0));
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Inactive content during edit mode */
.home-edit-mode .widget-grid .widget * {
  pointer-events: none;
}

.home-edit-mode .widget-grid .widget .widget-remove {
  pointer-events: auto;
}

/* The size picker is appended INSIDE the tile, so the blanket rule above
   would swallow its option clicks too — they must stay interactive or
   resizing is impossible in the only mode where the picker exists. */
.home-edit-mode .widget-grid .widget .widget-size-picker,
.home-edit-mode .widget-grid .widget .widget-size-picker * {
  pointer-events: auto;
}

/* =============================================================================
   WIDGET SIZE PICKER
   ========================================================================== */

.widget-size-picker {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--s3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 10;
}

.widget-size-opt {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.widget-size-opt:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

.widget-size-opt.active,
.widget-size-opt[aria-selected="true"] {
  background: var(--olive);
  color: var(--bg);
}

.widget-size-dims {
  font-size: 9px;
  color: var(--ink-mid);
  margin-left: 2px;
}

.widget-size-opt.active .widget-size-dims,
.widget-size-opt[aria-selected="true"] .widget-size-dims {
  color: var(--bg);
  opacity: 0.7;
}

/* =============================================================================
   ADD WIDGET BUTTON
   ========================================================================== */

.add-widget-btn {
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--ink-mid);
  padding: 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  grid-column: span 2;
  min-height: 70px;
  font-family: var(--font-ui);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  margin: 0 16px 16px;
}

.add-widget-btn:hover {
  color: var(--ink-hi);
  border-color: var(--olive);
  background: var(--olive-dim);
}

.add-widget-btn:active {
  transform: translateY(1px);
}

/* =============================================================================
   ACTIVITY WIDGET SPECIFIC
   ========================================================================== */

.activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.activity-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: center;
}

.activity-cell .num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-hi);
  line-height: 1;
}

.activity-cell .lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* =============================================================================
   HERO STAT WIDGET (if used in home)
   ========================================================================== */

.widget .hero-stat {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.widget .hero-stat-value {
  font-size: 28px;
}

.widget .hero-stat-label {
  font-size: 10px;
}

/* =============================================================================
   WIDGET CATALOG MODAL ("Add a widget")
   Markup emitted by js/widget-catalog.js#openCatalogModal. These classes had
   no rules anywhere — the modal rendered as a raw text pile (Ed, 2026-06-12).
   ========================================================================== */

.widget-catalog-modal h2 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink-hi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.widget-catalog-modal .catalog-subtitle {
  font-size: 12px;
  color: var(--ink-mid);
  margin: 0 0 12px;
}

.widget-catalog-modal .catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 2px;
}

@media (min-width: 480px) {
  .widget-catalog-modal .catalog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.catalog-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.catalog-tile:hover:not(.added) {
  background: var(--s3);
  border-color: var(--olive);
}

.catalog-tile.added {
  opacity: 0.4;
  cursor: default;
}

.catalog-tile-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--s3);
  color: var(--olive);
}

.catalog-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.catalog-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-hi);
  letter-spacing: 0.3px;
}

.catalog-tile-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-mid);
}

.catalog-tile-sizes {
  font-size: 9.5px;
  color: var(--ink-mid);
  opacity: 0.75;
  letter-spacing: 0.4px;
}

.widget-catalog-modal .catalog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}