/* ============================================================================================
   Modern form + button kit.  Same look as the Edit reading / Edit payment pages, applied to every page
   that uses the shared form classes (Add customer, Add reading, Settings, Users, Expenses, ...).
   Loaded after responsive.css and before dark.css. Delete this file to go back to the old look.
   ============================================================================================ */
:root { --m-ink: #0f2740; --m-mute: #5b6e80; --m-line: #d5e0ea; --m-line-soft: #e3eaf1; --m-input: #b4c6d6; --m-blue: #0b6fb8; --m-deep: #084f86; --m-teal: #14a3a8; }

/* ---------- form card + title ---------- */
.form-section { background: #fff; border: 1px solid var(--m-line); border-radius: 14px; padding: clamp(1rem, 2.6vw, 1.75rem); margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(16, 40, 64, .06), 0 6px 18px rgba(16, 40, 64, .05); }
.form-header { margin-bottom: 1.25rem; padding-bottom: .8rem; border-bottom: 1px solid var(--m-line-soft); }
.form-header h1, .form-header h2, .form-header h3 { margin: 0; color: var(--m-deep); font-weight: 700; letter-spacing: -.01em; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); }
.form-header h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); } .form-header h3 { font-size: 1.1rem; }
.form-divider { margin: 1.5rem 0 1rem; padding: 1rem 0 0; border-top: 1px solid var(--m-line-soft); }
.form-divider h5 { margin: 0 0 1rem; color: var(--m-ink); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ---------- layout ---------- */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-bottom: 1rem; }
.form-row.full { grid-template-columns: minmax(0, 1fr); }
.form-row.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-row.three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .form-row, .form-row.three-col { grid-template-columns: minmax(0, 1fr); gap: .9rem; } }
.form-group { display: flex; flex-direction: column; min-width: 0; margin-bottom: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--m-line-soft); }

