/* XD theme overlay for AHR Messaging (style-only; no behavior changes) */

:root {
  --ahr-purple: #52359F;
  --ahr-teal: #05898E;
  --ahr-mint: #DCF0E4;
  --ahr-gray: #656565;
  --ahr-lavender: #E9E7DD;
  --ahr-border: #C0B0C1;
  --ahr-pill: #8BCEBF;
  --ahr-dark: #302F32;
}

/* Background pattern */
body.ahr-app {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  position: relative;
  min-height: 100vh;
}
body.ahr-app::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/static/xd/background-pattern.svg");
  background-repeat: repeat;
  background-size: 900px auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
main.container {
  position: relative;
  z-index: 1;
}

/* ----------------------------
   Login page (matches XD)
   Note: visual-only. Form fields + POST behavior are unchanged.
----------------------------- */
.ahr-login-wrap{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 46px;
  padding: 54px 16px 46px;
}

.ahr-login-card{
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ahr-login-logo img{
  width: min(520px, 92vw);
  max-width: 520px;
  height: auto;
}

.ahr-login-title{
  margin-top: 10px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 22px;
  color: var(--ahr-gray);
}

.ahr-login-form{
  width: min(420px, 88vw);
}

.ahr-login-label{
  font-weight: 700;
  font-size: 13px;
  color: var(--ahr-teal);
  margin-left: 8px;
}

.ahr-login-input{
  border-radius: 999px;
  border: 1px solid rgba(5,137,142,.45);
  padding: 10px 16px;
  font-size: 16px;
  background: rgba(255,255,255,.92);
}
.ahr-login-input:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16);
  border-color: rgba(82,53,159,.45);
}

.ahr-login-btn{
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--ahr-purple);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.ahr-login-btn:hover{ opacity: .95; }
.ahr-login-btn i{ font-size: 18px; }

.ahr-login-powered{
  text-align: center;
  color: var(--ahr-teal);
}
.ahr-login-powered-label{
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 6px;
}
.ahr-login-powered-brand img{
  height: 52px;
  width: auto;
}

/* Match XD's centered content width a bit tighter */
@media (min-width: 992px) {
  main.container {
    max-width: 1040px;
  }
}

/* Navbar: mint left segment + purple right segment */
.ahr-xd-navbar {
  padding: 0;
  position: relative;
  z-index: 2;
  background: var(--ahr-mint);
}
.ahr-xd-nav-container{
  padding-left: 18px;
  padding-right: 18px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ahr-xd-brand {
  display: flex;
  align-items: center;
  margin-right: 14px;
  padding: 10px 0;
}
.ahr-xd-brand-logo {
  height: 44px;
  width: auto;
}

/* Main nav links with icons above labels */
.ahr-xd-nav-main {
  align-items: center;
  gap: 6px;
}
.ahr-xd-navlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  color: var(--ahr-teal) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.1;
}
.ahr-xd-navlink:hover {
  opacity: 0.9;
}
.ahr-xd-navicon {
  height: 26px;
  width: 26px;
  margin-bottom: 4px;
}
.ahr-xd-navlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ahr-xd-badge {
  background: var(--ahr-purple);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 8px;
}

/* Admin dropdown should still be usable */
.ahr-xd-navbar .dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Right segment */
.ahr-xd-nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.ahr-xd-username {
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahr-xd-gear,
.ahr-xd-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.ahr-xd-gear{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  text-decoration:none;
}
.ahr-xd-gear i {
  font-size: 18px;
}

.ahr-xd-logout {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.ahr-xd-search input {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: #fff;
  padding-left: 14px;
  padding-right: 14px;
  min-width: 240px;
}

/* Make toggler visible on mint background */
.ahr-xd-navbar .navbar-toggler {
  border-color: rgba(0,0,0,.2);
}
.ahr-xd-navbar .navbar-toggler-icon {
  filter: invert(0);
}

/* Cards / panels: softer, XD-like */
.card {
  border-radius: 18px;
  border: 1px solid rgba(82,53,159,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.card .card-body {
  border-radius: 18px;
}

/* Patient Records page tabs */
#patientRecordsTabs.nav-tabs {
  border-bottom: 0;
  margin-top: 12px;
}
#patientRecordsTabs .nav-link {
  border: 1px solid rgba(82,53,159,.25);
  border-bottom: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--ahr-teal);
  background: rgba(255,255,255,.55);
}
#patientRecordsTabs .nav-link.active {
  background: var(--ahr-purple);
  color: #fff;
}
#patientRecordsTabsContent .card {
  border-top-left-radius: 0;
}

