/* ==========================================================
   LAUNDRY CRM — Billing Screen Styles
   ========================================================== */

/* ── Billing Layout ────────────────────────────────────── */
.billing-screen{display:grid;grid-template-columns:1fr 360px;gap:0;height:calc(100vh - var(--topbar-height));margin:calc(-1 * var(--space-xl));overflow:hidden}
.billing-main{display:flex;flex-direction:column;overflow-y:auto;padding:var(--space-xl)}
.billing-sidebar{background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}

/* ── Customer Search ───────────────────────────────────── */
.billing-customer-bar{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.billing-mobile-input{display:flex;gap:var(--space-sm);align-items:center}
.billing-mobile-input input{flex:1;padding:12px 16px;font-size:1.125rem;font-weight:600;letter-spacing:0.05em;background:var(--bg-tertiary);border:2px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast)}
.billing-mobile-input input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.billing-mobile-input input::placeholder{color:var(--text-tertiary);font-weight:400;letter-spacing:0}

/* Customer Card (shown after detection) */
.customer-card{display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);animation:fadeInUp 0.2s ease}
.customer-card-avatar{width:44px;height:44px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent),#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;flex-shrink:0}
.customer-card-info{flex:1;display:flex;flex-direction:column;gap:2px}
.customer-card-name{font-weight:700;font-size:0.9rem;color:var(--text-primary)}
.customer-card-meta{display:flex;gap:var(--space-lg);flex-wrap:wrap}
.customer-card-meta span{font-size:0.7rem;color:var(--text-tertiary);display:flex;align-items:center;gap:4px}
.customer-card-meta .meta-value{color:var(--accent);font-weight:600}

/* New Customer Inline Form */
.new-customer-form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-sm);margin-top:var(--space-md);animation:fadeInUp 0.2s ease}
.new-customer-form input{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.8125rem}

/* ── Service Selection Grid ────────────────────────────── */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}
.service-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-xl) var(--space-lg);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:100px}
.service-btn:hover{border-color:var(--accent);background:var(--accent-muted);transform:translateY(-2px)}
.service-btn.active{border-color:var(--accent);background:var(--accent-muted);box-shadow:var(--accent-glow)}
.service-btn.btn-active{border-color:var(--accent);background:var(--accent-muted);box-shadow:var(--accent-glow);transform:scale(0.95)}
.service-btn-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px}
/* Dry Clean Subcategories Custom Styles */
.service-btn-dc {
  grid-column: span 2;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  padding: var(--space-md) var(--space-lg) !important;
  gap: var(--space-md);
  min-height: 120px;
}
.service-btn-dc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 100%;
}
.service-btn-dc-subcategories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  width: 100%;
}
.sub-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 52px;
}
.sub-btn:hover, .sub-btn.active {
  border-color: var(--accent);
  background: var(--accent-muted);
  transform: translateY(-1px);
}
.sub-btn-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sub-shortcut-hint {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  margin-top: 2px;
}
.service-btn-dc:hover {
  background: rgba(34, 197, 94, 0.05) !important;
  border-color: rgb(34, 197, 94) !important;
}
.service-btn-dc.green-tint {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgb(34, 197, 94) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2) !important;
}
.service-btn-dc.green-tint .sub-btn {
  border-color: rgba(34, 197, 94, 0.4);
}
.service-btn-dc.green-tint .sub-btn:hover,
.service-btn-dc.green-tint .sub-btn.active {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgb(34, 197, 94) !important;
}
.service-btn-icon.wash{background:var(--info-bg);color:var(--info)}
.service-btn-icon.dryclean{background:var(--purple-bg);color:var(--purple)}
.service-btn-icon.iron{background:var(--warning-bg);color:var(--warning)}
.service-btn-icon.premium{background:var(--success-bg);color:var(--success)}
.service-btn-name{font-size:0.8125rem;font-weight:700;color:var(--text-primary)}
.service-btn-price{font-size:0.7rem;color:var(--text-tertiary)}
.service-btn .shortcut-hint{font-size:0.6rem;color:var(--text-tertiary);background:var(--bg-tertiary);padding:1px 6px;border-radius:var(--radius-xs);margin-top:2px}

/* ── Item Entry Row ────────────────────────────────────── */
.item-entry{display:flex;gap:var(--space-sm);align-items:center;padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);animation:fadeInUp 0.15s ease}
.item-entry-service{flex:1;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm)}
.item-entry-qty{width:70px}
.item-entry-unit{width:80px}
.item-entry-rate{width:90px}
.item-entry-amount{width:90px;text-align:right;font-weight:700;color:var(--accent)}
.item-entry-remove{color:var(--text-tertiary);cursor:pointer;padding:4px}
.item-entry-remove:hover{color:var(--danger)}

/* KG Toggle */
.kg-toggle{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);font-size:0.75rem;color:var(--text-secondary);margin-bottom:var(--space-md)}

