/* XDLHOST Cloud UI v1.0.0 | matched to XHetzner Cloud v4.2.27
   Design tokens: deep navy #0f172a, cloud blue #1d4ed8, sky #38bdf8.
   Loaded by WHMCS Twenty-One via includes/head.tpl. All custom shell styling
   is scoped to body.xd-ui to preserve compatibility with extensions. */
:root {
  --xd-ink: #172033;
  --xd-navy: #0f172a;
  --xd-blue: #1d4ed8;
  --xd-blue-hover: #1e40af;
  --xd-sky: #38bdf8;
  --xd-bg: #f5f8fe;
  --xd-surface: #fff;
  --xd-soft: #eff6ff;
  --xd-line: #dfe7f1;
  --xd-muted: #52657f;
  --xd-positive: #047857;
  --xd-red: #b91c1c;
  --xd-shadow: 0 10px 32px rgba(15,23,42,.055);
}
body.xd-ui { background:var(--xd-bg)!important; color:var(--xd-ink); -webkit-font-smoothing:antialiased; }
body.xd-ui .xd-container { width:100%; max-width:none; padding-right:clamp(18px,2.65vw,52px); padding-left:clamp(18px,2.65vw,52px); }
body.xd-ui #main-body { padding-top:24px; padding-bottom:38px; min-height:50vh; }
body.xd-ui #main-body > .xd-container > .row { gap:0; }
body.xd-ui #main-body .primary-content { min-width:0; }
body.xd-ui #main-body .header-lined { margin-top:0; padding:0 0 13px; border-color:var(--xd-line); }
body.xd-ui #main-body .header-lined h1, body.xd-ui .page-header h1 { font-size:clamp(23px,2vw,30px); font-weight:750; letter-spacing:-.025em; color:var(--xd-navy); }
/* Header is re-skinned without removing navigation and notification hooks. */
body.xd-ui #header.xd-site-header { box-shadow:0 5px 24px rgba(15,23,42,.08); border:0; background:var(--xd-navy); position:relative; z-index:20; }
body.xd-ui #header .topbar { background:#101e37; border-bottom:1px solid rgba(255,255,255,.1); color:#dbeafe; padding:5px 0; }
body.xd-ui #header .topbar .d-flex { align-items:center; gap:16px; }
body.xd-ui #header .topbar .btn { color:#e2e8f0; background:transparent; border:0; border-radius:10px; font-weight:600; }
body.xd-ui #header .topbar .btn:hover, body.xd-ui #header .topbar .btn:focus { color:#fff; background:rgba(255,255,255,.10); }
body.xd-ui #header .active-client .btn-active-client { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.xd-ui #header .active-client .input-group-text { background:rgba(255,255,255,.06); color:#a5b4ce; border:1px solid rgba(255,255,255,.12); border-radius:10px 0 0 10px; }
body.xd-ui #header .xd-top-actions { display:flex; align-items:center; gap:12px; min-width:0; }
body.xd-ui .xd-credit-pill { display:flex; align-items:center; gap:10px; text-decoration:none; padding:6px 13px; background:rgba(56,189,248,.11); border:1px solid rgba(147,197,253,.23); border-radius:12px; color:#fff; white-space:nowrap; transition:background .18s ease; }
body.xd-ui .xd-credit-pill:hover { background:rgba(56,189,248,.20); color:#fff; text-decoration:none; }
body.xd-ui .xd-credit-pill .fa-wallet { color:#93c5fd; font-size:19px; }
body.xd-ui .xd-credit-copy { display:flex; flex-direction:column; line-height:1.2; }
body.xd-ui .xd-credit-copy small { color:#bcd5ff; font-size:10px; }
body.xd-ui .xd-credit-copy strong { font-size:13px; font-variant-numeric:tabular-nums; }
body.xd-ui #header .xd-brand-row { background:linear-gradient(110deg,#0f172a 0%,#132954 50%,#163f84 100%); padding:13px 0; border:0; }
body.xd-ui #header .xd-brand-row > .xd-container { display:flex; flex-wrap:nowrap; align-items:center; gap:16px; }
body.xd-ui #header a.navbar-brand { display:inline-flex; align-items:center; gap:12px; padding:0; margin:0 auto 0 0!important; min-width:0; color:#fff; text-decoration:none; }
body.xd-ui .xd-brand-mark { display:inline-flex; width:44px; height:44px; justify-content:center; align-items:center; font-weight:900; font-size:27px; letter-spacing:-.16em; padding-right:5px; color:#fff; background:linear-gradient(135deg,#2563eb,#38bdf8); border:1px solid rgba(255,255,255,.25); border-radius:13px; box-shadow:0 6px 20px rgba(29,78,216,.32); position:relative; }
body.xd-ui .xd-brand-spark { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; right:8px; top:9px; box-shadow:0 0 8px rgba(255,255,255,.8); }
body.xd-ui .xd-brand-title { display:flex; flex-wrap:wrap; align-items:baseline; font-size:23px; font-weight:850; line-height:1.1; letter-spacing:.02em; color:#fff; }
body.xd-ui .xd-brand-title > span { color:#7dd3fc; }
body.xd-ui .xd-brand-title small { flex-basis:100%; display:block; color:#b3c7e4; font-size:9px; font-weight:650; text-transform:uppercase; letter-spacing:.19em; margin-top:5px; }
body.xd-ui #header .search .form-control { min-width:230px; max-width:360px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); color:#fff; box-shadow:none; border-radius:0 10px 10px 0; }
body.xd-ui #header .search .form-control::placeholder { color:#bacbe0; opacity:1; }
body.xd-ui #header .search .btn { color:#dbeafe; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); border-radius:10px 0 0 10px; }
body.xd-ui #header .search .form-control:focus { border-color:#93c5fd; background:#183767; }
body.xd-ui #header .toolbar .nav-link, body.xd-ui #header .toolbar .btn { color:#f1f5f9; border-radius:12px; }
body.xd-ui #header .toolbar .nav-link:hover { background:rgba(255,255,255,.12); }
body.xd-ui #header .toolbar .badge-info { background:#38bdf8; color:#0f172a; }
body.xd-ui #header .xd-navigation-row { background:#fff; border:0; min-height:49px; box-shadow:inset 0 -1px 0 #e5eaf1; padding:0; }
body.xd-ui #header .xd-navigation-row .navbar-nav > li > a { color:#35445d; font-size:13px; font-weight:750; padding:15px 13px; border-radius:8px; transition:.18s ease; }
body.xd-ui #header .xd-navigation-row .navbar-nav > li > a:hover, body.xd-ui #header .xd-navigation-row .navbar-nav > li.active > a { background:#eff6ff; color:var(--xd-blue); }
body.xd-ui #header .xd-navigation-row .dropdown-menu { background:#fff; border:1px solid var(--xd-line); box-shadow:var(--xd-shadow); border-radius:12px; overflow:hidden; }
body.xd-ui #header .xd-navigation-row .dropdown-item:hover, body.xd-ui #header .xd-navigation-row .dropdown-item:focus { background:#eff6ff; color:var(--xd-blue); }
body.xd-ui .master-breadcrumb { background:transparent; border:0; }
body.xd-ui .master-breadcrumb .breadcrumb { margin:15px 0 0; padding:0; background:transparent; color:var(--xd-muted); font-size:12px; }
body.xd-ui .master-breadcrumb a { color:#315a9f; }
/* Main content and sidebars: fluid canvas, sensible sidebar, spacious cards. */
@media(min-width:992px) {
 body.xd-ui #main-body .xd-sidebar-col { flex:0 0 clamp(226px,19vw,274px); max-width:clamp(226px,19vw,274px); }
 body.xd-ui #main-body .xd-main-content { flex:1 1 0; max-width:calc(100% - clamp(226px,19vw,274px)); }
}
body.xd-ui #main-body .card, body.xd-ui #main-body .panel { background:var(--xd-surface); border:1px solid var(--xd-line); border-radius:16px; box-shadow:var(--xd-shadow); }
body.xd-ui #main-body .card-header, body.xd-ui #main-body .panel-heading { background:linear-gradient(145deg,#fff,#f7faff); color:var(--xd-ink); padding:15px 18px; border-bottom:1px solid var(--xd-line); border-radius:16px 16px 0 0; }
body.xd-ui #main-body .card-title { font-weight:750; color:var(--xd-ink); }
body.xd-ui #main-body .card-body { padding:20px; }
body.xd-ui #main-body .card-footer { background:#fafcff; border-top:1px solid var(--xd-line); border-radius:0 0 16px 16px; }
body.xd-ui #main-body .card-sidebar { box-shadow:0 5px 18px rgba(15,23,42,.04); overflow:hidden; }
body.xd-ui #main-body .card-sidebar .card-header { border-bottom:1px solid var(--xd-line); }
body.xd-ui #main-body .card-sidebar .card-header h3 { font-size:13px; }
body.xd-ui #main-body .card-sidebar .list-group-item { border-color:#edf1f7; color:#455770; font-size:13px; padding:11px 16px; }
body.xd-ui #main-body .card-sidebar .list-group-item:hover { background:#eff6ff; color:var(--xd-blue); }
body.xd-ui #main-body .card-sidebar .list-group-item.active { background:#eaf2ff; color:#1d4ed8; border-left:3px solid #1d4ed8; font-weight:750; }
body.xd-ui #main-body .tiles { margin:0 0 22px; }
body.xd-ui #main-body .tiles .row { gap:0; }
body.xd-ui #main-body .tiles .tile { margin:0 6px 12px; background:linear-gradient(145deg,#fff,#f8fbff); border:1px solid var(--xd-line); border-radius:16px; box-shadow:var(--xd-shadow); color:var(--xd-ink); min-height:128px; overflow:hidden; }
body.xd-ui #main-body .tiles .tile:hover { border-color:#bfdbfe; box-shadow:0 13px 35px rgba(29,78,216,.1); transform:translateY(-2px); }
body.xd-ui #main-body .tiles .tile > i { color:var(--xd-blue); opacity:.85; }
body.xd-ui #main-body .tiles .tile .stat { color:var(--xd-navy); font-size:27px; font-weight:800; }
body.xd-ui #main-body .tiles .tile .title { color:var(--xd-muted); font-weight:650; }
body.xd-ui #main-body .tiles .tile .highlight { height:4px; background:linear-gradient(90deg,#1d4ed8,#38bdf8)!important; }
body.xd-ui #main-body .tiles .xd-credit-stat { font-size:clamp(16px,1.65vw,24px)!important; }
body.xd-ui .btn-primary { background:var(--xd-blue); border-color:var(--xd-blue); color:#fff; }
body.xd-ui .btn-primary:hover, body.xd-ui .btn-primary:focus { background:var(--xd-blue-hover); border-color:var(--xd-blue-hover); color:#fff; }
body.xd-ui .btn { border-radius:9px; font-weight:650; }
body.xd-ui .btn-default, body.xd-ui .btn-outline-primary { border-color:#c7d8ef; color:var(--xd-blue); background:#fff; }
body.xd-ui .btn-default:hover, body.xd-ui .btn-outline-primary:hover { color:#fff; background:var(--xd-blue); border-color:var(--xd-blue); }
body.xd-ui a { transition:color .15s ease, background-color .15s ease; }
body.xd-ui a:not(.btn):not(.nav-link):not(.tile):not(.list-group-item) { overflow-wrap:anywhere; }
body.xd-ui #main-body a:not(.btn):not(.nav-link):not(.tile):not(.list-group-item) { color:#1d4ed8; }
body.xd-ui .form-control, body.xd-ui .custom-select, body.xd-ui select { border-color:#cdd9e8; border-radius:9px; }
body.xd-ui .form-control:focus, body.xd-ui select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(29,78,216,.13); }
body.xd-ui .table-container { overflow-x:auto; border:1px solid var(--xd-line); border-radius:15px; background:#fff; }
body.xd-ui .table.table-list, body.xd-ui table.table-list { margin-bottom:0; }
body.xd-ui .table thead th { background:#f2f6fc; color:#35455f; font-weight:750; font-size:12px; border-color:#e1e9f3; }
body.xd-ui .table td, body.xd-ui .table th { padding:12px; border-color:#e9eff6; }
body.xd-ui .table tbody tr:hover { background:#f5f9ff; }
body.xd-ui .dataTables_wrapper .dataTables_filter input { border:1px solid #cbd5e1; border-radius:9px; background:#fff; padding:7px 10px; }
body.xd-ui .pagination .page-item.active .page-link { background:var(--xd-blue); border-color:var(--xd-blue); }
body.xd-ui .pagination .page-link { color:var(--xd-blue); }
body.xd-ui .status { border-radius:999px; }
body.xd-ui #footer { background:#0f172a; color:#c3d0e6; border-top:0; padding-top:28px; padding-bottom:30px; }
body.xd-ui #footer a, body.xd-ui #footer .nav-link, body.xd-ui #footer .copyright { color:#c3d0e6; }
body.xd-ui #footer a:hover { color:#fff; }
/* Services switch: real DataTables filter (not pagination-only CSS hiding). */
body.xd-ui .xd-service-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:4px 0 16px; padding:13px 17px; border:1px solid var(--xd-line); background:#fff; border-radius:13px; }
body.xd-ui .xd-service-toolbar-heading { display:flex; align-items:center; gap:8px; font-weight:750; color:var(--xd-ink); }
body.xd-ui .xd-service-toolbar-heading i { color:var(--xd-blue); }
body.xd-ui .xd-archive-toggle { display:inline-flex; align-items:center; gap:9px; margin:0; padding:8px 12px; font-size:12px; color:#334155; font-weight:650; background:#f1f6fd; border:1px solid #dce8f7; border-radius:10px; cursor:pointer; }
body.xd-ui .xd-archive-toggle:focus-within { outline:2px solid #1d4ed8; outline-offset:2px; }
body.xd-ui .xd-archive-toggle input { appearance:auto; -webkit-appearance:checkbox; position:static; width:16px; height:16px; margin:0; accent-color:#1d4ed8; opacity:1; }
body.xd-ui .xd-archive-toggle:hover { background:#e7f0ff; }
/* Respect Right-to-Left/locales without changing WHMCS form logic. */
[dir="rtl"] body.xd-ui #main-body .card-sidebar .list-group-item.active, body.xd-ui[dir="rtl"] #main-body .card-sidebar .list-group-item.active { border-left:0; border-right:3px solid #1d4ed8; }
@media(max-width:1199.98px) {
 body.xd-ui #header .xd-navigation-row { padding:7px 0; }
 body.xd-ui #header .xd-navigation-row .navbar-nav > li > a { padding:10px 12px; }
 body.xd-ui #header .search .form-control { min-width:0; max-width:none; }
}
@media(max-width:767.98px) {
 body.xd-ui #header .xd-brand-row { padding:12px 0; }
 body.xd-ui #header .xd-top-actions { gap:7px; }
 body.xd-ui #header .topbar .input-group-prepend { display:none!important; }
 body.xd-ui #header .xd-credit-pill { padding:7px; gap:6px; }
 body.xd-ui #header .xd-credit-pill .fa-wallet { font-size:15px; }
 body.xd-ui #header .xd-credit-copy small { display:none; }
 body.xd-ui #header .xd-credit-copy strong { font-size:11px; }
 body.xd-ui #header .active-client .btn-active-client { max-width:120px; font-size:11px; }
 body.xd-ui .xd-brand-mark { width:38px; height:38px; font-size:23px; }
 body.xd-ui .xd-brand-title { font-size:19px; }
 body.xd-ui .xd-brand-title small { font-size:7px; letter-spacing:.12em; }
 body.xd-ui #main-body { padding-top:16px; }
 body.xd-ui #main-body .card-body { padding:15px; }
}
@media(max-width:390px) {
 body.xd-ui #header .xd-brand-title small { display:none; }
 body.xd-ui #header .topbar .btn-active-client { max-width:95px; }
}
@media(prefers-reduced-motion:reduce) { body.xd-ui *, body.xd-ui *:before, body.xd-ui *:after { scroll-behavior:auto!important; transition:none!important; } }


/* Telegram support surfaces */
body.xd-ui .xd-support-card .card-body p { color:var(--xd-muted); font-size:13px; line-height:1.65; }
body.xd-ui .xd-telegram-sidebar-btn { display:flex; align-items:center; justify-content:center; gap:10px; }
body.xd-ui .xd-telegram-fab { position:fixed; right:22px; bottom:22px; z-index:1040; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; background:linear-gradient(135deg,#229ED9,#1D4ED8); color:#fff; text-decoration:none; box-shadow:0 18px 38px rgba(15,23,42,.22); }
body.xd-ui .xd-telegram-fab:hover, body.xd-ui .xd-telegram-fab:focus { color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 22px 42px rgba(29,78,216,.28); }
body.xd-ui .xd-telegram-fab i { font-size:20px; }
body.xd-ui .xd-telegram-fab-text { font-weight:750; font-size:13px; }
/* Services list: remove SSL column behavior and replace with product icons */
body.xd-ui #tableServicesList thead th:first-child { width:68px; min-width:68px; }
body.xd-ui #tableServicesList td.xd-service-icon-cell { width:68px; min-width:68px; padding:10px 12px; vertical-align:middle; }
body.xd-ui .xd-product-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(145deg,#eff6ff,#dbeafe); border:1px solid #cfe0ff; color:var(--xd-blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
body.xd-ui .xd-product-icon i { font-size:18px; }
@media(max-width:767.98px) {
 body.xd-ui .xd-telegram-fab { right:14px; bottom:14px; padding:12px; }
 body.xd-ui .xd-telegram-fab-text { display:none; }
 body.xd-ui #tableServicesList thead th:first-child, body.xd-ui #tableServicesList td.xd-service-icon-cell { width:58px; min-width:58px; }
 body.xd-ui .xd-product-icon { width:36px; height:36px; border-radius:12px; }
 body.xd-ui .xd-product-icon i { font-size:16px; }
}