/* Buttons to match XD palette */
.btn-outline-primary {
  --bs-btn-color: var(--ahr-teal);
  --bs-btn-border-color: rgba(5,137,142,.35);
  --bs-btn-hover-bg: rgba(5,137,142,.10);
  --bs-btn-hover-border-color: rgba(5,137,142,.55);
}
.btn-primary {
  --bs-btn-bg: var(--ahr-purple);
  --bs-btn-border-color: var(--ahr-purple);
  --bs-btn-hover-bg: #452a88;
  --bs-btn-hover-border-color: #452a88;
}

/* Flags pill styling */
#patient-meta ~ .card .badge.bg-warning,
#patient-meta ~ .card .badge.bg-danger,
#patient-meta ~ .card .badge.bg-secondary,
#patient-meta ~ .card .badge.bg-primary {
  border-radius: 999px;
}

/* Headings */
h3, .h5, h5 {
  color: #000;
}

/* Footer */
.ahr-xd-footer {
  position: relative;
  z-index: 1;
  padding: 18px 0 28px;
}
.ahr-xd-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}
.ahr-xd-footer-powered {
  color: var(--ahr-teal);
  font-style: italic;
  font-size: 13px;
}
.ahr-xd-footer-logo {
  height: 54px;
  width: auto;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .ahr-xd-navbar {
    background: var(--ahr-mint);
  }
  .ahr-xd-nav-right {
    background: var(--ahr-purple);
    padding: 12px;
    border-radius: 14px;
    margin-top: 10px;
  }
  .ahr-xd-search input {
    min-width: 180px;
    width: 100%;
  }
  .ahr-xd-navlink {
    flex-direction: row;
    justify-content: flex-start;
  }
  .ahr-xd-navicon {
    margin-bottom: 0;
    margin-right: 10px;
  }
}


/* Right: user badge (mint area) + purple action bar */
.ahr-xd-nav-right{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 8px 0;
}
.ahr-xd-userbadge{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  font-size: 13px;
  color: var(--ahr-teal);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(5,137,142,.25);
}
.ahr-xd-nav-purple{
  display:flex;
  align-items:center;
  gap: 12px;
  background: var(--ahr-purple);
  padding: 8px 12px;
  border-radius: 12px;
}

