:root { --fluid-body: clamp(12px, .2vw + 11px, 14px); --fluid-nav: clamp(12px, .28vw + 11px, 14px); }

.portal-page { font-size: var(--fluid-body); }
.portal-content { width: 100%; overflow-x: hidden; }
.portal-content h1 { font-size: clamp(20px, 1.2vw + 14px, 28px); }
.portal-content h2 { font-size: clamp(17px, .65vw + 13px, 22px); }
.portal-sidebar nav a { font-size: var(--fluid-nav); }
.module-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.module-table table { min-width: 760px; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-form, .form-grid { min-width: 0; }
input, select, textarea, button { max-width: 100%; }

@media (min-width: 901px) and (max-width: 1200px) {
    .portal-layout { grid-template-columns: 210px minmax(0, 1fr); }
    .portal-sidebar { padding-inline: 8px; }
    .portal-content { padding: 18px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 701px) and (max-width: 900px) {
    .portal-layout { grid-template-columns: 190px minmax(0, 1fr); }
    .portal-sidebar nav a { font-size: 13px; padding-inline: 8px; }
    .portal-sidebar nav a i { width: 25px; font-size: 14px; }
    .portal-sidebar nav a em, .sidebar-help { display: block; }
    .portal-content { padding: 16px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-header { padding-inline: 16px; }
}

@media (max-width: 700px) {
    .gov-strip { padding-inline: 12px; font-size: 10px; }
    .gov-strip span:last-child { display: none; }
    .portal-header { height: 62px; padding-inline: 12px; }
    .portal-brand strong { font-size: 17px; }
    .portal-brand small, .portal-user > div, .bell { display: none; }
    .portal-layout { display: block; min-height: auto; }
    .portal-sidebar { position: sticky; top: 0; z-index: 20; padding: 5px; overflow-x: auto; }
    .portal-sidebar nav { display: flex; min-width: max-content; }
    .portal-sidebar nav a { min-width: auto; min-height: 42px; padding: 8px 11px; border-left: 0; border-bottom: 3px solid transparent; font-size: 12px; white-space: nowrap; }
    .portal-sidebar nav a i { width: 22px; font-size: 14px; }
    .portal-sidebar nav a.on { border-left: 0; border-bottom-color: #69c4ff; }
    .portal-sidebar nav a em { display: inline-block; margin-left: 6px; }
    .sidebar-help { display: none; }
    .portal-content { padding: 12px; }
    .module-heading, .register-head, .detail-page-head, .sop-page-head, .newcase-page-head { display: block; padding: 14px; }
    .metrics { grid-template-columns: 1fr; gap: 9px; }
    .metrics article { min-height: 88px; }
    .portal-footer { display: block; padding: 10px 12px; text-align: center; line-height: 1.8; }
    .compact-form, .form-grid, .order-fields, .review-fields, .accused-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
    .portal-content { padding: 9px; }
    .portal-sidebar nav a { padding-inline: 9px; font-size: 11px; }
    .portal-content h1 { font-size: 20px; }
    .module-table table { min-width: 680px; }
}