/*
 * MessagePad CSS-only visual refresh
 * Compatible with: Bootstrap 3.3.x + AdminLTE 2.x
 *
 * Installation: load this file LAST, after bootstrap, AdminLTE skins and
 * your existing custom.css.  It deliberately contains no JavaScript and
 * requires no changes to your PHP, database or existing page markup.
 */

:root {
  --mp-blue: #3158b8;
  --mp-blue-dark: #274799;
  --mp-blue-soft: #eef3ff;
  --mp-page: #f4f7fb;
  --mp-white: #ffffff;
  --mp-text: #17233c;
  --mp-muted: #667085;
  --mp-border: #e4e9f0;
  --mp-border-soft: #eef1f5;
  --mp-success: #157347;
  --mp-success-bg: #e8f7ef;
  --mp-radius: 10px;
  --mp-radius-sm: 7px;
  --mp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

html,
body,
body.skin-blue {
  min-height: 100%;
  background: var(--mp-page) !important;
}

body.skin-blue {
  color: var(--mp-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shared header
   AdminLTE normally renders .logo as a separate white/coloured block beside
   the navbar.  These rules visually place that existing element in the blue
   navbar, so no template or PHP edit is needed.
   -------------------------------------------------------------------------- */

body.skin-blue .main-header,
body.skin-blue .main-header .navbar {
  min-height: 58px;
}

body.skin-blue .main-header .navbar {
  margin-left: 0 !important;
  background: linear-gradient(135deg, var(--mp-blue) 0%, #2e4ca5 100%) !important;
  border: 0;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .14);
}

body.skin-blue .main-header .logo {
  position: absolute !important;
  z-index: 1031;
  top: 0;
  left: 54px;
  float: none !important;
  width: auto !important;
  min-width: 0;
  height: 58px !important;
  margin: 0;
  padding: 0 16px;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 20px;
  line-height: 58px !important;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

body.skin-blue .main-header .logo:hover,
body.skin-blue .main-header .logo:focus {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

body.skin-blue .main-header .logo .logo-mini {
  display: none !important;
}

body.skin-blue .main-header .logo .logo-lg {
  display: inline !important;
}

body.skin-blue .main-header .navbar .sidebar-toggle {
  position: relative;
  z-index: 1032;
  width: 54px;
  height: 58px;
  padding: 20px 18px;
  color: #fff;
}

body.skin-blue .main-header .navbar .sidebar-toggle:hover,
body.skin-blue .main-header .navbar .sidebar-toggle:focus {
  background: rgba(255, 255, 255, .10) !important;
  color: #fff;
}

body.skin-blue .main-header .navbar .sidebar-toggle .icon-bar {
  background: #fff;
}

body.skin-blue .main-header .navbar-custom-menu,
body.skin-blue .main-header .navbar-right {
  position: relative;
  z-index: 1033;
}

body.skin-blue .main-header .navbar-nav > li > a {
  min-height: 58px !important;
  padding-top: 14px;
  padding-bottom: 14px;
  color: rgba(255, 255, 255, .94) !important;
}

body.skin-blue .main-header .navbar-nav > li > a:hover,
body.skin-blue .main-header .navbar-nav > li > a:focus,
body.skin-blue .main-header .navbar-nav > .open > a,
body.skin-blue .main-header .navbar-nav > .open > a:hover,
body.skin-blue .main-header .navbar-nav > .open > a:focus {
  background: rgba(0, 0, 0, .08) !important;
  color: #fff !important;
}

body.skin-blue .main-header .navbar .btn {
  min-height: 36px;
  margin-top: 11px !important;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: var(--mp-radius-sm) !important;
  background: #fff !important;
  color: var(--mp-blue-dark) !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

body.skin-blue .main-header .navbar .btn:hover,
body.skin-blue .main-header .navbar .btn:focus {
  background: #f8fafc !important;
  color: var(--mp-blue-dark) !important;
}

body.skin-blue .main-header .user-image {
  width: 30px;
  height: 30px;
  margin-top: 0;
  border: 2px solid rgba(255, 255, 255, .75);
}

body.skin-blue .main-header .user-menu .dropdown-menu {
  margin-top: 0;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  box-shadow: var(--mp-shadow);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

body.skin-blue .main-sidebar,
body.skin-blue .left-side {
  top: 58px !important;
  min-height: calc(100vh - 58px) !important;
  padding-top: 0 !important;
  background: var(--mp-white) !important;
  border-right: 1px solid var(--mp-border);
  box-shadow: none;
}

body.skin-blue.fixed .main-sidebar {
  position: fixed !important;
  height: calc(100vh - 58px) !important;
}

body.skin-blue .main-sidebar .slimScrollDiv,
body.skin-blue .main-sidebar .sidebar {
  height: 100% !important;
}

body.skin-blue .main-sidebar .sidebar {
  position: relative;
  overflow: hidden; /* slimScroll owns scrolling (thin bar only - no native scrollbar) */
  padding-bottom: 0;
}

/* Reserve room above the pinned subscription footer inside the scrolling menu. */
body.skin-blue .main-sidebar .sidebar-menu {
  padding-bottom: 96px; /* keep menu items clear of the pinned subscription footer */
}

body.skin-blue .sidebar a {
  color: #475467 !important;
}

body.skin-blue .user-panel {
  min-height: 68px;
  margin: 0;
  padding: 14px 12px 16px;
  border-bottom: 1px solid var(--mp-border);
}

body.skin-blue .user-panel > .image > img {
  max-width: 40px;
  border: 0;
}

body.skin-blue .user-panel > .info {
  left: 58px;
  padding: 1px 5px 5px 0;
  color: var(--mp-text) !important;
}

body.skin-blue .user-panel > .info > p {
  margin: 0 0 4px;
  color: var(--mp-text) !important;
  font-weight: 700;
}

body.skin-blue .user-panel #clock {
  color: var(--mp-muted) !important;
  font-size: 16px !important;
  font-weight: 400;
  letter-spacing: .04em;
}

body.skin-blue .sidebar-menu {
  padding: 7px 10px 100px !important;
}

body.skin-blue .sidebar-menu > li.header {
  margin: 8px 10px 6px;
  padding: 6px 2px;
  background: transparent !important;
  color: #98a2b3 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

body.skin-blue .sidebar-menu > li > a {
  min-height: 42px;
  margin: 3px 0;
  padding: 11px 12px;
  border: 0 !important;
  border-radius: var(--mp-radius-sm);
  color: #475467 !important;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

body.skin-blue .sidebar-menu > li:hover > a,
body.skin-blue .sidebar-menu > li.menu-open > a {
  background: #f5f7fb !important;
  color: var(--mp-blue) !important;
}

body.skin-blue .sidebar-menu > li.active > a {
  background: var(--mp-blue-soft) !important;
  color: var(--mp-blue) !important;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--mp-blue);
}

body.skin-blue .sidebar-menu > li > a > i {
  width: 20px;
  color: #667085;
  text-align: center;
}

body.skin-blue .sidebar-menu > li.active > a > i,
body.skin-blue .sidebar-menu > li:hover > a > i,
body.skin-blue .sidebar-menu > li.menu-open > a > i {
  color: var(--mp-blue);
}

body.skin-blue .sidebar-menu > li > .treeview-menu {
  margin: 4px 0 7px 8px;
  padding: 4px 0 4px 10px;
  background: transparent !important;
  border-left: 1px solid var(--mp-border);
}

body.skin-blue .sidebar-menu .treeview-menu > li > a {
  padding: 8px 12px;
  border-radius: 6px;
  color: #667085 !important;
}

body.skin-blue .sidebar-menu .treeview-menu > li > a:hover,
body.skin-blue .sidebar-menu .treeview-menu > li.active > a {
  background: #f8fafc !important;
  color: var(--mp-blue) !important;
}

/* Subscription-countdown footer pinned to the bottom of the fixed sidebar
   (the block lives directly inside <aside class="main-sidebar">, after the
   scrolling menu section). */
body.skin-blue .main-sidebar .sidebar-subscription {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 80px;
  padding: 8px 10px 10px;
  background: #fff;
  border-top: 1px solid var(--mp-border);
  text-align: center;
}

body.skin-blue .main-sidebar .sidebar-subscription .text-center {
  color: var(--mp-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Countdown digits: clean dark numerals on the sidebar, no stock gray box. */
body.skin-blue #divCountdown.is-countdown {
  border: 0 !important;
  background: transparent !important;
}
body.skin-blue #divCountdown {
  height: 50px;
  color: var(--mp-text) !important;
  font-weight: 700;
}
body.skin-blue #divCountdown .countdown-amount {
  font-size: 20px;
  color: var(--mp-text);
  font-weight: 700;
}
body.skin-blue #divCountdown .countdown-period {
  color: var(--mp-muted);
  font-size: 11px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Content area, cards and standard Bootstrap controls
   -------------------------------------------------------------------------- */

body.skin-blue .content-wrapper,
body.skin-blue .right-side {
  min-height: 100vh !important;
  padding-top: 58px !important;
  background: var(--mp-page) !important;
}

body.skin-blue .content-header {
  padding: 18px 24px 8px;
}

body.skin-blue .content-header > h1 {
  margin: 0;
  color: var(--mp-text);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

body.skin-blue .content-header > h1 > small {
  display: block;
  margin: 4px 0 0;
  color: var(--mp-muted);
  font-size: 14px;
  font-weight: 400;
}

body.skin-blue .content {
  padding: 10px 24px 26px;
}

body.skin-blue .content .box {
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--mp-white);
  border: 1px solid var(--mp-border) !important;
  border-top: 1px solid var(--mp-border) !important;
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
}

body.skin-blue .content .box-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--mp-border);
  color: var(--mp-text);
}

body.skin-blue .content .box-header > .box-title {
  color: var(--mp-text);
  font-size: 16px;
  font-weight: 700;
}

body.skin-blue .content .box-body {
  padding: 0;
  /* Wide list tables (those without a .table-responsive wrapper) must scroll
     inside the card instead of being silently clipped by the box's
     overflow:hidden. */
  overflow-x: auto;
}

/* Cards whose content sits straight in the body (forms, paragraphs, custom
   cards) instead of a .row / table / tabs / DataTable get comfortable padding
   so text is not flush to the card edge. The :not(:has()) guards leave list
   and row-based layouts (which bring their own inner padding) untouched. */
body.skin-blue .content .box-body:not(:has(> .row)):not(:has(> .table)):not(:has(> table)):not(:has(> .nav-tabs)):not(:has(> .tab-content)):not(:has(> .dataTables_wrapper)):not(.direct-chat) {
  padding: 16px 18px;
}

body.skin-blue .content .box-body > .row {
  margin-right: 0;
  margin-left: 0;
  padding: 14px 18px;
}

body.skin-blue .content .box-body > .row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

body.skin-blue .content .form-control,
body.skin-blue .content select.form-control {
  height: 40px;
  border: 1px solid #d9dee8;
  border-radius: var(--mp-radius-sm);
  background: #fff;
  color: var(--mp-text);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.skin-blue .content .form-control:focus,
body.skin-blue .content select.form-control:focus {
  border-color: var(--mp-blue);
  box-shadow: 0 0 0 3px rgba(49, 88, 184, .12);
}

body.skin-blue .content .input-group .form-control {
  border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
}

/* When a leading .input-group-addon (search icon) precedes the input, the
   input is no longer the first child - square its left side and square-off
   the addon itself so the pieces join seamlessly instead of leaving a notch
   between a rounded input edge and a square addon. */
body.skin-blue .content .input-group .input-group-addon + .form-control {
  border-radius: 0;
}

/* ...unless the input is the last piece (currency addon + input, no button):
   then only the left edge squares off to meet the addon. */
body.skin-blue .content .input-group .input-group-addon + .form-control:last-child {
  border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0;
}

body.skin-blue .content .input-group .input-group-addon:first-child {
  border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
}

body.skin-blue .content .input-group-btn > .btn:not(.btn-primary),
body.skin-blue .content .input-group-addon {
  height: 40px;
  border-color: #d9dee8;
  background: #f8fafc;
  color: #344054;
}

body.skin-blue .content .input-group-btn > .btn {
  border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0;
  font-weight: 600;
}

body.skin-blue .content .btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: var(--mp-radius-sm);
  font-weight: 600;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.skin-blue .content .btn-default {
  border-color: #d9dee8;
  background: #fff;
  color: #344054;
}

body.skin-blue .content .btn-default:hover,
body.skin-blue .content .btn-default:focus {
  border-color: #c9d1df;
  background: #f8fafc;
  color: #17233c;
}

body.skin-blue .content .btn-primary {
  border-color: var(--mp-blue);
  background: var(--mp-blue);
}

body.skin-blue .content .btn-primary:hover,
body.skin-blue .content .btn-primary:focus {
  border-color: var(--mp-blue-dark);
  background: var(--mp-blue-dark);
}

body.skin-blue .content .btn-info {
  border-color: #287da9;
  background: #318fbf;
}

body.skin-blue .content .btn-success {
  border-color: #137044;
  background: #157347;
}

body.skin-blue .content .btn-danger {
  border-color: #b42318;
  background: #c9372c;
}

body.skin-blue .content .btn-warning {
  border-color: #b54708;
  background: #d97706;
}

/* Tabbed panels used by the Dashboard and other Bootstrap pages. */
body.skin-blue .content .nav-tabs {
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--mp-border);
  background: #fff;
}

body.skin-blue .content .nav-tabs > li {
  margin-bottom: 0;
}

body.skin-blue .content .nav-tabs > li > a {
  position: relative;
  margin: 0 4px 0 0;
  padding: 14px 16px 12px;
  line-height: 21px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mp-muted);
  font-weight: 500;
}

body.skin-blue .content .nav-tabs > li > a:hover,
body.skin-blue .content .nav-tabs > li > a:focus {
  border: 0 !important;
  background: transparent !important;
  color: var(--mp-blue);
}

body.skin-blue .content .nav-tabs > li.active > a,
body.skin-blue .content .nav-tabs > li.active > a:hover,
body.skin-blue .content .nav-tabs > li.active > a:focus {
  border: 0 !important;
  background: transparent !important;
  color: var(--mp-blue) !important;
}

body.skin-blue .content .nav-tabs > li.active > a::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--mp-blue);
  content: "";
}

body.skin-blue .content .tab-pane > .row:first-child {
  margin: 0;
  padding: 14px 18px 10px;
}

body.skin-blue .content .tab-pane > .row:first-child > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

body.skin-blue .content .tab-pane .input-group[style] {
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Tables, filters and pagination
   -------------------------------------------------------------------------- */

body.skin-blue .content .table-responsive {
  margin: 0;
  border: 0;
}

body.skin-blue .content .table {
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: #344054;
}

body.skin-blue .content .table-bordered > thead > tr > th,
body.skin-blue .content .table-bordered > tbody > tr > td,
body.skin-blue .content .table-bordered > tfoot > tr > td {
  border-right: 0 !important;
  border-left: 0 !important;
}

body.skin-blue .content .table > thead > tr > th {
  padding: 12px 12px;
  border-top: 0 !important;
  border-bottom: 1px solid var(--mp-border) !important;
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.25;
  text-transform: uppercase;
  vertical-align: middle;
}

body.skin-blue .content .table > tbody > tr > td {
  padding: 12px 12px;
  border-top: 0 !important;
  border-bottom: 1px solid var(--mp-border-soft) !important;
  background: #fff;
  line-height: 1.45;
  vertical-align: middle;
  /* Long unbreakable content (emails, phone numbers) may break only as a last
     resort - when the word alone can't fit a line. Unlike `anywhere`, this
     leaves normal words intact and keeps the auto-layout distribution sane,
     while still letting wide list tables shrink to their container. */
  overflow-wrap: break-word;
}

/* Below ~1280px viewport the 11-column tables' break-word min-content floor
   (~920px) no longer fits, so allow aggressive mid-word breaks instead of a
   horizontal scrollbar. */
@media (max-width: 1279px) {
  body.skin-blue .content .table > thead > tr > th,
  body.skin-blue .content .table > tbody > tr > td {
    overflow-wrap: anywhere;
  }
}

body.skin-blue .content .table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

body.skin-blue .content .table-hover > tbody > tr:hover > td,
body.skin-blue .content .table-hover > tbody > tr:hover > th {
  background: #f8faff !important;
}

/* Small statistic boxes (e.g. the Kiosks "On Site Now" footfall strip). */
body.skin-blue .mp-stat-box {
  background: #fff;
  border: 1px solid var(--mp-border, #d9dee8);
  border-radius: var(--mp-radius-sm, 8px);
  padding: 10px 14px;
  margin-bottom: 8px;
}

body.skin-blue .mp-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--mp-text, #17233c);
  line-height: 1.2;
}

body.skin-blue .mp-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #667085;
  margin-top: 2px;
}

/* Narrow windows: 11-column list tables (customers, contacts) hit the padding
   floor before the content does - compact the gutters instead of scrolling. */
@media (max-width: 1199px) {
  body.skin-blue .content .table > thead > tr > th,
  body.skin-blue .content .table > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 991px) {
  body.skin-blue .content .table > thead > tr > th,
  body.skin-blue .content .table > tbody > tr > td {
    padding-left: 5px;
    padding-right: 5px;
  }
}

body.skin-blue .content .dataTables_wrapper > .row {
  margin-right: 0;
  margin-left: 0;
  padding: 12px 16px;
}

body.skin-blue .content .dataTables_wrapper > .row:first-child {
  border-bottom: 1px solid var(--mp-border-soft);
}

body.skin-blue .content .dataTables_wrapper > .row:last-child,
body.skin-blue .datatables-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--mp-border);
  padding-top: 12px;
  margin-top: 6px;
}