/* XD accordions (patient records details) */
.ahr-xd-accordion{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(82,53,159,.25);
  background: rgba(255,255,255,.65);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.ahr-xd-acc-item{
  border: 0;
  border-top: 1px solid rgba(82,53,159,.14);
}
.ahr-xd-acc-item:first-child{ border-top: 0; }
.ahr-xd-acc-btn{
  background: rgba(82,53,159,.10) !important;
  color: var(--ahr-purple) !important;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 20px;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.ahr-xd-acc-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(5,137,142,.20);
}
.ahr-xd-acc-btn::after{ display:none !important; }
.ahr-xd-acc-title{ flex: 1 1 auto; }
.ahr-xd-acc-icon{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ahr-purple);
  position: relative;
  flex: 0 0 auto;
}
.ahr-xd-acc-icon::before,
.ahr-xd-acc-icon::after{
  content:"";
  position:absolute;
  background:#fff;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.ahr-xd-acc-icon::before{ width: 12px; height: 2px; }
.ahr-xd-acc-icon::after{ width: 2px; height: 12px; }
.ahr-xd-acc-btn:not(.collapsed) .ahr-xd-acc-icon::after{ display:none; } /* minus when open */

.ahr-xd-acc-body{
  background: #fff;
  padding: 18px 18px 8px 18px;
}
.ahr-xd-acc-body .row.g-2.small{ font-size: 16px; }
.ahr-xd-acc-body strong{
  color: var(--ahr-purple);
  font-weight: 700;
}
.ahr-xd-acc-body .text-muted{ color: var(--ahr-teal) !important; }

/* Flags row pills */
.ahr-xd-flags strong{ color: var(--ahr-gray); }
.ahr-xd-flags .badge{
  background: #5e5e5e !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  letter-spacing: .2px;
}
.ahr-xd-flags .badge.bg-danger{ background:#F88379 !important; }
.ahr-xd-flags .badge.bg-warning{ background:#5e5e5e !important; color:#fff !important; }
.ahr-xd-flags .btn-close{
  filter: invert(1);
  opacity: .75;
}
.ahr-xd-flags .btn-close:hover{ opacity: 1; }

/* Care Team / Media tabs */
.ahr-xd-bottom-tabs{
  margin-top: 14px;
  border-bottom: 0;
  gap: 6px;
}
.ahr-xd-bottom-tabs .nav-link{
  border: 1px solid rgba(82,53,159,.25);
  border-bottom: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 10px 16px;
  font-weight: 800;
  color: var(--ahr-teal);
  background: rgba(255,255,255,.70);
}
.ahr-xd-bottom-tabs .nav-link.active{
  color: #fff;
  background: var(--ahr-purple);
  border-color: var(--ahr-purple);
}
.ahr-xd-bottom-tabs-content{
  border: 1px solid rgba(82,53,159,.25);
  border-radius: 0 14px 14px 14px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.ahr-xd-bottom-tabs-content .card{
  border: 0;
  box-shadow: none;
}
.ahr-xd-bottom-tabs-content h5{
  color: var(--ahr-purple);
  font-weight: 800;
}

/* Patient List (home) */
body.ahr-app h2{
  font-size: 36px;
  font-weight: 600;
  color: #000;
}
body.ahr-app label.form-label{
  color: var(--ahr-gray);
  font-weight: 600;
}
body.ahr-app .form-control, body.ahr-app .form-select{
  border-radius: 12px;
  border: 1px solid rgba(82,53,159,.22);
}
body.ahr-app .form-control:focus, body.ahr-app .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(5,137,142,.20);
  border-color: rgba(5,137,142,.55);
}
table#patientsTable{
  border: 1px solid rgba(82,53,159,.18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
}
table#patientsTable thead th{
  color: var(--ahr-purple);
  font-weight: 800;
  background: rgba(82,53,159,.10);
  border-bottom: 1px solid rgba(82,53,159,.18);
}
table#patientsTable tbody td{
  color: var(--ahr-teal);
}
table#patientsTable tbody tr:hover{
  background: rgba(220,240,228,.55);
}
.status-pill{
  background: rgba(5,137,142,.10);
  color: var(--ahr-teal);
  border: 1px solid rgba(5,137,142,.25);
  font-weight: 700;
}

/* ----------------------------
   Staff Chats page (matches XD screenshot)
   Visual-only. JS behavior + links are unchanged.
----------------------------- */
.ahr-xd-staff-chats{
  max-width: 980px;
  margin: 0 auto;
}
.ahr-xd-staff-chats h2{
  font-size: 36px;
  font-weight: 600;
  color: var(--ahr-gray);
  margin-bottom: 14px !important;
}

/* Toggle pills */
.ahr-xd-staff-chats .toggle-buttons{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px !important;
}
.ahr-xd-staff-chats .toggle-buttons .btn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(5,137,142,.35) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--ahr-teal) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.ahr-xd-staff-chats .toggle-buttons .btn:focus{
  box-shadow: 0 0 0 .2rem rgba(5,137,142,.18);
}
/* keep unread badge but make it XD-like */
.ahr-xd-staff-chats .toggle-buttons .badge{
  background: var(--ahr-purple) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}
/* icon bubbles */
.ahr-xd-staff-chats #show-private-section::before,
.ahr-xd-staff-chats #show-group-section::before{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ahr-purple);
  display: inline-block;
  margin-right: 8px;
  vertical-align: -3px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
.ahr-xd-staff-chats #show-private-section::before{ background-image: url('xd/icon-user.svg'); }
.ahr-xd-staff-chats #show-group-section::before{ background-image: url('xd/icon-users.svg'); }

/* Card styling */
.ahr-xd-staff-chats .card.table-section{
  border-radius: 18px;
  border: 1px solid rgba(5,137,142,.35);
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.ahr-xd-staff-chats .card-header{
  background: transparent;
  border-bottom: none;
  padding: 18px 22px 10px 22px;
}
.ahr-xd-staff-chats .card-header strong{
  color: var(--ahr-teal);
  font-size: 22px;
  font-weight: 800;
}
.ahr-xd-staff-chats .card-body{
  padding: 10px 22px 22px 22px;
}

/* Unread-only switch (page-scoped so other checkboxes unaffected) */
.ahr-xd-staff-chats #staff-unread-only,
.ahr-xd-staff-chats #group-unread-only{
  width: 38px;
  height: 20px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(82,53,159,.25);
  border: 1px solid rgba(82,53,159,.35);
  position: relative;
  cursor: pointer;
  outline: none;
}
.ahr-xd-staff-chats #staff-unread-only::after,
.ahr-xd-staff-chats #group-unread-only::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: left .15s ease;
}
.ahr-xd-staff-chats #staff-unread-only:checked,
.ahr-xd-staff-chats #group-unread-only:checked{
  background: var(--ahr-purple);
  border-color: rgba(82,53,159,.55);
}
.ahr-xd-staff-chats #staff-unread-only:checked::after,
.ahr-xd-staff-chats #group-unread-only:checked::after{
  left: 20px;
}
.ahr-xd-staff-chats .form-check-label{
  color: var(--ahr-purple);
  font-weight: 700;
  font-size: 12px;
}

