:root {
  --bg:       #0d0d0d;
  --text:     #e8e8e8;
  --muted:    #888;
  --border:   rgba(255,255,255,0.12);
  --surface:  rgba(255,255,255,0.03);
  --font:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:     'DM Mono', monospace;
  --radius:   6px;
  --green:    #4ade80;
  --yellow:   #facc15;
  --red:      #f87171;
  --blue:     #60a5fa;
}

html, body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

#topo-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

#header,
header,
.navbar,
#main-menu {
  position: relative;
  z-index: 1030 !important;
}

.dropdown-menu {
  z-index: 1050 !important;
}

.primary-content,
#main-body,
.footer-shifter,
footer,
.footer {
  position: relative;
  z-index: 1;
}

#topo-canvas { pointer-events: none !important; }

body, p, span, div, td, th, li, label, a, input, select, textarea, button {
  font-family: var(--font);
}

a { color: var(--text); }
a:hover { color: #fff; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.text-muted, small, .small { color: var(--muted) !important; }
hr { border-color: var(--border); }

#header,
#header .navbar,
.navbar-default,
nav.navbar {
  background: rgba(13,13,13,0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

#header .navbar-brand,
.navbar-brand {
  color: var(--text) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}

#main-menu .nav-link,
.navbar-nav .nav-link,
#main-menu a {
  color: var(--muted) !important;
  font-size: 13px !important;
  transition: color 0.15s;
}

#main-menu .nav-link:hover,
#main-menu .active > .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--text) !important;
  background: transparent !important;
}

.header-lined,
.card,
.panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.card-header,
.panel-heading {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.card-body, .panel-body { background: transparent !important; }

.card-footer, .panel-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 8px 8px !important;
}

.table {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.table thead th {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

.table td, .table th {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
.table-hover tbody tr:hover { background: rgba(255,255,255,0.04) !important; }

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="search"],
select, textarea {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--muted) !important; }
select option { background: #1a1a1a !important; color: var(--text) !important; }

label, .control-label {
  color: var(--muted) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

.input-group-text,
.input-group-addon {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--radius) !important;
  border: 1px solid !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #0d0d0d !important;
}
.btn-primary:hover { background: #fff !important; border-color: #fff !important; color: #0d0d0d !important; }

.btn-default, .btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: var(--text) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: var(--text) !important;
}

.btn-success {
  background: rgba(74,222,128,0.12) !important;
  border-color: rgba(74,222,128,0.3) !important;
  color: var(--green) !important;
}
.btn-success:hover { background: rgba(74,222,128,0.2) !important; }

.btn-danger {
  background: rgba(248,113,113,0.1) !important;
  border-color: rgba(248,113,113,0.3) !important;
  color: var(--red) !important;
}
.btn-danger:hover { background: rgba(248,113,113,0.18) !important; }

.btn-info {
  background: rgba(96,165,250,0.1) !important;
  border-color: rgba(96,165,250,0.3) !important;
  color: var(--blue) !important;
}

.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}
.btn-link:hover { color: var(--text) !important; }

.alert {
  border-radius: var(--radius) !important;
  border: 1px solid !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
.alert-success { background: rgba(74,222,128,0.08) !important; border-color: rgba(74,222,128,0.25) !important; color: #7ecfa0 !important; }
.alert-danger, .alert-error { background: rgba(248,113,113,0.08) !important; border-color: rgba(248,113,113,0.25) !important; color: #e08080 !important; }
.alert-warning { background: rgba(250,204,21,0.08) !important; border-color: rgba(250,204,21,0.25) !important; color: #d4a800 !important; }
.alert-info { background: rgba(96,165,250,0.08) !important; border-color: rgba(96,165,250,0.25) !important; color: var(--blue) !important; }

.badge, .label {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-radius: 4px !important;
}
.badge-success, .label-success { background: rgba(74,222,128,0.12) !important; color: var(--green) !important; }
.badge-danger, .label-danger { background: rgba(248,113,113,0.12) !important; color: var(--red) !important; }
.badge-warning, .label-warning { background: rgba(250,204,21,0.1) !important; color: #d4a800 !important; }
.badge-info, .label-info { background: rgba(96,165,250,0.12) !important; color: var(--blue) !important; }
.badge-primary, .label-primary { background: rgba(232,232,232,0.12) !important; color: var(--text) !important; }

.label-active, .status-active { color: var(--green) !important; }
.label-pending, .status-pending { color: var(--yellow) !important; }
.label-suspended, .label-terminated, .label-cancelled, .status-suspended { color: var(--red) !important; }
.label-paid { color: var(--green) !important; }
.label-unpaid, .label-overdue { color: var(--yellow) !important; }

.modal-content {
  background: #111 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8) !important;
}
.modal-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 10px 10px 0 0 !important;
}
.modal-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 10px 10px !important;
}
.modal-backdrop.show, .modal-backdrop.in { opacity: 0.8 !important; }
.close { color: var(--muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover { color: var(--text) !important; }

.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}
.nav-tabs .nav-link {
  color: var(--muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent transparent var(--text) transparent !important;
}

.list-group-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
a.list-group-item, .list-group-item-action { color: var(--muted) !important; }
a.list-group-item:hover, .list-group-item-action:hover { background: rgba(255,255,255,0.05) !important; color: var(--text) !important; }
.list-group-item.active { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: var(--text) !important; }

.sidebar .list-group-item,
#sidebar .list-group-item,
.panel-sidebar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.breadcrumb {
  background: transparent !important;
  padding-left: 0 !important;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--muted) !important; font-size: 12px !important; }
.breadcrumb-item a:hover { color: var(--text) !important; }
.breadcrumb-item.active { color: var(--muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.25) !important; }

.pagination .page-link {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.pagination .page-link:hover { background: rgba(255,255,255,0.05) !important; color: var(--text) !important; }
.pagination .page-item.active .page-link {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #0d0d0d !important;
}

.dropdown-menu {
  background: rgba(13,13,13,0.97) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(20px);
}
.dropdown-item { color: var(--muted) !important; font-size: 13px !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }

.jumbotron,
.client-home-panels,
.account-overview-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.progress { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; box-shadow: none !important; }
.progress-bar { background: var(--text) !important; }
.progress-bar-success { background: var(--green) !important; }
.progress-bar-danger { background: var(--red) !important; }

footer,
#footer,
.footer {
  background: rgba(13,13,13,0.7) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
footer a, #footer a, .footer a { color: var(--muted) !important; }
footer a:hover, #footer a:hover, .footer a:hover { color: var(--text) !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

.panel-sidebar .panel-heading,
.sidebar-menu .menu-item > a {
  color: var(--muted) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.select2-dropdown {
  background: #1a1a1a !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}


#main-menu .dropdown-menu,
.navbar .dropdown-menu,
#main-navbar .dropdown-menu {
  background: rgba(13,13,13,0.98) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(20px);
}

#main-menu .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a {
  color: var(--muted) !important;
}
#main-menu .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}

.breadcrumb,
#main-body > .container > .breadcrumb,
.breadcrumb-bar,
ol.breadcrumb {
  background: transparent !important;
}

body > .breadcrumb,
.header-lined + div,
#header + .breadcrumb {
  background: transparent !important;
}

.sub-heading,
.page-header-tent,
.toolbar,
.push-down,
.raise-up {
  background: transparent !important;
}

.panel-default > .panel-body,
.panel-body,
.card-body,
.announcement-content,
.announcement-body,
.blog-post-content,
article .content,
.htmlblock,
.knowledgebase-content {
  background: transparent !important;
  color: var(--text) !important;
}

.marketing-highlight,
.marketing-card,
.card.text-center,
.card.card-market,
.home-marketing .card,
.spotlight-tile {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.marketing-highlight .card-body,
.marketing-card .card-body { background: transparent !important; }

.marketing-highlight .card-body h3,
.marketing-highlight .card-body div,
.marketing-card h3 { color: var(--text) !important; }

.marketing-highlight i,
.marketing-card i,
.marketing-icon,
.card-market i { color: var(--muted) !important; }

.jumbotron,
.domain-checker-availability,
.domainchecker {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.well,
.gray-bg,
.light-bg,
.bg-light,
.contentpadded > .row > div > .well {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.bg-white,
.white-bg {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.list-group-item.list-group-item-info,
.panel-sidebar,
.sidebar .panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

pre, code, .prettyprint {
  background: #111 !important;
  border: 1px solid var(--border) !important;
  color: #cbd5e1 !important;
}

.text-domain,
.domain-search-tld {
  color: var(--text) !important;
}


.l2n-portal-hero {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  padding:56px 20px 12px !important;
  position:relative;
  z-index:1;
}
.l2n-portal-hero > * { text-align:center !important; }
.l2n-portal-eyebrow {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.l2n-portal-hero h1 {
  font-size:clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight:300;
  letter-spacing:-0.03em;
  color:var(--text);
  margin:0;
}
.l2n-portal-hero h1 strong { font-weight:500; }
.l2n-portal-sub {
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin:14px auto 0;
  max-width:520px;
}
.l2n-portal-cta {
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:26px;
}
.l2n-portal-cta .btn { padding:9px 20px; }

.card-columns.home .card,
.card-columns.home .card .card-body { background:var(--surface) !important; }
.card-columns.home .card-title { color:var(--text) !important; }
.card-columns.home .card p { color:var(--muted) !important; }

.action-icon-btns a[class*="card-accent"] {
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid rgba(255,255,255,0.25);
  border-radius:8px;
  padding:24px 12px;
  text-align:center;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  transition:background 0.15s, color 0.15s, transform 0.15s;
}
.action-icon-btns a[class*="card-accent"]:hover {
  background:rgba(255,255,255,0.05);
  color:var(--text);
  transform:translateY(-2px);
}
.action-icon-btns .ico-container { margin:0 0 12px 0; }
.action-icon-btns .ico-container i { font-size:26px; color:var(--muted); transition:color 0.15s; }
.action-icon-btns a:hover .ico-container i { color:var(--text); }

.card-accent-teal          { border-top-color:#2dd4bf !important; }
.card-accent-pomegranate   { border-top-color:#f87171 !important; }
.card-accent-sun-flower    { border-top-color:#facc15 !important; }
.card-accent-asbestos      { border-top-color:#9ca3af !important; }
.card-accent-green         { border-top-color:#4ade80 !important; }
.card-accent-midnight-blue { border-top-color:#60a5fa !important; }

#frmDomainHomepage,
.domain-checker,
.domainchecker,
.homepage-domain-search,
.jumbotron.homepage {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
}



.login-fields,
.card.text-left,
.logincontainer,
.login-container,
form#login .card,
.primary-content .card {
  background:rgba(255,255,255,0.045) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  box-shadow:0 24px 64px rgba(0,0,0,0.45) !important;
}

.login-fields .card-footer,
.card .card-footer { background:rgba(255,255,255,0.02) !important; }

.input-group-text .fa,
.input-group-text i { color:var(--muted) !important; }

#inputNewPassword2 ~ .progress,
.progress.password-strength,
.pwstrength_viewport_progress .progress,
.password-strength-meter {
  background:rgba(255,255,255,0.06) !important;
  height:6px !important;
  border-radius:4px !important;
}

.btn-success.marketing-yes,
#inputmarketingoptinyes,
.btn-group .btn-success {
  background:rgba(74,222,128,0.14) !important;
  border-color:rgba(74,222,128,0.35) !important;
  color:#4ade80 !important;
}

.card-body .field-icon,
.password-field-toggle,
.input-group-append .btn {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid var(--border) !important;
  color:var(--muted) !important;
}

.select2-container--default .select2-selection__rendered { color:var(--text) !important; }
.select2-container--default .select2-results__option { color:var(--text) !important; }
.select2-container--default .select2-results__option--highlighted { background:rgba(255,255,255,0.08) !important; }
.intl-tel-input .country-list { background:#1a1a1a !important; border:1px solid var(--border) !important; color:var(--text) !important; }
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight { background:rgba(255,255,255,0.08) !important; }



/* ===== BIG UPDATE — pagine cliente ===== */

.clientareadetails,
.account-overview,
#actionsPanel,
.panel-sidebar,
.sidebar-menu,
.list-group.panel,
.card.sidebar {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
}

.sidebar-menu .list-group-item,
.panel-sidebar .list-group-item {
  background:transparent !important;
  border-color:rgba(255,255,255,0.06) !important;
  color:var(--muted) !important;
}
.sidebar-menu .list-group-item:hover,
.panel-sidebar .list-group-item:hover,
.sidebar-menu .list-group-item.active {
  background:rgba(255,255,255,0.05) !important;
  color:var(--text) !important;
}
.panel-sidebar .panel-heading,
.sidebar-menu .panel-heading { color:var(--text) !important; }

.state-alert, .status-alert { color:var(--yellow) !important; }
.state-ok, .status-ok, .badge-active { color:var(--green) !important; }
.state-error, .status-error { color:var(--red) !important; }

.clientareahomepanels .card,
.panel-body .table,
.account-overview .card { background:transparent !important; }

/* Fatture */
.invoice-container,
.invoice,
#invoice,
.invoice-items-table,
.totalsBox,
.invoice-totals {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:8px !important;
}
.invoice .table, .invoice-items-table .table { color:var(--text) !important; }
.paymentbtns .btn, .invoice-container .btn-success { }
.invoice-status, .paid-stamp, .unpaid-stamp { opacity:0.9; }

/* Ticket / supporto */
.ticket-reply,
.ticketreply,
.support-ticket,
.ticket-message,
.post,
.reply-form,
#ticketReply {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
}
.ticket-reply.staff, .ticketreply.staff, .post.staff {
  background:rgba(96,165,250,0.06) !important;
  border-color:rgba(96,165,250,0.2) !important;
}
.ticket-info, .ticket-header { color:var(--muted) !important; }

/* Cart / ordine */
.order-summary,
.summary-container,
.view-cart-items,
.cart-nav,
.product-info,
#productConfigurableOptions,
.order-review,
.checkout-items,
.sidebar-content .panel,
.clientarea-panel {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
}
.product-group-nav .nav-link,
.cart-nav .nav-link { color:var(--muted) !important; }
.product-group-nav .nav-link.active,
.cart-nav .nav-link.active { color:var(--text) !important; background:rgba(255,255,255,0.06) !important; }

.pricing .price,
.product-pricing .amount,
.cycle-price { color:var(--text) !important; }
.product-card, .package {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
}
.product-card:hover, .package:hover { background:rgba(255,255,255,0.05) !important; }
.package.featured, .product-card.recommended {
  border-color:rgba(255,255,255,0.3) !important;
}

.order-summary .total,
.summary-container .total,
.cart-total { color:var(--text) !important; border-top:1px solid var(--border) !important; }

.promo-box, .apply-promo,
.affiliate-box {
  background:rgba(255,255,255,0.02) !important;
  border:1px solid var(--border) !important;
}

/* ===== BIG UPDATE — moduli ===== */

/* VirtFusion */
.virtfusion,
.virtfusion-panel,
.vf-panel,
.server-panel,
.server-info,
.server-stats,
.usage-panel,
.vps-panel {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
}
.server-stats .stat,
.usage-stat,
.vf-stat {
  background:rgba(255,255,255,0.02) !important;
  border:1px solid var(--border) !important;
  border-radius:6px !important;
  color:var(--text) !important;
}
.server-stats .stat .value,
.usage-stat .value { color:var(--text) !important; }
.server-stats .stat .label,
.usage-stat .label { color:var(--muted) !important; }
.power-controls .btn,
.server-controls .btn { }
.console-btn, .vnc-btn { }

/* InternetBS — gestione domini */
.domain-management,
.domaindetails,
.clientareadomaindetails,
.nameservers,
.dns-management,
.domain-actions,
.epp-code,
.registrar-info {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
}
.nameservers input,
.dns-management input { background:rgba(255,255,255,0.04) !important; }
.domain-lock-status .locked { color:var(--green) !important; }
.domain-lock-status .unlocked { color:var(--yellow) !important; }

/* Plesk */
.plesk,
.plesk-panel,
.plesk-login,
.control-panel-login,
.hosting-info,
.hosting-panel {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  color:var(--text) !important;
}
.plesk-login .btn,
.control-panel-login .btn { }

/* generico: qualsiasi pannello dei moduli */
.module-panel,
.provisioning-panel,
[class*="module"] > .card,
.addon-panel {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}

/* usage / progress bars nei moduli */
.usage-bar, .disk-usage, .bandwidth-usage {
  background:rgba(255,255,255,0.06) !important;
  border-radius:4px !important;
}
.usage-bar .fill, .disk-usage .fill, .bandwidth-usage .fill {
  background:var(--text) !important;
}
.usage-bar.warning .fill { background:var(--yellow) !important; }
.usage-bar.danger .fill { background:var(--red) !important; }



/* ===== FIX inputs registrazione/form (bordi + leggibilita) ===== */
.form-control,
input.form-control,
.field-icon-container input,
.input-group input,
.register-form input,
.checkout input,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"] {
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
}
.form-control:focus,
input.form-control:focus {
  border-color:rgba(255,255,255,0.4) !important;
  background:rgba(255,255,255,0.07) !important;
}
.field-icon-container,
.input-group {
  background:transparent !important;
}
.input-group-prepend .input-group-text,
.field-icon,
.field-icon-container .fa {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  border-right:none !important;
  color:var(--muted) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:0 0 0 1000px #1a1a1a inset !important;
  caret-color:var(--text) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
}
.register-container .card,
.clientregisterform .card,
.checkout-form-container .card {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
}

/* ===== FIX dashboard summary cards bianche ===== */
.panel-quicknav,
.client-home-panels .card,
.account-summary .card,
.summary-item,
.stat-card,
a[class*="card-accent"],
div[class*="card-accent"],
.card-accent-teal, .card-accent-pomegranate, .card-accent-sun-flower,
.card-accent-asbestos, .card-accent-green, .card-accent-midnight-blue,
.card-accent-turquoise, .card-accent-peter-river, .card-accent-amethyst,
.card-accent-wet-asphalt, .card-accent-orange, .card-accent-nephritis {
  background:var(--surface) !important;
  color:var(--text) !important;
}
.panel-quicknav .number,
.stat-card .number,
[class*="card-accent"] .h1,
[class*="card-accent"] h1,
[class*="card-accent"] .number { color:var(--text) !important; }
[class*="card-accent"] .text-uppercase,
[class*="card-accent"] .label,
.panel-quicknav .label { color:var(--muted) !important; }
[class*="card-accent"] i,
[class*="card-accent"] .fa { color:var(--muted) !important; }

/* ===== FIX bottone verde "Aggiorna" e simili ===== */
.btn-success,
a.btn-success,
.btn-outline-success {
  background:rgba(74,222,128,0.14) !important;
  border-color:rgba(74,222,128,0.32) !important;
  color:#4ade80 !important;
}
.btn-success:hover, a.btn-success:hover {
  background:rgba(74,222,128,0.22) !important;
  color:#4ade80 !important;
}

/* ===== STICKY FOOTER — il footer resta sempre in fondo ===== */
html, body { height:100%; }
body {
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
}
#header, header, .navbar { flex:0 0 auto; }
#main-body,
.primary-content,
.main-content,
main,
.body-content {
  flex:1 0 auto !important;
}
#footer, footer, .footer {
  flex:0 0 auto !important;
  margin-top:auto !important;
}



/* ============================================================
   MOBILE / RESPONSIVE — esperienza cliente da telefono
   ============================================================ */

/* Tabelle: scroll orizzontale invece di sfondare il layout */
.table-responsive,
.table-container { -webkit-overflow-scrolling:touch; overflow-x:auto; }
@media (max-width:767px){
  .table { display:block; width:100%; overflow-x:auto; white-space:nowrap; }
  .table thead th, .table td { font-size:12px !important; padding:9px 10px !important; }
}

/* Navbar mobile: menu a comparsa leggibile */
@media (max-width:991px){
  .navbar-collapse,
  #main-menu.collapse.show,
  #main-menu .navbar-nav {
    background:rgba(10,10,10,0.98) !important;
    backdrop-filter:blur(20px);
    border-top:1px solid var(--border) !important;
    border-radius:0 0 8px 8px;
    padding:6px 0 !important;
  }
  #main-menu .nav-link { padding:12px 18px !important; font-size:14px !important; }
  #main-menu .dropdown-menu {
    background:rgba(255,255,255,0.03) !important;
    border:none !important;
    box-shadow:none !important;
    padding-left:12px !important;
  }
  .navbar-toggler {
    border:1px solid rgba(255,255,255,0.2) !important;
    border-radius:6px !important;
    padding:6px 10px !important;
  }
  .navbar-toggler-icon { filter:invert(1) opacity(0.8); }
  /* barra ricerca header a tutta larghezza */
  #header .search, .header-search, form[role="search"] { width:100% !important; margin:8px 0 !important; }
}

/* Layout generale su telefono */
@media (max-width:767px){
  .container, .container-fluid, .container-md, .container-lg { padding-left:14px !important; padding-right:14px !important; }

  /* le due colonne (sidebar + contenuto) si impilano */
  .primary-content > .row > [class*="col-"],
  .clientarea-container > .row > [class*="col-"],
  #main-body > .container > .row > [class*="col-"] { width:100% !important; flex:0 0 100% !important; max-width:100% !important; }

  /* sidebar sopra il contenuto, spaziata */
  .sidebar, #sidebar, .panel-sidebar { margin-bottom:16px !important; }

  /* card padding ridotto */
  .card-body, .panel-body { padding:16px !important; }

  /* titoli piu compatti */
  h1 { font-size:1.5rem !important; }
  h2 { font-size:1.25rem !important; }
  h3 { font-size:1.05rem !important; }

  /* dashboard: le 4 summary card in griglia 2x2 invece che a fila */
  .panel-quicknav, .client-home-panels .row { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .panel-quicknav > *, .client-home-panels .row > [class*="col-"] { width:100% !important; max-width:100% !important; flex:none !important; }

  /* bottoni piu comodi da toccare, a tutta larghezza dove ha senso */
  .btn-block, .card-body > .btn, .text-center > .btn { width:100% !important; }
  .btn { padding:10px 16px !important; }

  /* form: campi a tutta larghezza e piu alti (touch) */
  .form-control, input.form-control, select, textarea { font-size:16px !important; padding:11px 12px !important; }
  .form-group, .row.form-group > div { margin-bottom:12px !important; }
  .col-sm-6, .col-md-6, .col-md-4, .col-md-3 { margin-bottom:6px; }

  /* modali a tutto schermo */
  .modal-dialog { margin:10px !important; max-width:calc(100% - 20px) !important; }

  /* fatture/tabelle prezzi */
  .invoice-items-table, .order-summary, .summary-container { font-size:13px !important; }

  /* tile accessi rapidi (client area) */
  .action-icon-btns .col-6, .action-icon-btns [class*="col-"] { padding:5px !important; }

  /* footer piu compatto e centrato */
  #footer, footer, .footer { text-align:center !important; padding:20px 14px !important; }
  #footer .row > div, footer .row > div { width:100% !important; max-width:100% !important; flex:none !important; text-align:center !important; margin-bottom:8px; }
  .footer .pull-right, footer .float-right { float:none !important; display:block !important; margin:8px auto 0 !important; }
}

/* Telefoni piccoli */
@media (max-width:480px){
  .panel-quicknav, .client-home-panels .row { grid-template-columns:1fr !important; }
  h1 { font-size:1.3rem !important; }
  .card-body, .panel-body { padding:14px !important; }
  .navbar-brand img { max-height:24px !important; }
}

/* evita che il canvas topografico pesi sui telefoni lenti */
@media (max-width:767px){
  #topo-canvas { opacity:0.7; }
}



/* ===== NET AGGRESSIVA: card riepilogo dashboard bianche ===== */
.clientareahome .card,
.client-home-panels,
.client-home-panels .card,
.panels-container .card,
.summary-cards, .summary-cards .card,
#clientHomePanels, #clientHomePanels .card,
.stat-panel, .stats .card, .stats-row .card,
.panel-quicknav, .panel-quicknav .card,
.highlight, .panel-highlight, .summarybox, .summary-box,
.card.card-market, .card-market,
.bg-white, .bg-light, .card-white,
[class*="card-accent"] {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
.clientareahome .card > *:not(input):not(button):not(select):not(.btn):not(.progress):not(.progress-bar),
.client-home-panels > *:not(input):not(button):not(select):not(.btn):not(.progress):not(.progress-bar),
[class*="card-accent"] > *:not(input):not(button):not(select):not(.btn):not(.progress):not(.progress-bar) {
  background-color:transparent !important;
}
.clientareahome .card .h1,
.clientareahome .card h1,
.client-home-panels .h1,
[class*="card-accent"] .h1,
[class*="card-accent"] h1 { color:var(--text) !important; }
.clientareahome .card .text-uppercase,
.client-home-panels .text-uppercase,
[class*="card-accent"] .text-uppercase,
[class*="card-accent"] small { color:var(--muted) !important; }
.clientareahome .card i,
.client-home-panels i,
[class*="card-accent"] i { color:rgba(255,255,255,0.25) !important; }

/* ===== bottone verde "Aggiorna" — net larga ===== */
a.btn-success, button.btn-success, input.btn-success,
.btn.btn-success, [class*="btn-success"],
.btn-primary.btn-edit, .edit-details-btn {
  background:rgba(74,222,128,0.14) !important;
  border:1px solid rgba(74,222,128,0.32) !important;
  color:#4ade80 !important;
  text-shadow:none !important;
}
a.btn-success:hover, button.btn-success:hover, [class*="btn-success"]:hover {
  background:rgba(74,222,128,0.22) !important;
  color:#4ade80 !important;
}



/* ===== CONTENUTI PIU IN EVIDENZA (card meno trasparenti) ===== */
:root { --surface:rgba(20,20,22,0.92); --surface-2:rgba(26,26,28,0.95); }

.card, .panel,
.clientareahome .card,
.client-home-panels, .client-home-panels .card,
.order-summary, .summary-container, .view-cart-items,
.invoice-container, .invoice, .ticket-reply, .ticketreply,
.sidebar, #sidebar, .panel-sidebar, .sidebar-menu,
.well, .jumbotron,
.virtfusion, .server-panel, .domain-management, .plesk, .hosting-panel,
[class*="card-accent"] {
  background:var(--surface) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.card-header, .panel-heading { background:var(--surface-2) !important; }
.card-footer, .panel-footer { background:rgba(15,15,17,0.9) !important; }

/* il topografico piu tenue cosi non disturba la lettura */
#topo-canvas { opacity:0.45 !important; }

/* ===== FIX checkbox / radio (rotti dalla net precedente) ===== */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance:auto !important;
  appearance:auto !important;
  width:16px !important;
  height:16px !important;
  min-height:auto !important;
  accent-color:#e8e8e8 !important;
  background:initial !important;
  border:initial !important;
  padding:0 !important;
  margin:0 6px 0 0 !important;
  vertical-align:middle !important;
  opacity:1 !important;
  position:static !important;
}
.checkbox label, .radio label,
.custom-control-label,
.form-check-label { color:var(--text) !important; }
.custom-control-input { width:auto !important; height:auto !important; }
.custom-checkbox .custom-control-label::before,
.custom-control-label::before {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background:#e8e8e8 !important;
  border-color:#e8e8e8 !important;
}
.custom-control-input:checked ~ .custom-control-label::after { filter:invert(1); }

/* la toggle switch (mailing list ecc.) */
.switch input, .toggle input { width:auto !important; height:auto !important; }

/* ===== FIX bordi input-group che coprono placeholder/scritte ===== */
.input-group { flex-wrap:nowrap !important; }
.input-group > .form-control,
.input-group > input {
  border-left:none !important;
  border-radius:0 6px 6px 0 !important;
  padding-left:12px !important;
}
.input-group-prepend { margin-right:0 !important; }
.input-group-prepend .input-group-text,
.input-group > .input-group-prepend > .input-group-text {
  border-right:none !important;
  border-radius:6px 0 0 6px !important;
  min-width:42px;
  justify-content:center;
}
.field-icon-container { position:relative !important; }
.field-icon-container > .fa,
.field-icon-container > i {
  position:absolute !important;
  left:13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  color:var(--muted) !important;
  pointer-events:none !important;
}
.field-icon-container > input,
.field-icon-container > .form-control {
  padding-left:38px !important;
}



/* =====================================================
   FIX SERIO — palette gialla, breadcrumb, input, annunci, domini
   ===================================================== */

/* --- 1. PALETTE: uccidi il giallo/arancio di Twenty-One --- */
:root{
  --primary-color:#e8e8e8 !important;
  --primary:#e8e8e8 !important;
  --secondary-color:#888 !important;
  --link-color:#cfcfcf !important;
  --highlight-color:#e8e8e8 !important;
}
.primary-bg-color, .bg-primary,
.domain-checker, .domainchecker, #domainSearch,
.domain-search-container, .card-domain,
.jumbotron.primary, .hero-primary {
  background:var(--surface-2) !important;
  background-image:none !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
.primary-text-color, .text-primary { color:#cfcfcf !important; }
.primary-border-color { border-color:var(--border) !important; }

/* bottoni "primary" gialli -> L2N (specificita alta per battere l'inline palette) */
html body .btn-primary,
html body a.btn-primary,
html body input.btn-primary,
html body button.btn-primary {
  background:#e8e8e8 !important;
  border-color:#e8e8e8 !important;
  color:#0d0d0d !important;
  background-image:none !important;
}
html body .btn-primary:hover { background:#fff !important; }

/* il globo decorativo giallo nella pagina domini */
.domain-checker img, .domainchecker .decoration,
.domain-search-container .bg-image { opacity:0.06 !important; }

/* --- 2. BREADCRUMB: via la banda grigia chiara su tutte le pagine --- */
div:has(> .container > .breadcrumb),
div:has(> .breadcrumb),
nav:has(> .breadcrumb),
.header-lined, .breadcrumb-bar, .sub-header, .secondary-nav, .toolbar-bar {
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
}
.breadcrumb { background:transparent !important; padding-left:0 !important; }
.breadcrumb-item, .breadcrumb-item a { color:#888 !important; }
.breadcrumb-item.active { color:#aaa !important; }

/* --- 3. INPUT-GROUP: bordo unico, niente angoli rotti --- */
.field-icon-container, .input-group {
  display:flex !important;
  align-items:stretch !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,0.05) !important;
  overflow:hidden !important;
  flex-wrap:nowrap !important;
}
.field-icon-container:focus-within, .input-group:focus-within {
  border-color:rgba(255,255,255,0.4) !important;
  background:rgba(255,255,255,0.07) !important;
}
.field-icon-container > input,
.field-icon-container > .form-control,
.input-group > .form-control,
.input-group > input,
.input-group > select {
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.input-group > .input-group-prepend,
.input-group > .input-group-append { border:none !important; }
.input-group-text,
.field-icon-container > .fa,
.field-icon-container > i {
  position:static !important;
  transform:none !important;
  border:none !important;
  background:transparent !important;
  color:var(--muted) !important;
  display:flex !important;
  align-items:center !important;
  padding:0 12px !important;
  min-width:auto !important;
}
.input-group-append > .btn,
.input-group > .input-group-append > .btn {
  border:none !important;
  border-left:1px solid rgba(255,255,255,0.14) !important;
  background:rgba(255,255,255,0.06) !important;
  border-radius:0 !important;
  color:var(--muted) !important;
}
.field-icon-container > input,
.field-icon-container > .form-control { padding-left:6px !important; }

/* --- 4. ANNUNCI / contenuti chiari illeggibili --- */
.announcement-content, .announcement-body, .announcements .card-body,
.item-content, .item-body, .blog-content, .kbarticle-content,
.well, blockquote, .summary, .excerpt, .content-inner, .htmlblock,
.card .item-summary {
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
blockquote, .well {
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,0.02) !important;
}

/* --- 5. TAB (Dominio/Nuovo prezzo/Trasferimento/Rinnovo) --- */
.nav-tabs, .domain-pricing-tabs, .pricing-tabs {
  border-bottom:1px solid var(--border) !important;
  background:transparent !important;
}
.nav-tabs .nav-link, .pricing-tabs .nav-link {
  background:transparent !important;
  color:var(--muted) !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
}
.nav-tabs .nav-link.active, .pricing-tabs .nav-link.active {
  background:transparent !important;
  color:var(--text) !important;
  border-bottom-color:var(--text) !important;
}

/* --- 6. card promo bianche (Aggiungi hosting / Trasferisci) --- */
.spotlight, .promo-card, .marketing-card, .featured-box,
.domain-transfer-box, .add-hosting-box, .card.text-center {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}


/* Sì, anche stavolta è servito un buon caffè per far tornare tutti gli allineamenti ;') ☕ */