/* ==========================================================================
   custom.css — Twenty-One-Netim (Child of Twenty-One)
   Fix: widen container without forcing column wrap
   Date: 2025-09-08
   ========================================================================== */

/* ===== 0) TOKENS ===== */
:root{
  --brand-1:#dc431b;--brand-1-600:#c53a17;--brand-1-700:#a93113;--brand-1-050:#fff2ee;
  --ink-900:#1f2937;--ink-800:#374151;--ink-700:#4b5563;--ink-600:#6b7280;--ink-500:#9ca3af;
  --ink-300:#d1d5db;--ink-200:#e5e7eb;--ink-100:#f3f4f6;--ink-050:#f9fafb;
  --ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--info:#3b82f6;
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;
  --shadow-1:0 1px 2px rgba(0,0,0,.04);--shadow-2:0 4px 12px rgba(17,24,39,.08);
}

/* ===== 1) WIDTH — target your live structure (#main-body > .container) ===== */
#main-body > .container,
#main-body > .container-fluid{
  max-width:1420px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Do NOT constrain inner column wrappers (prevents flex wrapping) */
#main-body #content,
#main-body #main-content,
#main-body .main-content,
#main-body .contentpadded{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Restore Bootstrap's default column ratios so rows keep two columns side-by-side */
@media (min-width: 992px){ /* lg */
  #main-body .row > .sidebar.col-lg-4{
    flex:0 0 33.333333% !important;
    max-width:33.333333% !important;
  }
  #main-body .row > .col-lg-8{
    flex:0 0 66.666667% !important;
    max-width:66.666667% !important;
  }
}
@media (min-width: 1200px){ /* xl */
  #main-body .row > .sidebar.col-xl-3{
    flex:0 0 25% !important;
    max-width:25% !important;
  }
  #main-body .row > .col-xl-9{
    flex:0 0 75% !important;
    max-width:75% !important;
  }
}

/* ===== 2) BASE / TYPO ===== */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.clientarea{ color:var(--ink-700); background:var(--ink-050); }
body.clientarea h1,body.clientarea h2,body.clientarea h3,body.clientarea h4,body.clientarea h5,body.clientarea h6{
  color:var(--ink-900); margin-top:0; margin-bottom:var(--space-4); line-height:1.25;
}
body.clientarea a{ color:var(--brand-1); text-decoration:none; }
body.clientarea a:hover,body.clientarea a:focus{ color:var(--brand-1-700); text-decoration:underline; }

/* ===== 3) CARDS / PANELS ===== */
body.clientarea .card,body.clientarea .panel{
  border:1px solid var(--ink-200); border-radius:var(--radius-md); box-shadow:var(--shadow-1); background:#fff;
}
body.clientarea .card-header,body.clientarea .panel-heading{
  background:#fff; border-bottom:1px solid var(--ink-200); padding:var(--space-4) var(--space-5);
}
body.clientarea .card-body,body.clientarea .panel-body{ padding:var(--space-5); }