/* Table look */
.ahr-xd-staff-chats table.dataTable,
.ahr-xd-staff-chats table.table{
  border: none !important;
  width: 100% !important;
}
.ahr-xd-staff-chats table thead th{
  background: rgba(220,240,228,.75) !important;
  color: var(--ahr-teal) !important;
  font-weight: 800;
  border-bottom: none !important;
}
.ahr-xd-staff-chats table tbody td{
  color: rgba(48,47,50,.80);
  border-top: none !important;
}
.ahr-xd-staff-chats table.table-striped>tbody>tr:nth-of-type(odd)>
*{
  background: rgba(245,245,245,.85);
}

/* Staff name link + avatar bubble */
.ahr-xd-staff-chats a.clickable-name{
  color: rgba(48,47,50,.85);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ahr-xd-staff-chats a.clickable-name::before{
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(180,180,180,.55);
  background-image: url('xd/icon-user.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

/* Unread count pill inside name */
.ahr-xd-staff-chats a.clickable-name .badge{
  background: var(--ahr-purple) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 800;
}

/* Sort arrows matching XD (Name + Email only) */
.ahr-xd-staff-chats #staff-table thead th{
  position: relative;
}
.ahr-xd-staff-chats #staff-table thead th:nth-child(1)::after,
.ahr-xd-staff-chats #staff-table thead th:nth-child(2)::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url('/static/xd/icon-compare-arrows.svg') center/contain no-repeat;
  opacity: .9;
  pointer-events: none;
}

/* DataTables chrome */
.ahr-xd-staff-chats .dataTables_info,
.ahr-xd-staff-chats .dataTables_paginate{
  margin-top: 10px;
  color: var(--ahr-gray);
}
.ahr-xd-staff-chats .dataTables_paginate .paginate_button{
  border-radius: 10px !important;
  border: 1px solid rgba(5,137,142,.25) !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--ahr-teal) !important;
}
.ahr-xd-staff-chats .dataTables_paginate .paginate_button.current,
.ahr-xd-staff-chats .dataTables_paginate .paginate_button.current:hover{
  background: rgba(82,53,159,.12) !important;
  border-color: rgba(82,53,159,.35) !important;
  color: var(--ahr-purple) !important;
}

/* Make the extra filter box subtle (keeps functionality) */
.ahr-xd-staff-chats #staff-search,
.ahr-xd-staff-chats #group-participants-search{
  border-radius: 999px;
  border: 1px solid rgba(5,137,142,.25);
  padding-left: 14px;
}

/* Mobile fixes: keep header controls tidy + allow table to scroll on small screens */
@media (max-width: 576px){
  /* Stack header rows so the toggle + filter input don't collide */
  .ahr-xd-staff-chats .card-header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ahr-xd-staff-chats .card-header > .d-flex{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .ahr-xd-staff-chats .form-check{
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ahr-xd-staff-chats .form-check-label{
    line-height: 1.1;
  }

  /* Let the table be horizontally scrollable on narrow screens */
  .ahr-xd-staff-chats .card-body{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ahr-xd-staff-chats #staff-search,
  .ahr-xd-staff-chats #group-participants-search{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* A little minimum width so columns don't collapse to unreadable */
  .ahr-xd-staff-chats #staff-table,
  .ahr-xd-staff-chats #group-chats-table{
    min-width: 520px;
  }
}


/* ----------------------------
   Patient List (home) — XD styling overlay (no behavior changes)
----------------------------- */
.ahr-xd-patient-list h2{
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  color: var(--ahr-gray);
}
.ahr-xd-patient-list .form-label{
  font-weight: 700;
  font-size: 14px;
  color: var(--ahr-teal);
  margin-left: 10px;
}
.ahr-xd-patient-list #globalSearch,
.ahr-xd-patient-list #statusFilter{
  border-radius: 999px;
  border: 1px solid rgba(5,137,142,.45);
  background: rgba(255,255,255,.92);
  padding: 10px 14px;
}

.ahr-xd-patient-list #statusFilter{
  padding-left: 44px;
  background-image: url("/static/xd/icon-status.svg");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px 18px;
}

