/* BM — Burning Man 2026. Desert-night theme (always dark): deep dusty
   browns for the playa at night, amber/orange accents for the Man.
   iOS inset-grouped structure, dark desert-night theme. */

/* ========== 1. Design tokens ========== */
:root {
  /* Always dark — UA controls (date picker, scrollbars) should match. */
  color-scheme: dark;

  --ion-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", system-ui, sans-serif;

  /* Desert-night semantic colors */
  --bm-orange: #f59e4b;                    /* dusty amber — the accent */
  --bm-green: #5ec97a;
  --bm-red: #ff5d4f;
  --bm-sep: rgba(196, 158, 116, 0.28);     /* warm hairline separator */
  --bm-label2: rgba(246, 234, 217, 0.62);  /* secondaryLabel, warm */
  --bm-label3: rgba(246, 234, 217, 0.32);  /* tertiaryLabel, warm */

  /* Ionic palette -> desert night */
  --ion-color-primary: #f59e4b;
  --ion-color-primary-rgb: 245, 158, 75;
  --ion-color-primary-contrast: #2a1606;
  --ion-color-primary-contrast-rgb: 42, 22, 6;
  --ion-color-primary-shade: #d88b42;
  --ion-color-primary-tint: #f6a85d;

  --ion-color-success: #5ec97a;
  --ion-color-success-rgb: 94, 201, 122;
  --ion-color-success-contrast: #06210e;
  --ion-color-success-contrast-rgb: 6, 33, 14;
  --ion-color-success-shade: #53b16b;
  --ion-color-success-tint: #6ece87;

  --ion-color-warning: #ffc45e;
  --ion-color-warning-rgb: 255, 196, 94;
  --ion-color-warning-contrast: #2a1c04;
  --ion-color-warning-contrast-rgb: 42, 28, 4;
  --ion-color-warning-shade: #e0ac53;
  --ion-color-warning-tint: #ffca6e;

  --ion-color-danger: #ff5d4f;
  --ion-color-danger-rgb: 255, 93, 79;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #e05246;
  --ion-color-danger-tint: #ff6d61;

  --ion-color-medium: #a4907c;             /* dusty taupe */
  --ion-color-medium-rgb: 164, 144, 124;
  --ion-color-medium-contrast: #1c130a;
  --ion-color-medium-contrast-rgb: 28, 19, 10;
  --ion-color-medium-shade: #907f6d;
  --ion-color-medium-tint: #ad9b89;

  /* Playa at night: near-black warm page, raised umber cells */
  --ion-background-color: #151009;
  --ion-background-color-rgb: 21, 16, 9;
  --ion-text-color: #f6ead9;
  --ion-text-color-rgb: 246, 234, 217;
  --ion-item-background: #241a10;
  --ion-card-background: #241a10;
  --ion-toolbar-background: rgba(28, 21, 13, 0.82); /* frosted dusty nav bar */
  --ion-tab-bar-background: rgba(23, 17, 10, 0.94);
  --ion-border-color: rgba(196, 158, 116, 0.28);

  /* Avatars: dark initials on warm accents (contrast-safe at 11px) */
  --bm-avatar-orange: #f59e4b;
  --bm-avatar-orange-fg: rgba(26, 14, 3, 0.9);
  --bm-avatar-blue: #7fb0e0;
  --bm-avatar-blue-fg: rgba(6, 16, 26, 0.9);
}

/* Same selectors as dark.system.css's dark-mode blocks; styles.css loads
   after the palette, so these win by source order and keep the theme
   identical whether the OS is in light or dark mode. */
@media (prefers-color-scheme: dark) {
  :root.ios {
    --ion-background-color: #151009;
    --ion-background-color-rgb: 21, 16, 9;
    --ion-text-color: #f6ead9;
    --ion-text-color-rgb: 246, 234, 217;
    --ion-item-background: #241a10;
    --ion-card-background: #241a10;
    --ion-toolbar-background: rgba(28, 21, 13, 0.82);
    --ion-tab-bar-background: rgba(23, 17, 10, 0.94);
    --ion-border-color: rgba(196, 158, 116, 0.28);
  }
}

/* Sheet = elevated grouped bg: umber body, lighter cells (applies in both
   OS schemes; also overrides the palette's :root.ios ion-modal block). */
