/**
 * M2 — Client Area shell (foundation)
 * Shared: page canvas, tables, alerts, panels, buttons, forms, preloader
 */

:root {
  --m2-ca-border: rgba(11, 22, 34, 0.08);
  --m2-ca-muted: #5a6975;
  --m2-ca-cyan: #48c0d8;
  --m2-ca-cyan-deep: #3aa5bc;
  --m2-ca-ink: #0b1622;
  --m2-ca-radius: 14px;
  --m2-ca-radius-sm: 10px;
}

/* ---------- Canvas: remove double white box on M2 pages ---------- */
body.m2-ca-active .main-page-contents.m2-ca-page-canvas {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0.35rem 0 1.25rem !important;
  margin-bottom: 0 !important;
  text-align: start !important;
}

body.m2-ca-active .main-page-contents.m2-ca-page-canvas::before {
  display: none !important;
}

body.m2-ca-active .main-page-contents.m2-ca-page-canvas > .card {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent !important;
}

body.m2-ca-active .main-page-contents.m2-ca-page-canvas > .card::before {
  display: none !important;
}

body.m2-ca-active .main-page-contents.m2-ca-page-canvas > .card > .card-body {
  padding: 0 !important;
}

/* ---------- Page shell ---------- */
.m2-ca-page {
  margin-bottom: 1.5rem;
}

.m2-ca-page__shell {
  background: #fff;
  border: 1px solid var(--m2-ca-border);
  border-radius: var(--m2-ca-radius);
  box-shadow: 0 4px 24px rgba(11, 22, 34, 0.05);
  overflow: hidden;
}

.m2-ca-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #05141f 0%, #0b1622 100%) !important;
  color: #fff;
}

.m2-ca-page__head-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff !important;
  line-height: 1.4;
}

.m2-ca-page__head-title i {
  color: var(--m2-ca-cyan);
  font-size: 0.95rem;
}

.m2-ca-page__head-sub {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1;
}

.m2-ca-page__body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.m2-ca-page__body--flush {
  padding: 0;
}

/* ---------- Alerts ---------- */
.m2-alert {
  border-radius: var(--m2-ca-radius-sm) !important;
  border-width: 1px !important;
  font-size: 0.875rem;
  line-height: 1.45;
  padding: 0.75rem 1rem !important;
}

.m2-alert ul {
  margin: 0.35rem 0 0;
  padding-inline-start: 1.15rem;
}

.m2-alert h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.m2-alert--success {
  background: rgba(40, 167, 69, 0.08) !important;
  border-color: rgba(40, 167, 69, 0.25) !important;
  color: #1e5631 !important;
}

.m2-alert--danger,
.m2-alert--error {
  background: rgba(220, 53, 69, 0.06) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #842029 !important;
}

.m2-alert--warning {
  background: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.35) !important;
  color: #664d03 !important;
}

.m2-alert--info {
  background: rgba(72, 192, 216, 0.08) !important;
  border-color: rgba(72, 192, 216, 0.28) !important;
  color: var(--m2-ca-ink) !important;
}

/* ---------- Panels ---------- */
.m2-panel {
  border: 1px solid var(--m2-ca-border);
  border-radius: var(--m2-ca-radius-sm);
  background: #fff;
  overflow: hidden;
  margin-bottom: 1rem;
}

.m2-panel__head {
  padding: 0.65rem 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
}

.m2-panel__head--primary { background: var(--m2-ca-cyan-deep); }
.m2-panel__head--success { background: #28a745; }
.m2-panel__head--warning { background: #e0a800; color: #0b1622; }
.m2-panel__head--danger { background: #dc3545; }
.m2-panel__head--info { background: var(--m2-ca-cyan); }

.m2-panel__body {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.m2-panel__foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--m2-ca-border);
  background: rgba(11, 22, 34, 0.02);
}

/* ---------- DataTables / table-list ---------- */
.m2-ca-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--m2-ca-border);
  border-radius: var(--m2-ca-radius-sm);
}

