/* ==========================================================================
   MODAL-SYSTEM.CSS - LYL Finance shared modal style overrides
   ==========================================================================
   Apple Liquid Glass stila modāļa pārvaldība.

   FILOSOFIJA:
   - NEMAINĪT esošās HTML klases (.form-input, .form-row-2, .form-section-title)
   - Vienkārši pievienot .modal-new klasi modal-overlay wrapper
   - Šie stili automātiski pārraksta noklusējumu uz lielāku, modernāku dizainu

   IZMANTOŠANA:
   1. Pievienot <link rel="stylesheet" href="modal-system.css"> HTML head
   2. JavaScript: document.getElementById('modal-overlay').classList.add('modal-new');
   3. HTML iekšpusē izmantot esošās klases (.form-input, .form-row-2, .form-section-title)

   IZSLĒGT JAUNO DIZAINU (atgriezties pie vecā):
   document.getElementById('modal-overlay').classList.remove('modal-new');
   ========================================================================== */

/* === MODĀĻA WRAPPER UZLABOJUMI === */
.modal-new.modal-backdrop,
.modal-new .modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Modāļa apkārtējais fons (backdrop) - caurspīdīgi tumšāks,
   lai modāls labi izceltos no lapas. Lielāka specificitāte ar body prefiksu. */
body .modal-new.modal-overlay,
body .modal-overlay.modal-new,
html body div.modal-new.modal-overlay,
html body div.modal-overlay.modal-new {
  background: rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-new .modal,
.modal-new.modal-overlay .modal {
  background: rgba(240, 240, 240, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Pievienojot .modal-wide klasi - modāls par 30% platāks (no 920px → 1200px),
   lai vairāk "gaisa" iekšā. Lieto kompleksiem modāļiem ar daudziem laukiem. */
.modal-new.modal-wide .modal,
.modal-new .modal.modal-wide {
  max-width: 1200px !important;
}

/* === SEKCIJU VIRSRAKSTI === */
.modal-new .form-section-title,
.modal-new .modal-section-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-secondary) !important;
  font-weight: 300 !important;
  margin: 32px 0 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid var(--separator) !important;
  text-align: left !important;
}
.modal-new .form-section-title:first-child,
.modal-new .modal-section-title:first-child {
  margin-top: 0 !important;
}

/* === IEVADES LAUKI (input, select, textarea) === */
.modal-new .form-input,
.modal-new .form-select,
.modal-new .form-textarea,
.modal-new input[type="text"].form-input,
.modal-new input[type="email"].form-input,
.modal-new input[type="tel"].form-input,
.modal-new input[type="date"].form-input,
.modal-new input[type="number"].form-input,
.modal-new select.form-select {
  padding: 16px 20px !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  letter-spacing: -0.01em !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.modal-new .form-input::placeholder,
.modal-new .form-textarea::placeholder {
  font-weight: 300 !important;
  color: var(--text-tertiary) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.modal-new .form-select option {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
}
.modal-new .form-input:hover,
.modal-new .form-select:hover,
.modal-new .form-textarea:hover {
  border-color: rgba(0, 0, 0, 0.32) !important;
}
.modal-new .form-input:focus,
.modal-new .form-select:focus,
.modal-new .form-textarea:focus {
  border-color: var(--teal, #1D9E75) !important;
  background: white !important;
  box-shadow: 0 0 0 5px rgba(29, 158, 117, 0.14) !important;
  outline: none !important;
}

/* Select lauciņiem - papildu padding-right, lai teksts neaizklāj browser arrow */
.modal-new .form-select,
.modal-new select.form-select {
  padding-right: 44px !important;
}

/* === LABELS UN HELP TEKSTI === */
.modal-new .form-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  display: block !important;
  min-height: auto !important;
  line-height: 1.35 !important;
}
.modal-new .form-help {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  color: var(--text-tertiary) !important;
  margin-top: 10px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  font-weight: 300 !important;
}

/* === GRID ROWS === */
.modal-new .form-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  align-items: start !important;
}
.modal-new .form-row-3 {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  align-items: start !important;
}
.modal-new .form-row-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  align-items: start !important;
}
.modal-new .form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.modal-new .form-field + .form-field {
  margin-top: 24px !important;
}
.modal-new .form-row-2 .form-field,
.modal-new .form-row-3 .form-field,
.modal-new .form-row-4 .form-field {
  margin-top: 0 !important;
}
.modal-new .form-textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

/* === MODAL-FOOTER (Atcelt + Saglabāt pogas) === */
.modal-new .modal-footer .btn,
.modal-new #modal-footer .btn {
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* === APSTIPRINĀŠANAS DIALOGU TIPOGRĀFIJA ===
   Selektors izmanto general sibling (~), lai matchotos tikai dialogiem,
   kas satur .modal-icon-wrap (apstiprināšanas/dzēšanas/atcelšanas dialogi).
   Lielie ievades modāļi (clients, noliktava, izdevumi) šo selektoru neatbilst. */
.modal-new .modal-icon-wrap {
  padding: 30px 28px 18px !important;
}
.modal-new .modal-icon-wrap .modal-icon {
  width: 56px !important;
  height: 56px !important;
}
.modal-new .modal-icon-wrap .modal-icon svg {
  width: 26px !important;
  height: 26px !important;
}
.modal-new .modal-icon-wrap ~ .modal-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  padding: 0 28px 10px !important;
  text-align: center !important;
  line-height: 1.3 !important;
}
.modal-new .modal-icon-wrap ~ .modal-text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  padding: 0 32px 26px !important;
  color: var(--text-secondary) !important;
  text-align: center !important;
}
.modal-new .modal-icon-wrap ~ .modal-actions {
  padding: 18px 24px !important;
  gap: 10px !important;
}
.modal-new .modal-icon-wrap ~ .modal-actions .btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: 14.5px !important;
  letter-spacing: 0.01em !important;
}