ion-modal, :root.ios ion-modal {
  --ion-background-color: #241a10;
  --ion-background-color-rgb: 36, 26, 16;
  --ion-item-background: #342718;
  --ion-toolbar-background: rgba(36, 26, 16, 0.9);
  --ion-toolbar-border-color: rgba(196, 158, 116, 0.28);
}

/* ========== 2. Chrome (nav bar, tab bar, glyph) ========== */
.bm-glyph {
  color: var(--bm-orange);
  vertical-align: -2px;
  margin-right: 2px;
}
.bm-glyph-large { vertical-align: -4px; }

.subtitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--bm-label2);
  line-height: 1.2;
}
/* Subheadline under the large title (Calendar/News idiom) */
.subtitle-large {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  margin-top: 1px;
}
ion-header ion-toolbar { --border-color: var(--bm-sep); }

/* Align the large title with the centered 760px content column */
#main-content ion-header[collapse="condense"] {
  max-width: 760px;
  margin: 0 auto;
}
#main-content ion-header[collapse="condense"] ion-toolbar {
  --background: transparent;
  --border-width: 0;
}

ion-tab-bar { --border: 0.5px solid var(--bm-sep); }
#tab-bar ion-tab-button { --color: var(--ion-color-medium); }
#tab-bar ion-tab-button.tab-selected { color: var(--ion-color-primary); }

/* ========== 3. Layout, grouped lists, typography ========== */
.page-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 32px;
  /* ion-content doesn't apply horizontal safe areas to its content; keep
     list cards clear of the notch/rounded corners in landscape. */
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Section headers/footers live OUTSIDE the group, 13pt secondaryLabel.
   32px inset = 16px list margin + 16px cell padding (text-aligned). */
.bm-section-header {
  margin: 24px 32px 7px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bm-label2);
}
.bm-section-footer {
  margin: 8px 32px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--bm-label2);
}

ion-list[inset] {
  margin: 24px 16px 0;   /* deterministic 24px section rhythm */
  border-radius: 10px;   /* classic insetGrouped radius */
}
.bm-section-header + ion-list[inset] { margin-top: 0; }

ion-item {
  --padding-start: 16px;       /* Apple cell inset (ios default is 20px) */
  --inner-padding-end: 16px;
}
/* No separator after the last cell in a group (plain or sliding rows) */
ion-list[inset] > ion-item:last-child,
ion-list[inset] > *:last-child ion-item { --inner-border-width: 0; }

ion-item ion-label h2 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.4px;
  font-weight: 400;
}
ion-item ion-label p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--bm-label2);
}

/* SF tabular figures for every money column */
.bm-total-amount, .exp-amounts, .bal-amount, .settle-amount,
.rates-table .num, #f-amount { font-variant-numeric: tabular-nums; }

/* Layers separate by background contrast, not Material shadows */
ion-card { box-shadow: none; }

.bm-empty {
  padding: 64px 32px;
  text-align: center;
  color: var(--bm-label2);
}
.bm-empty-icon { font-size: 48px; color: var(--bm-orange); }
.bm-empty p { margin: 8px 0 0; font-size: 17px; }
.bm-empty p.bm-empty-sub { margin-top: 4px; font-size: 14px; color: var(--bm-label3); }

/* ========== 4. Avatars ========== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  flex: 0 0 auto;
}
.avatar-sm {
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  margin-right: 4px;
}

/* ========== 5. Expenses tab ========== */
/* Balance summary card (Wallet-style numbers inside an inset card) */
.bm-balance-card {
  margin: 16px 16px 0;
  padding: 16px;
  background: var(--ion-item-background);
  border-radius: 10px;
}
.bm-total-label {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bm-label2);
}
.bm-total-amount {
  margin-top: 2px;
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.37px;
  color: var(--bm-orange);
}
.bm-total-unit {
  font-size: 17px;
  font-weight: 400;
  color: var(--bm-label2);
}
.bm-total-meta {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
}
.bm-total-meta.bm-settled { color: var(--bm-green); font-weight: 400; }
.bm-total-meta2 {
  margin-top: 2px;
  font-size: 13px;
  color: var(--bm-label2);
}

.exp-desc { font-weight: 600; }              /* Wallet merchant semibold */
.participants-row { margin-top: 4px; }

