/*!
 * Add Expense modal — presentation layer.
 *
 * Every field stays in the form and keeps posting: the ones hidden here simply
 * submit their defaults, exactly as they did when left blank by hand. Reference
 * No still autogenerates server-side when empty, and "Expense for" and
 * "Applicable Tax" still post None. Nothing in ExpenseController changed.
 */

/* Cells the shop does not fill in */
#add_expense_modal_form .exp-hidden,
#add_expense_form .exp-hidden {
    display: none !important;
}

/* The payment note comes from the shared payment_row_form partial, which the
   POS payment screens also use — so it is hidden only inside this form.
   The field is named payment[0][note], not "payment_note"; the expense's own
   note is additional_notes and is deliberately not matched here. */
#add_expense_modal_form [class*="col-"]:has(> .form-group > textarea[name$="[note]"]),
#add_expense_form [class*="col-"]:has(> .form-group > textarea[name$="[note]"]) {
    display: none !important;
}

/* ------------------------------------------------------------------
   Field grid
   ------------------------------------------------------------------
   Bootstrap's float grid leaves ragged holes once cells are collapsed,
   so the row becomes flex: hidden cells disappear and the rest close
   up. Widths still come from the existing col-* classes.
   ------------------------------------------------------------------ */
#add_expense_modal_form .modal-body > .row,
#add_expense_form .box-body > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
}
#add_expense_modal_form .modal-body > .row > [class*="col-"],
#add_expense_form .box-body > .row > [class*="col-"] {
    float: none;
}
#add_expense_modal_form .modal-body > .row > .clearfix,
#add_expense_form .box-body > .row > .clearfix {
    display: none;
}

/* ---- Labels and inputs ------------------------------------------- */
#add_expense_modal_form label,
#add_expense_form label {
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    margin-bottom: 6px;
}

#add_expense_modal_form .form-control,
#add_expense_form .form-control,
#add_expense_modal_form .select2-container .select2-selection--single,
#add_expense_form .select2-container .select2-selection--single {
    min-height: 42px;
    border-radius: 9px;
    border-color: #DED7EA;
    box-shadow: none;
}
#add_expense_modal_form .form-control:focus,
#add_expense_form .form-control:focus,
#add_expense_modal_form .select2-container--focus .select2-selection,
#add_expense_form .select2-container--focus .select2-selection {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* select2 draws its own inner box; line it up with the plain inputs */
#add_expense_modal_form .select2-selection--single .select2-selection__rendered,
#add_expense_form .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
}
#add_expense_modal_form .select2-selection--single .select2-selection__arrow,
#add_expense_form .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* The leading icon reads as part of the field rather than a grey block */
#add_expense_modal_form .input-group,
#add_expense_form .input-group {
    width: 100%;
}
#add_expense_modal_form .input-group-addon,
#add_expense_form .input-group-addon {
    width: 44px;
    background: #F7F4FC;
    border-color: #DED7EA;
    border-right: none;
    border-radius: 9px 0 0 9px;
    color: #7C3AED;
}
#add_expense_modal_form .input-group .form-control,
#add_expense_form .input-group .form-control {
    border-radius: 0 9px 9px 0;
}

/* Expense note is the one free-text field left; give it room to breathe */
#add_expense_modal_form textarea.form-control,
#add_expense_form textarea.form-control {
    min-height: 42px;
    padding: 10px 12px;
}

/* ---- "Add payment" divider --------------------------------------- */
#add_expense_modal_form h4,
#add_expense_form h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #3B1063;
    margin: 18px 0 12px;
    padding-top: 16px;
    border-top: 1px solid #E6E0F0;
}

#add_expense_modal_form hr,
#add_expense_form hr {
    border-top-color: #E6E0F0;
    margin: 14px 0 10px;
}

@media (prefers-reduced-motion: reduce) {
#add_expense_modal_form .form-control,
#add_expense_form .form-control { transition: none; }
}

/* ------------------------------------------------------------------
   Sub category
   ------------------------------------------------------------------
   Hidden until the chosen expense category turns out to have children.
   expense-form.js adds .exp-subcat-shown once app.js has filled the
   select. Deliberately not scoped to the modal: the full Add Expense
   page uses the same ids and should behave the same way.
   ------------------------------------------------------------------ */
.exp-subcat-col {
    display: none;
}
.exp-subcat-col.exp-subcat-shown {
    display: block;
}