.ahr-xd-patient-list #globalSearch:focus,
.ahr-xd-patient-list #statusFilter:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16);
  border-color: rgba(82,53,159,.45);
}

/* Unread-only switch (scoped) */
.ahr-xd-patient-list #unreadOnly{
  width: 38px;
  height: 20px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(82,53,159,.25);
  border: 1px solid rgba(82,53,159,.35);
  position: relative;
  cursor: pointer;
  outline: none;
}
.ahr-xd-patient-list #unreadOnly::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: left .15s ease;
}
.ahr-xd-patient-list #unreadOnly:checked{
  background: var(--ahr-purple);
  border-color: rgba(82,53,159,.6);
}
.ahr-xd-patient-list #unreadOnly:checked::after{ left: 20px; }

.ahr-xd-patient-list .form-check-label{
  font-weight: 700;
  color: var(--ahr-purple);
  margin-left: 10px;
  margin-bottom: 0;
}

/* Table wrapper card */
.ahr-xd-patient-list .table-responsive{
  border-radius: 18px;
  border: 1px solid rgba(5,137,142,.35);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  padding: 14px 14px 6px 14px;
}

/* Table header tint + sort icon */
.ahr-xd-patient-list table#patientsTable{
  margin-bottom: 0;
}
.ahr-xd-patient-list table#patientsTable thead th{
  background: rgba(220,240,228,.85);
  color: var(--ahr-teal);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 0;
  position: relative;
  padding-right: 28px;
}
.ahr-xd-patient-list table#patientsTable thead th.sorting,
.ahr-xd-patient-list table#patientsTable thead th.sorting_asc,
.ahr-xd-patient-list table#patientsTable thead th.sorting_desc{
  background-image: url("/static/xd/icon-compare-arrows.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}

/* DataTables adds its own pseudo icons; hide them to keep XD look */
.ahr-xd-patient-list table.dataTable thead .sorting:before,
.ahr-xd-patient-list table.dataTable thead .sorting:after,
.ahr-xd-patient-list table.dataTable thead .sorting_asc:before,
.ahr-xd-patient-list table.dataTable thead .sorting_asc:after,
.ahr-xd-patient-list table.dataTable thead .sorting_desc:before,
.ahr-xd-patient-list table.dataTable thead .sorting_desc:after{
  display: none !important;
}

/* Rows */
.ahr-xd-patient-list table#patientsTable tbody td{
  vertical-align: middle;
  font-size: 13px;
}
.ahr-xd-patient-list table#patientsTable tbody tr:nth-child(even){
  background: rgba(0,0,0,.03);
}

/* Status pills */
.ahr-xd-patient-list .status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 120px;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 12px;
  border: 0 !important;
}
.ahr-xd-patient-list .status-pill.bg-light.text-dark.border{
  background: #8BCEBF !important;
  color: #fff !important;
}
.ahr-xd-patient-list .status-pill.bg-secondary{
  background: #656565 !important;
  color: #fff !important;
}
.ahr-xd-patient-list .status-pill.bg-success{
  background: var(--ahr-teal) !important;
  color: #fff !important;
}
.ahr-xd-patient-list .status-pill.bg-warning{
  background: #AEA27E !important;
  color: #fff !important;
}
.ahr-xd-patient-list .status-pill.bg-dark{
  background: #302F32 !important;
  color: #fff !important;
}

/* Action buttons */
.ahr-xd-patient-list #patientsTable .btn.btn-primary{
  background: var(--ahr-teal) !important;
  border-color: var(--ahr-teal) !important;
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
  font-weight: 700;
}
.ahr-xd-patient-list #patientsTable .btn.btn-outline-secondary{
  border-radius: 999px;
  border-color: rgba(0,0,0,.25) !important;
  color: #555 !important;
  padding-left: 14px;
  padding-right: 14px;
  background: rgba(255,255,255,.85);
}
.ahr-xd-patient-list #patientsTable .btn.btn-outline-secondary:hover{
  background: rgba(0,0,0,.04);
}

