/* Modal and form styles */

/* Main modal */
.modal.hidden{ display:none}
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:10}
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-panel{
  width:min(860px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; position:relative; z-index:1;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.modal-header h2{ margin:0; font-size:18px}
.modal-header .close{ width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); cursor:pointer}
.modal-body{ padding:14px 16px}
.modal-footer{ padding:14px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px}

/* Advanced submodal */
.submodal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  z-index: 1001;
}
.submodal.hidden{ display:none; }
.submodal-panel{
  width: min(560px, 92vw);
  background: #14181c;
  border: 1px solid #2a3440;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.submodal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom: 1px solid #233040;
}
.submodal-header h3{ margin:0; font-size: 18px; }
.submodal-header .close{ background: transparent; color: #9fb3c8; border:none; font-size: 20px; cursor:pointer; }
.submodal-body{ padding: 16px; }

/* Form grids and layout */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px}
.grid-4 { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
.grid-1 { display:grid; grid-template-columns: 1fr; gap: 16px; }

.col-span-2 { grid-column: 1 / span 2; }

.grid-row-1{
  grid-template-columns: 2.6fr 0.7fr 0.7fr;
}

/* Merchant / Original Statement row */
.grid-row-2b.grid.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

/* Status row sizing */
.grid-row-4{ grid-template-columns: max-content 1fr; }

/* Row 3: 5 columns (Start | Recurring | Frequency | End date | Advanced) */
.grid-5.grid-row-3 {
  display: grid;
  grid-template-columns: 140px 90px 260px 140px 120px;
  gap: 12px;
  align-items: end;
  justify-content:start;
  padding-inline: 0;
  margin-top: 16px;
}

/* Row 3 clean alignment */
.grid-5.grid-row-3 label > span { display:block; margin-bottom: 8px; }
.grid-5.grid-row-3 .freq-row{ display:flex; align-items:center; gap:8px; }

/* Center content within each column of Row 3 */
.grid-5.grid-row-3 label,
.grid-5.grid-row-3 .cell-advanced {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-5.grid-row-3 label > span {
  text-align: center;
}

.grid-5.grid-row-3 .freq-row {
  justify-content: center;
}

.grid-5.grid-row-3 .recurring-cell .inline {
  display: flex;
  justify-content: center;
}

.grid-5.grid-row-3 .cell-advanced {
  justify-content: center;
}

/* Override: left-align Start date and End date within Row 3 */
.grid-5.grid-row-3 .cell-start,
.grid-5.grid-row-3 .cell-end{
  align-items: flex-start;
}
.grid-5.grid-row-3 .cell-start > span,
.grid-5.grid-row-3 .cell-end > span{
  text-align: left;
}

/* Form controls */
.modal label{ display:flex; flex-direction:column; gap:6px}
.modal label > span { display:block; font-weight:600; margin-bottom:8px; }
.modal .inline{ display:flex; align-items:center; gap:8px; }

/* Input styling */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal select{
  width:100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  height: 40px;
  box-sizing: border-box;
  outline:none;
}

.submodal input[type="text"],
.submodal input[type="number"],
.submodal input[type="date"],
.submodal select{
  width:100%; background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; height:40px;
  outline:none;
}

.modal select, .submodal select{ appearance:none; }

.modal input:focus, .modal select:focus, .submodal input:focus, .submodal select:focus{ 
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,230,184,.15); 
}

/* Number input spinner removal */
.modal input[type="number"]::-webkit-outer-spin-button,
.modal input[type="number"]::-webkit-inner-spin-button,
.submodal input[type="number"]::-webkit-outer-spin-button,
.submodal input[type="number"]::-webkit-inner-spin-button{ 
  -webkit-appearance: none; margin:0; 
}

.modal input[type="number"],
.submodal input[type="number"],
#advModal input[type=number],
.freq-row input[type=number]{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Taller vertical rhythm between modal rows */
.modal .modal-body > .grid-2:not(:first-child),
.modal .modal-body > .grid-3:not(:first-child),
.modal .modal-body > .grid-4:not(:first-child),
.modal .modal-body > .grid-1:not(:first-child){
  margin-top: 18px;
}

/* Frequency row alignment */
.modal label.freq .freq-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Inline 'Every' label inside Frequency cell */
.modal label.freq .freq-row .prefix{
  opacity: 0.75;
  font-weight: 600;
  margin-right: 8px;
}

/* Stack Frequency header above controls */
.modal label.freq{ display:block; }
.modal label.freq > span{ display:block; margin-bottom:8px; }

/* Custom checkbox for Recurring */
#fRecurring {
  width: 18px;
  height: 18px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  accent-color: var(--accent);
}
#fRecurring:hover { border-color: var(--accent); }
#fRecurring:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#fRecurring:disabled { opacity: .55; cursor: not-allowed; }
#fRecurring::after {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 120ms ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 44% 100%, 100% 22%, 82% 6%, 44% 66%);
  background: #ffffff;
}
#fRecurring:checked { background: var(--accent); border-color: var(--accent); }
#fRecurring:checked::after { transform: scale(1); }

/* Advanced submodal specific styles */
.submodal .grid-3{ display:grid; grid-template-columns: 1fr 160px 160px; gap: 12px; }
.submodal .actions.end{ display:flex; justify-content:flex-end; gap: 8px; margin-top: 16px; }

/* Advanced modal occurrence field */
.occurrence-field .occurrence-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.occurrence-field input[type=number] {
  width: 3em;
  text-align: center;
}
.occurrence-field .occurrence-label {
  opacity: .8;
  font-size: 0.9em;
}

#advModal .occurrence-wrapper .occurrence-label {
  margin-left: 8px;
}

/* Prefix utility for currency fields */
.input-prefix{ display:flex; align-items:center; }
.input-prefix .prefix{
  position:static; margin-right:8px; opacity:.8; font-variant-numeric:tabular-nums;
}
.input-prefix input{ padding-left:12px; }

/* Advanced button */
.cell-advanced{ align-self:end; }
#advancedBtn{ height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; }
#advancedBtn:hover{ border-color:#2EE6B8; color:#fff; }

/* Merchant / Original Statement labels */
.grid-row-2b .lbl{
  margin-bottom: 8px;
}

/* Field sizing */
#fEveryN{ width:60px; }
#fEveryUnit{ width:110px; }
#fStartDate, #fEndDate{ width:120px; }
#fMerchant, #fStatement{ width: 100%; }

/* Status select width via wrapper */
.modal .grid-row-4 label > .ui-select{
  width: 165px;
  min-width: 165px;
}

/* Primary button in modal */
.primary{ background:var(--mint); color:#042420; border:none; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer}

/* Hint text */
.hint{ align-self:end; color:var(--muted); font-size:12px; padding-top:28px}