/* VoiceGrade responsive v2 — mobile first. Does not alter application logic. */
:root{--vg-blue:#1e5ba9;--vg-ink:#17314f;--vg-line:#dce5f0;--vg-bg:#f3f6fb;--vg-danger:#bc3340}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;background:var(--vg-bg);font-size:15px;line-height:1.55}
.wrap{width:100%;max-width:1180px;margin:18px auto;padding:0 16px;min-width:0}
.panel{width:100%;min-width:0;overflow:visible;border-radius:16px}
.page-content{min-width:0;padding:28px 30px 36px;overflow-wrap:anywhere}
h1,h2{overflow-wrap:anywhere;line-height:1.3}h1{font-size:clamp(22px,3vw,29px)}h2{font-size:clamp(18px,2.5vw,22px)}
.topnav{border-radius:16px 16px 0 0;gap:12px;padding:17px 22px;min-width:0}
.brand{font-size:22px}.nav-links{gap:9px;min-width:0}.nav-links a,.nav-links button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
.nav-links form{margin:0!important}
.page-content form{max-width:100%;min-width:0}
.page-content form:not([class]){margin:12px 0 20px}
.page-content label{display:block;min-width:0;margin:0 0 14px;font-weight:600;color:#29415f}
.page-content label input,.page-content label select,.page-content label textarea{font-weight:400}
.page-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.page-content select,.page-content textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;padding:11px 13px;margin:7px 0 14px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:var(--vg-ink);font:inherit;font-size:16px}
.page-content input:focus,.page-content select:focus,.page-content textarea:focus{outline:2px solid #9dc1f3;outline-offset:1px;border-color:#2b6dc4}
.page-content input[type="file"]{height:auto;min-height:48px}
.page-content .btn,.page-content button{box-sizing:border-box;max-width:100%;min-height:42px;margin:4px 7px 8px 0;padding:10px 15px;border-radius:10px;vertical-align:middle;white-space:normal;overflow-wrap:break-word;line-height:1.4;text-align:center;font-weight:600}
.page-content .actions{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:16px 0}.page-content .actions .btn,.page-content .actions button{margin:0}
.page-content form:has(> input[name="new_password"]),.page-content form:has(> input[name="confirmation"]){display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px}
.page-content form:has(> input[name="new_password"]) input,.page-content form:has(> input[name="confirmation"]) input{flex:1 1 220px;width:auto!important;margin:0!important}
.page-content form:has(> input[name="new_password"]) button,.page-content form:has(> input[name="confirmation"]) button{flex:0 0 auto;margin:0!important}
.page-content form[action$="/delete"] button,.page-content form[action$="/delete-all"] button,.page-content form[action*="/delete/"] button,.page-content form:has(> input[name="confirmation"]) button{background:var(--vg-danger);color:white}
.page-content form[action$="/delete"] button:hover,.page-content form[action$="/delete-all"] button:hover,.page-content form:has(> input[name="confirmation"]) button:hover{background:#982936}
.page-content hr{margin:23px 0;border-color:var(--vg-line)}
/* Tables scroll within their own bounds, never force full-page horizontal overflow. */
.page-content table{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--vg-line);border-radius:12px;border-collapse:separate;border-spacing:0;font-size:14px}
.page-content table th,.page-content table td{padding:12px 13px;min-width:65px;vertical-align:middle;white-space:nowrap}
.page-content table th{background:#e8f1fc}.page-content table td:first-child,.page-content table th:first-child{white-space:normal;min-width:110px}
.page-content table .btn,.page-content table button{white-space:nowrap}
.page-content .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){
 body{font-size:15px}.wrap{margin:0 auto;padding:9px}.panel{border-radius:15px;box-shadow:0 4px 18px #143b7310}.topnav{padding:15px 14px;flex-direction:column;align-items:stretch;gap:12px;border-radius:15px 15px 0 0}.brand{font-size:21px}.nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.nav-links>a,.nav-links>form,.nav-links>form button{width:100%;min-width:0}.nav-links>a,.nav-links button{font-size:13px;padding:9px 7px;min-height:42px}
 .page-content{padding:19px 15px 26px}.page-content h1{font-size:23px;margin-bottom:14px}.page-content h2{font-size:19px;margin:23px 0 12px}.page-content p{margin:10px 0 15px}.page-content label{margin-bottom:12px}
 .page-content .btn,.page-content button{font-size:14px;min-height:44px;margin:5px 7px 8px 0;padding:10px 12px}
 .page-content .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.page-content .actions>*{min-width:0;width:100%}
 .page-content form:has(> input[name="new_password"]),.page-content form:has(> input[name="confirmation"]){display:grid;grid-template-columns:1fr;gap:8px;padding:11px 0}
 .page-content form:has(> input[name="new_password"]) input,.page-content form:has(> input[name="confirmation"]) input{width:100%!important;min-width:0;flex:auto}
 .page-content form:has(> input[name="new_password"]) button,.page-content form:has(> input[name="confirmation"]) button{justify-self:start;width:auto;max-width:100%}
 .page-content table{font-size:13px;margin:16px 0 22px}.page-content table th,.page-content table td{padding:10px 11px}.page-content .stats{grid-template-columns:1fr;gap:10px}
}
@media(max-width:380px){.nav-links{grid-template-columns:1fr 1fr}.page-content{padding:17px 12px 24px}.page-content .actions{grid-template-columns:1fr}.page-content .actions .btn,.page-content .actions button{width:100%}}
@media print{.page-content table{display:table;overflow:visible}.page-content{padding:0}.topnav{display:none}}