/* Pagination + info */
.ahr-xd-patient-list .dataTables_info{
  color: var(--ahr-teal);
  font-size: 12px;
  margin-top: 8px;
}
.ahr-xd-patient-list .dataTables_paginate .pagination{
  gap: 6px;
}
.ahr-xd-patient-list .dataTables_paginate .page-link{
  border-radius: 10px !important;
  border: 1px solid rgba(5,137,142,.25);
  color: var(--ahr-teal);
}
.ahr-xd-patient-list .dataTables_paginate .page-item.active .page-link{
  background: rgba(5,137,142,.14);
  border-color: rgba(5,137,142,.35);
  color: var(--ahr-teal);
}

/* DataTables empty message bar */
.ahr-xd-patient-list table.dataTable tbody td.dataTables_empty{
  background: rgba(82,53,159,.85);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px !important;
  text-align: left;
}



/* ----------------------------
   Tasks (my_tasks) — XD styling overlay (no behavior changes)
----------------------------- */
.ahr-xd-my-tasks h2{
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  color: var(--ahr-gray);
  margin-bottom: 14px;
}
.ahr-xd-my-tasks .btn-group .btn{
  border-radius: 999px !important;
  padding: 10px 20px;
  font-weight: 600;
  border-width: 1px;
}
.ahr-xd-my-tasks .btn-group .btn.btn-primary{
  background: var(--ahr-purple);
  border-color: var(--ahr-purple);
}
.ahr-xd-my-tasks .btn-group .btn.btn-outline-primary{
  color: var(--ahr-teal);
  border-color: rgba(5,137,142,.45);
  background: rgba(255,255,255,.92);
}
.ahr-xd-my-tasks .btn-group{
  gap: 10px;
}

/* DataTables controls layout */
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_length,
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_filter{
  margin: 10px 0;
}
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_length select{
  border-radius: 999px;
  border: 1px solid rgba(5,137,142,.45);
  padding: 6px 12px;
  background: rgba(255,255,255,.92);
}
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_filter input{
  border-radius: 999px;
  border: 1px solid rgba(5,137,142,.45);
  padding: 8px 14px;
  background: rgba(255,255,255,.92);
}
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_filter input:focus,
.ahr-xd-my-tasks .dataTables_wrapper .dataTables_length select:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16);
  border-color: rgba(82,53,159,.45);
  outline: none;
}

/* Table card */
.ahr-xd-my-tasks .dataTables_wrapper{
  border-radius: 18px;
  border: 1px solid rgba(5,137,142,.35);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  padding: 14px;
}
.ahr-xd-my-tasks table#tasksTable thead th{
  background: rgba(220,240,228,.85);
  color: var(--ahr-teal);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 0;
  position: relative;
  padding-right: 28px;
}
.ahr-xd-my-tasks table#tasksTable thead th.sorting,
.ahr-xd-my-tasks table#tasksTable thead th.sorting_asc,
.ahr-xd-my-tasks table#tasksTable thead th.sorting_desc{
  background-image: url("/static/xd/icon-compare-arrows.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.ahr-xd-my-tasks table.dataTable thead .sorting:before,
.ahr-xd-my-tasks table.dataTable thead .sorting:after,
.ahr-xd-my-tasks table.dataTable thead .sorting_asc:before,
.ahr-xd-my-tasks table.dataTable thead .sorting_asc:after,
.ahr-xd-my-tasks table.dataTable thead .sorting_desc:before,
.ahr-xd-my-tasks table.dataTable thead .sorting_desc:after{
  display: none !important;
}
.ahr-xd-my-tasks table#tasksTable tbody tr:nth-child(even){
  background: rgba(0,0,0,.03);
}

/* "No tasks" banner */
.ahr-xd-my-tasks .alert-success{
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(90deg, rgba(5,137,142,.95), rgba(139,206,191,.95));
  padding: 16px 18px;
  font-weight: 700;
}


/* ===== DataTables sort icon (XD compare-arrows) =====
   Visual-only override: hides default DataTables sorting indicators and shows the XD compare-arrows icon.
   Supports DataTables 1.x (sorting / sorting_asc) and DataTables 2.x (dt-orderable / dt-ordering + dt-column-order span).
*/
.ahr-xd-patient-list table.dataTable thead th,
.ahr-xd-my-tasks table.dataTable thead th{
  position: relative;
  padding-right: 30px !important; /* room for icon */
}

