.field-group .input-validation-error {
    border-color: #b54c3e;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(181, 76, 62, .10);
}

.field-validation-error {
    display: block;
    min-height: 14px;
    margin-top: 2px;
}

.form-validation {
    padding: 9px 11px;
    border: 1px solid #efc5bf;
    border-radius: 7px;
    background: #fff7f5;
}

.form-validation:empty { display: none; }

.field-information {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    padding: 9px 10px;
    border: 1px solid #ead8b7;
    border-radius: 8px;
    color: #896022;
    background: #fff9ed;
    font-size: 12px;
    line-height: 1.4;
}

.field-information i { color: #b57b1d; font-size: 15px; }

.modal-form-page { min-width: 520px; padding: 30px; }
.modal-form-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.modal-form-heading > span { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 14px; color: #9a6719; background: #fff0d1; font-size: 20px; }
.modal-form-heading h1 { margin: 4px 0; color: #3d2b1e; font-size: 22px; }
.modal-form-heading p { margin: 0; color: #8a765f; font-size: 13px; }
.expense-amount { color: #a26318; white-space: nowrap; }
.expense-heading-actions { display: flex; align-items: center; gap: 12px; }
.expense-total-card { display: grid; gap: 3px; min-width: 158px; padding: 10px 14px; border: 1px solid #eadcc6; border-radius: 10px; background: #fffaf2; }
.expense-total-card span { color: #987a50; font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.expense-total-card strong { color: #875414; font-size: 17px; }
.grid-date-filter { display: flex; align-items: end; gap: 8px; }
.expense-grid-controls .grid-search { align-self: flex-end; }
.grid-date-filter label { display: grid; gap: 3px; color: #8c765b; font-size: 10px; font-weight: 700; }
.grid-date-filter input { height: 34px; padding: 0 8px; border: 1px solid #dfd1bd; border-radius: 7px; color: #59432d; background: #fff; font: 12px 'DM Sans', sans-serif; }
.grid-date-filter button { display: grid; place-items: center; width: 34px; padding: 0 !important; }
@media (max-width: 640px) { .expense-page-heading { align-items: flex-start; }.expense-heading-actions { align-items: stretch; flex-direction: column; width: 100%; }.expense-total-card { width: 100%; }.expense-heading-actions .primary-action { justify-content: center; } }
@media (max-width: 640px) { .grid-date-filter { width: 100%; }.grid-date-filter label { flex: 1; }.grid-date-filter input { width: 100%; } }
.status-pending { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 99px; color: #946313; background: #fff2cf; font-size: 11px; font-weight: 700; }
.complete-action { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #b9ddc6; border-radius: 8px; color: #237446; background: #f1fbf4; box-shadow: 0 2px 5px rgba(35, 116, 70, .07); font-size: 18px; line-height: 1; cursor: pointer; transition: .16s ease; }
.complete-action:hover { border-color: #4aaf70; color: #fff; background: #32945a; box-shadow: 0 5px 10px rgba(35, 116, 70, .18); }
.complete-action:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(50, 148, 90, .22); }
.complete-action i { line-height: 1; }
.gider-modal { min-width: 500px; padding: 30px; }
.gider-modal-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }
.gider-modal-heading > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; color: #98651a; background: #fff0d1; font-size: 20px; }
.gider-modal-heading p { margin: 0 0 3px; color: #9a7848; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.gider-modal-heading h2 { margin: 0 0 3px; color: #3d2b1e; font-size: 21px; }
.gider-modal-heading small { color: #8a765f; font-size: 12px; }
.currency-input { position: relative; }
.currency-input input { padding-right: 42px !important; }
.currency-input > span { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: #9b6a1e; font-size: 16px; font-weight: 800; pointer-events: none; }
@media (max-width: 600px) { .modal-form-page { min-width: 0; padding: 24px 18px; } }
@media (max-width: 600px) { .gider-modal { min-width: 0; padding: 25px 18px; } }

.app-modal-dialog.is-error { width: min(calc(100vw - 32px), 390px); max-width: 390px; overflow: hidden; border-radius: 16px; }
.app-modal-dialog.is-error .app-error-popup { width: 100%; box-sizing: border-box; padding: 32px 28px 28px; }
.app-modal-dialog.is-error .app-error-popup > i { width: 54px; height: 54px; margin-bottom: 15px; border-radius: 16px; font-size: 25px; }
.app-modal-dialog.is-error .app-error-popup h2 { font-size: 20px; }
.app-modal-dialog.is-error .app-error-popup p { margin-bottom: 22px; }
@media (max-width: 600px) { .app-modal-dialog.is-error { width: calc(100vw - 24px); } }