:root{
  --primary:#2563eb;
  --border:#e5e7eb;
  --muted:#6b7280;
  --bg:#f9fafb;
  --radius:10px;
}

/* --- Global Reset & Layout --- */
body{
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:#111;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.inv-wrap.fullwidth{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:24px 3vw;
  box-sizing:border-box;
}

.inv-card{
  background:#fff;
  border-radius:var(--radius);
  padding:28px;
  border:1px solid #eef2f6;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  width:100%;
  box-sizing:border-box;
}

/* --- Logo Upload --- */
.inv-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.logo-area{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:120px;
}
#logo-preview{
  width:100px;
  min-width:100px;
  height:70px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

/* --- Form Grid --- */
.inv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:10px;
}
@media(max-width:900px){
  .inv-grid{grid-template-columns:1fr}
}

label{
  display:block;
  font-weight:600;
  margin-top:10px;
  font-size:13px;
  color:#111;
}

.inv-input,
.inv-select,
.inv-textarea{
  width:100%;
  padding:9px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
  min-width:0;
}
.inv-textarea{min-height:70px;resize:vertical}

/* --- Items / Services Table --- */
.inv-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  table-layout:fixed;
}
.inv-table th,
.inv-table td{
  padding:8px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
  overflow:hidden;
}
.inv-table th{
  background:#fbfdff;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  text-align:left;
}

.inv-table th:nth-child(1), .inv-table td:nth-child(1){width:38%}
.inv-table th:nth-child(2), .inv-table td:nth-child(2){width:10%}
.inv-table th:nth-child(3), .inv-table td:nth-child(3){width:14%}
.inv-table th:nth-child(4), .inv-table td:nth-child(4){width:18%}
.inv-table th:nth-child(5), .inv-table td:nth-child(5){width:14%}
.inv-table th:nth-child(6), .inv-table td:nth-child(6){width:6%;text-align:center}

.inv-table input[type=number],
.inv-table input[type=text]{
  width:100%;
  box-sizing:border-box;
  text-align:right;
}

.inv-table input.desc{
  text-align:left;
}

.amount{
  font-weight:700;
  text-align:right;
  white-space:nowrap;
}

/* Prevent layout jump on mobile */
.inv-table td, .inv-table th{
  word-wrap:break-word;
}