/* Hide DataTables built-in sort indicators (dt-1.x pseudo, dt-2.x pseudo) */
.ahr-xd-patient-list table.dataTable thead th::before,
.ahr-xd-patient-list table.dataTable thead th::after,
.ahr-xd-my-tasks table.dataTable thead th::before,
.ahr-xd-my-tasks table.dataTable thead th::after{
  display: none !important;
  content: none !important;
}

/* If DataTables 2.x inserts a dt-column-order span, hide any built-in marker and replace with our icon */
.ahr-xd-patient-list table.dataTable thead th span.dt-column-order{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  background: url('/static/xd/icon-compare-arrows.svg') center/contain no-repeat;
  opacity: .9;
  vertical-align: middle;
}
.ahr-xd-patient-list table.dataTable thead th span.dt-column-order::before,
.ahr-xd-patient-list table.dataTable thead th span.dt-column-order::after{
  display: none !important;
  content: none !important;
}

/* Add XD compare-arrows icon to sortable headers (dt-1.x classes) */
.ahr-xd-patient-list table.dataTable thead th.sorting::after,
.ahr-xd-patient-list table.dataTable thead th.sorting_asc::after,
.ahr-xd-patient-list table.dataTable thead th.sorting_desc::after,
.ahr-xd-my-tasks table.dataTable thead th.sorting::after,
.ahr-xd-my-tasks table.dataTable thead th.sorting_asc::after,
.ahr-xd-my-tasks table.dataTable thead th.sorting_desc::after{
  content: "";
  display: block !important;
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url('/static/xd/icon-compare-arrows.svg') center/contain no-repeat;
  opacity: .9;
  pointer-events: none;
}

/* Add XD compare-arrows icon to sortable headers (dt-2.x classes) */
.ahr-xd-patient-list table.dataTable thead th.dt-orderable-asc::after,
.ahr-xd-patient-list table.dataTable thead th.dt-orderable-desc::after,
.ahr-xd-patient-list table.dataTable thead th.dt-ordering-asc::after,
.ahr-xd-patient-list table.dataTable thead th.dt-ordering-desc::after{
  content: "";
  display: block !important;
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url('/static/xd/icon-compare-arrows.svg') center/contain no-repeat;
  opacity: .9;
  pointer-events: none;
}

/* Optional: make active sort a touch stronger (still purely visual) */
.ahr-xd-patient-list table.dataTable thead th.sorting_asc::after,
.ahr-xd-patient-list table.dataTable thead th.sorting_desc::after,
.ahr-xd-patient-list table.dataTable thead th.dt-ordering-asc::after,
.ahr-xd-patient-list table.dataTable thead th.dt-ordering-desc::after,
.ahr-xd-my-tasks table.dataTable thead th.sorting_asc::after,
.ahr-xd-my-tasks table.dataTable thead th.sorting_desc::after{
  opacity: 1;
}


/* ==============================
   Schedule page (XD)
   ============================== */