/* Settled expenses: squared away — dimmed, with a tinted capsule badge */
.exp-settled ion-label,
.exp-settled .exp-amounts { opacity: 0.45; }
.settled-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--bm-green);
  background: rgba(94, 201, 122, 0.16);
}
.exp-amounts { text-align: right; line-height: 1.35; white-space: nowrap; }
.exp-usd { font-size: 17px; font-weight: 600; }
.exp-orig { font-size: 13px; color: var(--bm-label2); margin-top: 2px; }
.exp-share { font-size: 13px; color: var(--bm-label2); }

/* Delete affordances: swipe on touch, hover-reveal minus on desktop. */
.desktop-delete { display: none; }
@media (hover: hover) and (pointer: fine) {
  .desktop-delete {
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  ion-item:hover .desktop-delete,
  .desktop-delete:focus-visible { opacity: 1; }
}

/* Sub-tabs within Expenses (segmented control, splitwiser's extra pages) */
.exp-segment-wrap { margin: 16px 16px 0; }
#exp-segment {
  --background: #241a10;
  min-height: 32px;
}
#exp-segment ion-segment-button {
  --color: var(--bm-label2);
  --color-checked: var(--ion-text-color);
  --indicator-color: #3a2b1a;
  min-height: 28px;
  font-size: 13px;
}

/* Balances sub-tab */
.bal-amount { text-align: right; }
.bal-net { font-size: 17px; font-weight: 600; }
.bal-verb { font-size: 13px; color: var(--bm-label2); }
.bal-pos .bal-net { color: var(--bm-green); }
.bal-neg .bal-net { color: var(--bm-red); }
.bal-zero .bal-net { color: var(--bm-label2); }

/* Settle sub-tab */
.settle-avatars { display: flex; align-items: center; }
.settle-arrow { color: var(--bm-label3); margin: 0 6px 0 2px; font-size: 15px; }
.settle-amount { font-size: 17px; font-weight: 600; color: var(--bm-orange); }

/* Rates sub-tab */
.bm-table-card {
  margin: 24px 16px 0;
  background: var(--ion-item-background);
  border-radius: 10px;
  overflow: hidden;
}
.bm-section-header + .bm-table-card { margin-top: 0; }
.table-scroll { overflow-x: auto; }
.rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  white-space: nowrap;
}
.rates-table th {
  padding: 10px 16px 6px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--bm-label2);
  border-bottom: 0.5px solid var(--bm-sep);
}
.rates-table td {
  padding: 11px 16px;
  border-bottom: 0.5px solid var(--bm-sep);  /* hairline; no vertical rules */
}
.rates-table tr:last-child td { border-bottom: none; }
.rates-table .num { text-align: right; }

/* ========== 6. To-dos tab ========== */
.todo-item ion-checkbox {
  --checkbox-background-checked: var(--bm-orange);
  --border-color-checked: var(--bm-orange);
  --checkmark-color: #2a1606;
}
.todo-done .todo-text {
  text-decoration: line-through;
  color: var(--bm-label3);
}
.todo-assignee {
  margin-top: 4px;
  display: flex;
  align-items: center;
}
.todo-assignee-name {
  margin-left: 2px;
  font-size: 13px;
  color: var(--bm-label2);
}

/* ========== 7. Documents tab ========== */
.doc-icon { color: var(--bm-orange); font-size: 26px; }
.doc-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-icon { color: var(--bm-orange); font-size: 24px; }
.link-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-host { color: var(--bm-label2); }

/* ========== 8. Add sheets (expense + to-do) ========== */
#expense-modal ion-list[inset], #todo-modal ion-list[inset],
#link-modal ion-list[inset] { margin-top: 24px; }
#expense-modal .bm-section-header + ion-list[inset] { margin-top: 0; }

/* Date picker card (opened by the ion-datetime-button chip in the sheet).
   ion-datetime & its chip default to the (undefined) light palette, which
   renders light-on-light in this always-dark theme — pin them to desert. */
#date-modal {
  --width: 320px;
  --height: fit-content;
  --border-radius: 14px;
}
ion-datetime-button::part(native) {
  background: #342718;               /* modal cell bg — matches select rows */
  color: var(--ion-text-color);
}
#date-modal ion-datetime {
  --background: #241a10;
  --background-rgb: 36, 26, 16;
  --title-color: var(--ion-text-color);
  color: var(--ion-text-color);
}
.participant-item { --min-height: 44px; }
.form-error {
  margin: 16px 32px 32px;
  font-size: 13px;
  color: var(--ion-color-danger);
}