/* ---------- labels, hints ---------- */
.form-label, label.form-label { margin: 0 0 .35rem; color: var(--m-ink); font-size: .88rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.helper-text, .form-text { margin: .3rem 0 0; color: var(--m-mute); font-size: .78rem; font-style: normal; line-height: 1.35; }

/* ---------- text boxes, dropdowns, text areas ---------- */
.form-control, .form-select { display: block; width: 100%; min-height: 44px; padding: .55rem .85rem; border: 1.5px solid var(--m-input); border-radius: 10px;
    background-color: #fff; color: var(--m-ink); font-size: 1rem; line-height: 1.4; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.form-select { padding-right: 2.4rem; }
textarea.form-control { min-height: 88px; resize: vertical; }
.form-control[type="file"] { padding: .5rem .7rem; }
.form-control::placeholder { color: #7a8c9d; font-style: normal; opacity: 1; }
.form-control:focus, .form-select:focus { outline: 0; border-color: var(--m-blue); box-shadow: 0 0 0 4px rgba(11, 111, 184, .18); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #eef3f7; color: #5b6e80; cursor: not-allowed; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }

/* ---------- field + unit/button on ONE line (fixes the squashed "UGX/unit" boxes on phones) ---------- */
.input-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; margin-bottom: 0 !important; }
.input-group > .input-group-text { display: flex; align-items: center; flex: 0 0 auto; padding: 0 .9rem; background: #eef3f7; border: 1.5px solid var(--m-input); color: #3f566b; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.input-group > .input-group-text:first-child { border-radius: 10px 0 0 10px; border-right: 0; }
.input-group > .btn { flex: 0 0 auto !important; width: auto !important; margin: 0 0 0 .5rem !important; min-height: 44px; }
.input-group > .form-control + .input-group-text { margin-left: 0; }

/* ---------- checkboxes / switches ---------- */
.form-check { display: flex; align-items: center; gap: .55rem; padding-left: 0; margin-bottom: .4rem; min-height: 1.6rem; }
.form-check .form-check-input, .form-check-input { float: none; flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; margin: 0; border: 1.5px solid var(--m-input); border-radius: 5px; accent-color: var(--m-blue); }
.form-check-input:checked { background-color: var(--m-blue); border-color: var(--m-blue); }
.form-check-label { margin: 0; color: var(--m-ink); font-size: .95rem; font-weight: 600; cursor: pointer; }

input[type="checkbox"], input[type="radio"] { min-width: 0 !important; min-height: 0 !important; }
input[type="checkbox"].form-check-input, input[type="radio"].form-check-input { width: 1.15rem !important; height: 1.15rem !important; }

/* ---------- buttons ---------- */
.btn, .btn-save, .btn-cancel, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1.15rem;
    border: 1.5px solid transparent; border-radius: 10px; font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
    white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .btn-save:focus-visible, .btn-cancel:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(11, 111, 184, .25); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }
.btn-primary { background: linear-gradient(90deg, var(--m-deep), var(--m-blue)); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(8, 79, 134, .22); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(90deg, #063a63, var(--m-deep)); color: #fff; box-shadow: 0 3px 10px rgba(8, 79, 134, .3); }
.btn-save, .btn-success { background: linear-gradient(90deg, #0e8a55, #17a569); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(14, 138, 85, .22); }
.btn-save:hover, .btn-save:focus, .btn-success:hover, .btn-success:focus { background: linear-gradient(90deg, #0b7346, #0e8a55); color: #fff; box-shadow: 0 3px 10px rgba(14, 138, 85, .3); }
.btn-cancel, .btn-secondary { background: #fff; border-color: var(--m-line); color: var(--m-deep); box-shadow: none; }
.btn-cancel:hover, .btn-cancel:focus, .btn-secondary:hover, .btn-secondary:focus { background: #eef5fb; border-color: #9fc0da; color: var(--m-deep); }
.btn-danger { background: linear-gradient(90deg, #b3261e, #d33a32); border-color: transparent; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: linear-gradient(90deg, #8f1d17, #b3261e); color: #fff; }
.btn-warning { background: #f6b93b; border-color: transparent; color: #1b1400; }
.btn-warning:hover, .btn-warning:focus { background: #e2a424; color: #1b1400; }
.btn-info { background: var(--m-teal); border-color: transparent; color: #fff; }
.btn-info:hover, .btn-info:focus { background: #0f8b90; color: #fff; }
.btn-light { background: #fff; border-color: var(--m-line); color: var(--m-ink); }
.btn-link { background: transparent; border-color: transparent; color: var(--m-blue); text-decoration: none; }
.btn-outline-primary { background: transparent; border-color: #8fb8da; color: var(--m-deep); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--m-blue); border-color: var(--m-blue); color: #fff; }
.btn-outline-secondary { background: transparent; border-color: var(--m-input); color: #3f566b; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: #3f566b; border-color: #3f566b; color: #fff; }
.btn-outline-success { background: transparent; border-color: #86cfa7; color: #0b6e44; }
.btn-outline-success:hover, .btn-outline-success:focus { background: #0e8a55; border-color: #0e8a55; color: #fff; }
.btn-outline-danger { background: transparent; border-color: #e6a8ae; color: #a52834; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: #c0392f; border-color: #c0392f; color: #fff; }
.btn-outline-warning { background: transparent; border-color: #e8c776; color: #7a5600; }
.btn-outline-warning:hover, .btn-outline-warning:focus { background: #f6b93b; border-color: #f6b93b; color: #1b1400; }
.btn-outline-info { background: transparent; border-color: #86d0d3; color: #0b747a; }
.btn-outline-info:hover, .btn-outline-info:focus { background: var(--m-teal); border-color: var(--m-teal); color: #fff; }
.btn-sm, .btn-group-sm > .btn { min-height: 36px; padding: .3rem .8rem; font-size: .85rem; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: .65rem 1.5rem; font-size: 1.05rem; }
.table .btn, .table td .btn { min-height: 34px; padding: .25rem .7rem; font-size: .82rem; border-radius: 8px; }
.navbar .btn { min-height: 38px; }
.form-actions .btn-save, .form-actions .btn-cancel, .form-actions .btn-primary, .form-actions .btn-secondary { min-width: 140px; }
@media (max-width: 768px) { .form-actions .btn, .form-actions .btn-save, .form-actions .btn-cancel { width: 100%; } }

/* ---------- alerts ---------- */
.alert { border-radius: 10px; padding: .8rem 1rem; font-size: .93rem; line-height: 1.45; }

/* ---------- Bootstrap grid inside forms: restore real column widths (style.css flattens them) ---------- */
@media (min-width: 768px) {
    form .row > .col-md-1:not(:only-child) { flex: 0 0 auto; width: 8.33333%; max-width: 8.33333%; }
    form .row > .col-md-2:not(:only-child) { flex: 0 0 auto; width: 16.66667%; max-width: 16.66667%; }
    form .row > .col-md-3:not(:only-child) { flex: 0 0 auto; width: 25.0%; max-width: 25.0%; }
    form .row > .col-md-4:not(:only-child) { flex: 0 0 auto; width: 33.33333%; max-width: 33.33333%; }
    form .row > .col-md-5:not(:only-child) { flex: 0 0 auto; width: 41.66667%; max-width: 41.66667%; }
    form .row > .col-md-6:not(:only-child) { flex: 0 0 auto; width: 50.0%; max-width: 50.0%; }
    form .row > .col-md-7:not(:only-child) { flex: 0 0 auto; width: 58.33333%; max-width: 58.33333%; }
    form .row > .col-md-8:not(:only-child) { flex: 0 0 auto; width: 66.66667%; max-width: 66.66667%; }
    form .row > .col-md-9:not(:only-child) { flex: 0 0 auto; width: 75.0%; max-width: 75.0%; }
    form .row > .col-md-10:not(:only-child) { flex: 0 0 auto; width: 83.33333%; max-width: 83.33333%; }
    form .row > .col-md-11:not(:only-child) { flex: 0 0 auto; width: 91.66667%; max-width: 91.66667%; }
    form .row > .col-md-12:not(:only-child) { flex: 0 0 auto; width: 100.0%; max-width: 100.0%; }
}
@media (min-width: 992px) {
    form .row > .col-lg-1:not(:only-child) { flex: 0 0 auto; width: 8.33333%; max-width: 8.33333%; }
    form .row > .col-lg-2:not(:only-child) { flex: 0 0 auto; width: 16.66667%; max-width: 16.66667%; }
    form .row > .col-lg-3:not(:only-child) { flex: 0 0 auto; width: 25.0%; max-width: 25.0%; }
    form .row > .col-lg-4:not(:only-child) { flex: 0 0 auto; width: 33.33333%; max-width: 33.33333%; }
    form .row > .col-lg-5:not(:only-child) { flex: 0 0 auto; width: 41.66667%; max-width: 41.66667%; }
    form .row > .col-lg-6:not(:only-child) { flex: 0 0 auto; width: 50.0%; max-width: 50.0%; }
    form .row > .col-lg-7:not(:only-child) { flex: 0 0 auto; width: 58.33333%; max-width: 58.33333%; }
    form .row > .col-lg-8:not(:only-child) { flex: 0 0 auto; width: 66.66667%; max-width: 66.66667%; }
    form .row > .col-lg-9:not(:only-child) { flex: 0 0 auto; width: 75.0%; max-width: 75.0%; }
    form .row > .col-lg-10:not(:only-child) { flex: 0 0 auto; width: 83.33333%; max-width: 83.33333%; }
    form .row > .col-lg-11:not(:only-child) { flex: 0 0 auto; width: 91.66667%; max-width: 91.66667%; }
    form .row > .col-lg-12:not(:only-child) { flex: 0 0 auto; width: 100.0%; max-width: 100.0%; }
}