/* ── Items Table (Billing) ─────────────────────────────── */
.billing-items-table{width:100%;flex:1}
.billing-items-header{display:grid;grid-template-columns:40px 1fr 80px 80px 80px 100px 40px;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:0.7rem;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border)}
.billing-item-row{display:grid;grid-template-columns:40px 1fr 80px 80px 80px 100px 40px;gap:var(--space-sm);padding:var(--space-md);align-items:center;border-bottom:1px solid var(--border);font-size:0.8125rem;transition:background var(--transition-fast)}
.billing-item-row:hover{background:var(--bg-hover)}
.billing-item-row .item-sno{color:var(--text-tertiary);font-size:0.75rem}
.billing-item-row .item-name{font-weight:600;color:var(--text-primary)}
.billing-item-row input{width:100%;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);text-align:center;font-size:0.8125rem}
.billing-item-row input:focus{border-color:var(--accent)}
.billing-item-row .item-total{font-weight:700;color:var(--accent);text-align:right}

/* ── Billing Sidebar (Cart Summary) ────────────────────── */
.billing-summary{flex:1;padding:var(--space-xl);display:flex;flex-direction:column;overflow-y:auto}
.billing-summary-title{font-size:0.875rem;font-weight:700;margin-bottom:var(--space-lg);display:flex;align-items:center;justify-content:space-between}
.billing-summary-items{flex:1;display:flex;flex-direction:column;gap:var(--space-sm)}
.summary-item{display:flex;justify-content:space-between;font-size:0.8125rem;padding:var(--space-sm) 0;border-bottom:1px solid var(--border)}
.summary-item-name{color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-sm)}
.summary-item-qty{background:var(--bg-tertiary);padding:1px 6px;border-radius:var(--radius-xs);font-size:0.7rem;font-weight:600}
.summary-item-amt{font-weight:600;color:var(--text-primary)}

/* Totals */
.billing-totals{border-top:2px solid var(--border);padding-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.total-row{display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--text-secondary)}
.total-row.grand{font-size:1.25rem;font-weight:800;color:var(--text-primary);padding-top:var(--space-sm);border-top:1px solid var(--border)}
.total-row.grand .total-amt{color:var(--accent)}
.total-row .discount-input{width:95px;padding:3px 8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.8125rem;text-align:right}

/* Billing Actions */
.billing-actions{padding:var(--space-lg);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-sm)}
.billing-pay-btn{padding:14px;font-size:1rem;font-weight:700;border-radius:var(--radius-md);background:var(--accent);color:#fff;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}
.billing-pay-btn:hover{background:var(--accent-hover);box-shadow:var(--accent-glow);transform:translateY(-1px)}
.billing-pay-btn:disabled{opacity:0.4;pointer-events:none}
.billing-draft-btn{padding:10px;font-size:0.8125rem;font-weight:600;border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.billing-draft-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Payment Modal ─────────────────────────────────────── */
.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-bottom:var(--space-xl)}
.payment-method-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-lg);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:0.75rem;font-weight:600;color:var(--text-secondary)}
.payment-method-btn:hover,.payment-method-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.payment-method-btn i{font-size:20px}
.payment-splits{display:flex;flex-direction:column;gap:var(--space-md)}
.payment-split-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md)}
.payment-split-method{font-weight:600;font-size:0.8125rem;min-width:80px;color:var(--text-primary)}
.payment-split-input{flex:1}
.payment-split-input input{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;font-weight:700}
.payment-remaining{text-align:center;padding:var(--space-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);margin-top:var(--space-md)}
.payment-remaining-label{font-size:0.75rem;color:var(--text-tertiary);margin-bottom:var(--space-xs)}
.payment-remaining-amount{font-size:1.5rem;font-weight:800}
.payment-remaining-amount.paid{color:var(--success)}
.payment-remaining-amount.unpaid{color:var(--danger)}

/* ── Receipt ───────────────────────────────────────────── */
.receipt-preview{max-width:320px;margin:0 auto;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xl);font-size:0.75rem}
.receipt-header{text-align:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px dashed var(--border)}
.receipt-biz-name{font-size:1rem;font-weight:800;color:var(--text-primary)}
.receipt-info{display:flex;justify-content:space-between;margin-bottom:var(--space-md);color:var(--text-secondary)}
.receipt-items{margin-bottom:var(--space-md)}
.receipt-item-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted var(--border)}
.receipt-totals{border-top:1px dashed var(--border);padding-top:var(--space-md)}
.receipt-total-row{display:flex;justify-content:space-between;padding:2px 0}
.receipt-total-row.grand{font-weight:800;font-size:0.875rem;color:var(--text-primary)}
.receipt-footer{text-align:center;margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px dashed var(--border);color:var(--text-tertiary)}

/* ── Responsive Billing ────────────────────────────────── */
@media(max-width:1024px){
  .billing-screen{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .billing-sidebar{max-height:50vh;border-left:none;border-top:1px solid var(--border)}
}
@media(max-width:640px){
  .billing-items-header,.billing-item-row{grid-template-columns:30px 1fr 60px 60px 40px;font-size:0.75rem}
  .billing-items-header>:nth-child(4),.billing-item-row>:nth-child(4){display:none}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .payment-methods{grid-template-columns:repeat(2,1fr)}
  .new-customer-form{grid-template-columns:1fr}
}