/* Neutralize Bootstrap grid columns inside the bottom bar so "Showing x entries"
   hugs the left edge and the pager hugs the right edge. */
body.skin-blue .datatables-bottom > [class*="col-"] {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

body.skin-blue .content .dataTables_info {
  padding-top: 0 !important;
  color: var(--mp-muted);
  font-size: 13px;
}

/* Injected AJAX lists inside tab panes (dashboard email/SMS history, users,
   sip ...) have no grid wrapper, so their table and pagination bar hug the
   card edges. Give them the same 16px inset the list-page grids get. */
body.skin-blue .content .tab-pane > [id^="div"]:has(> .datatables-bottom) {
  padding: 0 16px 12px;
}

body.skin-blue .content .pagination {
  display: flex;
  gap: 4px;
  margin: 0;
}

body.skin-blue .content .pagination > li {
  display: block;
}

body.skin-blue .content .pagination > li > a,
body.skin-blue .content .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--mp-border) !important;
  border-radius: 6px !important;
  background: #fff;
  color: #475467;
}

body.skin-blue .content .pagination > li > a:hover,
body.skin-blue .content .pagination > li > a:focus {
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

body.skin-blue .content .pagination > .active > a,
body.skin-blue .content .pagination > .active > a:hover,
body.skin-blue .content .pagination > .active > a:focus,
body.skin-blue .content .pagination > .active > span {
  border-color: var(--mp-blue) !important;
  background: var(--mp-blue) !important;
  color: #fff !important;
}

body.skin-blue .content .pagination > .disabled > a,
body.skin-blue .content .pagination > .disabled > a:hover,
body.skin-blue .content .pagination > .disabled > a:focus {
  background: #f8fafc;
  color: #98a2b3;
}

/* The Dashboard history table already exposes the status as its final cell. */
body.skin-blue #divEmailHistory table > tbody > tr > td:last-child,
body.skin-blue #divSmsHistory table > tbody > tr > td:last-child {
  color: var(--mp-success);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Footer and responsive AdminLTE behaviour
   -------------------------------------------------------------------------- */

body.skin-blue .main-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--mp-border);
  background: #fff;
  color: var(--mp-muted);
}

