/* =================================================================
   main.css — QualityMind global theme overrides
   Buttons, cards, inputs, tables, DataTables, login, typography.
   Port of client/stylesheets/main.css (QQ branch QQ-new-design-22-05)
   ================================================================= */

/* ---- Bootstrap 4 utility shim — d-none/d-block used in client-list.js toggle ---- */
.d-none  { display: none !important; }
.d-block { display: block !important; }
.cursor-pointer { cursor: pointer !important; }

/* ---- Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

body {
  font-family: "Be Vietnam Pro", sans-serif;
  background-color: #F7F9FB;
}

/* content-wrapper transparent so sidebar gradient shows through */
.page-content-wrapper {
  background-color: transparent;
}

/* content area fills at least full viewport height minus header (50px) + footer (33px) */
.page-content {
  background-color: #F7F9FB;
  min-height: calc(100vh - 83px) !important;
}

/* ---- Buttons — pill shape ---- */
/* Need !important: components.min.css has a global border-radius:0!important reset */
.btn {
  border-radius: 999px !important;
  padding: 8px 18px;
  font-weight: 500;
  box-shadow: none;
}

.btn-primary {
  background-color: #18B2F1;
  border-color: #18B2F1;
  color: #fff;
  border-radius: 999px !important;
  padding: 8px 20px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #129ad4;
  border-color: #129ad4;
  color: #fff;
}

/* bare <button> elements (not .btn / .close / editor chrome) */
button:not(.btn):not(.close):not([class*="cke_"]):not([class*="mce-"]):not([class*="datepicker"]) {
  border-radius: 999px !important;
  font-weight: 500;
}

/* ---- Cards / Panels / Boxes ---- */
.box,
.panel,
.info-box {
  border-radius: 14px !important;
  border: 1px solid #E5EAF0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11,31,58,.08), 0 4px 16px rgba(11,31,58,.06);
}

.box > .box-header:first-child,
.panel > .panel-heading:first-child {
  border-radius: 14px 14px 0 0 !important;
}

.box > .box-footer:last-child,
.panel > .panel-footer:last-child {
  border-radius: 0 0 14px 14px !important;
}

/* ---- Inputs & focus ring ---- */
.form-control {
  border: 1px solid #E5EAF0;
  border-radius: 999px !important;
  background: #fff;
}

/* Textarea: pill radius looks wrong on a multi-line box, use 20px instead */
textarea.form-control {
  border-radius: 20px !important;
  padding: 10px 16px !important;
}

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15);
  border-color: #18B2F1;
  outline: none;
}

input[type=text]:not(.form-control),
input[type=email]:not(.form-control),
input[type=password]:not(.form-control),
input[type=number]:not(.form-control),
input[type=search]:not(.form-control) {
  padding: 6px 14px;
  border: 1px solid #E5EAF0;
  border-radius: 999px !important;
  background: #fff;
}

input[type=text]:not(.form-control):focus,
input[type=email]:not(.form-control):focus,
input[type=password]:not(.form-control):focus,
input[type=number]:not(.form-control):focus,
input[type=search]:not(.form-control):focus {
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15);
  border-color: #18B2F1;
  outline: none;
}

/* ---- Tables — soft dashboard look ---- */
.table thead > tr > th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8B96A4;
  border-bottom: none;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: #E5EAF0;
}

/* Remove all row separator lines — QQ uses stripes only, no borders */
.portlet .table > tbody > tr > td {
  border-top: none !important;
  border-bottom: none !important;
}

.table tbody > tr > td {
  font-size: 14px;
  color: #4a5568;
}

/* ---- DataTables search — pill with embedded magnifier ---- */
.dataTables_wrapper .dataTables_filter input {
  width: 260px !important;
  height: 36px;
  border-radius: 999px !important;
  border: 1px solid #E5EAF0;
  padding: 6px 14px 6px 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B96A4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
  background-size: 16px;
  font-size: 12px;
}

.dataTables_wrapper .dataTables_filter input:focus {
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15);
  border-color: #18B2F1;
  outline: none;
}

