/* ═══════════════════════════════════════════════
   MemCaza — Stylesheet
   All visual styles live here.
════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   Change a value here and it updates everywhere.
════════════════════════════════════════════════ */
:root {
  /* Glass & blur */
  --blur-amount:        20px;
  --glass-border-radius: 20px;
  --glass-border:       1px solid rgba(255, 255, 255, 0.25);

  /* Spacing */
  --spacing-sm:  10px;
  --spacing-md:  18px;
  --spacing-lg:  28px;

  /* Animation */
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Light mode colors */
  --bg-gradient-start: #e0c3fc;
  --bg-gradient-end:   #8ec5fc;

  --glass-bg:          rgba(255, 255, 255, 0.35);
  --glass-shadow:      0 8px 32px rgba(31, 38, 135, 0.15);

  --text-primary:      rgba(20, 20, 40, 0.92);
  --text-secondary:    rgba(20, 20, 40, 0.52);

  --accent:            #6a40d4;
  --accent-soft:       rgba(106, 64, 212, 0.12);
}

/* Dark mode colors — iOS applies these automatically */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-gradient-start: #0f0c29;
    --bg-gradient-end:   #302b63;

    --glass-bg:          rgba(255, 255, 255, 0.08);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.40);

    --text-primary:      rgba(255, 255, 255, 0.92);
    --text-secondary:    rgba(255, 255, 255, 0.48);

    --accent:            #a78bfa;
    --accent-soft:       rgba(167, 139, 250, 0.15);
  }
}

/* ═══════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  -webkit-font-smoothing: antialiased;

  background: linear-gradient(
    135deg,
    var(--bg-gradient-start) 0%,
    var(--bg-gradient-end)   100%
  );
  background-attachment: fixed;
  color: var(--text-primary);

  /* Push content clear of the iPhone clock and home bar */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* ═══════════════════════════════════════════════
   GLASS CARD — reusable frosted-glass block
════════════════════════════════════════════════ */
.glass-card {
  background:              var(--glass-bg);
  backdrop-filter:         blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-radius:           var(--glass-border-radius);
  border:                  var(--glass-border);
  box-shadow:              var(--glass-shadow);
}

/* ═══════════════════════════════════════════════
   APP WRAPPER — outer scroll container
════════════════════════════════════════════════ */
.app-wrapper {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-md);
  padding:        var(--spacing-md);
  /* Bottom padding so the floating button never covers the last card */
  padding-bottom: 100px;
  max-width:      540px;
  margin:         0 auto;
}

/* ═══════════════════════════════════════════════
   HEADER
   Sticky so it stays visible while scrolling.
════════════════════════════════════════════════ */
.app-header {
  position: sticky;
  top:      0;
  z-index:  10;
  padding:  var(--spacing-md);
  display:  flex;
  align-items:     center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.app-title {
  font-size:      1.5rem;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--text-primary);
}

.total-row {
  text-align: right;
}

.total-label {
  display:     block;
  font-size:   0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:       var(--text-secondary);
}

.total-amount {
  display:     block;
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--accent);
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════
   ITEM LIST — container for rendered cards
════════════════════════════════════════════════ */
.item-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-sm);
}

/* ═══════════════════════════════════════════════
   ITEM CARD — one card per saved item
════════════════════════════════════════════════ */
.item-card {
  padding: var(--spacing-md);
  cursor:  pointer;
  /* Smooth press feel on tap */
  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth);
  /* Prevent text selection on tap */
  user-select: none;
  -webkit-user-select: none;
}

/* Slight press effect when tapped */
.item-card:active {
  transform:  scale(0.985);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.item-top-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--spacing-sm);
}

.item-name {
  font-size:     1.05rem;
  font-weight:   600;
  color:         var(--text-primary);
  line-height:   1.3;
  overflow-wrap: break-word; /* wrap long unbroken strings like model numbers */
  word-break:    break-word; /* Safari fallback */
}

.item-cost {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--accent);
  white-space:    nowrap;
  letter-spacing: -0.01em;
}

.item-meta {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  5px;
  font-size:   0.8rem;
  color:       var(--text-secondary);
}

.item-dot {
  opacity: 0.4;
}

.item-notes {
  margin-top:  10px;
  font-size:   0.82rem;
  color:       var(--text-secondary);
  line-height: 1.5;
  /* Truncate long notes to one line on the list */
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════
   EMPTY STATE — shown when no items exist
════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding:    var(--spacing-lg) var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.empty-icon {
  font-size:    3rem;
  margin-bottom: var(--spacing-sm);
  line-height:  1;
}

.empty-title {
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--text-primary);
  margin-bottom: 8px;
}

.empty-body {
  font-size:   0.88rem;
  color:       var(--text-secondary);
  line-height: 1.6;
  max-width:   280px;
  margin:      0 auto;
}

/* ═══════════════════════════════════════════════
   FLOATING ADD BUTTON
   Fixed to the bottom-right corner.
   Respects the iPhone home bar with safe-area padding.
════════════════════════════════════════════════ */
.add-btn {
  position: fixed;
  bottom:   calc(env(safe-area-inset-bottom) + 24px);
  right:    24px;
  z-index:  100;

  width:  62px;
  height: 62px;

  /* Glass style */
  background:              var(--accent);
  backdrop-filter:         blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-radius:           50%;
  border:                  1px solid rgba(255, 255, 255, 0.3);
  box-shadow:              0 8px 24px rgba(0, 0, 0, 0.25);

  /* + symbol */
  font-size:   2rem;
  line-height: 1;
  color:       #fff;
  font-weight: 300;

  cursor:  pointer;
  display: flex;
  align-items:     center;
  justify-content: center;

  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth);
}