/* === IZŅĒMUMS: PRODUKTU UN PAKALPOJUMU TABULAS LAUKI PALIEK KOMPAKTI ===
   Pavadzīme/kredītrēķins/avansa rēķins produktu rindas tabula (lines-table) un
   pakalpojumu tabula (service-table) satur form-input lauciņus, kas jāpaliek
   kompaktiem, lai tabulā ietilptu daudz rindu. Lielāks specifiskums uzvar pār
   .modal-new .form-input. */
.modal-new .lines-table .form-input,
.modal-new .lines-table .form-select,
.modal-new .lines-table input.form-input,
.modal-new .service-table .form-input,
.modal-new .service-table input.form-input,
.modal-new .edit-table .form-input,
.modal-new .edit-table input.form-input {
  padding: 8px 11px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-width: 1.5px !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  min-height: 0 !important;
}
.modal-new .lines-table .form-label,
.modal-new .service-table .form-label,
.modal-new .edit-table .form-label {
  min-height: 0 !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
}

/* === ATBALSTS ALTERNATĪVAJAI STRUKTŪRAI (shop-izdevumi, citi modāļi) ===
   Dažas lapas (shop-izdevumi.html) izmanto:
   - .modal-card (vietā .modal)
   - .form-group (vietā .form-field)
   - .form-row (vietā .form-row-2)
   - input/select/textarea BEZ .form-input klases

   Šī sekcija pielieto Apple Liquid Glass dizainu šādiem modāļiem. */

/* Modal-card wrapper */
.modal-new .modal-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Form-group (tas pats kā .form-field) */
.modal-new .form-group {
  margin-bottom: 24px !important;
}

/* Form-row (tas pats kā .form-row-2) - automātisks 1 vai 2 kolonnu grid */
.modal-new .form-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  align-items: start !important;
}
/* Ja .form-row satur 2+ laukus, izveido 2 kolonnu grid */
.modal-new .form-row:has(.form-field:nth-child(2)),
.modal-new .form-row:has(.form-group:nth-child(2)) {
  grid-template-columns: 1fr 1fr !important;
}

/* Input/select/textarea BEZ klases - lielie lauki kā .form-input */
.modal-new .form-group input,
.modal-new .form-group select,
.modal-new .form-group textarea,
.modal-new .form-row input,
.modal-new .form-row select,
.modal-new .form-row textarea {
  padding: 16px 20px !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  border: 2px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: -0.01em !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.modal-new .form-group select,
.modal-new .form-row select {
  padding-right: 44px !important;
}

.modal-new .form-group input:hover,
.modal-new .form-group select:hover,
.modal-new .form-group textarea:hover,
.modal-new .form-row input:hover,
.modal-new .form-row select:hover,
.modal-new .form-row textarea:hover {
  border-color: rgba(0, 0, 0, 0.32) !important;
}

.modal-new .form-group input:focus,
.modal-new .form-group select:focus,
.modal-new .form-group textarea:focus,
.modal-new .form-row input:focus,
.modal-new .form-row select:focus,
.modal-new .form-row textarea:focus {
  border-color: var(--teal, #1D9E75) !important;
  background: white !important;
  box-shadow: 0 0 0 5px rgba(29, 158, 117, 0.14) !important;
  outline: none !important;
}

.modal-new .form-group input::placeholder,
.modal-new .form-group textarea::placeholder,
.modal-new .form-row input::placeholder,
.modal-new .form-row textarea::placeholder {
  font-weight: 300 !important;
  color: rgba(0, 0, 0, 0.35) !important;
}

/* === RĒĶINU/PAVADZĪMES SEKCIJAS ===
   Pavadzīmes, kredītrēķinu, avansa, pakalpojumu rēķinu .section sekcijas
   izskatās tādā pašā stilā kā modāļi - vienots dizains visā sistēmā. */
body .section {
  background: rgba(240, 240, 240, 0.95) !important;
  border-radius: 22px !important;
}
body .section .form-input,
body .section .form-select,
body .section .form-textarea {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
}
/* Label-i tuvāk aizpildes laukiem pavadzīmes/rēķinu sekcijās */
body .section .form-label {
  margin-bottom: 6px !important;
  min-height: auto !important;
}
/* Izņēmums: produktu rindu tabula (lines-table) - paliek kompakta */
body .section .lines-table .form-input,
body .section .lines-table .form-select {
  border-width: 1.5px !important;
}

/* === RESPONSĪVS === */
@media (max-width: 720px) {
  .modal-new .modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-new .form-row-2,
  .modal-new .form-row-3,
  .modal-new .form-row-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}