/* ---- Login page — full-viewport gradient background ---- */
body.login {
  background-image: none !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(11,31,58,0.28) 0, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(24,178,241,0.22) 0, transparent 55%),
    linear-gradient(135deg, #3A6890 0%, #5798C5 45%, #8AC9E6 100%) !important;
  background-color: #3A6890 !important;
  background-attachment: fixed !important;
}

/* Login logo — remove excessive 60px top margin; let flex centering handle vertical position */
body.login .logo {
  margin: 0 auto !important;
  padding: 10px 15px !important;
}

/* Login card — override login.min.css (overflow:hidden, 7px radius, 400px) */
body.login .content {
  overflow: visible !important;
  border-radius: 18px !important;
  width: 440px !important;
  max-width: calc(100% - 32px) !important;
  margin-top: 16px !important;
  padding: 32px 36px 28px !important;
  box-shadow: 0 8px 40px rgba(11,31,58,0.22) !important;
  box-sizing: border-box !important;
}

/* Title — sizing/spacing only; color handled by .signin-gradient */
body.login .content h3.form-title {
  display: block !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 8px;
  padding: 4px 0;
  overflow: visible;
}

/* Reusable gradient text utility */
.text-gradient-primary {
  display: inline-block !important;
  background: linear-gradient(120deg, #0B1F3A 0%, #18B2F1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Page subtitle — sits below the h1, muted text */
.page-subtitle {
  display: block;
  font-size: 13px;
  color: #8B96A4;
  margin-top: -10px;
  margin-bottom: 15px;
}

/* Inputs — white pill, override gray from login.min.css */
body.login .content .form-control {
  background-color: #fff !important;
  border: 1px solid #D8DFE8 !important;
  border-radius: 999px !important;
  height: 44px !important;
  color: #4a5568 !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.login .content .form-control:focus,
body.login .content .form-control:active {
  border: 1px solid #18B2F1 !important;
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15) !important;
}

body.login .content .form-control::-webkit-input-placeholder { color: #9aa3ad !important; }
body.login .content .form-control:-ms-input-placeholder     { color: #9aa3ad !important; }
body.login .content .form-control::-moz-placeholder         { color: #9aa3ad !important; opacity: 1; }

/* Form actions — remove separator line and negative margins from login.min.css */
body.login .content .form-actions {
  border: none !important;
  border-bottom: none !important;
  padding: 8px 0 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/* Login button — full-width cyan pill */
body.login .content .form-actions .btn {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background-color: #18B2F1 !important;
  border-color: #18B2F1 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  font-size: 15px !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 14px rgba(24,178,241,0.3);
  text-transform: none !important;
}

body.login .content .form-actions .btn:hover,
body.login .content .form-actions .btn:focus {
  background-color: #0b9fd4 !important;
  border-color: #0b9fd4 !important;
}

/* Hide remember-me — not in new design */
body.login .content .form-actions .rememberme {
  display: none !important;
}

/* Forgot password link */
body.login .content .forget-password {
  display: block !important;
  text-align: right;
  margin-top: 10px;
  color: #18B2F1 !important;
  font-size: 13px;
  float: none !important;
}

body.login .content .forget-password:hover {
  color: #0b9fd4 !important;
  text-decoration: underline;
}

/* Remove gray create-account footer box */
body.login .content .create-account {
  background: transparent !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-radius: 0 !important;
}

body.login .content .create-account p a,
body.login .content .create-account a {
  color: #8B96A4 !important;
  font-size: 13px;
}

/* Copyright — white text on gradient bg */
body.login .copyright {
  color: rgba(255,255,255,0.75) !important;
}

/* ================================================================
   PORTLETS — main card type across all dashboard pages
   (.portlet.light.bordered pattern)
   ================================================================ */

.portlet {
  border-radius: 14px !important;
  margin-bottom: 20px;
}

/* Zero out the Metronic components.css outer padding on portlet.light */
.portlet.light {
  padding: 0 !important;
}

/* Header row — rounded top corners only */
.portlet > .portlet-title {
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 18px !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
}

.portlet.light.bordered {
  padding: 0 !important;
}

.portlet.light.bordered > .portlet-title {
  border-bottom: 1px solid #E5EAF0 !important;
}



/* Caption title text — gradient matching page titles */
.portlet > .portlet-title > .caption > .caption-subject {
  display: inline-block !important;
  background: linear-gradient(120deg, #0B1F3A 0%, #18B2F1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Caption icon — brand cyan */
.portlet > .portlet-title > .caption > i {
  color: #18B2F1 !important;
  margin-right: 6px;
}

/* Body — rounded bottom corners */
.portlet > .portlet-body {
  padding: 10px 16px !important;
  border-radius: 0 0 14px 14px !important;
}

/* ================================================================
   DASHBOARD STAT TILES — soft corners & shadow to match card language
   ================================================================ */

.dashboard-stat {
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(11,31,58,0.14);
  transition: box-shadow 0.2s ease;
}

.dashboard-stat:hover {
  box-shadow: 0 6px 20px rgba(11,31,58,0.18);
}

/* ================================================================
   HEADER DROPDOWN MENUS (user menu, notifications)
   ================================================================ */

.page-header.navbar .dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid #E5EAF0 !important;
  box-shadow: 0 8px 24px rgba(11,31,58,0.12) !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
}

.page-header.navbar .dropdown-menu > li > a {
  color: #4a5568 !important;
  font-size: 14px;
  padding: 8px 16px !important;
}

.page-header.navbar .dropdown-menu > li > a:hover {
  background-color: #F7F9FB !important;
  color: #0B1F3A !important;
}

.page-header.navbar .dropdown-menu > li > a > i {
  color: #18B2F1 !important;
  margin-right: 6px;
  width: 16px;
}

.page-header.navbar .dropdown-menu > li.divider {
  background-color: #E5EAF0 !important;
}

/* ================================================================
   DATATABLES PAGINATION — pill buttons (bootstrap_full_number type)
   Structure: ul.pagination > li.prev/next/active/disabled > a
   ================================================================ */

/* Reset Bootstrap's negative-margin connected-pill look */
.dataTables_paginate ul.pagination {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: wrap;
}
.dataTables_paginate ul.pagination > li {
  float: none !important;
  margin: 0 !important;
}

/* All page buttons */
.dataTables_paginate ul.pagination > li > a,
.dataTables_paginate ul.pagination > li > span {
  border-radius: 999px !important;
  border: 1px solid #E5EAF0 !important;
  color: #4a5568 !important;
  padding: 4px 11px !important;
  font-size: 13px !important;
  background: #fff !important;
  line-height: 1.5 !important;
  display: block !important;
  text-decoration: none !important;
  min-width: 32px !important;
  text-align: center !important;
  margin: 0 !important;
}
.dataTables_paginate ul.pagination > li > a:hover,
.dataTables_paginate ul.pagination > li > a:focus {
  background: #F7F9FB !important;
  border-color: #18B2F1 !important;
  color: #18B2F1 !important;
  text-decoration: none !important;
}

/* Active / current page — cyan fill */
.dataTables_paginate ul.pagination > li.active > a,
.dataTables_paginate ul.pagination > li.active > a:hover,
.dataTables_paginate ul.pagination > li.active > a:focus {
  background: #18B2F1 !important;
  border-color: #18B2F1 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Disabled (prev on page 1, next on last page) */
.dataTables_paginate ul.pagination > li.disabled > a,
.dataTables_paginate ul.pagination > li.disabled > a:hover {
  color: #C8D0DB !important;
  border-color: #E5EAF0 !important;
  background: #fff !important;
  cursor: default !important;
  pointer-events: none;
}

.dataTables_wrapper .dataTables_info {
  font-size: 13px;
  color: #8B96A4;
  padding-top: 8px !important;
}

/* ================================================================
   SELECT2 DROPDOWNS — match form-control border/focus style
   ================================================================ */

.select2-container .select2-selection--single {
  border: 1px solid #E5EAF0 !important;
  border-radius: 999px !important;
  height: 36px !important;
  background: #fff !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  bottom: 0 !important;
  right: 10px !important;
}

.select2-container .select2-selection--single .select2-selection__clear {
  margin-right: 0 !important;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
  border-color: #18B2F1 !important;
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15) !important;
  outline: none !important;
}

.select2-dropdown {
  border: 1px solid #E5EAF0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(11,31,58,0.10) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #18B2F1 !important;
}

/* ================================================================
   MISC UX POLISH
   ================================================================ */

/* Scroll-to-top button */
.scroll-to-top > i {
  color: #18B2F1 !important;
}

/* ================================================================
   SIDEBAR OPEN/CLOSE TRANSITION — smooth 0.4s ease
   layout.css has no transition on width/margin so the toggle snaps;
   these rules add a CSS transition on the affected properties only.
   ================================================================ */

@media (min-width: 992px) {
  .page-sidebar {
    transition: width 0.4s ease !important;
  }

  .page-content-wrapper .page-content {
    transition: margin-left 0.4s ease !important;
  }
}

/* ---- Page breadcrumb bar ---- */
.page-content-white .page-bar,
.page-container-bg-solid .page-bar {
  border-bottom: 1px solid #E5EAF0;
  background: transparent !important;
}

.page-bar .page-breadcrumb > li > a {
  color: #18B2F1 !important;
  font-size: 13px;
}

.page-bar .page-breadcrumb > li > a:hover {
  color: #0b9fd4 !important;
  text-decoration: underline;
}

.page-bar .page-breadcrumb > li > span {
  color: #8B96A4 !important;
  font-size: 13px;
}

.page-bar .page-breadcrumb > li > i {
  color: #D0D7E2 !important;
}

/* ---- Form submit button rows ---- */
/* Flex + gap so buttons have spacing both side-by-side and when they wrap/stack */
.margin-top-10:has(.btn) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* ---- Footer — inside page-content-wrapper (body column only) ---- */
.page-footer {
  background-color: #F7F9FB;
  border-top: 1px solid #E5EAF0;
  color: #8B96A4 !important;
  font-size: 13px;
}

.page-footer .page-footer-inner {
  color: #8B96A4 !important;
}

/* Footer is inside .page-content-wrapper which already carries the sidebar offset — no margin-left needed */

/* ================================================================
   BUTTON COLOR OVERRIDES — old AdminLTE palette → new brand colors
   ================================================================ */

/* Primary action: .btn.green → brand cyan */
.btn.green,
.btn.green-haze,
.btn.green-jungle,
.btn.green-sharp,
.btn.green-steel,
.btn-success {
  background-color: #18B2F1 !important;
  border-color: #18B2F1 !important;
  color: #fff !important;
}
.btn.green:hover, .btn.green:focus, .btn.green:active,
.btn.green-haze:hover, .btn.green-jungle:hover,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.open > .dropdown-toggle.btn-success {
  background-color: #129ad4 !important;
  border-color: #129ad4 !important;
  color: #fff !important;
}

/* Outlined green variants */
.btn.green.btn-outline,
.btn.green-haze.btn-outline {
  background: transparent !important;
  border: 1px solid #18B2F1 !important;
  color: #18B2F1 !important;
}
.btn.green.btn-outline:hover,
.btn.green-haze.btn-outline:hover {
  background-color: #18B2F1 !important;
  color: #fff !important;
}

/* Secondary/cancel: .btn.default → outlined muted */
.btn.default {
  background-color: #fff !important;
  border: 1px solid #E5EAF0 !important;
  color: #4a5568 !important;
  box-shadow: none !important;
}
.btn.default:hover,
.btn.default:focus {
  background-color: #F7F9FB !important;
  border-color: #C8D0DB !important;
  color: #0B1F3A !important;
}

/* Danger: .btn.red / .btn-danger */
.btn.red,
.btn.red-intense,
.btn.red-flamingo,
.btn-danger {
  background-color: #d9534f !important;
  border-color: #d9534f !important;
  color: #fff !important;
}
.btn.red:hover, .btn.red:focus, .btn.red:active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.open > .dropdown-toggle.btn-danger {
  background-color: #b54440 !important;
  border-color: #b54440 !important;
  color: #fff !important;
}
.btn.red.btn-outline {
  background: transparent !important;
  border: 1px solid #d9534f !important;
  color: #d9534f !important;
}
.btn.red.btn-outline:hover {
  background-color: #d9534f !important;
  color: #fff !important;
}

/* Info/blue: .btn.blue → brand navy */
.btn.blue,
.btn.blue-oleo,
.btn.blue-steel,
.btn.blue-soft,
.btn.blue-dark,
.btn.blue-sharp,
.btn-info {
  background-color: #0F2A4C !important;
  border-color: #0F2A4C !important;
  color: #fff !important;
}
.btn.blue:hover, .btn.blue:focus, .btn.blue:active,
.btn.blue-oleo:hover,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.open > .dropdown-toggle.btn-info {
  background-color: #0B1F3A !important;
  border-color: #0B1F3A !important;
  color: #fff !important;
}
.btn.blue.btn-outline,
.btn.blue-oleo.btn-outline {
  background: transparent !important;
  border: 1px solid #0F2A4C !important;
  color: #0F2A4C !important;
}
.btn.blue.btn-outline:hover {
  background-color: #0F2A4C !important;
  color: #fff !important;
}

/* Warning: .btn-warning → warm orange */
.btn-warning {
  background-color: #e8a230 !important;
  border-color: #e8a230 !important;
  color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: #c8881a !important;
  border-color: #c8881a !important;
}

/* Dark: .btn.dark → brand navy */
.btn.dark {
  background-color: #0B1F3A !important;
  border-color: #0B1F3A !important;
  color: #fff !important;
}
.btn.dark.btn-outline {
  background: transparent !important;
  border: 1px solid #0B1F3A !important;
  color: #0B1F3A !important;
}
.btn.dark.btn-outline:hover {
  background-color: #0B1F3A !important;
  color: #fff !important;
}

/* Grey variants → muted secondary */
.btn.grey-salsa,
.btn.grey-mint,
.btn.grey-steel,
.btn.grey-cararra,
.btn.grey {
  background-color: #F7F9FB !important;
  border-color: #E5EAF0 !important;
  color: #4a5568 !important;
}
.btn.grey-salsa:hover,
.btn.grey-mint:hover,
.btn.grey:hover {
  background-color: #E5EAF0 !important;
  color: #0B1F3A !important;
}

/* Active state for toggle-button groups (radio-style .btn labels) */
.btn.active,
.btn.active:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ================================================================
   FONT / TEXT COLOR OVERRIDES — old AdminLTE colors → new palette
   ================================================================ */

/* Green text → brand cyan */
.font-green,
.font-green-haze,
.font-green-jungle,
.font-green-sharp,
.font-green-steel {
  color: #18B2F1 !important;
}

/* Red text → palette danger */
.font-red,
.font-red-intense,
.font-red-flamingo,
.font-red-sunglo,
.font-red-thunderbird {
  color: #d9534f !important;
}

/* Blue-madison → brand navy */
.font-blue-madison,
.font-blue-chambray,
.font-blue-ebonyclay {
  color: #0B1F3A !important;
}

/* Other blues → brand cyan */
.font-blue,
.font-blue-oleo,
.font-blue-steel,
.font-blue-soft,
.font-blue-dark,
.font-blue-sharp {
  color: #18B2F1 !important;
}

/* Yellow/orange text → warm muted */
.font-yellow,
.font-yellow-gold,
.font-yellow-casablanca,
.font-yellow-crusta {
  color: #b86a2c !important;
}

/* Purple text — keep, just ensure legibility */
.font-purple,
.font-purple-medium,
.font-purple-seance {
  color: #6f42c1 !important;
}

/* ================================================================
   BADGE / LABEL COLOR OVERRIDES
   ================================================================ */

.label {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
}

.cont-col2 > .desc {
  margin-left: 50px !important;
}

.col2 {
  width: 100px !important;
  margin-left: -100px !important;
}

.col1 > .cont {
  margin-right: 100px !important;
}

.col2 > .date {
  white-space: nowrap !important;
}

.badge-success,
.label-success {
  background-color: #18B2F1 !important;
  color: #fff !important;
}

.badge-danger,
.label-danger {
  background-color: #d9534f !important;
  color: #fff !important;
}

.badge-warning,
.label-warning {
  background-color: #e8a230 !important;
  color: #fff !important;
}

.badge-info,
.label-info {
  background-color: #0F2A4C !important;
  color: #fff !important;
}

.badge-default,
.label-default {
  background-color: #8B96A4 !important;
  color: #fff !important;
}

/* ================================================================
   FRESH MEMBERS STAT BAR
   ================================================================ */

.fresh-members-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f0f4f7;
  color: #7f90a4;
}

.fresh-members-stat strong {
  font-size: 14px;
  color: #18B2F1;
}

/* ================================================================
   GENERAL FORM CONTROLS — across all dashboard pages
   ================================================================ */

/* Textarea — rounded but not pill (already set above, enforce here too) */
textarea.form-control {
  border-radius: 20px !important;
  padding: 10px 16px !important;
  min-height: 100px;
}

/* Select — pill to match inputs */
select.form-control {
  border-radius: 999px !important;
  padding-left: 16px !important;
}

/* Input groups — outer ends are pill, inner seam is flat */
.input-group .form-control:not(:last-child) {
  border-radius: 999px 0 0 999px !important;
}
.input-group .form-control:not(:first-child) {
  border-radius: 0 999px 999px 0 !important;
}
.input-group-addon {
  border: 1px solid #E5EAF0 !important;
  background-color: #F7F9FB !important;
  color: #8B96A4 !important;
}
.input-group .input-group-addon:first-child {
  border-radius: 999px 0 0 999px !important;
}
.input-group .input-group-addon:last-child {
  border-radius: 0 999px 999px 0 !important;
}

/* Form labels */
.control-label {
  color: #4a5568;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 6px;
}

/* Help text */
.help-block {
  color: #8B96A4;
  font-size: 12px;
}

/* form-control-solid (used in AdminLTE for filled inputs) */
.form-control-solid {
  background-color: #fff !important;
  border: 1px solid #E5EAF0 !important;
  color: #4a5568 !important;
}
.form-control-solid:focus {
  border-color: #18B2F1 !important;
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15) !important;
}

/* Disabled inputs */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #F7F9FB !important;
  border-color: #E5EAF0 !important;
  color: #8B96A4 !important;
  cursor: not-allowed;
}

/* Validation states */
.has-error .form-control {
  border-color: #d9534f !important;
}
.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(217,83,79,0.15) !important;
  border-color: #d9534f !important;
}
.has-error .control-label,
.has-error .help-block {
  color: #d9534f !important;
}
.has-success .form-control {
  border-color: #18B2F1 !important;
}
.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(24,178,241,0.15) !important;
}
.has-success .control-label,
.has-success .help-block {
  color: #18B2F1 !important;
}

/* Checkbox / radio custom styling (mt-checkbox / mt-radio AdminLTE pattern) */
.mt-checkbox > input:checked ~ span,
.mt-radio > input:checked ~ span {
  border-color: #18B2F1 !important;
}
.mt-checkbox > input:checked ~ span:after {
  background: #18B2F1 !important;
  border-color: #18B2F1 !important;
}

/* ================================================================
   DATATABLES QM REDESIGN
   Layout: [search] ←space-between→ [add btn]  |  table  |  [selector] ←space-between→ [pagination]
   Reference: QQ site contacts/status page
   ================================================================ */

/* Portlet body containing a DataTable — padding + overflow */
.portlet:has(.dataTables_wrapper) > .portlet-body {
  padding: 0 16px 12px !important;
  overflow-x: hidden;
}

/* Scroll on the table row only — search and pagination stay fixed */
.portlet .qm-dt-table-wrap {
  overflow-x: auto;
}

/* Pre-hide .table-toolbar before JS hoists its buttons into the DT slot.
   This prevents the flash where toolbar content is briefly visible
   in its original position before DataTables re-organises the DOM. */
.portlet-body > .table-toolbar {
  display: none !important;
}

/* ---- Top bar: search LEFT  ←→  add-button RIGHT ---- */
.qm-dt-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 12px !important;
}
.qm-toolbar-slot {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
}

/* Search: left-align, hide label text "Search:" — show only the pill input */
.dataTables_filter {
  text-align: left !important;
  float: none !important;
}
.dataTables_filter label {
  font-size: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.dataTables_filter label input {
  font-size: 12px !important;
  margin: 0 !important;
  display: block !important;
}

/* ---- Bottom bar: selector LEFT  ←→  pagination RIGHT ---- */
.qm-dt-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 0 !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.dataTables_paginate {
  flex-shrink: 0;
}

/* Length: hide "Show" + "entries" text — keep only the styled <select> */
.dataTables_length {
  float: none !important;
}
.dataTables_length label {
  font-size: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.dataTables_length label select {
  font-size: 13px !important;
  display: inline-block !important;
  width: 90px !important;
  padding: 0 28px 0 12px !important;
  line-height: 36px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2318B2F1'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  border: 1px solid #E5EAF0 !important;
  border-radius: 8px !important;
  color: #4a5568 !important;
  cursor: pointer !important;
  height: 36px !important;
}

/* No outer box border on table-bordered */
.portlet .table-bordered {
  border: none !important;
}

/* No borders on thead th */
.portlet .table > thead > tr > th {
  border-bottom: none !important;
  border-top: none !important;
}

/* Remove outer top/bottom border on the table element itself */
.portlet .table {
  border-top: none !important;
  border-bottom: none !important;
}

/* Compact cell padding — matches reference */
.portlet .table > thead > tr > th,
.portlet .table > tbody > tr > td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

/* Row hover */
.table.table-hover > tbody > tr:hover > td {
  background-color: #EDF5FF !important;
}

/* Very subtle alternating rows */
.table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #FAFBFC !important;
}

/* Table link: navy default, cyan on hover */
.portlet-body .table td a {
  color: #0F2A4C !important;
  font-weight: 500;
  text-decoration: none;
}
.portlet-body .table td a:hover {
  color: #18B2F1 !important;
  text-decoration: none;
}

@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
  .qm-dt-top {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .qm-dt-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .dataTables_paginate {
    flex-shrink: 1 !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dataTables_paginate ul.pagination {
    flex-wrap: nowrap !important;
  }
}

/* ---- Header container spacing ---- */
/* Remove gap before logo and after avatar */
.page-header.navbar .page-logo {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-header.navbar .top-menu .navbar-nav {
  margin-right: 4px !important;
}

/* ---- User profile dropdown ---- */
.qm-user-trigger {
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  box-sizing: border-box !important;
}

.qm-user-avatar-sm {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.6);
  object-fit: cover;
  display: block !important;
  float: none !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  vertical-align: middle;
}

.qm-user-trigger-name {
  display: none;
  margin: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  .qm-user-trigger-name {
    display: inline-block;
  }
}

.qm-user-dropdown {
  width: auto !important;
  min-width: 240px !important;
  padding: 24px 20px 20px !important;
  text-align: center !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(11,31,58,0.14) !important;
  border: 1px solid #e8edf3 !important;
  right: 0;
  left: auto;
}

.qm-user-card,
.qm-user-card:hover,
.qm-user-card:focus,
.qm-user-card > a,
.qm-user-card > a:hover {
  padding: 0 !important;
  background: none !important;
  cursor: default !important;
}

.qm-user-avatar-wrap {
  margin-bottom: 14px;
}

.qm-user-avatar-wrap img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid #e8edf3;
  object-fit: cover;
}

.qm-user-fullname {
  font-weight: 700;
  font-size: 15px;
  color: #0B1F3A;
  margin-bottom: 0;
  letter-spacing: -0.2px;
}

.qm-user-divider {
  margin: 14px 0 12px !important;
  border-top: 1px solid #e8edf3 !important;
  border-bottom: none !important;
}

.qm-user-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 16px;
}

.qm-btn-outline {
  flex: 1;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  border: 1.5px solid #18B2F1 !important;
  color: #18B2F1 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s !important;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1.4 !important;
}

.qm-btn-outline:hover,
.qm-btn-outline:focus {
  border-color: #18B2F1 !important;
  color: #fff !important;
  background-color: #18B2F1 !important;
  text-decoration: none;
}

/* Add-client form — fixed 260px inputs on desktop, full-width on mobile */
.new-client-form .form-control,
.new-client-form .select2-container {
  max-width: 100%;
}

@media (min-width: 600px) {
  .new-client-form .form-control,
  .new-client-form .select2-container {
    max-width: 300px;
  }
}

/* ---- Add-client wizard — 2-column grid (tab2 profile/program + tab4 confirm) ---- */
/* Scope to .active only — prevents display:grid from overriding Bootstrap's display:none on hidden panes */
@media (min-width: 768px) {
  #tab2.active,
  #tab4.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }

  /* Section headers and notes span full width */
  #tab2 h3.block,
  #tab4 h3.block,
  #tab4 h4.form-section,
  #tab4 > span {
    grid-column: 1 / -1;
  }

  /* Tab4 confirm — inputs fill the grid cell */
  #tab4 .form-control,
  #tab4 .select2-container {
    max-width: 100%;
  }
}