@media (min-width: 768px) {
  body.skin-blue.sidebar-mini.sidebar-collapse .content-wrapper,
  body.skin-blue.sidebar-mini.sidebar-collapse .right-side,
  body.skin-blue.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 50px !important;
  }

  body.skin-blue.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 50px !important;
  }
}

@media (max-width: 991px) {
  body.skin-blue .content-header {
    padding: 16px 16px 7px;
  }

  body.skin-blue .content {
    padding: 10px 16px 20px;
  }

  /* Below 992px Bootstrap stacks the bottom-bar columns, so the pager column
     can wrap onto its own flex line - where space-between would leave a lone
     item start-aligned, stranding the pager mid-bar. Push it to the end. */
  body.skin-blue .datatables-bottom > [class*="col-"].text-right {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  body.skin-blue .main-header .logo {
    left: 50px;
    padding-right: 9px;
    padding-left: 12px;
    font-size: 18px;
  }

  body.skin-blue .main-header .navbar-custom-menu > .navbar-nav > li > a {
    min-height: 58px !important;
  }

  body.skin-blue .main-sidebar {
    top: 58px !important;
    height: calc(100vh - 58px) !important;
    transform: translate(-230px, 0);
    transition: transform .25s ease;
  }

  body.skin-blue.sidebar-open .main-sidebar {
    transform: translate(0, 0);
  }

  body.skin-blue .content-wrapper,
  body.skin-blue .right-side,
  body.skin-blue .main-footer {
    margin-left: 0 !important;
  }

  body.skin-blue .content .dataTables_wrapper > .row:last-child,
  body.skin-blue .datatables-bottom {
    display: block;
  }

  body.skin-blue .content .dataTables_wrapper > .row:last-child > [class*="col-"] + [class*="col-"],
  body.skin-blue .datatables-bottom > [class*="col-"] + [class*="col-"] {
    margin-top: 10px;
  }

  /* When the pager wraps onto its own line it must span the full bar width,
     otherwise the neutralized width:auto column leaves it stranded mid-bar. */
  body.skin-blue .datatables-bottom > [class*="col-"] {
    width: 100%;
  }

  body.skin-blue .content .pagination {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  body.skin-blue .main-header .logo {
    font-size: 16px;
  }

  body.skin-blue .content {
    padding-right: 10px;
    padding-left: 10px;
  }

  body.skin-blue .content-header {
    padding-right: 10px;
    padding-left: 10px;
  }

  /* Search bars with multiple attached buttons (input-group-btn holds e.g.
     Search + Clear) squeeze the input to a ~26px sliver on 320px screens -
     stack the input above its buttons and stretch them instead. */
  body.skin-blue .content .input-group {
    display: block;
  }

  body.skin-blue .content .input-group > input.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: var(--mp-radius-sm) !important;
    margin-bottom: 8px;
  }

  body.skin-blue .content .input-group .input-group-btn {
    display: flex;
    width: 100%;
  }

  body.skin-blue .content .input-group .input-group-btn > .btn {
    flex: 1 1 auto;
    border-radius: var(--mp-radius-sm) !important;
  }

  /* List-page box headers lay their filter columns out as floated col-xs-6/3/8
     grids, which never stack - at 320px a col-xs-6 leaves the search bar ~93px.
     Stack every header column full-width; spacing only where it holds a control
     (headers also carry empty placeholder columns). */
  body.skin-blue .content .box-header [class*="col-xs"] {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body.skin-blue .content .box-header [class*="col-xs"]:has(.form-control),
  body.skin-blue .content .box-header [class*="col-xs"]:has(.input-group) {
    margin-bottom: 8px;
  }

  /* AdminLTE absolutely positions .box-tools at the header's top-right; on
     phones a wide tool row rides over the box title, so stack it below. */
  body.skin-blue .content .box-header > .box-tools {
    position: static !important;
    float: none;
    margin-top: 10px;
  }
}

/* Clear and visible keyboard focus without affecting normal mouse use. */
body.skin-blue a:focus-visible,
body.skin-blue button:focus-visible,
body.skin-blue input:focus-visible,
body.skin-blue select:focus-visible {
  outline: 3px solid rgba(49, 88, 184, .28);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.skin-blue *,
  body.skin-blue *::before,
  body.skin-blue *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Status pills (message history) - soft background + colored text
   -------------------------------------------------------------------------- */

body.skin-blue .label,
body.skin-blue .label-pill {
  border-radius: 999px;
  padding: .32em .8em;
  font-size: 11px;
  font-weight: 600;
}

body.skin-blue .label-success {
  background: #e6f6ec !important;
  color: #157347 !important;
}

body.skin-blue .label-danger {
  background: #fdeaea !important;
  color: #b02a37 !important;
}

body.skin-blue .label-warning {
  background: #fdf3e0 !important;
  color: #9a6700 !important;
}

body.skin-blue .label-default,
body.skin-blue .label-primary,
body.skin-blue .label-info {
  background: #eef2f6 !important;
  color: #475467 !important;
}

/* --------------------------------------------------------------------------
   Modals & their forms (modals live outside .content, so form/button rules
   scoped to .content never applied - they rendered stock AdminLTE).
   -------------------------------------------------------------------------- */

body.skin-blue .modal-content {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius, 10px);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
}

body.skin-blue .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mp-border);
  background: #f8fafc;
  border-radius: var(--mp-radius, 10px) var(--mp-radius, 10px) 0 0;
}

