/* Shared interaction and content safeguards. */
button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:#15856f22}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.main,.content,.panel,.panel-head,.metric,.row,.heading>div,.login-box{min-width:0}
.row,.panel-head>.row{flex-wrap:wrap}
.cell-value{min-width:0;overflow-wrap:anywhere}
.form-error{color:#b53b3b;line-height:1.7;font-size:13px}
.form-error:empty{display:none}
.skip-link{position:fixed;left:12px;top:-100px;z-index:300;background:white;padding:12px;color:var(--green)}
.skip-link:focus{top:12px}
.modal-open,.drawer-open{overflow:hidden}
.modal,.sidebar nav{overscroll-behavior:contain}
.modal-body .notice,.notice{overflow-wrap:anywhere}
.modal-foot{position:sticky;bottom:0;background:white;z-index:2}
.metric strong{overflow-wrap:anywhere}
small,.muted,.heading p,.login-box>p,.login-foot,.registration-note,.panel-head>span,.metric>div,.balance-lines div,.security-item p,footer{color:#637581}
.sidebar small{color:#9fb1bb}
.badge.success,.badge.approved,.badge.enabled{color:#0c704d}
.badge.pending,.badge.review,.badge.claimed{color:#8a611b}
.badge.failed,.badge.rejected,.badge.disabled{color:#a43c3c}
.side-bottom>div{min-width:0;overflow-wrap:anywhere}
.side-bottom .avatar{flex-shrink:0}
.sidebar{padding-bottom:env(safe-area-inset-bottom)}
.scrim{display:none}

@media(max-width:820px){
 :root{font-size:14px}
 button,.icon{min-height:44px;min-width:44px}
 input,select,textarea{font-size:16px;min-height:46px;max-width:100%}
 .topbar{padding-top:env(safe-area-inset-top);padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:8px;height:auto;min-height:calc(64px + env(safe-area-inset-top))}
 .topbar>.row{flex-wrap:nowrap;gap:6px}
 .top-actions{flex-wrap:nowrap;gap:6px}
 .breadcrumb{font-size:12px;gap:5px;white-space:nowrap}
 .content{padding:20px max(12px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .sidebar{width:min(290px,85vw);height:100dvh;padding-top:env(safe-area-inset-top)}
 .sidebar nav button{min-height:46px}
 .sidebar .brand{flex-shrink:0}
 .sidebar.open~.scrim{display:block;position:fixed;inset:0;background:#152b3388;z-index:19;border:0;border-radius:0}
 .heading{gap:8px;align-items:flex-start}
 .heading>div:first-child{flex:1}
 .heading p{font-size:12px;max-width:none;overflow-wrap:anywhere}
 .heading>.row{flex-shrink:0}
 .metric{padding:14px 12px}
 .metric strong{font-size:22px}
 .metric small{font-size:11px}
 .chart{padding:15px 12px;overflow-x:auto}
 .bars{min-width:300px}
 .quick{gap:8px;padding:12px}
 .quick button{white-space:normal;padding:12px 8px;gap:6px;text-align:left}
 .quick i{padding:6px}
 .quick b{line-height:1.6}
 .panel-head{padding:16px 12px}
 .panel-head>.row{width:100%;gap:8px}
 .panel-head>.row>button{flex:1}
 .filters{padding:12px;gap:8px}
 .filters input[type=date]{width:calc(50% - 18px);flex:1 1 120px}
 .filters select{max-width:none;flex:1 1 120px}
 .filters input[type=search]{width:100%;flex:1 1 100%}
 .filters>button{flex:1 1 100px}
 .notice{margin:12px;padding:12px}
 .settings-form,.security-item{padding:18px 14px}
 .settings-form button{width:100%}
 .security-item>div{min-width:0}
 .security-item p{font-size:12px}
 .balance-buttons{padding:0 14px 18px;flex-wrap:wrap}
 .balance-buttons button{flex:1}
 .switch{min-width:44px;min-height:32px;border:6px solid transparent;background-clip:padding-box;padding:2px;border-radius:30px}
 .switch i{flex-shrink:0}
 .login-page{min-height:100dvh;grid-template-columns:minmax(0,1fr)}
 .login-side{min-width:0;align-items:flex-start;padding:calc(24px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom))}
 .login-box{width:100%;max-width:420px;margin:auto}
 .login-box input{height:48px}
 .login-box form{gap:18px}
 .login-box>p{margin-bottom:24px}
 .mobile-brand{margin-bottom:26px}
 .login-foot{margin-top:24px}
 .modal-backdrop{padding:env(safe-area-inset-top) 0 0;align-items:flex-end}
 .modal{width:100%;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:16px 16px 0 0;overscroll-behavior:contain;scroll-padding-block:78px}
 .modal-head{padding:12px 16px}
 .modal-body{padding:18px 16px}
 .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
 .modal-foot button{flex:1}
 .form-grid{gap:18px}
 .detail-actions button{flex:1 1 120px}
 .detail-grid strong{word-break:break-word}
 .detail-amount{font-size:30px;overflow-wrap:anywhere}
 .pagination{padding:12px;gap:8px;flex-wrap:wrap}
 #notification{top:calc(12px + env(safe-area-inset-top));width:max-content;max-width:calc(100vw - 24px)}
 #notification>div{max-width:100%;padding:12px 16px;overflow-wrap:anywhere}
}

/* Cards preserve every field and action without sideways scrolling on phones. */
@media(max-width:640px){
 .table-scroll{overflow:visible;padding:0 12px 12px}
 .table-scroll table,.table-scroll tbody{display:block;width:100%;min-width:0;white-space:normal}
 .table-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .table-scroll tr{display:block;border:1px solid var(--line);border-radius:8px;margin-top:12px;background:white;overflow:hidden}
 .table-scroll td{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px;max-width:none;padding:12px;border-bottom:1px solid #eff2f4;overflow:visible;font-size:13px;line-height:1.7;white-space:normal;text-overflow:clip}
 .table-scroll td::before{content:attr(data-label);color:#687b86;overflow-wrap:anywhere}
 .table-scroll td:last-child{border-bottom:0}
 .table-scroll td.actions{display:flex;flex-wrap:wrap;gap:8px}
 .table-scroll td.actions::before{display:none}
 .table-scroll td.actions button,.table-scroll td.actions a{min-height:44px;padding:10px 12px;border:1px solid #dce3e9;border-radius:5px;font-size:13px;flex:1;text-align:center;display:inline-flex;align-items:center;justify-content:center}
 .credential{min-width:0;max-width:100%;font-size:14px;word-break:break-word}
 .tabs{gap:12px;flex-wrap:wrap}
 .tabs button{min-height:44px}
}
@media(max-width:480px){
 .top-actions>.avatar,.top-actions>[data-action=go]{display:none}
}
@media(max-width:380px){
 .breadcrumb{font-size:11px;gap:3px}
 .top-actions>.avatar,.top-actions>[data-action=go]{display:none}
 .topbar{gap:4px}
 .top-actions{gap:4px;font-size:12px}
 .metric strong{font-size:19px}
 .metrics{gap:8px}
 .table-scroll td{grid-template-columns:6em minmax(0,1fr);gap:8px}
}