/* ===== 4) BUTTONS ===== */
body.clientarea .btn,body.clientarea .form-control,body.clientarea .custom-select,body.clientarea .input-group-text,body.clientarea .badge,body.clientarea .dropdown-menu{ border-radius:var(--radius-sm); }
body.clientarea .btn-primary{ background:var(--brand-1); border-color:var(--brand-1); }
body.clientarea .btn-primary:hover,body.clientarea .btn-primary:focus{ background:var(--brand-1-600); border-color:var(--brand-1-600); }
body.clientarea .btn-outline-primary{ color:var(--brand-1); border-color:var(--brand-1); }
body.clientarea .btn-outline-primary:hover{ background:var(--brand-1); color:#fff; }
body.clientarea .btn{ padding:.5rem .9rem; font-weight:600; box-shadow:none; }

/* ===== 5) NAVBAR / BREADCRUMB ===== */
body.clientarea .navbar,body.clientarea .navbar.navbar-main{ border-bottom:1px solid var(--ink-200); box-shadow:var(--shadow-1); background:#fff; }
body.clientarea .navbar .navbar-brand img{ max-height:36px; }
body.clientarea .navbar .nav-link{ padding:.75rem .9rem; color:var(--ink-700); }
body.clientarea .navbar .nav-link:hover,body.clientarea .navbar .nav-link:focus,body.clientarea .navbar .nav-item.active .nav-link{ color:var(--ink-900); }
body.clientarea .navbar .dropdown-menu{ margin-top:.25rem; }
body.clientarea .breadcrumb{ background:transparent; margin-bottom:var(--space-5); padding:0; }

/* ===== 6) FORMS (icons + intl-tel-input) ===== */
body.clientarea .form-group.has-icon,body.clientarea .has-icon{ position:relative; }
body.clientarea .has-icon > .field-icon,
body.clientarea .has-icon > .form-control-feedback,
body.clientarea .form-group .form-control-feedback.icon-left,
body.clientarea .form-group > i.fa.icon-left,
body.clientarea .form-group > i.fas.icon-left,
body.clientarea .form-group > i.fe.icon-left{
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--ink-500); pointer-events:none; z-index:2; line-height:1;
}
body.clientarea .has-icon > .form-control,
body.clientarea .form-group.has-icon > .form-control,
body.clientarea .form-group:has(.form-control-feedback.icon-left) > .form-control{ padding-left:2.25rem; }
body.clientarea .form-group i.fa + .form-control,
body.clientarea .form-group i.fas + .form-control,
body.clientarea .form-group i.fe + .form-control{ padding-left:2.25rem; }
body.clientarea .form-group .form-control-feedback:not(.icon-left){
  position:absolute; right:.65rem; top:50%; transform:translateY(-50%); color:var(--ink-500); pointer-events:none; z-index:2; line-height:1;
}
body.clientarea .intl-tel-input{ width:100%; }
body.clientarea .intl-tel-input.allow-dropdown input[type="tel"],
body.clientarea .intl-tel-input.separate-dial-code input[type="tel"]{ padding-left:88px; }
@media (max-width:576px){
  body.clientarea .intl-tel-input.allow-dropdown input[type="tel"],
  body.clientarea .intl-tel-input.separate-dial-code input[type="tel"]{ padding-left:76px; }
}
body.clientarea .form-control,body.clientarea .custom-select{ border:1px solid var(--ink-200); padding:.5rem .75rem; transition:box-shadow .15s ease,border-color .15s ease; }
body.clientarea .form-control:focus,body.clientarea .custom-select:focus{ border-color:var(--brand-1); box-shadow:0 0 0 .2rem rgba(220,67,27,.15); }
body.clientarea .input-group-text{ background:var(--ink-100); border:1px solid var(--ink-200); }
body.clientarea .custom-control-label::before,body.clientarea .custom-control-label::after{ top:.15rem; }
body.clientarea .is-valid,.was-validated .form-control:valid{ border-color:var(--ok); }
body.clientarea .is-invalid,.was-validated .form-control:invalid{ border-color:var(--bad); }

/* ===== 7) TABLES / DATATABLES ===== */
body.clientarea table.table{ border-spacing:0; border-collapse:separate; border:1px solid var(--ink-200); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
body.clientarea table.table thead th{ background:var(--ink-100); color:var(--ink-800); border-bottom:1px solid var(--ink-200); font-weight:700; }
body.clientarea table.table td,body.clientarea table.table th{ vertical-align:middle; padding:.75rem .9rem; border-top:1px solid var(--ink-200); }
body.clientarea .table.table-domains,body.clientarea .table.table-fixed{ table-layout:fixed; width:100%; }
body.clientarea .table.table-fixed td .truncate,body.clientarea .table.table-domains td .truncate{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body.clientarea .dataTables_wrapper .dataTables_filter input{ border:1px solid var(--ink-200); border-radius:var(--radius-sm); padding:.35rem .5rem; }
body.clientarea .dataTables_wrapper .dataTables_paginate .page-link{ border:1px solid var(--ink-200); color:var(--ink-700); }
body.clientarea .dataTables_wrapper .dataTables_paginate .page-item.active .page-link{ background:var(--brand-1); border-color:var(--brand-1); color:#fff; }
body.clientarea .dataTables_wrapper .dataTables_length select,
body.clientarea .dataTables_wrapper .dataTables_filter input{ height:calc(2rem + 2px); }
body.clientarea .dataTables_wrapper .dataTables_info{ color:var(--ink-600); }
#tableDomainsList span.hidden{ display:none !important; }

/* ===== 8) BADGES / ALERTS ===== */
body.clientarea .list-group-item{ border-color:var(--ink-200); }
body.clientarea .badge,body.clientarea .label{ font-weight:600; }
body.clientarea .badge-success{ background:var(--ok); }
body.clientarea .badge-warning{ background:var(--warn); }
body.clientarea .badge-danger{ background:var(--bad); }
body.clientarea .badge-info{ background:var(--info); }
body.clientarea .alert{ border-radius:var(--radius-sm); border:1px solid var(--ink-200); }
body.clientarea .alert-primary{ background:var(--brand-1-050); border-color:rgba(220,67,27,.25); color:var(--ink-800); }

/* ===== 9) INVOICES ===== */
body.clientarea .invoice-container{ background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:var(--space-6); }
body.clientarea .invoice-totals .table{ margin-top:var(--space-4); }
body.clientarea.page-clientareainvoices .table-invoices,
body.clientarea.page-viewinvoice .invoice-container .table{ border-radius:var(--radius-md); overflow:hidden; }
body.clientarea.page-viewinvoice .invoice-totals .table td,
body.clientarea.page-viewinvoice .invoice-totals .table th{ padding:.5rem .75rem; }
body.clientarea.page-viewinvoice .invoice-totals .table tr:last-child td,
body.clientarea.page-viewinvoice .invoice-totals .table tr:last-child th{ border-top:2px solid var(--ink-200); font-weight:700; }
@media print{
  body.clientarea .navbar,body.clientarea .footer,body.clientarea .btn,body.clientarea .alert{ display:none !important; }
  body.clientarea .invoice-container{ box-shadow:none; border:none; padding:0; }
}

/* ===== 10) MISC ===== */
body.clientarea .modal-content{ border-radius:var(--radius-md); border:1px solid var(--ink-200); }
body.clientarea .dropdown-menu{ border:1px solid var(--ink-200); box-shadow:var(--shadow-2); }
body.clientarea .pagination .page-link{ border:1px solid var(--ink-200); }
body.clientarea .pagination .page-item.active .page-link{ background:var(--brand-1); border-color:var(--brand-1); }
body.clientarea.page-cart .panel,body.clientarea.page-configureproduct .panel{ border-radius:var(--radius-md); }
body.clientarea.page-cart .btn-primary{ min-width:160px; }
body.clientarea.page-configureproduct .form-control{ max-width:720px; }
body.clientarea.page-login .card,body.clientarea.page-register .card{ max-width:560px; margin-left:auto; margin-right:auto; }
body.clientarea .gap-2 > * + *{ margin-left:.5rem; }
@supports (gap:.5rem){ body.clientarea .gap-2{ gap:.5rem; } }
body.clientarea .break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
body.clientarea .nav .fe,body.clientarea .table .fe,body.clientarea .nav .fas,body.clientarea .table .fas{ margin-right:.35rem; vertical-align:-2px; }
body.clientarea :focus-visible{ outline:2px solid var(--brand-1); outline-offset:2px; }
body.clientarea .text-muted{ color:var(--ink-600) !important; }

@media (max-width:1200px){ #main-body > .container{ max-width:100%; } }
@media (max-width:768px){
  body.clientarea .card-body,body.clientarea .panel-body{ padding:var(--space-4); }
  body.clientarea table.table td,body.clientarea table.table th{ padding:.5rem .6rem; }
  body.clientarea .navbar .nav-link{ padding:.6rem .7rem; }
}


/* =========================
   NAV / HEADER WIDTH MATCH
   Make the main menu (navbar) and breadcrumbs use the same width
   as the main-body container (1420px).
   ========================= */
#header > .container,
#header > .container-fluid,
#header .navbar > .container,
#header .navbar > .container-fluid,
.navbar.navbar-main > .container,
.navbar.navbar-main > .container-fluid,
nav.master-breadcrumb > .container,
nav.master-breadcrumb > .container-fluid {
  max-width: 1420px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1200px) {
  #header > .container,
  #header > .container-fluid,
  #header .navbar > .container,
  #header .navbar > .container-fluid,
  .navbar.navbar-main > .container,
  .navbar.navbar-main > .container-fluid,
  nav.master-breadcrumb > .container,
  nav.master-breadcrumb > .container-fluid {
    max-width: 100% !important;
  }
}