body.skin-blue .modal-header .modal-title,
body.skin-blue .modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text);
  /* Long file names are single unbreakable tokens (acpc_admisssion_steps.pdf)
     and would overflow narrow screens - wrap anywhere instead. */
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-top: 0;
  margin-bottom: 0;
}

body.skin-blue .modal-header .close {
  opacity: .5;
}

body.skin-blue .modal-body {
  padding: 20px;
}

body.skin-blue .modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--mp-border);
  background: #f8fafc;
  border-radius: 0 0 var(--mp-radius, 10px) var(--mp-radius, 10px);
}

/* Form controls inside modals (match .content styling). */
body.skin-blue .modal .form-control,
body.skin-blue .modal select.form-control {
  height: 40px;
  border: 1px solid #d9dee8;
  border-radius: var(--mp-radius-sm, 8px);
  background: #fff;
  color: var(--mp-text);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.skin-blue .modal .form-control:focus,
body.skin-blue .modal select.form-control:focus {
  border-color: var(--mp-blue);
  box-shadow: 0 0 0 3px rgba(49, 88, 184, .12);
}

body.skin-blue .modal .input-group .form-control {
  border-radius: var(--mp-radius-sm, 8px) 0 0 var(--mp-radius-sm, 8px);
}

body.skin-blue .modal .input-group .input-group-addon + .form-control {
  border-radius: 0;
}

body.skin-blue .modal .input-group .input-group-addon + .form-control:last-child {
  border-radius: 0 var(--mp-radius-sm, 8px) var(--mp-radius-sm, 8px) 0;
}

body.skin-blue .modal .input-group .input-group-addon:first-child {
  border-radius: var(--mp-radius-sm, 8px) 0 0 var(--mp-radius-sm, 8px);
}

body.skin-blue .modal .input-group-btn > .btn:not(.btn-primary),
body.skin-blue .modal .input-group-addon {
  height: 40px;
  border-color: #d9dee8;
  background: #f8fafc;
  color: #344054;
}

body.skin-blue .modal .input-group-btn > .btn {
  border-radius: 0 var(--mp-radius-sm, 8px) var(--mp-radius-sm, 8px) 0;
  font-weight: 600;
}

body.skin-blue .modal .btn,
body.skin-blue .modal-footer .btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: var(--mp-radius-sm, 8px);
  font-weight: 600;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.skin-blue .modal .btn-default,
body.skin-blue .modal-footer .btn-default {
  border-color: #d9dee8;
  background: #fff;
  color: #344054;
}

body.skin-blue .modal .btn-default:hover,
body.skin-blue .modal .btn-default:focus,
body.skin-blue .modal-footer .btn-default:hover,
body.skin-blue .modal-footer .btn-default:focus {
  border-color: #c9d1df;
  background: #f8fafc;
  color: #17233c;
}

body.skin-blue .modal .btn-primary,
body.skin-blue .modal-footer .btn-primary {
  border-color: var(--mp-blue);
  background: var(--mp-blue);
}

body.skin-blue .modal .btn-primary:hover,
body.skin-blue .modal .btn-primary:focus,
body.skin-blue .modal-footer .btn-primary:hover,
body.skin-blue .modal-footer .btn-primary:focus {
  border-color: var(--mp-blue-dark);
  background: var(--mp-blue-dark);
}

body.skin-blue .modal .btn-success,
body.skin-blue .modal-footer .btn-success {
  border-color: #137044;
  background: #157347;
}

body.skin-blue .modal .btn-danger,
body.skin-blue .modal-footer .btn-danger {
  border-color: #b02a37;
  background: #b02a37;
}

body.skin-blue .modal .has-error .form-control,
body.skin-blue .modal .form-control.error {
  border-color: #b02a37;
}

body.skin-blue .modal label.error {
  color: #b02a37;
  font-size: 12px;
}

/* Select2 dropdowns (used across customers/contacts/offices pages). */
/* select2 copies the native select's .form-control class onto its container;
   neutralise Bootstrap's box there so the widget's own .select2-choice is the
   single visible border. Otherwise you get a bordered box-in-a-box with ~13px
   of dead space around the arrow (looks like a stray input behind it), and a
   fixed inline width that stops short of the column. */
body.skin-blue .select2-container.form-control {
  height: auto;
  width: 100% !important; /* overrides select2's inline width so it always fills its column */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.skin-blue .select2-container .select2-choice {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #d9dee8;
  border-radius: var(--mp-radius-sm, 8px);
  background: #fff;
  color: var(--mp-text);
  font-size: 14px;
  line-height: 24px;
}

body.skin-blue .select2-container .select2-choice .select2-arrow {
  width: 28px;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bootstrap-style caret: plain triangle, no sprite, no box around it. */
body.skin-blue .select2-container .select2-choice .select2-arrow b {
  background: none;
  width: 0;
  height: 0;
  display: block;
  margin: 0;
  border-top: 4px solid var(--mp-muted, #667085);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

body.skin-blue .select2-container-active .select2-choice,
body.skin-blue .select2-container.select2-dropdown-open .select2-choice {
  border-color: var(--mp-blue);
  box-shadow: 0 0 0 3px rgba(49, 88, 184, .12);
}

body.skin-blue .select2-dropdown-open .select2-choice .select2-arrow {
  border-radius: 0 var(--mp-radius-sm, 8px) 0 0;
}

body.skin-blue .select2-drop {
  border: 1px solid var(--mp-border);
  border-radius: 0 0 var(--mp-radius-sm, 8px) var(--mp-radius-sm, 8px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}

body.skin-blue .select2-drop .select2-results li {
  color: var(--mp-text);
}

body.skin-blue .select2-drop .select2-results .select2-highlighted {
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

body.skin-blue .select2-search input {
  border: 1px solid #d9dee8;
  border-radius: 6px;
}

body.skin-blue .select2-container-multi .select2-choices {
  border: 1px solid #d9dee8;
  border-radius: var(--mp-radius-sm, 8px);
  background: #fff;
}

body.skin-blue .select2-container-multi .select2-choices .select2-search-choice {
  border: 1px solid var(--mp-border);
  border-radius: 999px;
  background: #eef3ff;
  color: var(--mp-blue);
}

/* --------------------------------------------------------------------------
   Login pages (front + customer portal)
   A rounded blue parent card holds the MessagePad logo at the top and the
   rounded white form card (inputs + Sign In) inside it. The page itself
   stays a neutral light gray.
   -------------------------------------------------------------------------- */
body.login-page {
  background: #f4f7fb;
}

/* The whole .login-box is the blue parent card. Its padding provides the
   margin between the blue edge, the logo and the white form card. */
body.login-page .login-box {
  width: 420px;
  max-width: 90%;
  padding: 10px 38px 38px;
  border-radius: 18px;
  background: linear-gradient(160deg, #3158b8 0%, #274799 100%);
  box-shadow: 0 18px 48px rgba(29, 55, 120, .30);
}

body.login-page .login-logo {
  padding: 22px 0 18px;
  margin-bottom: 0;
  color: #fff;
  font-size: 26px;
  text-align: center;
}

body.login-page .login-box-body {
  padding: 30px 30px 26px;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
}

body.login-page .login-box-msg {
  padding: 0 0 18px;
  color: var(--mp-muted);
  font-size: 14px;
}

body.login-page .form-control {
  height: 42px;
  border: 1px solid #d9dee8;
  border-radius: var(--mp-radius-sm);
  background: #fff;
  color: var(--mp-text);
  box-shadow: none;
}

/* Keep the action row inside the card instead of butting against its edge
   (Bootstrap's negative row margins would otherwise override the padding). */
body.login-page .login-box-body .row {
  margin-right: 0;
  margin-left: 0;
  margin-top: 16px;
  margin-bottom: 2px;
}

body.login-page .login-box-body .row > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

body.login-page .form-control:focus {
  border-color: var(--mp-blue);
  box-shadow: 0 0 0 3px rgba(49, 88, 184, .12);
}

body.login-page .btn-primary {
  height: 42px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

body.login-page .btn-primary:hover,
body.login-page .btn-primary:focus {
  background: var(--mp-blue-dark);
  color: #fff;
}

body.login-page a {
  color: var(--mp-blue);
}

/* Input feedback icons sit inside the input - align them. jQuery Validate
   inserts the error <label> into the form-group, which triggers Bootstrap's
   .has-feedback label ~ .form-control-feedback { top: 25px } rule and drops
   the icon out of the input - pin it back to the field at all times. */
body.login-page .form-control-feedback,
body.login-page .has-feedback label ~ .form-control-feedback {
  top: 0;
  height: 42px;
  line-height: 42px;
  color: var(--mp-muted);
}

/* Phone sizing - placed after the desktop rules so it wins the cascade.
   Tighter blue-card padding, slimmer white-card padding (the desktop values
   leave only ~190px for inputs on a 320px screen), and the action row's 25%
   button column becomes a cramped ~53px tap target, so the button stretches
   full-width instead. */
@media (max-width: 480px) {
  body.login-page .login-box {
    padding: 6px 18px 24px;
  }

  body.login-page .login-box-body {
    padding: 24px 20px 20px;
  }

  body.login-page .login-box-body .col-xs-4 {
    width: 100%;
  }

  body.login-page .login-box-body .btn-primary {
    width: 100%;
  }
}

/* Error state: soft red border + red icon instead of the plain theme border
   (the theme's base input rule otherwise out-specifies Bootstrap's red).
   jQuery Validate marks fields with .error (and .valid after correction) -
   style those directly so the field itself signals the problem. */
body.login-page .form-control.error {
  border-color: #d9534f;
}

body.login-page .form-control.error:focus {
  box-shadow: 0 0 0 3px rgba(217, 83, 79, .12);
}

body.login-page .has-error .form-control-feedback,
body.login-page .form-control.error + .form-control-feedback,
body.login-page .form-control.error ~ .form-control-feedback {
  color: #d9534f;
}

/* Validation error labels: soft tinted pill instead of custom.css's dark red
   tooltip (its ::after arrow is neutralized by rendering it transparent). */
body.login-page .form-group label.error,
body.login-page label.error {
  position: relative;
  top: 4px;
  margin: 8px 0 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fdecec;
  color: #b02a37;
  font-size: 12px;
  font-weight: 600;
  text-shadow: none;
  text-align: left;
  box-shadow: none;
}

body.login-page .form-group label.error::after,
body.login-page label.error::after {
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Postcode address autocomplete (registration form + customer pages)
   custom.css provides the functional positioning; these rules only restyle it.
   -------------------------------------------------------------------------- */
body.skin-blue .address-results,
#address_results {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;                      /* scroll bar for long address lists */
  overscroll-behavior: contain;          /* scrolling the list doesn't scroll the page */
  scrollbar-color: #9aa5b5 #f1f4f9;      /* always-visible, on-brand scroll bar */
}

body.skin-blue .address-results .list-group-item,
#address_results .list-group-item {
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--mp-border-soft);
  color: var(--mp-text);
}

body.skin-blue .address-results .list-group-item:last-child,
#address_results .list-group-item:last-child {
  border-bottom: 0;
}

body.skin-blue .address-results .list-group-item:hover,
#address_results .list-group-item:hover {
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
}

body.skin-blue .address-results strong,
#address_results strong {
  color: var(--mp-blue);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Registration form boxes (box-primary/danger/success/warning/info variants)
   The theme already flattens boxes inside .content; give the colored variants
   a soft left accent instead of AdminLTE's heavy solid top border.
   -------------------------------------------------------------------------- */
body.skin-blue .content .box.box-primary,
body.skin-blue .content .box.box-danger,
body.skin-blue .content .box.box-success,
body.skin-blue .content .box.box-warning,
body.skin-blue .content .box.box-info {
  border-top: 1px solid var(--mp-border) !important;
}

body.skin-blue .content .box.box-primary > .box-header,
body.skin-blue .content .box.box-danger > .box-header,
body.skin-blue .content .box.box-success > .box-header,
body.skin-blue .content .box.box-warning > .box-header,
body.skin-blue .content .box.box-info > .box-header {
  border-top: 3px solid var(--mp-blue);
  border-radius: var(--mp-radius) var(--mp-radius) 0 0;
}

body.skin-blue .content .box.box-danger > .box-header {
  border-top-color: #d9534f;
}

body.skin-blue .content .box.box-success > .box-header {
  border-top-color: var(--mp-success);
}

body.skin-blue .content .box.box-warning > .box-header {
  border-top-color: #f0ad4e;
}

body.skin-blue .content .box.box-info > .box-header {
  border-top-color: #00c0ef;
}

/* Registration uses plain labels above inputs - keep them crisp and muted. */
body.skin-blue .content .control-label {
  color: var(--mp-text);
  font-weight: 500;
}

/* Emails are arbitrary HTML - without containment a width="600" table or a
   large image inside a message blows the reader modal out sideways on phones. */
.mp-email-body {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mp-email-body table {
  max-width: 100%;
}

.mp-email-body img {
  max-width: 100%;
  height: auto;
}

.mp-email-body pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Side menu: room at the bottom only for the subscription box when it shows, so
   the menu scrolls only when it really is longer than the screen. */
body.skin-blue .main-sidebar .sidebar-menu { padding-bottom: 96px !important; }
body.skin-blue.mp-hide-subscription .main-sidebar .sidebar-menu { padding-bottom: 12px !important; }