.m2-ca-table-wrap .table-list,
.m2-ca-table-wrap table.dataTable {
  margin: 0 !important;
  width: 100% !important;
}

.m2-ca-table-wrap .table-list thead th,
.m2-ca-table-wrap table.dataTable thead th {
  background: rgba(11, 22, 34, 0.04);
  border-bottom: 1px solid var(--m2-ca-border) !important;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--m2-ca-ink);
  padding: 0.65rem 0.85rem !important;
  white-space: nowrap;
}

.m2-ca-table-wrap .table-list tbody td,
.m2-ca-table-wrap table.dataTable tbody td {
  padding: 0.7rem 0.85rem !important;
  font-size: 0.875rem;
  vertical-align: middle;
  border-top: 1px solid rgba(11, 22, 34, 0.06) !important;
}

.m2-ca-table-wrap .table-list tbody tr:hover,
.m2-ca-table-wrap table.dataTable tbody tr:hover {
  background: rgba(72, 192, 216, 0.04);
}

.m2-ca-table-wrap tbody tr[data-clickable],
.m2-ca-table-wrap tbody tr.m2-ca-row-click {
  cursor: pointer;
}

.m2-ca-table-wrap .label.status {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.m2-ca-table-wrap .label.status.status-active,
.m2-ca-table-wrap .label.status.status-open,
.m2-ca-table-wrap .label.status.status-completed {
  background: rgba(85, 200, 232, 0.16) !important;
  color: var(--m2-ca-cyan-deep, #3aa5bc) !important;
  border-color: rgba(85, 200, 232, 0.35);
}

.m2-ca-table-wrap .label.status.status-answered {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.35);
}

.m2-ca-table-wrap .label.status.status-customer-reply {
  background: rgba(255, 193, 7, 0.14) !important;
  color: #856404 !important;
  border-color: rgba(255, 193, 7, 0.35);
}

.m2-ca-table-wrap .label.status.status-suspended,
.m2-ca-table-wrap .label.status.status-pending,
.m2-ca-table-wrap .label.status.status-pending-transfer,
.m2-ca-table-wrap .label.status.status-pending-registration,
.m2-ca-table-wrap .label.status.status-grace,
.m2-ca-table-wrap .label.status.status-redemption {
  background: rgba(255, 193, 7, 0.14) !important;
  color: #856404 !important;
  border-color: rgba(255, 193, 7, 0.35);
}

.m2-ca-table-wrap .label.status.status-expired,
.m2-ca-table-wrap .label.status.status-terminated,
.m2-ca-table-wrap .label.status.status-cancelled,
.m2-ca-table-wrap .label.status.status-transferred-away {
  background: rgba(100, 116, 139, 0.12) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.28);
}

.m2-ca-table-wrap .label.status.status-fraud,
.m2-ca-table-wrap .label.status.status-inprogress {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #b42318 !important;
  border-color: rgba(220, 53, 69, 0.25);
}

.m2-ca-table-wrap .label.status.status-paid {
  background: rgba(85, 200, 232, 0.16) !important;
  color: var(--m2-ca-cyan-deep, #3aa5bc) !important;
  border-color: rgba(85, 200, 232, 0.35);
}

.m2-ca-table-wrap .label.status.status-unpaid,
.m2-ca-table-wrap .label.status.status-overdue {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #b42318 !important;
  border-color: rgba(220, 53, 69, 0.25);
}

.m2-ca-table-wrap .label.status.status-refunded {
  background: rgba(255, 193, 7, 0.14) !important;
  color: #856404 !important;
  border-color: rgba(255, 193, 7, 0.35);
}

.m2-ca-table-wrap .label.status.status-cancelled,
.m2-ca-table-wrap .label.status.status-closed,
.m2-ca-table-wrap .label.status.status-collections {
  background: rgba(100, 116, 139, 0.12) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.28);
}