/* ================================================================
   ADD CLIENT — WIZARD STEP HEADERS + STEP 4 CONFIRM
   ================================================================ */

/* Step section headers — all tabs */
.form-wizard .tab-pane h3.block {
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F2A4C !important;
  margin: 0 0 20px !important;
  padding-left: 12px !important;
  position: relative !important;
}

.form-wizard .tab-pane h3.block + h3.block,
.form-wizard .tab-pane .form-group + h3.block {
  margin-top: 28px !important;
}

.form-wizard .tab-pane h3.block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: #18B2F1;
  border-radius: 2px;
}

/* Portlet caption "Add Client — Step X of 4" */
#form_wizard_1 .portlet-title .caption .caption-subject {
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8B96A4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#form_wizard_1 .portlet-title .caption .step-title {
  color: #18B2F1 !important;
}

#tab4 h4.form-section {
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #18B2F1 !important;
  margin: 22px 0 10px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid #E5EAF0 !important;
}

#tab4 .form-group label.control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a5568 !important;
}

#tab4 .form-group .form-control-static {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0F2A4C !important;
}

#tab4 > span[style] {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  color: #E53E3E !important;
}

/* ================================================================
   MODALS — match portlet design language
   ================================================================ */

.modal-content {
  border-radius: 14px !important;
  border: 1px solid #E5EAF0 !important;
  box-shadow: 0 8px 32px rgba(11,31,58,0.14) !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
}

