/* invoice_editor.css
   New logic:
   - Choose template (cards)
   - Fill ONE form (data)
   - Backend generates PDF using template id + data
*/

.invoice-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
  box-sizing: border-box;
}

/* Toolbar */
.invoice-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 12px;
  flex-wrap: wrap;
}
.invoice-toolbar .toolbar-left,
.invoice-toolbar .toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

#saveStatus{
  min-width: 110px;
  text-align: right;
}

/* Template picker */
.template-picker{
  border:1px solid rgba(15,23,42,0.12);
  border-radius:14px;
  background: rgba(2,6,23,0.03);
  padding:2px;
  margin-bottom: 12px;
}
.template-picker-head{
  display:flex;
  align-items: baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.template-title{
  margin:0;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.template-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.tpl-card{
  position: relative;
  border:1px solid rgba(15,23,42,0.14);
  border-radius:12px;
  background:#fff;
  padding:12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height: 300px;
}
.tpl-card img{
  width:100%;
  height: 300px;
  object-fit: cover;
  border-radius:12px;
  background: rgba(2,6,23,0.04);
  border:1px solid rgba(15,23,42,0.10);
}
.tpl-card-title{
  font-weight: 800;
  color: rgba(2,6,23,0.85);
}
.tpl-card.is-active{
  outline: none;
  border-color: rgba(56,189,248,0.95);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.22);
  background: linear-gradient(180deg, rgba(56,189,248,0.08), rgba(56,189,248,0.02));
  transform: translateY(-1px);
}
.tpl-card.is-active::after{
  content:"Selected";
  position:absolute;
  top:12px;
  right:12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.02em;
  padding:6px 10px;
  border-radius:999px;
  color: rgba(2,6,23,0.85);
  background: rgba(56,189,248,0.20);
  border:1px solid rgba(56,189,248,0.45);
}

/* Page */
.invoice-page{ max-width: none; margin: 0; }

/* Paper card  padding:28px; */
.invoice-paper{
  background:#fff;
  color:#0b1220;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.15);
  box-shadow:0 16px 40px rgba(2,6,23,0.35);
  padding:22px; 
}
.invoice-paper .muted{ color: rgba(2,6,23,0.65); }
.muted.small{ font-size: 12px; }

/* Labels + fields */
.section-title{
  margin:0 0 10px;
  font-size: 16px;
  font-weight: 900;
}
.mini-label{
  display:block;
  font-size:12px;
  color: rgba(2,6,23,0.6);
  margin:10px 0 6px;
}
.text{
  width:100%;
  border:1px solid rgba(15,23,42,0.20);
  background:#fff;
  color:#0b1220;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  box-sizing:border-box;
}
.text:focus{
  border-color: rgba(56,189,248,0.9);
  box-shadow:0 0 0 3px rgba(56,189,248,0.18);
}
textarea.text{
  min-height: calc(3 * 1.2em + 20px);
  resize: vertical;
}

/* Form grid */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap:18px;
  align-items:start;
  margin-bottom: 18px;
}
.form-col{ min-width: 0; }
.form-col--meta .text{ background:#fff; }

.meta-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.meta-note{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}
.link-btn{
  border:0;
  background:transparent;
  color:#0369a1;
  font-weight:800;
  cursor:pointer;
  padding:2px 0;
}
.link-btn:hover{ text-decoration: underline; }

.totals-box{
  border:1px solid rgba(15,23,42,0.12);
  border-radius:12px;
  padding:12px;
  background: rgba(2,6,23,0.03);
  margin-top: 12px;
}
.total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(15,23,42,0.18);
}
.total-row:last-child{ border-bottom:0; }
.total-label{ color: rgba(2,6,23,0.70); }
.total-val{ font-weight:900; }
.total-grand .total-label{ font-size:16px; color:#0b1220; }
.total-grand .total-val{ font-size:18px; }

.inline-input{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
.inline-input .prefix, .inline-input .suffix{
  color: rgba(2,6,23,0.60);
  font-weight:700;
}
.inline-input .num{
  width:110px;
  text-align:right;
  border:1px solid rgba(15,23,42,0.18);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
  background:#fff;
  box-sizing:border-box;
}
.inline-input .num:focus{
  border-color: rgba(56,189,248,0.9);
  box-shadow:0 0 0 3px rgba(56,189,248,0.18);
}

/* Logo preview */
.logo-preview{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-preview img{
  width:90px;
  height:40px;
  object-fit:contain;
  background: rgba(2,6,23,0.03);
  border:1px solid rgba(15,23,42,0.12);
  border-radius:10px;
  padding:6px;
}

/* Items */
.items-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin: 8px 0 8px;
}
.items-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.items-table th{
  text-align:left;
  font-size:13px;
  color: rgba(2,6,23,0.65);
  padding:10px 10px;
  border-bottom:1px solid rgba(15,23,42,0.16);
  background: rgba(2,6,23,0.03);
}
.items-table td{
  padding:10px;
  border-bottom:1px solid rgba(15,23,42,0.12);
  vertical-align:middle;
}
.col-desc{ width:60%; }
.col-qty{ width:9%; }
.col-price{ width:14%; }
.col-amt{ width:15%; }
.col-x{ width:2%; }

.cell-input{
  width:100%;
  border:1px solid rgba(15,23,42,0.18);
  border-radius:10px;
  padding:10px 10px;
  outline:none;
  background:#fff;
  box-sizing:border-box;
}
.cell-input:focus{
  border-color: rgba(56,189,248,0.9);
  box-shadow:0 0 0 3px rgba(56,189,248,0.18);
}
.cell-input.qty, .cell-input.price{ text-align:right; }

.items-table th.col-qty,
.items-table th.col-price,
.items-table th.col-amt,
.items-table td:nth-child(2),
.items-table td:nth-child(3),
.items-table td:nth-child(4){ text-align:right; }

.amt{ text-align:right; font-weight:800; }

.items-table .add-row td{
  padding-top: 12px;
  border-bottom: 0;
  text-align: right;
}
.items-table .add-row .btn{
  width: auto;
  display: inline-flex;
  justify-content: center;
}
.icon-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.18);
  background: rgba(2,6,23,0.03);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.icon-btn:hover{ background: rgba(2,6,23,0.06); }

/* Notes row */
.notes-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-top: 18px;
}
.notes-left{ flex: 1 1 auto; min-width: 0; }
.notes-right{ flex: 0 0 280px; }

