:root {
    --va-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --va-control-height: 42px;
    --va-control-radius: 8px;
    --va-control-border: #cfd9e7;
    --va-primary: #1f4fae;
    --va-primary-hover: #143d91;
    --va-focus: rgba(31, 79, 174, .18);
}

html, body, button, input, select, textarea { font-family: var(--va-font); }
html { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 14px; line-height: 1.5; }
body, .layout-wrapper, .main-content, main, section, article, form { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
input, select, textarea, button { max-width: 100%; }
table { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--va-font); font-weight: 750; letter-spacing: -.025em; }
label, th, legend { font-family: var(--va-font); }

button,
.btn,
input[type="submit"],
input[type="button"],
a[class*="button"],
a[class*="btn"],
a[class*="action"],
a[class*="review"],
a[class*="export"] {
    border-radius: var(--va-control-radius);
    font-family: var(--va-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* Keep filter labels optically centered inside every Admin and LGU control. */
.admin-applications-filter,
.admin-applications-filter-actions button,
.admin-applications-filter-actions a,
.admin-nlp-filters button,
.filter-btn,
.filter-actions button,
.filter-actions a,
.lgu-trend-presets button,
.lgu-scope-filter button,
.lgu-custom-range button,
.clear-filters {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    vertical-align: middle;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select {
    min-height: var(--va-control-height);
    border-radius: var(--va-control-radius);
    font-family: var(--va-font);
    font-size: 13px;
}
textarea { border-radius: var(--va-control-radius); font-family: var(--va-font); font-size: 13px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #8994a6; font-size: 13px; opacity: 1; }

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--va-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--va-focus);
}

button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled { cursor: not-allowed; opacity: .62; }

@media (max-width: 600px) {
    body { font-size: 13px; }
    button, .btn, input[type="submit"], input[type="button"] { font-size: 12px; }
    .filter-actions, .admin-applications-filter-actions, .modal-footer { flex-wrap: wrap; }
    .filter-actions > *, .admin-applications-filter-actions > * { flex: 1 1 auto; }
}

/* Prevent Safari from zooming the whole page when a form control receives focus. */
@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea { font-size: 16px; }
    input::placeholder, textarea::placeholder { font-size: 16px; }
}

@media (max-width: 480px) {
    .main-content {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }
    .modal-dialog { width: auto; max-width: calc(100vw - 24px); margin-right: auto; margin-left: auto; }
    .admin-notification-dropdown, .lgu-notification-dropdown { max-width: calc(100vw - 24px); }
}