/* ============================================================
   Kiryana List — custom.css
   Design language: a shopkeeper's paper chit / ledger slip.
   Bootstrap handles structure; this file only adds the accent
   layer (color, type, the dotted "chit" rows, and the torn-edge
   summary) per the brief's request for minimal customization.
   ============================================================ */

:root{
  --paper:      #F5F6F1;   /* page background, cool paper (not the AI-default cream) */
  --card:       #FFFFFF;
  --ink:        #2B2B26;   /* body text */
  --ink-soft:   #6B6B62;   /* secondary text */
  --pine:       #1F5D4C;   /* primary — fresh produce green */
  --pine-dark:  #163F33;
  --pine-soft:  #E4EEEA;
  --ledger-red: #A83A2E;   /* totals / amounts, like a shopkeeper's red-ink ledger */
  --amber:      #C98A1D;   /* unavailable / warning */
  --line:       #DEDCD2;   /* hairline borders */
  --strike:     #9B9B93;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

html, body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* ---------- Header ---------- */
.app-header{
  background: var(--pine);
  color: #fff;
  padding: .8rem 1rem;
  flex-wrap: nowrap;
  gap: .5rem;
}
.app-header .header-text{
  min-width: 0; /* allow flex child to shrink instead of wrapping siblings */
}
.app-header .brand{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 1.1rem;
  white-space: nowrap;
}
.app-header .brand i{ margin-right: .4rem; }
.app-header .tagline{
  font-size: .68rem;
  color: #CFE3DB;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px){
  .app-header .brand{ font-size: 1rem; }
}

/* ---------- Toolbar ---------- */
.toolbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.toolbar .btn{ font-size: .85rem; }

/* ---------- The chit / list card ---------- */
.chit{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.chit-row{
  display: grid;
  grid-template-columns: 34px 1fr 92px 96px 40px;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-bottom: 1px dashed var(--line);
  font-size: .9rem;
  cursor: pointer;
  transition: background .12s ease;
}
.chit-row:last-child{ border-bottom: none; }
.chit-row:hover{ background: var(--pine-soft); }
.chit-row.selected{ background: #FDF3E9; }

.chit-row .item-name{
  font-weight: 600;
  line-height: 1.15;
}
.chit-row .item-name-ur{
  font-family: 'Noto Nastaliq Urdu', serif;
  color: var(--ink-soft);
  font-size: .8rem;
  direction: rtl;
}
.chit-row .qty-badge{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: right;
}
.chit-row .qty-old{
  text-decoration: line-through;
  color: var(--strike);
  margin-right: .3rem;
}
.chit-row .row-total{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ledger-red);
  text-align: right;
  font-size: .95rem;
}
.chit-row.unavailable{
  opacity: .55;
}
.chit-row.unavailable .item-name,
.chit-row.unavailable .row-total{
  text-decoration: line-through;
  color: var(--strike);
}
.chit-row .edit-btn{
  color: var(--ink-soft);
  border: none;
  background: none;
}
.chit-row .edit-btn:hover{ color: var(--pine); }

.chit-header{
  display: grid;
  grid-template-columns: 34px 1fr 92px 96px 40px;
  gap: .5rem;
  padding: .45rem .75rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  background: var(--pine-soft);
}

/* ---------- Add item inline row ---------- */
.add-row-btn{
  width: 100%;
  border: 1px dashed var(--pine);
  color: var(--pine);
  background: transparent;
  padding: .6rem;
  font-weight: 600;
  font-size: .88rem;
  border-radius: 8px;
}
.add-row-btn:hover{ background: var(--pine-soft); }

/* ---------- Summary footer — the "torn slip" ---------- */
.summary{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem .9rem;
  margin-top: .9rem;
}
.summary::before{
  content:"";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 8px;
  background-image: radial-gradient(circle at 6px 0, transparent 5px, var(--paper) 5px);
  background-size: 14px 8px;
  background-repeat: repeat-x;
}
.summary-row{
  display:flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .88rem;
  padding: .18rem 0;
  color: var(--ink-soft);
}
.summary-row input{
  width: 90px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .85rem;
  padding: .1rem .4rem;
}
.summary-row.grand{
  border-top: 1px solid var(--line);
  margin-top: .4rem;
  padding-top: .55rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pine-dark);
}
.summary-row.grand .amt{ color: var(--ledger-red); }

/* ---------- Status pill ---------- */
.sync-pill{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--pine);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.sync-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pine);
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: .3; }
}

/* ---------- Modal tweaks ---------- */
.modal-content{ border-radius: 12px; border: none; }
.modal-header{ background: var(--pine-soft); border-bottom: 1px solid var(--line); }
.modal-title{ font-family: var(--font-display); font-weight: 700; color: var(--pine-dark); }

.share-option{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px;
  margin-bottom:.5rem; cursor:pointer; font-weight:600; font-size:.9rem;
}
.share-option:hover{ background: var(--pine-soft); }
.share-option i{ font-size:1.15rem; width: 22px; text-align:center; }
.share-option.whatsapp i{ color:#25D366; }
.share-option.copy i{ color: var(--pine); }

/* ---------- Mobile compactness ---------- */
@media (max-width: 480px){
  .chit-row, .chit-header{
    grid-template-columns: 28px 1fr 74px 78px 34px;
    font-size: .82rem;
    padding: .5rem .5rem;
  }
  .summary{ padding: .85rem .8rem .75rem; }
}

/* ---------- Home screen: previous lists ---------- */
.list-card{
  display:flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .9rem;
  margin-bottom: .55rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.list-card:hover{ background: var(--pine-soft); border-color: var(--pine); }
.list-card .lc-name{
  font-weight: 700;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
}
.list-card .lc-date{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
}
.status-pill{
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .18rem .5rem;
  border-radius: 20px;
}
.status-pill.draft{ background:#EDEAE0; color:#7A7460; }
.status-pill.shared{ background: var(--pine-soft); color: var(--pine-dark); }
.status-pill.stale{ background:#F5E4DF; color: var(--ledger-red); }

.text-strike{ text-decoration: line-through; color: var(--strike); }
.badge-unavailable{
  background: var(--amber);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .4rem;
  border-radius: 5px;
  margin-left: .35rem;
}