/* ── Navigation ─────────────────────────────────────── */
.nav-link { color: #9ca3af; text-decoration: none; transition: color 0.15s; }
.nav-link.active { color: #4f46e5; }
.nav-link.active svg { stroke: #4f46e5; }

/* ── Forms ──────────────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  background: white;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.form-input[readonly] { background: #f9fafb; color: #6b7280; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19 9-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 36px; }

/* ── Item rows in challan form ──────────────────────── */
.item-row {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  background: #4f46e5;
  color: white;
  font-weight: 600;
  padding: 13px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-primary:active { transform: scale(0.98); opacity: 0.9; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-sm {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-sm:active { opacity: 0.8; }

/* ── Cards ──────────────────────────────────────────── */
.card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* ── Ledger / Table ─────────────────────────────────── */
.ledger-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ledger-table th { padding: 6px 8px; text-align: left; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.ledger-table td { padding: 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.ledger-table tr:last-child td { border-bottom: none; }

/* ── Tabs ───────────────────────────────────────────── */
.tab-bar { display: flex; gap: 4px; background: #f3f4f6; padding: 4px; border-radius: 10px; }
.tab-btn { flex: 1; padding: 7px; text-align: center; font-size: 13px; font-weight: 500; border-radius: 7px; border: none; cursor: pointer; background: transparent; color: #6b7280; transition: all 0.15s; }
.tab-btn.active { background: white; color: #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Empty state ────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 16px; color: #9ca3af; }
.empty-state svg { margin: 0 auto 12px; opacity: 0.4; }
.empty-state p { font-size: 14px; }

/* ── Skeleton loader ────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e9eaf0 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Print ──────────────────────────────────────────── */
@media print {
  header, nav, #modal-bg > :not(#modal-box),
  #btn-back, #toast, #more-drawer, #more-drawer-bg,
  .no-print { display: none !important; }
  main { padding: 0 !important; }
  #modal-bg { position: static !important; background: none !important; display: block !important; }
  #modal-box { box-shadow: none !important; max-height: none !important; border-radius: 0 !important; }
  #modal-footer { display: none !important; }
}

/* ── Page fade-in ───────────────────────────────────── */
@keyframes fadein { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.page-enter { animation: fadein 0.18s ease; }