/* CUONE Mobile UX • readability and responsive layout • v1
   Load after css/style.css and components.css. No route, data or form changes.
   Do not disable browser zoom: font >=16px on touch inputs stops Safari focus auto-zoom. */
:root{--cu-ink:#182234;--cu-body:#354155;--cu-muted:#596579;--cu-surface:#fff;--cu-line:#e4e9f1;--cu-focus:#ed4359}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;color:var(--cu-body);font-weight:400}
.main-content{color:var(--cu-body);font-size:14px;line-height:1.65}
.main-content p,.main-content .card-body,.main-content td,.main-content th,.main-content li,.main-content label{color:var(--cu-body)}
.main-content h1,.main-content h2,.main-content h3,.main-content h4,.main-content h5,.main-content .card-header h4{color:var(--cu-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.025em;font-weight:700;line-height:1.35}
.main-content .section-header h1{font-size:clamp(22px,4vw,29px)!important;line-height:1.32!important}
.main-content .text-muted,.main-content small.text-muted,.main-content .text-secondary,.main-content .description{color:var(--cu-muted)!important}
.main-content a:not(.btn):not(.nav-link){color:#315ac5}
.main-content a:not(.btn):not(.nav-link):hover{color:#2045a0}
.main-content .card,.main-content .card-header,.main-content .card-body{min-width:0}
.main-content .card-header h4,.main-content h4,.main-content p,.main-content .card-body{overflow-wrap:anywhere}
.main-content .card-header{height:auto;min-height:58px;padding-top:15px;padding-bottom:15px;align-items:center}
.main-content .card-header h4{margin:0;line-height:1.35!important;white-space:normal;max-width:100%}
.main-content .card-body .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.main-content .form-control,.main-content .custom-select,.main-content .select2-selection{color:var(--cu-ink);border-color:#cdd5e0}
.main-content .form-control::placeholder{color:#667385;opacity:1}
.main-content label{font-weight:600}
.main-content .table-responsive{max-width:100%;-webkit-overflow-scrolling:touch}
.main-content .table th,.main-content .table td{vertical-align:middle}
:where(input,textarea,select,button,a):focus-visible{outline:2px solid var(--cu-focus);outline-offset:3px}
/* Readable touch inputs, including Select2/DataTables/login on iOS. No user-scalable=no. */
@media(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),
  textarea,select,[contenteditable=true],.select2-search__field,
  .dataTables_filter input,.form-control{font-size:16px!important}
  input[type=checkbox],input[type=radio]{min-width:18px;min-height:18px}
}
@media(max-width:767.98px){
  html,body{max-width:100%;overflow-x:clip}
  .main-content{padding-left:0!important;padding-right:0!important;min-width:0}
  .main-content .section{padding:15px 13px 20px!important;min-width:0;max-width:100%}
  .main-content .section-header{padding:16px!important;margin-bottom:16px;min-height:0;height:auto;border-radius:13px}
  .main-content .section-header h1{margin:0;font-size:clamp(21px,5.5vw,26px)!important;font-weight:750!important}
  .main-content .row{margin-left:-7px;margin-right:-7px}
  .main-content [class*=col-]{min-width:0;padding-left:7px;padding-right:7px}
  .main-content .card{margin-bottom:16px;border-radius:14px;overflow:visible;box-shadow:0 8px 27px rgba(20,31,50,.045)}
  .main-content .card-header{padding:15px 16px;min-height:0;flex-wrap:wrap}
  .main-content .card-header h4{font-size:17px!important;color:#223044!important;line-height:1.42!important;letter-spacing:0!important;font-weight:700!important}
  .main-content .card-body{padding:16px!important;font-size:15px;line-height:1.7}
  .main-content .card-body p,.main-content>.section>p{font-size:15px;line-height:1.7;color:#39465b;letter-spacing:0;font-weight:400}
  .main-content .btn{min-height:42px;padding:10px 13px;margin-bottom:6px;font-size:14px;line-height:1.4;display:inline-flex;align-items:center;justify-content:center;white-space:normal}
  .main-content .card-body .btn + .btn{margin-left:0}
  .main-content .table-responsive{border-radius:9px;overflow-x:auto}
  .main-content .table{min-width:620px;font-size:13px}
  .main-content .table th{white-space:nowrap;font-weight:650;color:#253047}
  .main-content .dataTables_wrapper{max-width:100%;overflow-x:auto}
  .main-content .dataTables_filter{max-width:100%;display:flex;justify-content:flex-start}
  .main-content .dataTables_filter input{max-width:100%;width:min(100%,280px)}
  .main-content .form-control,.main-content .custom-select{min-height:44px}
  .main-content .form-group{margin-bottom:17px}
  .main-content .text-muted{color:#596579!important}
  .main-content .card-body img{max-width:100%;height:auto;object-fit:contain}
  .main-sidebar{max-width:min(275px,86vw)}
  .navbar .nav-link{min-height:40px}
  .main-footer{font-size:12px;line-height:1.6;word-break:break-word;padding:20px 14px}
  /* Owner temporary-access banner, injected before #app; compress to avoid taking half the screen. */
  body>[role=status]:first-child{font-size:13px!important;line-height:1.45!important;gap:9px!important;padding:9px 12px!important;align-items:center!important}
  body>[role=status]:first-child>span{min-width:0;flex:1 1 200px;overflow-wrap:anywhere}
  body>[role=status]:first-child form button{padding:9px 12px!important;min-height:40px;font-size:13px!important}
}
@media(max-width:380px){
  .main-content .section{padding:11px 10px 18px!important}
  .main-content .card-body{padding:14px!important}
  .main-content .card-header{padding:13px 14px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}