/* Responsive UI 2026-10-08. Existing desktop theme and business rules retained. */
:root { --rui-radius: 14px; --rui-gap: 16px; }
.rui-table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.rui-table-scroll:focus-visible { outline:3px solid #3b82f6; outline-offset:2px; }
.rui-table-hint { font-size:.8rem; color:var(--text-muted,#64748b); margin:0 0 .5rem; }
.rui-table-hint[hidden] { display:none; }
@media (min-width:992px) { .rui-table-hint { display:none; } }
@media (max-width:991.98px) {
 html body { overflow-x:visible !important; max-width:100% !important; }
 body .wrapper, body .content-wrapper, body .app-content, body .content-body { min-width:0; }
 body:not(.vertical-layout) .content-wrapper { margin-left:0 !important; width:auto !important; }
 body .main-header, body .main-footer { margin-left:0 !important; }
 body .main-header { padding-left:8px; padding-right:8px; }
 body .main-header .navbar-nav { min-width:0; }
 body .main-header .navbar-nav .nav-link { min-width:40px; min-height:44px; display:flex; align-items:center; justify-content:center; }
 body .main-header .badge { white-space:normal; overflow-wrap:anywhere; }
 body .main-header .dropdown-menu { max-width:calc(100vw - 24px); }
 body .main-sidebar { max-width:calc(100vw - 48px); }
 body .main-sidebar .sidebar { overflow-y:auto; padding-bottom:24px; }
 body .main-sidebar .nav-sidebar .nav-link { min-height:44px; }
 body .main-sidebar .user-panel .info { white-space:normal; overflow-wrap:anywhere; }
 body .layout-footer-fixed .main-footer, body.layout-footer-fixed .main-footer { position:static !important; }
 body.layout-footer-fixed .content-wrapper { padding-bottom:16px !important; }
 body .content-wrapper > .content, body .content-header { padding:16px 12px !important; }
 body .content-wrapper .container-fluid { padding-left:4px; padding-right:4px; }
 body .content-wrapper .row > [class*="col-"], body .card, body .card-body, body .info-box-content { min-width:0; }
 body .card { border-radius:var(--rui-radius); }
 body .card-header, body .card-footer { padding:14px 16px !important; }
 body .card-body { padding:16px !important; }
 body .card-header { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
 body .card-header::after { display:none; }
 body .card-header .card-title { float:none; flex:1 1 160px; line-height:1.4; }
 body .card-header .card-tools { float:none; margin-left:auto; margin-right:0; max-width:100%; }
 body .content-header h1 { font-size:1.6rem !important; line-height:1.25; overflow-wrap:anywhere; }
 body .breadcrumb { flex-wrap:wrap; padding:8px 0; margin-bottom:0; }
 body .form-group label, body .custom-control-label { white-space:normal; overflow-wrap:anywhere; }
 body .form-control, body .custom-select { font-size:16px !important; min-height:44px; max-width:100%; }
 body textarea.form-control { min-height:120px; height:auto; }
 body .input-group { min-width:0; }
 body .input-group > .form-control { min-width:0; }
 body .input-group-text { white-space:normal; }
 body .select2-container { max-width:100%; min-width:0; }
 body .select2-container .select2-selection--single { min-height:44px; }
 body .select2-container .select2-selection--single .select2-selection__rendered { line-height:42px; }
 body .select2-container .select2-selection__arrow { height:42px; }
 body .select2-selection--multiple .select2-selection__choice { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
 body .btn { min-height:44px; white-space:normal; line-height:1.35; }
 body .btn-group:not(.btn-group-vertical), body .btn-group-action { flex-wrap:wrap; gap:4px; }
 body .card-footer .btn, body .modal-footer .btn { margin:4px 0; }
 body .nav-tabs, body .nav-pills:not(.nav-sidebar) { flex-wrap:wrap; gap:4px; }
 body .nav-tabs .nav-link, body .nav-pills:not(.nav-sidebar) .nav-link { white-space:normal; min-height:44px; }
 body .rui-table-scroll { width:100%; min-width:0; }
 body .rui-table-scroll > table { margin-bottom:0; }
 body .table th, body .table td { font-size:.875rem !important; padding:12px 10px !important; vertical-align:middle; }
 body .table td .btn { min-width:40px; }
 body .dataTables_wrapper { min-width:0; max-width:100%; }
 body .dataTables_wrapper > .row { margin-left:0; margin-right:0; }
 body .dataTables_filter, body .dataTables_length, body .dataTables_info { text-align:left !important; white-space:normal !important; }
 body .dataTables_filter label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
 body .dataTables_filter input { flex:1 1 160px; margin-left:0 !important; width:auto !important; min-width:0; }
 body .dataTables_paginate .pagination { flex-wrap:wrap; justify-content:flex-start; gap:4px; }
 body .page-link { min-width:40px; min-height:44px; display:flex; align-items:center; justify-content:center; }
 body .modal-dialog { width:auto !important; margin:12px !important; max-width:calc(100% - 24px) !important; }
 body .modal-content { max-height:calc(100dvh - 24px); }
 body .modal-content > form { display:flex; flex-direction:column; min-height:0; overflow:auto; }
 body .modal-body { min-height:0; overflow-y:auto; padding:16px !important; }
 body .modal-header, body .modal-footer { flex-wrap:wrap; gap:8px; padding:12px 16px !important; }
 body .modal-header .close { min-width:44px; min-height:44px; }
 body .swal2-popup { width:calc(100% - 24px) !important; max-width:32rem; }
 body #toast-container { max-width:calc(100vw - 24px); right:12px; }
 body #toast-container > div { max-width:100%; }
 body .note-editor, body .note-editable { max-width:100%; overflow-wrap:anywhere; }
 body .note-toolbar { display:flex; flex-wrap:wrap; }
 body .note-toolbar .btn { min-height:36px; }
 body .content-wrapper img:not(.brand-image), body .content-wrapper video, body .content-wrapper iframe { max-width:100%; }
 body .content-wrapper pre { max-width:100%; overflow:auto; }
 body .content-wrapper p, body .callout, body .alert { overflow-wrap:anywhere; }
 body .metric-title, body .col-4 .metric-title { white-space:normal !important; font-size:.78rem !important; }
 body .metric-value { overflow-wrap:anywhere; }
 body .info-box { min-height:90px; }
 body .info-box-text { white-space:normal; }
 body .login-box, body .register-box, body .wrap-login100 { width:calc(100% - 24px) !important; max-width:460px; margin-left:auto; margin-right:auto; }
 body .login100-form-avatar { width:100% !important; max-width:400px; height:auto !important; }
 body .login100-form-avatar img { max-width:100%; height:auto; }
 body .whatsapp-preview, body .phone-preview { max-width:100%; }
}
@media (max-width:575.98px) {
 body .content-wrapper .row > .col-6:has(.metric-card), body .content-wrapper .row > .col-4:has(.metric-card) { flex:0 0 100%; max-width:100%; }
 body .content-wrapper .row > .col-6:has(> .form-group), body .content-wrapper .row > .col-4:has(> .form-group) { flex:0 0 100%; max-width:100%; }
 body .card-tools .input-group { width:100% !important; }
 body .modal-footer > .btn { flex:1 1 130px; }
 body .main-header .navbar-nav .badge { font-size:.75rem !important; padding:6px 8px !important; }
 body .login100-form, body .wrap-login100 { padding:24px 16px !important; }
}
@media (prefers-reduced-motion:reduce) { body .main-sidebar, body .content-wrapper { transition:none !important; } }
@media (max-width:991.98px) {
 body .table-responsive:has(.rui-table-scroll) { overflow-x:visible !important; }
 body .rui-table-scroll > #table th, body .rui-table-scroll > #table td { display:table-cell !important; }
 body #main-content { min-width:0; width:auto; }
 body #main-content .content-card { min-width:0; border-radius:14px; }
 body #main-content .content-card input:not([type="checkbox"]):not([type="radio"]),
 body #main-content .content-card select, body #main-content .content-card textarea { max-width:100%; min-height:44px; font-size:16px; }
 body #main-content .page-header { padding-left:40px; overflow-wrap:anywhere; }
 body #menu-toggle-button { width:44px; height:44px; }
 body #main-content .grid-container { grid-template-columns:minmax(0,1fr); }
 body .banner-preview-wrapper { min-width:0; max-width:100%; padding:12px; }
 body #live-banner-preview-img { max-width:100%; height:auto; }
}
@media (max-width:991.98px) {
 body .login-wrapper { width:100%; min-height:100svh; }
 body .login-hero { display:flex !important; height:auto; padding:28px 20px 16px; }
 body .login-hero-logo { max-width:120px; margin-bottom:16px; }
 body .login-hero-title { font-size:1.8rem; }
 body .login-hero-subtitle { font-size:1rem; margin-bottom:0; }
 body .login-hero-features { margin-top:16px; gap:8px; }
 body .login-hero-badge { padding:8px 12px; font-size:.8rem; }
 body .login-form-panel { min-height:0; padding:24px 20px !important; }
 body .input100 { font-size:16px; }
 body .phone-mockup { width:100%; max-width:380px; }
 body .phone-header { gap:8px; padding:12px; }
 body .phone-title { overflow-wrap:anywhere; }
 body .phone-avatar { flex-shrink:0; }
 body .phone-body { padding:12px; min-height:280px; }
 body .message-bubble { max-width:95%; overflow-wrap:anywhere; }
 body .content-wrapper .d-flex.justify-content-between { flex-wrap:wrap; gap:10px; }
 body .faq-box { flex-wrap:wrap; gap:8px; }
 body .faq-box .form-control { flex:1 1 180px; }
 body .checkout-container { max-width:100%; padding-left:12px; padding-right:12px; }
 body .plan-grid, body .dashboard-grid, body .options-grid { min-width:0; }
 body .qr-wrapper img, body .qr-wrapper canvas { max-width:100%; height:auto; }
 body .content-wrapper .btn:focus-visible, body .content-wrapper a:focus-visible { outline:3px solid #3b82f6; outline-offset:2px; }
}
@media (max-width:575.98px) {
 body .plan-grid, body .dashboard-grid, body .options-grid { grid-template-columns:minmax(0,1fr); }
 body .content-wrapper .row.col-lg-12 { margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
}