.m2-ca-table-wrap .label.status.status-draft {
  background: rgba(11, 22, 34, 0.06) !important;
  color: var(--m2-ca-muted, #5a6975) !important;
  border-color: rgba(11, 22, 34, 0.12);
}

/* Subpage filter bar — yellow badges → brand cyan */
body.m2-ca-active .nav-scroller-subpages .badge-warning,
body.m2-ca-active .nav-scroller-subpages .badge.badge-warning {
  background: rgba(85, 200, 232, 0.16) !important;
  color: var(--m2-ca-cyan-deep, #3aa5bc) !important;
  border: 1px solid rgba(85, 200, 232, 0.3);
  font-weight: 700;
}

.m2-ca-table-loading {
  padding: 2rem;
  text-align: center;
  color: var(--m2-ca-muted);
  font-size: 0.875rem;
}

.m2-ca-table-loading i {
  color: var(--m2-ca-cyan);
  margin-inline-end: 0.35rem;
}

/* DataTables controls */
body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "listtable listtable"
    "length paginate";
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper::before,
body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper::after {
  display: none !important;
  content: none !important;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable {
  grid-area: listtable;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.65rem 1rem;
  padding: 0.75rem 0.85rem 0;
  border-bottom: 1px solid var(--m2-ca-border);
  background: rgba(11, 22, 34, 0.02);
  float: none !important;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable::before,
body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable::after {
  display: none !important;
  content: none !important;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable .dataTables_info {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable .dataTables_filter {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable table.table-list,
body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable table.dataTable {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper > .dataTables_length {
  grid-area: length;
  justify-self: start;
  display: flex;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 0.65rem 0.85rem;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper > .dataTables_paginate {
  grid-area: paginate;
  justify-self: end;
  display: flex;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 0.65rem 0.85rem;
}

body.m2-ca-active .dataTables_wrapper .dataTables_length,
body.m2-ca-active .dataTables_wrapper .dataTables_filter,
body.m2-ca-active .dataTables_wrapper .dataTables_info,
body.m2-ca-active .dataTables_wrapper .dataTables_paginate {
  font-size: 0.82rem;
  color: var(--m2-ca-muted);
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .dataTables_filter,
body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .dataTables_info {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: start;
  order: unset;
  flex: unset;
}

body.m2-ca-active .dataTables_wrapper .dataTables_length label,
body.m2-ca-active .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
}

body.m2-ca-active .dataTables_wrapper .dataTables_filter label::before {
  content: "\f002";
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m2-ca-muted);
  font-size: 0.82rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

body.m2-ca-active .dataTables_wrapper .dataTables_filter input,
body.m2-ca-active .dataTables_wrapper .dataTables_filter input.m2-ca-table-search__input {
  border: 1px solid var(--m2-ca-border);
  border-radius: 8px;
  padding-block: 0.45rem !important;
  padding-inline-start: 2.25rem !important;
  padding-inline-end: 0.75rem !important;
  font-size: 0.875rem;
  min-width: 12.5rem;
  min-height: 34px;
  background: #fff !important;
  box-shadow: none;
}

body.m2-ca-active .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #94a3b8;
  opacity: 1;
}
body.m2-ca-active .dataTables_wrapper .dataTables_length .custom-select,
body.m2-ca-active .dataTables_wrapper .dataTables_length .form-control {
  min-width: 6.25rem;
  width: auto !important;
  height: auto;
  min-height: 34px;
  padding-block: 0.35rem !important;
  padding-inline-start: 0.85rem !important;
  padding-inline-end: 2.5rem !important;
  border: 1px solid var(--m2-ca-border);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.35;
  background-color: #fff;
  text-align: center;
}

html[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length select,
html[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length .custom-select,
html[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length .form-control,
body[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length select,
body[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length .custom-select,
body[dir="rtl"] body.m2-ca-active .dataTables_wrapper .dataTables_length .form-control {
  background-position: left 0.75rem center !important;
}

body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: 0.2rem;
  flex-wrap: wrap;
}

body.m2-ca-active .dataTables_wrapper .paginate_button.page-link,
body.m2-ca-active .dataTables_wrapper .paginate_button.page-item .page-link {
  border-radius: 8px !important;
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
  border-color: var(--m2-ca-border) !important;
  color: var(--m2-ca-ink) !important;
}

body.m2-ca-active .dataTables_wrapper .paginate_button.page-item.active .page-link,
body.m2-ca-active .dataTables_wrapper .paginate_button.page-item.active .page-link:hover {
  background: linear-gradient(135deg, var(--m2-ca-cyan) 0%, var(--m2-ca-cyan-deep) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 575.98px) {
  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "listtable"
      "length"
      "paginate";
  }

  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable .dataTables_info {
    grid-column: 1;
    grid-row: 1;
  }

  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable .dataTables_filter {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }

  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper .listtable table {
    grid-row: 3;
  }

  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper > .dataTables_length,
  body.m2-ca-active .m2-ca-table-wrap .dataTables_wrapper > .dataTables_paginate {
    justify-self: stretch;
  }

  body.m2-ca-active .dataTables_wrapper .dataTables_filter label {
    width: 100%;
  }

  body.m2-ca-active .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Buttons ---------- */
.m2-ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.48rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--m2-ca-radius-sm);
  border: 1px solid transparent;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.m2-ca-btn--primary {
  background: linear-gradient(135deg, var(--m2-ca-cyan) 0%, var(--m2-ca-cyan-deep) 100%);
  color: #fff !important;
  border-color: transparent;
}

.m2-ca-btn--primary:hover {
  background: linear-gradient(135deg, var(--m2-ca-cyan-deep) 0%, var(--m2-ca-cyan) 100%);
  color: #fff !important;
}

.m2-ca-btn--ghost {
  background: #fff;
  color: var(--m2-ca-ink) !important;
  border-color: var(--m2-ca-border);
}

.m2-ca-btn--ghost:hover {
  background: rgba(11, 22, 34, 0.04);
}

.m2-ca-btn--danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.25);
}

.m2-ca-btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}

.m2-ca-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ---------- Forms ---------- */
.m2-ca-field {
  margin-bottom: 0.85rem;
}

.m2-ca-label {
  display: block;
  margin-bottom: 0.32rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--m2-ca-ink);
}

.m2-ca-input,
body.m2-ca-active .m2-ca-page .form-control {
  border: 1px solid rgba(11, 22, 34, 0.12) !important;
  border-radius: var(--m2-ca-radius-sm) !important;
  padding: 0.48rem 0.85rem !important;
  font-size: 0.875rem !important;
  min-height: 38px;
}

.m2-ca-input:focus,
body.m2-ca-active .m2-ca-page .form-control:focus {
  border-color: var(--m2-ca-cyan) !important;
  box-shadow: 0 0 0 3px rgba(72, 192, 216, 0.18) !important;
}

/* ---------- Preloader (phase 6 polish) ---------- */
body.m2-ca-active .preloader {
  background: #05141f;
}

body.m2-ca-active .preloader .coodiv-text-10 {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

body.m2-ca-active .preloader .lds-ring div {
  border-color: var(--m2-ca-cyan) transparent transparent transparent;
}

/* ---------- Navbar subtle M2 touch ---------- */
body.m2-ca-active .site-header.fixed-header-layout {
  border-bottom: 1px solid rgba(72, 192, 216, 0.12);
}

body.m2-ca-active .header-btn-whmcs .btn-primary,
body.m2-ca-active .notifications-dropdown .dropdown-menu {
  border-radius: var(--m2-ca-radius-sm);
}

@media (max-width: 767.98px) {
  .m2-ca-page__head,
  .m2-ca-page__body {
    padding-inline: 1rem;
  }
}