/* Comfort UI — second stylesheet. Hebrew RTL readability overlay.
   Does not rewrite hashed Next CSS. No auth / API changes. */

:root {
  --bg-primary: #eef1f6;
  --bg-header: #eef1f6e6;
  --bg-input: #e8ebf2;
  --text-secondary: #2a2a2e;
  --text-muted: #4b4b50;
  --text-tertiary: #5c5c62;
}

[data-theme="dark"] {
  --bg-primary: #0b0b0d;
  --bg-elevated: #1c1c1e;
  --bg-card: #1c1c1e;
  --bg-header: #0b0b0dcc;
  --bg-bar: #1c1c1ee6;
  --text-secondary: #f0f0f5;
  --text-muted: #d4d4da;
  --text-tertiary: #c2c2c8;
}

html {
  font-size: 16.75px;
}

html,
body {
  line-height: 1.45;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Extra air on common Tailwind leftovers */
.rounded-2xl {
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04), 0 6px 18px rgba(28, 28, 30, 0.05);
}

[data-theme="dark"] .rounded-2xl {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.28);
}

.p-4 {
  padding: 1.15rem;
}

.gap-3 {
  gap: 0.9rem;
}

.py-2 {
  padding-block: 0.62rem;
}

.py-3 {
  padding-block: 0.85rem;
}

/* Money: overdue (#ff3b30 / #FF3B30) — soft red chip */
.bg-red-500\/15,
.text-red-600,
[style*="color:#FF3B30"],
[style*="color:#ff3b30"],
[style*="color: #FF3B30"],
[style*="color: #ff3b30"] {
  background-color: rgba(255, 59, 48, 0.12);
  padding: 0.12em 0.42em;
  border-radius: 0.42rem;
}

/* Overdue invoice cards (red-tinted border from app) */
[style*="rgba(255,59,48,0.28)"] {
  background-color: rgba(255, 59, 48, 0.06);
}

/* Money: waiting / remaining (#ff9500 / #FF9500 / #FFCC00) — soft orange chip */
.bg-yellow-500\/15,
.text-yellow-600,
[style*="color:#FF9500"],
[style*="color:#ff9500"],
[style*="color: #FF9500"],
[style*="color: #ff9500"],
[style*="color:#FFCC00"],
[style*="color:#ffcc00"] {
  background-color: rgba(255, 149, 0, 0.13);
  padding: 0.12em 0.42em;
  border-radius: 0.42rem;
}

/* Paid vs remaining: paid gets a quiet green tint */
.bg-green-500\/15,
.text-green-600,
[style*="color:#34C759"],
[style*="color:#34c759"],
[style*="color:#30D158"],
[style*="color:#30d158"] {
  background-color: rgba(52, 199, 89, 0.12);
  padding: 0.12em 0.42em;
  border-radius: 0.42rem;
}

[data-theme="dark"] .bg-red-500\/15,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] [style*="color:#FF3B30"],
[data-theme="dark"] [style*="color:#ff3b30"] {
  background-color: rgba(255, 69, 58, 0.2);
}

[data-theme="dark"] .bg-yellow-500\/15,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] [style*="color:#FF9500"],
[data-theme="dark"] [style*="color:#ff9500"] {
  background-color: rgba(255, 159, 10, 0.2);
}

[data-theme="dark"] .bg-green-500\/15,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] [style*="color:#34C759"],
[data-theme="dark"] [style*="color:#30D158"] {
  background-color: rgba(48, 209, 88, 0.18);
}

/* Bottom tab bar — taller tap targets (inline height:64) */
.fixed.bottom-0.left-0.right-0.z-40 {
  padding-top: 4px;
}

.fixed.bottom-0.left-0.right-0.z-40 > div {
  height: 72px !important;
  min-height: 72px;
}

/* Wide screens: phone-width column so Hebrew money rows stay readable */
@media (min-width: 540px) {
  html {
    background: #e4e8f0;
  }

  html[data-theme="dark"] {
    background: #050506;
  }

  body {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100dvh;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 18px 50px rgba(15, 23, 42, 0.08);
  }

  .max-w-5xl {
    max-width: 460px;
  }

  /* fixed tab bar is viewport-relative — pin it to the column */
  .fixed.bottom-0.left-0.right-0 {
    left: 50% !important;
    right: auto !important;
    width: 460px;
    max-width: 460px;
    transform: translateX(-50%);
  }
}