.modal-header {
  border-bottom: 1px solid #E5EAF0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 16px 20px !important;
}

.modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0F2A4C !important;
  line-height: 1.4 !important;
}

.modal-body {
  padding: 20px !important;
  font-size: 14px !important;
  color: #4a5568 !important;
  line-height: 1.6 !important;
}

.modal-footer {
  border-top: 1px solid #E5EAF0 !important;
  border-radius: 0 0 14px 14px !important;
  padding: 12px 20px !important;
  background: transparent !important;
}

.qm-modal-label {
  margin: 0 !important;
}

.modal-body h3,
.modal-body h4 {
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0F2A4C !important;
  letter-spacing: 0.2px !important;
}

.modal-body h5 {
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F2A4C !important;
  letter-spacing: 0.2px !important;
}

/* Ensure modal title also uses Be Vietnam Pro */
.modal-title {
  font-family: "Be Vietnam Pro", sans-serif !important;
}

/* Cancel/close outlined-dark btn → primary cyan border + hover */
.btn.btn-outline.dark {
  border-color: #18B2F1 !important;
  color: #18B2F1 !important;
  background: transparent !important;
}

.btn.btn-outline.dark:hover,
.btn.btn-outline.dark:active,
.btn.btn-outline.dark:focus,
.btn.btn-outline.dark.active {
  border-color: #18B2F1 !important;
  background-color: #18B2F1 !important;
  color: #fff !important;
}