.ahr-xd-schedule h2{
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  color: var(--ahr-gray);
  margin-bottom: 18px;
}
.ahr-xd-schedule .schedule-form-card{
  border-radius: 18px;
  border: 1px solid rgba(5,137,142,.35);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  padding: 18px;
}
.ahr-xd-schedule textarea.form-control{
  border-radius: 18px;
  border: 1px solid rgba(5,137,142,.35);
  padding: 14px 16px;
  min-height: 86px;
  background: rgba(255,255,255,.94);
}
.ahr-xd-schedule textarea.form-control:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16);
  border-color: rgba(82,53,159,.55);
}
.ahr-xd-schedule .btn-submit{
  border-radius: 999px !important;
  padding: 10px 26px;
  font-weight: 700;
  background: var(--ahr-purple);
  border-color: var(--ahr-purple);
}
.ahr-xd-schedule .btn-back{
  border-radius: 999px !important;
  padding: 8px 22px;
  font-weight: 700;
  background: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* ==============================
   Chat pages (XD-inspired)
   Visual-only; do not affect JS behavior.
   ============================== */
.conversation-chat-page .chat-card,
.patient-chat-page .chat-card{
  border-radius: 18px !important;
  border: 1px solid rgba(5,137,142,.35) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Tabs (Bootstrap nav-tabs) */
.conversation-chat-page .nav-tabs,
.patient-chat-page .nav-tabs{
  border-bottom: 0 !important;
  gap: 8px;
}
.conversation-chat-page .nav-tabs .nav-link,
.patient-chat-page .nav-tabs .nav-link{
  border: 1px solid rgba(5,137,142,.35) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--ahr-teal) !important;
  background: rgba(255,255,255,.92) !important;
}
.conversation-chat-page .nav-tabs .nav-link.active,
.patient-chat-page .nav-tabs .nav-link.active{
  background: var(--ahr-purple) !important;
  border-color: var(--ahr-purple) !important;
  color: #fff !important;
}

/* Header titles */
.conversation-chat-page h2,
.patient-chat-page h2{
  color: var(--ahr-gray) !important;
  font-weight: 600 !important;
}

/* Message list area */
.conversation-chat-page .message-box,
.patient-chat-page .message-box{
  background: rgba(255,255,255,.70) !important;
  padding: 18px 18px 8px 18px;
}
.conversation-chat-page .message .bubble,
.patient-chat-page .message .bubble{
  border-radius: 18px !important;
  padding: 12px 16px !important;
  background: rgba(0,0,0,.05) !important;
  color: #333 !important;
  border: 1px solid rgba(0,0,0,.06);
}
.conversation-chat-page .message.mine .bubble,
.patient-chat-page .message.mine .bubble{
  background: rgba(5,137,142,.95) !important;
  border-color: rgba(5,137,142,.95) !important;
  color: #fff !important;
}

/* Composer */
.conversation-chat-page textarea.form-control,
.patient-chat-page textarea.form-control{
  border-radius: 18px !important;
  border: 1px solid rgba(5,137,142,.35) !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,.94) !important;
}
.conversation-chat-page textarea.form-control:focus,
.patient-chat-page textarea.form-control:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16) !important;
  border-color: rgba(82,53,159,.55) !important;
}
.conversation-chat-page .chat-send-btn,
.patient-chat-page .chat-send-btn{
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  background: var(--ahr-purple) !important;
  border-color: var(--ahr-purple) !important;
}

/* Footer controls */
.conversation-chat-page #toggleAttachmentBtn,
.patient-chat-page #toggleAttachmentBtn{
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  background: var(--ahr-purple) !important;
  border-color: var(--ahr-purple) !important;
  color: #fff !important;
}
.conversation-chat-page .v134-paste-link,
.patient-chat-page .v134-paste-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  background: var(--ahr-purple);
  border: 1px solid var(--ahr-purple);
  color: #fff !important;
  text-decoration: none;
}
.conversation-chat-page #templateMessagesDropdown,
.patient-chat-page #templateMessagesDropdown{
  border-radius: 999px !important;
  border: 0 !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(90deg, rgba(5,137,142,.95), rgba(139,206,191,.95)) !important;
}

/* IMPORTANT: Some browsers inherit the <select> text color for the dropdown <option> list.
   Since the select is white-on-gradient, the dropdown list can appear blank (white-on-white)
   until you hover an option. Force readable option colors without changing behavior. */
.conversation-chat-page #templateMessagesDropdown option,
.patient-chat-page #templateMessagesDropdown option{
  color: var(--ahr-teal) !important;
  background: #fff !important;
}
.conversation-chat-page #templateMessagesDropdown:focus,
.patient-chat-page #templateMessagesDropdown:focus{
  box-shadow: 0 0 0 .20rem rgba(82,53,159,.16) !important;
  outline: none !important;
}

/* Make "Ctrl/Cmd+V" helper subtle */
.conversation-chat-page .chat-controls .text-muted,
.patient-chat-page .chat-controls .text-muted{
  opacity: .75;
}



/* --- Chat composer controls: compact on small screens (style-only) --- */
.chat-controls .label-short { display: none; }
.chat-controls .label-full { display: inline; }

.chat-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-controls > * { white-space: nowrap; }

@media (max-width: 480px){
  .chat-controls{
    flex-wrap: nowrap;      /* keep on one line */
    gap: 8px;
  }
  .chat-controls .label-full{ display:none; }
  .chat-controls .label-short{ display:inline; }
  /* Remove the clipboard emoji on small screens to save space */
  .chat-controls .clip-emoji{ display:none; }
  .chat-controls .chat-ctrl-hint{ display:none; }

  /* Let the template dropdown shrink without forcing wrap */
  #templateMessagesDropdown{
    width: 120px;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Slightly tighter paddings on the two left controls */
  #toggleAttachmentBtn{
    padding-left: 10px;
    padding-right: 10px;
  }
  #v134PasteLink{
    padding-left: 8px;
    padding-right: 8px;
  }
}