/* CRM_RESPONSIVE_UI_V17 — PRESENTATION ONLY. No data/API/account behavior changes. */
/* Minimal, reversible improvements for the whole WHMCS customer area. */
body.crmux17-client { --crmux17-line:#dce6f3; --crmux17-soft:#f8fbff; --crmux17-ink:#1b3557; --crmux17-blue:#195ba8; }
body.crmux17-client :is(button, a, input, select, textarea):focus-visible { outline:2px solid #2b74d6;outline-offset:3px; }
body.crmux17-client :is(.main-content,#main-body) { min-width:0; }
body.crmux17-client :is(.main-content,#main-body) :is(.panel,.card) { max-width:100%; }
body.crmux17-client :is(.main-content,#main-body) :is(input,select,textarea) { max-width:100%; }
body.crmux17-client :is(.main-content,#main-body) :is(.table-responsive,.responsive-table) { max-width:100%; }
/* Core WHMCS customer sections remain native to the active Simurgh theme. */
@media (max-width:767px) {
 body.crmux17-client :is(.main-content,#main-body) { min-width:0; }
 body.crmux17-client :is(.main-content,#main-body) :is(.panel,.card) { max-width:100%; }
 body.crmux17-client :is(.main-content,#main-body) :is(.row,.col,.col-md-12,.col-sm-12) { min-width:0; }
 body.crmux17-client :is(.main-content,#main-body) :is(.btn,.btn-primary,.btn-default) { white-space:normal; }
}
/* Compact, accessible list of services: only the exact CRM dashboard table is marked by JS. */
body.crmux17-client .crmux17-table { width:100%;border-collapse:separate!important;border-spacing:0 5px!important;table-layout:auto;direction:rtl; }
body.crmux17-client .crmux17-table thead th { padding:11px 7px!important;white-space:nowrap;font-size:11px!important;line-height:1.5!important;vertical-align:middle!important; }
body.crmux17-client .crmux17-table tbody tr { height:auto!important;min-height:0!important; }
body.crmux17-client .crmux17-table tbody td { padding:10px 8px!important;height:auto!important;min-height:0!important;vertical-align:middle!important;line-height:1.6!important;font-size:12px!important;overflow-wrap:anywhere; }
body.crmux17-client .crmux17-table tbody td .crm-sid { font-size:10px!important;margin-top:4px!important;opacity:.78; }
body.crmux17-client .crmux17-table tbody td.crm-lastseen { min-width:115px; }
body.crmux17-client .crmux17-table tbody td.crm-traffic-cell { min-width:96px; }
body.crmux17-client .crmux17-table tbody td :is(.crm-btn,.btn) { min-height:36px!important;padding:7px 11px!important;display:inline-flex;align-items:center;justify-content:center;border-radius:10px!important;font-size:12px!important; }
body.crmux17-client .crmux17-table tbody td :is(.crm-lastseen-time,.crm-sid,small) { line-height:1.6!important; }
body.crmux17-client .crmux17-table tbody tr:hover td { background-color:#f8fbff; }
body.crmux17-client .crmux17-table-shell { width:100%;max-width:100%; }
@media (min-width:761px) and (max-width:1279px) {
 body.crmux17-client .crmux17-table-shell { overflow-x:auto;-webkit-overflow-scrolling:touch; }
 body.crmux17-client .crmux17-table { min-width:1040px; }
}
/* On phones/tablets, show each service as a structured card, not a 13-column miniature table. */
@media (max-width:760px) {
 body.crmux17-client .crmux17-table-shell { overflow:visible!important; }
 body.crmux17-client .crmux17-table,
 body.crmux17-client .crmux17-table tbody { display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important; }
 body.crmux17-client .crmux17-table thead { display:none!important; }
 body.crmux17-client .crmux17-table tbody tr { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:0 12px;margin:0 0 12px!important;padding:13px 14px 12px!important;min-width:0!important;border:1px solid #dce6f3!important;border-radius:16px!important;background:white!important;box-shadow:0 6px 20px rgba(17,50,98,.06)!important; }
 body.crmux17-client .crmux17-table tbody td { display:block!important;float:none!important;width:auto!important;max-width:100%!important;min-width:0!important;height:auto!important;padding:8px 0!important;margin:0!important;text-align:right!important;border:0!important;border-bottom:1px solid #edf2f9!important;background:transparent!important;line-height:1.65!important;overflow-wrap:anywhere; }
 body.crmux17-client .crmux17-table tbody td::before { content:attr(data-crmux-label);display:block;margin:0 0 3px;color:#687e9b;font-size:10px;font-weight:700;white-space:normal;text-align:right; }
 body.crmux17-client .crmux17-table tbody td:nth-child(1) { grid-column:1 / -1;border-bottom:1px solid #dbe6f6!important;padding:0 0 11px!important;font-size:14px!important;font-weight:800!important;color:#163a6e; }
 body.crmux17-client .crmux17-table tbody td:nth-child(1)::before { content:none; }
 body.crmux17-client .crmux17-table tbody td:nth-child(1) .crm-sid { display:block;font-weight:400; }
 body.crmux17-client .crmux17-table tbody td:nth-child(2) { grid-column:1 / -1;padding-top:10px!important; }
 body.crmux17-client .crmux17-table tbody td:nth-child(11),
 body.crmux17-client .crmux17-table tbody td:nth-child(12) { border-bottom:0!important; }
 body.crmux17-client .crmux17-table tbody td:nth-child(13) { grid-column:1 / -1;border-top:1px solid #e5edf8!important;border-bottom:0!important;margin-top:5px!important;padding-top:11px!important; }
 body.crmux17-client .crmux17-table tbody td:nth-child(13)::before { content:none; }
 body.crmux17-client .crmux17-table tbody td:nth-child(13) :is(.crm-btn,.btn,a) { min-height:42px!important; }
 body.crmux17-client .crmux17-table tbody td.crm-lastseen,
 body.crmux17-client .crmux17-table tbody td.crm-traffic-cell { min-width:0!important; }
 body.crmux17-client .crmux17-table tbody tr:hover td { background:transparent!important; }
}
@media (max-width:380px) {
 body.crmux17-client .crmux17-table tbody tr { grid-template-columns:minmax(0,1fr);padding:12px!important; }
 body.crmux17-client .crmux17-table tbody td:nth-child(n) { grid-column:1/-1; }
 body.crmux17-client .crmux17-table tbody td:nth-child(13) a { width:100%; }
}
/* Shared details pages: keep every field/button; tighten vertical whitespace only. */
body.crmux17-details :is(.crm-wg-compat,.crm-ovpn-compat) { width:100%;max-width:100%;min-width:0;line-height:1.75!important; }
body.crmux17-details :is(.crm-wg-compat,.crm-ovpn-compat) * { box-sizing:border-box; }
body.crmux17-details .crm-wg-compat .crm-vpn-hero { margin:0 0 13px!important;padding:16px 20px!important;border-radius:15px!important;gap:12px!important; }
body.crmux17-details .crm-wg-compat .crm-vpn-hero-icon { width:46px!important;height:46px!important;font-size:22px!important; }
body.crmux17-details .crm-wg-compat .crm-vpn-hero h3 { font-size:18px!important; }
body.crmux17-details .crm-wg-compat > table.table-striped,
body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type,
body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type { gap:10px!important;margin:10px 0 15px!important; }
body.crmux17-details .crm-wg-compat > table.table-striped tr,
body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type tr,
body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type tr { min-height:79px!important;padding:12px 14px!important;border-radius:13px!important; }
body.crmux17-details .crm-wg-compat > table.table-striped td:last-child,
body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type td:last-child,
body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type td:last-child { font-size:14px!important; }
body.crmux17-details .crm-wg-compat .mwg-actions { gap:8px!important;margin:8px 0 14px!important;justify-content:flex-start!important; }
body.crmux17-details .crm-wg-compat > h4,
body.crmux17-details .crm-ovpn-compat h5 { margin:16px 0 10px!important; }
body.crmux17-details .crmwg8 .crmwg8-quick { margin:12px 0 15px!important;padding:16px 19px!important;border-radius:15px!important; }
body.crmux17-details .crmwg8 .crmwg8-buttons { margin-top:11px!important;gap:8px!important; }
body.crmux17-details .crmwg8 .mwg-qr { margin:10px 0 13px!important;padding:15px!important;border-radius:15px!important; }
body.crmux17-details .crmwg8 #wg-qr { max-width:230px!important; }
/* Keep WG configuration permanently visible with high contrast, including long keys. */
body.crmux17-details .crm-wg-compat #wg-conf-view { display:block!important;visibility:visible!important;background:#0b1322!important;color:#f3f7ff!important;border:1px solid #30415f!important;border-radius:13px!important;padding:14px!important;max-width:100%!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important;direction:ltr!important;text-align:left!important;font:12px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace!important; }
body.crmux17-details .crm-wg-compat #wg-conf-view[hidden] { display:none!important; } /* preserve security/visibility controls */
body.crmux17-details .crmwg9 { margin:12px 0!important;padding:16px!important;border-radius:15px!important; }
body.crmux17-details .crmwg9-head { margin-bottom:10px!important; }
body.crmux17-details .crmwg9-current { margin:9px 0!important;padding:12px!important; }
body.crmux17-details .crmwg9-methods { gap:9px!important;margin:12px 0!important; }
body.crmux17-details .crmwg9-method { padding:11px!important; }
body.crmux17-details .crmwg9-fields { padding:12px!important;margin-bottom:10px!important; }
body.crmux17-details .crmwg14 { margin:12px 0!important;padding:17px!important;border-radius:15px!important; }
body.crmux17-details .crmwg14-head { margin-bottom:10px!important; }
body.crmux17-details .crmwg14-link { max-width:100%; }
body.crmux17-details .crm-usage-v2 { margin:13px 0!important;padding:17px!important;border-radius:15px!important; }
body.crmux17-details .crm-use-metrics { gap:9px!important;margin-bottom:10px!important; }
body.crmux17-details .crm-use-charts { gap:10px!important; }
body.crmux17-details .crm4-history-graphs { gap:10px!important; }
body.crmux17-details .crm4-sums { gap:9px!important; }
body.crmux17-details .crm-ovpn-compat > :is(.panel-heading,.card-header) { padding:16px 20px!important;margin-bottom:13px!important;border-radius:15px!important; }
body.crmux17-details .crm-ovpn-compat form { margin:12px 0!important;padding:15px!important;border-radius:13px!important; }
body.crmux17-details :is(.crm-wg-compat,.crm-ovpn-compat,.crmwg9,.crmwg14,.crm-usage-v2) :is(pre,code,input,textarea) { max-width:100%; }
body.crmux17-details :is(.crm-wg-compat,.crm-ovpn-compat,.crmwg9,.crmwg14,.crm-usage-v2) :is(.btn,button:not([hidden])) { max-width:100%; }
/* Moderate laptop/tablet/mobile sizing (do not hide private configuration or controls). */
@media (max-width:1024px) {
 body.crmux17-details .crm-wg-compat > table.table-striped,
 body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type,
 body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:680px) {
 body.crmux17-details .crm-wg-compat .crm-vpn-hero { margin-bottom:10px!important;padding:12px!important; }
 body.crmux17-details .crm-wg-compat .crm-vpn-hero h3 { font-size:16px!important; }
 body.crmux17-details .crm-wg-compat > table.table-striped,
 body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type,
 body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type { grid-template-columns:minmax(0,1fr)!important;gap:8px!important; }
 body.crmux17-details .crm-wg-compat > table.table-striped tr,
 body.crmux17-details .crm-ovpn-compat > .panel-body > table.table-sm:first-of-type tr,
 body.crmux17-details .crm-ovpn-compat > .card-body > table.table-sm:first-of-type tr { min-height:0!important;padding:11px 12px!important; }
 body.crmux17-details :is(.crmwg9,.crmwg14,.crm-usage-v2) { padding:13px!important; }
 body.crmux17-details .crmwg9-methods { grid-template-columns:minmax(0,1fr)!important; }
 body.crmux17-details .crmwg8 .crmwg8-buttons { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; }
 body.crmux17-details .crmwg8 .crmwg8-quick { padding:13px!important; }
 body.crmux17-details .crmwg8 #wg-qr { max-width:225px!important; }
 body.crmux17-details .crm-usage-v2 .crm-use-metrics { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
 body.crmux17-details .crmwg14-actions { align-items:stretch!important; }
 body.crmux17-details .crmwg14-actions .crmwg14-btn { width:100%!important; }
}
@media (max-width:390px) {
 body.crmux17-details .crmwg8 .crmwg8-buttons { grid-template-columns:minmax(0,1fr)!important; }
 body.crmux17-details .crm-usage-v2 .crm-use-metrics { grid-template-columns:minmax(0,1fr)!important; }
}
@media (prefers-reduced-motion:reduce) {
 body.crmux17-client :is(.crmux17-table,.crmwg8,.crmwg9,.crmwg14,.crm-usage-v2) *,
 body.crmux17-client :is(.crmux17-table,.crmwg8,.crmwg9,.crmwg14,.crm-usage-v2) *::before { animation:none!important;transition:none!important; }
}