/* --- Buttons --- */
.btn{
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  border:0;
  font-size:15px;
  transition:0.2s all;
  width:100%;
  text-align:center;
  box-sizing:border-box;
}
.btn-outline{
  background:#fff;
  border:1px solid var(--primary);
  color:var(--primary);
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover{opacity:0.9}

.btn-group-inline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.btn-group-inline .btn{
  flex:1 1 150px;
  min-width:120px;
}

/* --- Payment & Notes --- */
.pay-and-notes{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-top:16px;
}
.pay-box{
  flex:0 0 340px;
  border:1px solid var(--border);
  padding:12px;
  border-radius:8px;
  background:#fbfdff;
}
.note-box{flex:1}
.pay-box label{
  font-weight:500;
  display:block;
  margin-bottom:6px;
  font-size:14px;
}

/* --- Summary --- */
.summary-box{
  border:1px solid var(--border);
  padding:16px;
  border-radius:8px;
  margin-top:18px;
  background:#fff;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
}
.summary-row input.small,
.summary-row select.small{
  width:110px;
  text-align:right;
}

.total-row{
  font-weight:800;
  color:var(--primary);
  font-size:16px;
  border-top:1px solid #eef2f6;
  padding-top:8px;
  margin-top:8px;
}

/* --- Modal --- */
.modal{
  display:none;
  position:fixed;
  left:0;top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.modal-content{
  background:#fff;
  padding:20px;
  border-radius:10px;
  width:320px;
  max-width:90%;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  text-align:left;
}
.modal-content h4{
  margin-top:0;
  margin-bottom:10px;
  font-size:16px;
  color:#111;
  font-weight:600;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}

/* --- Recent Invoices --- */
.recent-list{margin-top:8px;overflow-x:auto}
.recent-list .inv-table{margin-top:6px;min-width:420px}
.recent-list table th,
.recent-list table td{
  padding:6px 8px;
  font-size:14px;
}
.recent-list button{
  padding:6px 10px;
  font-size:13px;
  white-space:nowrap;
}
.empty-state{
  padding:12px;
  border:1px dashed #e6eef7;
  border-radius:8px;
  background:#fbfdff;
  color:var(--muted);
  text-align:center;
}

/* --- Responsive --- */
@media(max-width:900px){
  .inv-grid{grid-template-columns:1fr}
  .pay-and-notes{flex-direction:column}
  .pay-box{flex:0 0 auto;width:100%}
  .note-box{width:100%}
  .summary-box{margin-top:16px}
}

@media(max-width:600px){
  .btn{width:100%}
  .inv-card{padding:16px}
  .inv-table th,.inv-table td{font-size:13px;padding:6px}
  label{font-size:12px}
  .btn-group-inline .btn{min-width:100px;flex:1}
}

/* --- Focus & Input polish --- */
.inv-table input[type=number]::-webkit-inner-spin-button,
.inv-table input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.inv-table input[type=number]{appearance:textfield;}
textarea, input, select{
  outline:none;
}
textarea:focus, input:focus, select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(37,99,235,0.15);
  transition:0.1s ease;
}


/* --- Items / Services Table --- */
.inv-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  table-layout: fixed;
  overflow-x: auto;
  display: block;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

.inv-table th,
.inv-table td {
  padding: 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}

.inv-table th {
  background: #fbfdff;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.inv-table th:nth-child(1),
.inv-table td:nth-child(1) {
  width: 38%;
  min-width: 140px;
}

.inv-table th:nth-child(2),
.inv-table td:nth-child(2) {
  width: 12%;
  min-width: 60px;
  text-align: center;
}

.inv-table th:nth-child(3),
.inv-table td:nth-child(3) {
  width: 15%;
  min-width: 80px;
  text-align: right;
}

.inv-table th:nth-child(4),
.inv-table td:nth-child(4) {
  width: 18%;
  min-width: 100px;
  text-align: right;
}

.inv-table th:nth-child(5),
.inv-table td:nth-child(5) {
  width: 14%;
  min-width: 80px;
  text-align: right;
}

.inv-table th:nth-child(6),
.inv-table td:nth-child(6) {
  width: 5%;
  text-align: center;
}

.inv-table input[type="number"],
.inv-table input[type="text"] {
  width: 100%;
  text-align: right;
  padding: 6px 8px;
  box-sizing: border-box;
}

.inv-table input.desc {
  text-align: left;
}

.amount {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .inv-table {
    display: block;
    overflow-x: auto;
  }

  .inv-table th,
  .inv-table td {
    font-size: 13px;
    padding: 6px;
  }

  .inv-table input {
    font-size: 13px;
  }
}

/* --- Hover color override: force black on outlined buttons --- */
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}
/* --- Discount Field Width Fix (Left 70% / Right 30%) --- */
.inv-table td div[style*="display:flex"] {
  display: flex !important;
  gap: 6px;
  align-items: center;
}

/* Left discount input */
.inv-table .item-discount {
  flex: 0 0 70% !important;
  min-width: 0;
  text-align: right;
  color: #111 !important; /* visible text */
}

/* Right dropdown (% / ₹) */
.inv-table .item-disc-type {
  flex: 0 0 30% !important;
  width: auto !important;
  text-align: left;
  min-width: 40px;
}
/* --- Discount Cell Auto Fix (alignment + sizing perfect 70/30) --- */
.inv-table td div[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 6px !important;
}

/* Left discount input (value) */
.inv-table .item-discount {
  flex: 0 0 70% !important;
  height: 36px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  text-align: right !important;
  color: #111 !important;
  background: #fff !important;
}

/* Right discount type dropdown (% / ₹) */
.inv-table .item-disc-type {
  flex: 0 0 30% !important;
  height: 36px !important;
  padding: 6px 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Make sure table cells remain aligned */
.inv-table td {
  vertical-align: middle !important;
}

/* --- FIX: Discount cell alignment and visibility (final clean version) --- */
.inv-table td div[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: space-between;
}

/* Left discount input (value) */
.inv-table input.item-discount {
  flex: 1 1 70% !important;
  width: 70% !important;
  min-width: 0 !important;
  padding: 8px !important;
  height: 34px !important;
  font-size: 14px !important;
  text-align: right !important;
  color: #111 !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-sizing: border-box;
}

/* Right dropdown (% / ₹) */
.inv-table select.item-disc-type {
  flex: 0 0 30% !important;
  width: 30% !important;
  padding: 8px 4px !important;
  height: 34px !important;
  font-size: 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-sizing: border-box;
  text-align: center !important;
}

/* Make sure discount column stays vertically centered */
.inv-table td:nth-child(4) {
  vertical-align: middle !important;
}

/* --- Create Invoice button hover black fix --- */
#create-invoice:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  opacity: 1 !important;
}
/* Keep Recent Invoices cleanly spaced below subtotal box */
#recent-list {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 16px;
  margin-top: 14px;
}
/* --- Compact PDF/DOC button group --- */
.recent-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.recent-actions .btn {
  flex: 1;
  min-width: 65px;
  font-size: 13px;
  padding: 6px 10px;
}
/* --- Perfected Recent Invoice Buttons Layout --- */
.recent-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.recent-actions .btn {
  flex: 0 0 auto;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 70px;
  text-align: center;
  border-radius: 8px;
  box-sizing: border-box;
  transition: 0.2s ease;
}

.recent-actions .btn:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}