input.text-scroll{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
input.text-scroll:focus{
  text-overflow: clip;
  overflow: hidden;
}


/* Responsive */
@media (max-width: 980px){
  .form-grid{
    grid-template-columns: 1fr;
  }
  .notes-row{
    flex-direction: column;
    gap:12px;
  }
  

  .notes-left{
    width:100%;
  }
  .notes-left .text{
    width:100%;
    display:block;
  }
  .notes-right{
    flex: 1 1 auto;
    width:100%;
    max-width:none;
  }
  .template-cards{ grid-template-columns: 1fr; }

  .tpl-card{
    min-height: auto;
  }
  .tpl-card img{
    height: 280px;
    object-fit: contain;
    background: #fff;
   }
}
/* на больших экранах можно ещё легче */
@media (min-width: 1100px){
  .invoice-paper{ padding: 20px; }
}

/* Print: editor prints the form view; backend PDF is separate */
@media print{
  .no-print, .top-bar, .invoice-toolbar, .template-picker{ display:none !important; }
  .container{ max-width:none; padding:0; margin:0; }
  .invoice-wrap{ padding:0; }
  .invoice-paper{
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:0;
  }
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Invoice toolbar mobile layout ===== */
@media (max-width: 520px){
  .invoice-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .invoice-toolbar .toolbar-left{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* статус — отдельной строкой */
  #saveStatus{
    width: 100%;
    min-width: 0;
    text-align: center;
    order: -1; /* будет сверху внутри .toolbar-right */
  }

  .invoice-toolbar .toolbar-right{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }

  /* кнопки занимают всю ширину ячейки */
  .invoice-toolbar .toolbar-right .btn{
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
  }

  /* saveStatus должен занимать всю ширину сетки */
  .invoice-toolbar .toolbar-right #saveStatus{
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  /* если disabled кнопки выглядят “тускло” — оставь как есть,
     но можно чуть лучше читаемость */
  .invoice-toolbar .btn[disabled]{
    opacity: 0.55;
  }

  .invoice-toolbar .btn{
    font-size: 14px;
    border-radius: 12px;
  }
}

/* Mobile: Items table -> stacked card rows (Description отдельной строкой) */
@media (max-width: 520px){

  /* выключаем поведение таблицы */
  .items-table{ display:block; width:100%; }
  .items-table thead{ display:none; }
  .items-table tbody{ display:block; }
  .items-table tr{ display:block; } /* важно */

  /* сбрасываем фиксированные width из desktop */
  .items-table .col-desc,
  .items-table .col-qty,
  .items-table .col-price,
  .items-table .col-amt,
  .items-table .col-x{
    width:auto !important;
  }

  /* item row как карточка-grid */
  .items-table tbody tr.item-row{
    display:grid;
    grid-template-columns: 1fr 3fr 44px; /* QTY | Price (3x) | X */
    grid-template-areas:
      "desc  desc  desc"
      "qty   price del"
      "amt   amt   amt";
    gap:12px;
    padding:12px;
    border:1px solid rgba(15,23,42,0.12);
    border-radius:12px;
    background:#fff;
    margin-bottom:12px;
  }

  /* td больше не table-cell */
  .items-table tbody tr.item-row > td{
    display:block;
    padding:0;
    border:0;
    min-width:0;
  }

  /* areas */
  .items-table tbody tr.item-row td.col-desc{ grid-area: desc; }
  .items-table tbody tr.item-row td.col-qty { grid-area: qty; }
  .items-table tbody tr.item-row td.col-price{ grid-area: price; }
  .items-table tbody tr.item-row td.col-amt { grid-area: amt; }
  .items-table tbody tr.item-row td.col-x   {
    grid-area: del;
    align-self:end;
    justify-self:end;
  }

  /* базовый вид инпутов */
  .items-table .cell-input{
    width:100%;
    display:block;
    padding:10px 12px;
    box-sizing:border-box;
  }

  /* -------- Labels -------- */
  .items-table tbody tr.item-row td.col-desc::before,
  .items-table tbody tr.item-row td.col-qty::before,
  .items-table tbody tr.item-row td.col-price::before,
  .items-table tbody tr.item-row td.col-amt::before{
    display:block;
    font-size:12px;
    font-weight:800;
    color: rgba(2,6,23,0.65);
    margin:0 0 6px;
  }
  .items-table tbody tr.item-row td.col-desc::before{ content:"Description"; }
  .items-table tbody tr.item-row td.col-qty::before{ content:"QTY"; }
  .items-table tbody tr.item-row td.col-price::before{ content:"Price"; }
  .items-table tbody tr.item-row td.col-amt::before{ content:"Amount"; }

  /* Description: отдельной строкой и удобнее */
  .items-table tbody tr.item-row td.col-desc .cell-input{
    min-height:56px;
    font-size:16px;
    padding:12px 12px;
  }
  .items-table tbody tr.item-row td.col-desc .cell-input::placeholder{
    font-size:15px;
  }

  /* QTY компактный */
  .items-table tbody tr.item-row td.col-qty .cell-input{
    height:44px;
    padding:10px 12px;
    text-align:center;
  }

  /* Price шире (3x) + нормальный ввод */
  .items-table tbody tr.item-row td.col-price .cell-input{
    height:44px;
    padding:10px 12px;
    text-align:left;
  }

  /* Amount вниз, во всю ширину, без налезаний */
  .items-table tbody tr.item-row td.col-amt{
    border:1px solid rgba(15,23,42,0.12);
    border-radius:10px;
    background: rgba(2,6,23,0.03);
    padding:10px 12px;
    min-height:44px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-align:right;
    font-weight:900;
  }
  /* label внутри amount оставляем слева */
  .items-table tbody tr.item-row td.col-amt::before{
    text-align:left;
    margin-bottom:6px;
  }

  /* delete button нормальный tap target */
  .items-table tbody tr.item-row td.col-x .icon-btn{
    width:44px;
    height:44px;
    border-radius:12px;
  }

  /* add-row не ломаем */
  .items-table tr.add-row{
    display:block;
  }
  .items-table tr.add-row td{
    display:block;
    padding:12px 0 0;
    text-align:right;
    border:0;
  }
}

@media (max-width: 520px){

  /* ONLY mobile: stop overflow in Invoice details */
  .invoice-paper .meta-grid,
  .invoice-paper .meta-field{
    min-width: 0;
    max-width: 100%;
  }

  .invoice-paper .meta-field .text{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block;
  }

  /* iOS/Safari date quirks */
  .invoice-paper .meta-field input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
  }
}
/* Tablet (iPad) fix: same as mobile, but only on touch tablets */
@media (min-width: 768px) and (max-width: 1179px) and (hover: none) {

  .invoice-paper .meta-grid,
  .invoice-paper .meta-field{
    min-width: 0;
    max-width: 100%;
  }

  .invoice-paper .meta-field .text{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block;
  }

  .invoice-paper .meta-field input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
  }
}