.add-btn:active {
  transform:  scale(0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════
   ADD VIEW — header with back button and title
════════════════════════════════════════════════ */
.add-header {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  padding:     var(--spacing-sm) 0;
}

.back-btn {
  background:  none;
  border:      none;
  color:       var(--accent);
  font-size:   1rem;
  font-family: inherit;
  font-weight: 500;
  cursor:      pointer;
  padding:     4px 0;
  flex-shrink: 0;
  transition:  opacity var(--transition-smooth);
}

.back-btn:active {
  opacity: 0.55;
}

.add-title {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--text-primary);
}

/* ═══════════════════════════════════════════════
   ADD FORM — glass card containing all fields
════════════════════════════════════════════════ */
.add-form {
  padding:        var(--spacing-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-md);
}

/* One label + one input stacked vertically */
.field-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.field-group label {
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--accent);
}

.required-star {
  color: var(--accent);
}

/* ── Shared input styles ─────────────────────── */
.add-form input,
.add-form textarea {
  width:         100%;
  background:    var(--glass-bg);
  border:        var(--glass-border);
  border-radius: 12px;
  padding:       12px 14px;
  font-size:     1rem;  /* 1rem prevents iOS auto-zoom on focus */
  font-family:   inherit;
  color:         var(--text-primary);
  -webkit-appearance: none;
  appearance:    none;
  transition:    border-color var(--transition-smooth);
}

.add-form input::placeholder,
.add-form textarea::placeholder {
  color: var(--text-secondary);
}

.add-form input:focus,
.add-form textarea:focus,
.add-form select:focus {
  outline:      none;
  border-color: var(--accent);
}

.add-form textarea {
  resize:      none;
  line-height: 1.5;
}

/* ── Select (dropdown) ───────────────────────── */
/* Wrapper holds the custom ▾ arrow */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content:        '▾';
  position:       absolute;
  right:          14px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--accent);
  pointer-events: none;
  font-size:      0.85rem;
}

.add-form select {
  width:         100%;
  background:    var(--glass-bg);
  border:        var(--glass-border);
  border-radius: 12px;
  padding:       12px 36px 12px 14px;
  font-size:     1rem;
  font-family:   inherit;
  color:         var(--text-primary);
  -webkit-appearance: none;
  appearance:    none;
  cursor:        pointer;
  transition:    border-color var(--transition-smooth);
}

/* ── Inline validation error ─────────────────── */
.field-error {
  font-size:    0.8rem;
  color:        #e05252;
  padding-left: 2px;
}

/* ── Save button ─────────────────────────────── */
.save-btn {
  width:         100%;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: 14px;
  padding:       15px;
  font-size:     1rem;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  margin-top:    var(--spacing-sm);
  transition:    transform var(--transition-smooth),
                 opacity var(--transition-smooth);
}

.save-btn:active {
  transform: scale(0.97);
  opacity:   0.85;
}

/* ── Delete button — destructive action ──────── */
.delete-btn {
  width:         100%;
  background:    transparent;
  color:         #e05252;
  border:        1px solid rgba(224, 82, 82, 0.4);
  border-radius: 14px;
  padding:       15px;
  font-size:     1rem;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  transition:    transform var(--transition-smooth),
                 opacity var(--transition-smooth);
}

.delete-btn:active {
  transform: scale(0.97);
  opacity:   0.75;
}

/* ═══════════════════════════════════════════════
   TAB BAR — Items | Projects switcher
════════════════════════════════════════════════ */
.tab-bar {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       6px;
  max-width: 540px;
  margin:    0 auto;
  padding:   var(--spacing-md) var(--spacing-md) 0;
}

.tab-btn {
  padding:     11px;
  border:      var(--glass-border);
  border-radius: 14px;
  background:  var(--glass-bg);
  backdrop-filter:         blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  font-family: inherit;
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--text-secondary);
  cursor:      pointer;
  transition:  background var(--transition-smooth),
               color var(--transition-smooth),
               border-color var(--transition-smooth);
}

/* Active tab: filled with accent color */
.tab-btn.tab-active {
  background:   var(--accent);
  border-color: transparent;
  color:        #fff;
}

.tab-btn:active {
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════
   PROJECT CARD — one card per saved project
════════════════════════════════════════════════ */
.project-card {
  padding: var(--spacing-md);
  cursor:  pointer;
  user-select:         none;
  -webkit-user-select: none;
  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth);
}

.project-card:active {
  transform:  scale(0.985);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.project-name {
  font-size:     1.05rem;
  font-weight:   600;
  color:         var(--text-primary);
  overflow-wrap: break-word;
  word-break:    break-word;
}

.project-notes {
  margin-top:    6px;
  font-size:     0.82rem;
  color:         var(--text-secondary);
  line-height:   1.5;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════
   PROJECT DETAIL VIEW
════════════════════════════════════════════════ */

/* Header card: stacked column — nav row, then name, then total */
.detail-top {
  padding:        var(--spacing-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-sm);
}

/* Back and Edit buttons sit at opposite ends of the top row */
.detail-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

/* Project name — large and bold, wraps long names */
.detail-project-name {
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--text-primary);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* Notes card — just needs padding; glass style comes from glass-card class */
.detail-notes-card {
  padding: var(--spacing-md);
}

/* Notes text — same secondary style used elsewhere */
.detail-notes {
  font-size:   0.88rem;
  color:       var(--text-secondary);
  line-height: 1.6;
}