/* ==========================================================================
   Hand2Shoulder Clinic — interface redesign
   Added 2026-07-26.

   This file is loaded LAST, after the original theme, and restyles the
   existing markup. It contains no layout hacks that depend on page content:
   no HTML was changed, no JavaScript was touched, and every plugin
   (DataTables, datepickers, colorbox, TinyMCE) keeps working.

   To roll the whole redesign back, remove the single <link> to this file
   from header.php, header1.php and index.php. Nothing else is involved.
   ========================================================================== */

/* Palette matched to the real hand2shoulderclinic.in site (green #209422 /
   nav + CTA buttons, body grey #777777, white) - added 2026-08-22,
   replacing the invented teal this file launched with. --h2s-ok/-warn/-dang/
   -info are deliberately left untouched: #157f4d (ok) already reads as a
   distinct, more teal-leaning green from the new, more yellow-leaning brand
   green, so status colour and brand colour still don't collide now that
   both are "green". --h2s-sidebar/-2/-tx also untouched - the dark nav rail
   already looked right against the new brand green in preview. */
:root {
  --h2s-ink:        #212529;
  --h2s-body:       #495057;
  --h2s-muted:      #6b7270;
  --h2s-line:       #dfe3e1;
  --h2s-bg:         #f5f6f5;
  --h2s-card:       #ffffff;

  --h2s-brand:      #1e8a21;
  --h2s-brand-dk:   #166b19;
  --h2s-brand-lt:   #e8f5e9;

  --h2s-sidebar:    #16212e;
  --h2s-sidebar-2:  #1d2b3a;
  --h2s-sidebar-tx: #a8b8c8;

  --h2s-ok:    #157f4d;
  --h2s-warn:  #9a6b12;
  --h2s-dang:  #b3423a;
  --h2s-info:  #2f6fb5;

  --h2s-radius: 10px;
  --h2s-shadow: 0 1px 2px rgba(33,37,41,.06), 0 4px 14px rgba(33,37,41,.05);
}

/* --------------------------------------------------------------- base --- */

body {
  background: var(--h2s-bg) !important;
  color: var(--h2s-body);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--h2s-brand); }
a:hover, a:focus { color: var(--h2s-brand-dk); }

h1, h2, h3, h4, h5 { color: var(--h2s-ink); font-weight: 600; }

/* ------------------------------------------------------------- topbar --- */

.header.fixed-top {
  background: var(--h2s-card) !important;
  border-bottom: 1px solid var(--h2s-line);
  box-shadow: 0 1px 3px rgba(33,37,41,.05);
  height: 62px;
}

.header .brand {
  background: transparent !important;
  width: 240px;
  display: flex;
  align-items: center;
  height: 62px;
}

.header .brand .logo,
.header .brand a.logo {
  color: var(--h2s-ink) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.2px;
  padding: 0 20px;
  line-height: 62px;
}

.header .brand .logo:before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--h2s-brand);
  vertical-align: middle;
}

/* patient search box in the top bar */
.top-nav .atulClassSearch { margin: 13px 0 0 18px; float: left; max-width: 420px; width: 42%; }

.top-nav .atulClassSearchInput,
#search_box {
  height: 36px;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 8px !important;
  background: var(--h2s-bg);
  padding: 0 12px;
  font-size: 13.5px;
  box-shadow: none !important;
  transition: border-color .15s, background .15s;
}
#search_box:focus {
  background: #fff;
  border-color: var(--h2s-brand) !important;
  outline: 2px solid var(--h2s-brand-lt);
  outline-offset: 0;
}

/* Live patient-search results.
   #display is only an anchor — the results inside it (.searchAutoBox) are
   absolutely positioned, so #display has no height of its own. It must NOT
   get a border, background or overflow, or it clips the dropdown to a sliver. */
#display {
  position: relative;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-height: none !important;
  padding: 0 !important;
  z-index: 1100;
}

#display .searchAutoBox {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  min-width: 430px;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(33,37,41,.14) !important;
  max-height: 360px;
  overflow-y: auto;
  padding: 5px !important;
  z-index: 1100;
}

#display .searchAutoBox ul { margin: 0; padding: 0; list-style: none; }

#display .searchAutoBox ul li { border: 0; margin: 0; }
#display .searchAutoBox ul li + li { border-top: 1px solid var(--h2s-line); }

/* IMPORTANT — the rendered DOM is not what the PHP source looks like.
   Each row is written as  <li><a href=profile> LEFT + RIGHT </a></li>, but the
   RIGHT column contains its own "Book Appointment" <a>. Nested anchors are
   invalid, so the browser splits the row into two SIBLINGS:

       li > a[href=customer_update]   (contains the left column)
       li > div.dropdown-menu-vt-right (hoisted out of the anchor)

   Selectors written as "li a .dropdown-menu-vt-right" therefore never match —
   which is why that column lost its float and dropped onto a second line. */

#display .searchAutoBox ul li {
  padding: 9px 12px !important;
  border-radius: 7px;
  overflow: hidden;              /* contain the floats */
}
#display .searchAutoBox ul li:hover { background: var(--h2s-brand-lt); }

#display .searchAutoBox ul li > a {
  display: block;
  float: left;
  width: 68%;
  padding: 0 !important;
  text-decoration: none;
  background: transparent;
}

#display .searchAutoBox ul li span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--h2s-body) !important;
}
#display .searchAutoBox ul li b { color: var(--h2s-ink); font-weight: 600; }
#display .searchAutoBox ul li i {
  color: var(--h2s-brand);
  font-style: normal;
  font-weight: 600;
}
/* Two columns side by side. The theme's rule for the right-hand column was
   being overridden somewhere to float:none/full width, which pushed it onto a
   second line and doubled the height of every result row. */
#display .searchAutoBox ul li .dropdown-menu-vt-left {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
#display .searchAutoBox ul li > .dropdown-menu-vt-right {
  float: left !important;
  width: 32% !important;
  padding: 0 !important;
  text-align: right;
}
#display .searchAutoBox ul li .dropdown-menu-vt-right a { color: var(--h2s-brand) !important; font-weight: 600; }

@media (max-width: 640px) {
  /* stack the columns on a narrow screen instead of squeezing them */
  #display .searchAutoBox { min-width: 0; }
  #display .searchAutoBox ul li > a,
  #display .searchAutoBox ul li > .dropdown-menu-vt-right {
    float: none !important;
    width: 100% !important;
    text-align: left;
  }
}

/* user menu */
.top-nav .top-menu > li > a,
.top-nav .nav > li > a { color: var(--h2s-body) !important; }

.top-nav .username { color: var(--h2s-ink); font-weight: 600; font-size: 13.5px; }

.top-nav .top-menu img[alt=""],
.top-nav .dropdown-toggle img {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--h2s-line);
}

.dropdown-menu.extended.logout {
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  box-shadow: var(--h2s-shadow);
  padding: 6px;
  min-width: 190px;
}
.dropdown-menu.extended.logout > li > a {
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--h2s-body);
  font-size: 13.5px;
}
.dropdown-menu.extended.logout > li > a:hover {
  background: var(--h2s-brand-lt);
  color: var(--h2s-brand-dk);
}

/* ------------------------------------------------------------ sidebar --- */

.page-sidebar {
  background: var(--h2s-sidebar) !important;
  width: 240px;
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}

/* leftover theme branding in the sidebar ("ATLANT") */
.x-navigation li.xn-logo { display: none !important; }

.x-navigation { padding: 12px 10px !important; background: transparent !important; }

.x-navigation li { border: 0 !important; background: transparent !important; }

.x-navigation li > a {
  color: var(--h2s-sidebar-tx) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px;
  padding: 10px 13px !important;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: background .14s, color .14s;
}

.x-navigation li > a:hover {
  background: var(--h2s-sidebar-2) !important;
  color: #fff !important;
}

.x-navigation li.active > a,
.x-navigation li.active > a:hover {
  background: var(--h2s-brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,138,33,.35);
}

.x-navigation li > a .fa,
.x-navigation li > a i,
.x-navigation li > a .glyphicon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: .85;
  margin: 0 !important;
  float: none !important;
}
.x-navigation li.active > a .fa { opacity: 1; }

.x-navigation li > a .xn-text,
.x-navigation li > a span:not(.fa):not(.glyphicon) { margin: 0 !important; }

/* sub-menus */
.x-navigation li > ul,
.x-navigation ul.sub {
  background: rgba(0,0,0,.18) !important;
  border-radius: 8px;
  margin: 2px 0 6px !important;
  padding: 4px !important;
  overflow: hidden;
}
.x-navigation li > ul li > a,
.x-navigation ul.sub li > a {
  color: #94a6b8 !important;
  padding: 8px 12px 8px 40px !important;
  font-size: 13px;
  font-weight: 400;
  border-radius: 6px;
}
.x-navigation li > ul li > a:hover,
.x-navigation ul.sub li > a:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
.x-navigation li > ul li.active > a { color: #fff !important; background: rgba(30,138,33,.5) !important; }

/* ------------------------------------------------------- main content --- */

#main-content { margin-left: 240px; background: var(--h2s-bg); }

section.wrapper { padding: 22px 26px 40px !important; }

/* breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 0 16px 0 !important;
  margin: 0 !important;
  font-size: 12.5px;
  border-radius: 0;
}
.breadcrumb > li + li:before { color: var(--h2s-muted); padding: 0 8px; }
.breadcrumb a { color: var(--h2s-muted); }
.breadcrumb a:hover { color: var(--h2s-brand); }
.breadcrumb .active { color: var(--h2s-ink); font-weight: 600; }

/* ------------------------------------------------------------- panels --- */

.panel {
  background: var(--h2s-card);
  border: 1px solid var(--h2s-line) !important;
  border-radius: var(--h2s-radius) !important;
  box-shadow: var(--h2s-shadow) !important;
  margin-bottom: 22px;
  overflow: hidden;
}

.panel > .panel-heading,
.panel .panel-heading,
header.panel-heading {
  background: var(--h2s-card) !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  color: var(--h2s-ink) !important;
  font-size: 14.5px;
  font-weight: 600;
  padding: 15px 18px !important;
  text-transform: none !important;
  letter-spacing: 0;
  border-radius: 0 !important;
}

.panel-body { padding: 18px !important; }

/* the dashboard's stat/summary sections */
.adt_notify .panel { height: auto; }

/* ------------------------------------------------------------- tables --- */

/* Every table gets breathing room above and below itself - previously
   margin-bottom:0 left a table touching whatever sat right above it (a
   filter form, a heading) with nothing to separate them, and relied on
   page-specific rules (e.g. the :not(:first-child) rule below) to add a
   gap before a second stacked table. A table's own margin handles every
   case - first table, stacked tables, last table before a card's own
   padding - without depending on what precedes or follows it on a given
   page. Left/right spacing already comes from .panel-body's padding
   (18px, see above), which is unconditional and applies everywhere the
   same way. */
.table { margin: 10px 0; color: var(--h2s-body); }

.table > thead > tr > th {
  background: #f7f9fb !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  border-top: 0 !important;
  color: var(--h2s-muted) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 12px !important;
  vertical-align: middle;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--h2s-line) !important;
  padding: 11px 12px !important;
  vertical-align: middle;
  font-size: 13.5px;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfd !important; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background: var(--h2s-brand-lt) !important; }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--h2s-line) !important; }

/* DataTables chrome */
.dataTables_wrapper { padding: 2px 0; }
.dataTables_filter input,
.dataTables_length select {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 7px !important;
  padding: 5px 10px !important;
  height: 34px;
  box-shadow: none !important;
}
.dataTables_filter input:focus { border-color: var(--h2s-brand) !important; outline: none; }
.dataTables_info { color: var(--h2s-muted); font-size: 12.5px; }

.dataTables_paginate .paginate_button,
.pagination > li > a,
.pagination-table {
  border: 1px solid var(--h2s-line) !important;
  background: #fff !important;
  color: var(--h2s-body) !important;
  border-radius: 7px !important;
  margin: 0 2px;
  padding: 5px 11px !important;
  display: inline-block;
  font-size: 13px;
  text-decoration: none;
}
.dataTables_paginate .paginate_button:hover,
.pagination-table:hover {
  background: var(--h2s-brand-lt) !important;
  border-color: var(--h2s-brand) !important;
  color: var(--h2s-brand-dk) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--h2s-brand) !important;
  border-color: var(--h2s-brand) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border: 1px solid transparent;
  box-shadow: none !important;
  transition: background .14s, border-color .14s, color .14s;
}

.btn-primary {
  background: var(--h2s-brand) !important;
  border-color: var(--h2s-brand) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}

.btn-success { background: var(--h2s-ok) !important;   border-color: var(--h2s-ok) !important;   color:#fff !important; }
.btn-danger  { background: var(--h2s-dang) !important; border-color: var(--h2s-dang) !important; color:#fff !important; }
.btn-warning { background: var(--h2s-warn) !important; border-color: var(--h2s-warn) !important; color:#fff !important; }
.btn-info    { background: var(--h2s-info) !important; border-color: var(--h2s-info) !important; color:#fff !important; }

.btn-default {
  background: #fff !important;
  border-color: var(--h2s-line) !important;
  color: var(--h2s-body) !important;
}
.btn-default:hover { background: var(--h2s-bg) !important; border-color: #cfd8e0 !important; }

.btn-sm, .btn-xs { padding: 5px 11px; font-size: 12.5px; }

/* the small inline action pills used in tables (View / Edit / Delete) */
.label-mini,
.label.label-mini {
  display: inline-block;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  margin: 1px;
  cursor: pointer;
  text-decoration: none;
}
.label-success.label-mini { background: #e4f3ea !important; color: var(--h2s-ok) !important; }
.label-warning.label-mini { background: #fdf2e2 !important; color: var(--h2s-warn) !important; }
.label-danger.label-mini  { background: #fbeae9 !important; color: var(--h2s-dang) !important; }
.label-info.label-mini    { background: #e8f0f9 !important; color: var(--h2s-info) !important; }
.label-mini:hover { filter: brightness(.96); }

/* status wording in the appointment tables */
.label {
  border-radius: 20px;
  font-weight: 600;
  font-size: 11.5px;
  padding: .32em .85em;
}

/* -------------------------------------------------------------- forms --- */

label { color: var(--h2s-ink); font-weight: 600; font-size: 13px; margin-bottom: 5px; }

.form-control {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--h2s-ink);
  font-size: 13.5px;
  height: 38px;
  padding: 8px 12px;
  transition: border-color .15s, box-shadow .15s;
}
textarea.form-control { height: auto; min-height: 92px; }

.form-control:focus {
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
}

.form-control[readonly], .form-control[disabled] { background: var(--h2s-bg); }

.input-group-addon {
  border: 1px solid var(--h2s-line);
  background: var(--h2s-bg);
  border-radius: 8px;
  color: var(--h2s-muted);
}

.has-error .form-control { border-color: var(--h2s-dang) !important; }
.help-block, .error { font-size: 12.5px; }

/* ------------------------------------------------------------- alerts --- */

.alert {
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13.5px;
  padding: 12px 15px;
}
.alert-success { background: #e4f3ea; border-color: #c6e3d1; color: var(--h2s-ok); }
.alert-danger  { background: #fbeae9; border-color: #eecfcc; color: var(--h2s-dang); }
.alert-warning { background: #fdf2e2; border-color: #f0dcbb; color: var(--h2s-warn); }
.alert-info    { background: #e8f0f9; border-color: #cddff0; color: var(--h2s-info); }

/* ------------------------------------------------------------- modals --- */

.modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(33,37,41,.25);
}
.modal-header {
  border-bottom: 1px solid var(--h2s-line);
  padding: 16px 20px;
}
.modal-header .modal-title { font-size: 15.5px; font-weight: 600; color: var(--h2s-ink); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--h2s-line); padding: 14px 20px; }
.modal-backdrop.in { opacity: .45; }

/* ---------------------------------------------------------- login page --- */

@keyframes h2sGradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes h2sBlobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, -4%) scale(1.06); }
  66%  { transform: translate(-3%, 3%) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes h2sCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes h2sAvatarGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 9px var(--h2s-brand-lt), 0 6px 22px rgba(30,138,33,.35); }
  50%      { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 13px var(--h2s-brand-lt), 0 6px 28px rgba(30,138,33,.5); }
}

body.lock-screen {
  background: linear-gradient(120deg, #0c1420 0%, #123b1a 45%, #1e8a21 100%) !important;
  background-size: 220% 220% !important;
  animation: h2sGradientDrift 18s ease infinite;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* soft floating color blobs behind the card, purely decorative */
body.lock-screen .lock-bg-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body.lock-screen .lock-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  animation: h2sBlobFloat 14s ease-in-out infinite;
}
body.lock-screen .lock-blob-1 {
  width: 420px; height: 420px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, #34d5c4 0%, transparent 70%);
}
body.lock-screen .lock-blob-2 {
  width: 480px; height: 480px;
  bottom: -160px; right: -140px;
  background: radial-gradient(circle, #1fb3a3 0%, transparent 70%);
  animation-delay: -5s;
}
body.lock-screen .lock-blob-3 {
  width: 320px; height: 320px;
  top: 40%; left: 60%;
  background: radial-gradient(circle, #6ee7db 0%, transparent 70%);
  animation-delay: -9s;
  opacity: .22;
}

/* The original theme built this as a "lock screen": two floated half-width
   bars with a 160px avatar absolutely positioned at left:210px between them.
   All of that is undone here and rebuilt as a plain stacked card, using flex
   `order` to put the avatar above the fields without touching the HTML. */

body.lock-screen .lock-wrapper {
  max-width: 390px !important;
  margin: 0 auto !important;
  padding: 6vh 16px 40px;
  float: none !important;
  position: relative;
  z-index: 1;
}

body.lock-screen .logo_home {
  float: none !important;
  width: 100% !important;
  text-align: center;
  margin: 0 0 2px !important;
}

/* kill the theme's absolute positioning for BOTH the logo and the avatar */
body.lock-screen .lock-wrapper img {
  position: static !important;
  left: auto !important;
  border: 0 !important;
  width: auto;
  height: auto;
}

body.lock-screen .logo_home img {
  max-width: 210px !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
}

body.lock-screen .lock-tagline {
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 22px !important;
}

body.lock-screen #time {
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .4px;
  text-align: center;
  margin: 0 0 20px !important;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

body.lock-screen .lock-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.12);
  padding: 34px 26px 26px !important;
  position: relative;
  overflow: hidden;
  animation: h2sCardIn .5s cubic-bezier(.2,.8,.2,1) both;
}

/* thin brand-gradient accent bar along the top edge of the card */
body.lock-screen .lock-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--h2s-brand-dk), var(--h2s-brand), #34d5c4);
}

/* stack the form, and reorder so the avatar sits on top */
body.lock-screen .lock-box .form-inline {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

body.lock-screen .lock-box .form-inline > img { order: 1; }
body.lock-screen .lock-name  { order: 2; }
body.lock-screen .lock-pwd   { order: 3; }

body.lock-screen .lock-box .form-inline > img {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: block;
  margin: 0 auto 22px !important;
  object-fit: cover;
  background: #fff !important;
  animation: h2sAvatarGlow 3s ease-in-out infinite;
}

/* the two floated bars become plain full-width blocks */
body.lock-screen .lock-name,
body.lock-screen .lock-pwd {
  background: transparent !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  color: inherit !important;
  position: relative;
}
body.lock-screen .lock-pwd { margin-bottom: 0 !important; }

body.lock-screen .lock-pwd .form-group {
  position: relative;
  width: 100%;
  margin: 0 0 16px;
}

/* envelope / lock glyphs sitting inside the input */
body.lock-screen .lock-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #9fb2c3;
  font-size: 14px;
  pointer-events: none;
  transition: color .15s ease;
  z-index: 1;
}
body.lock-screen .lock-input:focus ~ .lock-icon,
body.lock-screen .lock-name:focus-within .lock-icon,
body.lock-screen .lock-pwd .form-group:focus-within .lock-icon {
  color: var(--h2s-brand);
}

/* eye icon to reveal/hide the password */
body.lock-screen .lock-toggle-pwd {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #9fb2c3;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
  transition: color .15s ease;
}
body.lock-screen .lock-toggle-pwd:hover { color: var(--h2s-brand); }

body.lock-screen .lock-input,
body.lock-screen input.lock-input {
  width: 100% !important;
  float: none !important;
  height: 46px !important;
  border: 1.5px solid var(--h2s-line) !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 0 14px 0 40px !important;
  font-size: 14px;
  color: var(--h2s-ink);
  background: #f8fafb;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.lock-screen .lock-pwd .form-group .lock-input { padding-right: 40px !important; }
body.lock-screen .lock-input:focus {
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
  outline: none;
  background: #fff;
}
body.lock-screen .lock-pwd .lock-input { flex: 1 1 auto; }

body.lock-screen .btn-lock,
body.lock-screen .btn-lock:hover,
body.lock-screen .btn-lock:focus {
  background: linear-gradient(120deg, var(--h2s-brand) 0%, var(--h2s-brand-dk) 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 46px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .3px;
  box-shadow: 0 10px 22px rgba(30,138,33,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.lock-screen .btn-lock i { margin-left: 6px; transition: transform .15s ease; }
body.lock-screen .btn-lock:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(30,138,33,.45);
}
body.lock-screen .btn-lock:hover i { transform: translateX(3px); }
body.lock-screen .btn-lock:active { transform: translateY(0); }

body.lock-screen span.error {
  color: var(--h2s-dang) !important;
  padding: 14px 0 0 !important;
  display: block;
  font-size: 13px;
  text-decoration: none !important;
  font-weight: 500;
}

body.lock-screen .lock-box { text-align: center; }

/* "Forgot Password" lives in a SECOND .lock-wrapper below the card, sitting on
   the dark background — so it stays white, and must not inherit the top padding. */
body.lock-screen .lock-wrapper + .lock-wrapper {
  padding: 18px 16px 0 !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}
body.lock-screen .lock-wrapper + .lock-wrapper a {
  color: rgba(255,255,255,.85) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
body.lock-screen .lock-wrapper + .lock-wrapper a i { margin-right: 5px; }
body.lock-screen .lock-wrapper + .lock-wrapper a:hover { color: #fff !important; text-decoration: underline; }

/* links inside the white card */
body.lock-screen .lock-box a { color: var(--h2s-brand) !important; font-weight: 600; }

/* ------------------------------------------------- forgot-password modal --- */
/* Scoped to #myModal (this login page's modal only) so the rest of the app's
   modals — delete confirmations, add-doctor, etc. — keep their plain look. */

#myModal .modal-dialog { max-width: 400px; margin: 12vh auto 0; }

#myModal .modal-content { border-radius: 16px; overflow: hidden; }

#myModal .modal-header {
  border-bottom: 0;
  text-align: center;
  padding: 34px 26px 16px;
  position: relative;
}

#myModal .close {
  position: absolute;
  top: 14px;
  right: 16px;
  opacity: 1;
  color: #9fb2c3;
  font-size: 22px;
  font-weight: 400;
  text-shadow: none;
  transition: color .15s ease;
}
#myModal .close:hover { color: var(--h2s-ink); opacity: 1; }

#myModal .h2s-modal-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--h2s-brand-lt);
  color: var(--h2s-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

#myModal .modal-header .modal-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }

#myModal .h2s-modal-subtitle {
  color: #6b7c8c;
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}

#myModal .modal-body { padding: 6px 26px 26px; }

/* reuse the login card's icon-in-input styling for the email field */
#myModal .lock-name {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100% !important;
  float: none !important;
}
#myModal .lock-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #9fb2c3;
  font-size: 14px;
  pointer-events: none;
}
#myModal .lock-name:focus-within .lock-icon { color: var(--h2s-brand); }
#myModal .lock-input {
  width: 100% !important;
  height: 46px !important;
  border: 1.5px solid var(--h2s-line) !important;
  border-radius: 10px !important;
  padding: 0 14px 0 40px !important;
  font-size: 14px;
  color: var(--h2s-ink);
  background: #f8fafb;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#myModal .lock-input:focus {
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
  outline: none;
  background: #fff;
}

#myModal .modal-footer {
  border-top: 0;
  padding: 4px 26px 28px;
  display: flex;
  gap: 10px;
}
#myModal .modal-footer .btn {
  flex: 1 1 0;
  margin: 0 !important;
  height: 44px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
}
#myModal .btn-default {
  background: #f1f4f6;
  border: 1px solid var(--h2s-line);
  color: var(--h2s-ink);
}
#myModal .btn-default:hover { background: #e6ebee; }
#myModal .btn-success {
  background: linear-gradient(120deg, var(--h2s-brand) 0%, var(--h2s-brand-dk) 100%);
  border: 0;
  box-shadow: 0 10px 22px rgba(30,138,33,.3);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#myModal .btn-success:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(30,138,33,.4);
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1199px) {
  .top-nav .atulClassSearch { width: 34%; }
}

@media (max-width: 991px) {
  .header .brand { width: auto; }

  .page-sidebar {
    position: static !important;
    float: none !important;
    width: 100% !important;
    top: auto !important;
    max-height: 44vh;
    overflow-y: auto;
    margin-top: 62px;
  }

  #main-content { margin-left: 0 !important; }

  section.wrapper { padding: 16px 14px 32px !important; }

  .top-nav .atulClassSearch {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    float: none;
    width: calc(100% - 24px);
    max-width: none;
    margin: 8px 12px;
  }

  /* let wide tables scroll rather than break the page */
  .panel-body > .table,
  .panel-body > table,
  .dataTables_wrapper { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  .header.fixed-top { height: auto; min-height: 62px; }
  .top-nav .top-menu { margin-right: 8px; }
  .top-nav .username { display: none; }

  .panel-body { padding: 13px !important; }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding: 9px 8px !important; font-size: 13px; }

  body.lock-screen .lock-wrapper { padding-top: 4vh; max-width: 92%; }
}

/* ---------------------------------------------------------- utilities --- */

/* keep long patient notes readable */
td { word-break: break-word; }

/* print: drop the navigation so prescriptions/reports print clean */
@media print {
  .header, .page-sidebar, .breadcrumb, .btn, .label-mini { display: none !important; }
  #main-content { margin-left: 0 !important; }
  .panel { border: 0 !important; box-shadow: none !important; }
}

/* ==========================================================================
   Patient profile — customer_update.php
   Presentation only. No markup, no scripts, no PHP touched. The page carries
   two inline <style> blocks that load after this file, so the rules that
   override them are marked !important; nothing else is.
   ========================================================================== */

/* --- the prescription accordion ------------------------------------------
   Was: solid #1fb5ad bars with grey bodies. Now a quieter tinted bar that
   turns solid brand when open, using the aria-expanded attribute the markup
   already sets — no JS involved. */

div#accordion { margin-bottom: 0; }

div#accordion .panel.panel-default {
  margin: 0 0 8px 0 !important;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  overflow: hidden;
}

div#accordion .panel-default > .panel-heading {
  background: var(--h2s-brand-lt) !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

div#accordion .panel-default > .panel-heading .panel-title { margin: 0; font-size: inherit; }

div#accordion .panel-default > .panel-heading a {
  color: var(--h2s-brand-dk) !important;
  display: block;
  padding: 12px 16px;
  font-size: 13.5px !important;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding-right: 40px;
}

/* open section */
div#accordion .panel-default > .panel-heading a[aria-expanded="true"] {
  background: var(--h2s-brand);
  color: #fff !important;
}

/* chevron, rotates when the section opens */
div#accordion .panel-default > .panel-heading a:after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .8;
}
div#accordion .panel-default > .panel-heading a[aria-expanded="true"]:after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

div#accordion .panel-default .panel-body {
  background: #fff !important;
  padding: 16px !important;
  border-top: 1px solid var(--h2s-line);
}

/* --- add/remove rows inside the prescription sections --------------------- */

.customer_records,
.customer_records_dynamic .remove {
  align-items: flex-end;
  /* horizontal padding compensates for the parent `.row`'s Bootstrap
     negative side margins - without it these rows (unlike the other
     prescription fields, which sit in a .col-md-10/.col-md-2 pair that
     re-adds the gutter) bled to the panel edge on both sides. */
  padding: 8px 15px !important;
  flex-wrap: wrap;
}

/* medicine / schedule / days: three equal columns in one row. Without an
   explicit flex-basis, the plain `days_med[]` input's own `.form-control`
   width:100% asked for the full row width and wrapped onto its own line
   below the two (narrower, div-wrapped) search-selects. */
.customer_records > .h2s-search-select,
.customer_records > input.form-control,
.customer_records_dynamic .remove > .h2s-search-select,
.customer_records_dynamic .remove > input.form-control {
  flex: 1 1 0;
  min-width: 110px;
}
.customer_records > .extra-fields-customer,
.customer_records_dynamic .remove > .remove-field {
  flex: 0 0 auto;
}

.customer_records .btn-primary,
.customer_records_dynamic .remove .btn-primary { min-width: 108px; }

.remo_btns { padding: 0 !important; display: flex; align-items: center; height: 38px; }
.remo_btns a {
  color: var(--h2s-dang) !important;
  font-size: 15px !important;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  transition: background .14s;
}
.remo_btns a:hover { background: #fbeae9; }

/* confirmation text ("saved" messages) */
.redds {
  color: var(--h2s-ok) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  padding: 6px 0;
}

/* --- the three column cards ---------------------------------------------- */

header.panel-heading.PNL0 {
  background: var(--h2s-card) !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  color: var(--h2s-ink) !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: 15px 18px !important;
}

/* the details form uses inline margin-top on labels; normalise the rhythm */
form[action="ncustomer.php"] .form-group { margin-bottom: 14px; }
form[action="ncustomer.php"] label { margin-top: 0 !important; margin-bottom: 5px; }
form[action="ncustomer.php"] .col-md-6 { padding-left: 0; padding-right: 8px; }
form[action="ncustomer.php"] .col-md-6.PNR0 { padding-left: 8px; padding-right: 0; }

/* readonly fields (patient id) should look non-editable */
.form-control[readonly] { background: var(--h2s-bg) !important; color: var(--h2s-muted); cursor: default; }

/* --- modals on this page -------------------------------------------------- */

/* the theme pulled the close button up with a negative margin; centre it instead */
.modal-header { position: relative; }
.modal-header .close {
  margin-top: 0 !important;
  font-size: 24px !important;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
}
.modal-header .close:hover { opacity: 1; }
.modal-header .modal-title { padding-right: 34px; }
.modal-footer { margin-top: 0 !important; padding: 14px 20px !important; }

/* --- tables on this page -------------------------------------------------- */

.table.table-condensed > tbody > tr > td { padding: 9px 10px !important; }

/* keep the long notes/conversation columns readable */
.panel-body td { word-break: break-word; }

/* ==========================================================================
   Patient profile — usability pass (second round)
   Still presentation only. Addresses: action buttons wrapping with mismatched
   styles, the file-upload blocks showing a raw "Choose Files" control, the
   cramped icon buttons beside each prescription field, and two stacked tables
   that visually merged into one.
   ========================================================================== */

/* --- table action buttons -------------------------------------------------
   Four buttons (Download / View / Print / Delete) in a narrow column were
   wrapping onto two ragged lines in four different visual styles. They now
   form a tidy, evenly sized grid that reads as one control group. */

.table td[style*="text-align:center"]:last-child,
.table td:last-child {
  white-space: normal;
}

.table td:last-child > .label-mini {
  min-width: 66px;
  text-align: center;
  margin: 2px 2px !important;
  vertical-align: middle;
}

/* the blue "Print" pill was the only solid one — tint it like the rest */
.label-primary.label-mini {
  background: #e8f0f9 !important;
  color: var(--h2s-info) !important;
  border: 0;
}
.label-success.label-mini { background: #e4f3ea !important; color: var(--h2s-ok) !important; }
.label-warning.label-mini { background: #fdf2e2 !important; color: var(--h2s-warn) !important; }
.label-danger.label-mini  { background: #fbeae9 !important; color: var(--h2s-dang) !important; }

.label-mini {
  border: 1px solid transparent !important;
  transition: filter .12s, border-color .12s;
}
.label-success.label-mini:hover { border-color: #b8ddc8 !important; }
.label-warning.label-mini:hover { border-color: #eed9b4 !important; }
.label-danger.label-mini:hover  { border-color: #edc7c4 !important; }
.label-primary.label-mini:hover { border-color: #c3d6ec !important; }

/* --- empty-state rows -----------------------------------------------------
   "Patient Don't Have Prescriptions" belongs to a SECOND, empty table that
   renders straight after the first. Muting it stops it reading like data. */
.table td[colspan] {
  color: var(--h2s-muted) !important;
  font-style: italic;
  font-size: 13px;
  padding: 16px 12px !important;
  background: #fbfcfd;
}

/* --- keep stacked sections visually separate ------------------------------ */
section.panel + section.panel,
.panel + .panel { margin-top: 18px; }

section.panel > .panel-body > .table:not(:first-child) { margin-top: 18px; }

/* --- the +/star/list buttons beside each prescription field ---------------
   They were stacking vertically in a narrow column. Now a single aligned row
   that lines up with the input next to them. */

.customer_records .col-md-2,
.customer_records_dynamic .col-md-2,
div#accordion .col-md-2 {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-left: 8px;
  padding-right: 0;
}

div#accordion .col-md-2 > .btn,
.customer_records .col-md-2 > .btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 38px;
}

/* the third button carries an inline grey border — soften it to match */
div#accordion .col-md-2 > .btn-secondary,
.col-md-2 > .btn-secondary {
  background: #fff !important;
  border: 1px solid var(--h2s-line) !important;
  color: var(--h2s-muted) !important;
}
div#accordion .col-md-2 > .btn-secondary:hover {
  border-color: var(--h2s-brand) !important;
  color: var(--h2s-brand) !important;
}

div#accordion .col-md-10 { padding-right: 0; }

/* --- file upload blocks ---------------------------------------------------
   Each green block contains a real <input type=file>, so the browser drew its
   own "Choose Files / No file chosen" control inside the button. The input is
   now an invisible overlay covering the block: the whole green button becomes
   the picker. The input itself is untouched, so the existing preview JS and
   the posted field names still work exactly as before. */

#selectImage { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }

#selectImage > .btn {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  min-width: 210px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 11px 16px !important;
  background: #fff !important;
  border: 1px dashed var(--h2s-line) !important;
  color: var(--h2s-body) !important;
  font-weight: 600;
  text-align: left;
  border-radius: 9px !important;
  transition: border-color .15s, background .15s, color .15s;
}
#selectImage > .btn:hover {
  border-color: var(--h2s-brand) !important;
  background: var(--h2s-brand-lt) !important;
  color: var(--h2s-brand-dk) !important;
}
#selectImage > .btn .fa { color: var(--h2s-brand); font-size: 15px; }

/* the native control becomes a transparent click target over the whole block */
#selectImage > .btn input[type="file"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* the submit button was red, which reads as destructive */
input#submit_button,
#selectImage ~ input[type="submit"] {
  background: var(--h2s-brand) !important;
  border-color: var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 9px 22px !important;
}
input#submit_button:hover { background: var(--h2s-brand-dk) !important; }

#image_preview img, [id^="image_preview"] img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
hr#line { border-top: 1px solid var(--h2s-line); margin: 16px 0; }

/* --- readability ---------------------------------------------------------- */
.table td { font-size: 13px; }
section.panel > header.panel-heading { letter-spacing: -.1px; }

/* --- fit corrections (measured against the real page) ---------------------
   The action column is 173px and the icon column 96px, so sizes are pinned to
   what actually fits: two action pills per row, three icon buttons in one row. */

.table td:last-child > .label-mini {
  min-width: 58px;
  font-size: 11.5px !important;
  padding: 4px 8px !important;
  margin: 2px 1px !important;
}

div#accordion .col-md-2 > .btn,
.customer_records .col-md-2 > .btn {
  width: 29px;
  min-width: 29px;
  height: 34px;
  flex: 0 0 29px;
  font-size: 12.5px;
}
.customer_records .col-md-2,
.customer_records_dynamic .col-md-2,
div#accordion .col-md-2 { gap: 4px; padding-left: 6px; }

/* Let the icon buttons share whatever the column gives them, rather than a
   fixed width that can overflow at some container sizes. */
div#accordion .col-md-2,
.customer_records .col-md-2,
.customer_records_dynamic .col-md-2 {
  gap: 4px;
  padding-left: 4px !important;
  padding-right: 0 !important;
}
div#accordion .col-md-2 > .btn,
.customer_records .col-md-2 > .btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 34px;
}

/* --- correction ------------------------------------------------------------
   The submit control inside #selectImage is <input class="btn btn-danger">
   with no id, so the dropzone styling above was catching it and the primary
   action looked like another drop target. Scope the dropzone look to the
   <span> blocks only, and give the submit a solid primary button. */

#selectImage > input.btn,
#selectImage > input[type="submit"],
#selectImage > button.btn {
  position: static;
  overflow: visible;
  min-width: 0 !important;
  width: auto !important;
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  border-style: solid !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 26px !important;
  display: inline-block;
  text-align: center;
  flex: 0 0 auto;
  align-self: flex-start;
}
#selectImage > input.btn:hover,
#selectImage > input[type="submit"]:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}

/* the dropzone appearance applies only to the file-picker spans */
#selectImage > span.btn { min-width: 210px; }

/* put the submit on its own line under the four pickers */
#selectImage { align-items: flex-start; }
#selectImage > input.btn,
#selectImage > input[type="submit"] { margin-top: 6px !important; }

/* ==========================================================================
   Book appointment — appointment.php
   Presentation only; appointment.php is byte-identical to the original.

   Scoped with :has() to the booking form itself, so nothing else is affected.
   Browsers without :has() simply ignore these rules and get the base styling —
   the page still works, it just keeps its old column layout.
   ========================================================================== */

/* the four field columns are col-md-4 + 3 + 3 + 3 = 13, which overflows
   Bootstrap's 12-column grid and pushes Duration onto its own line.
   Flex sidesteps the grid entirely and keeps them on one tidy row. */
form:has(button[name="book"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  align-items: flex-start;
}

form:has(button[name="book"]) > .col-md-4,
form:has(button[name="book"]) > .col-md-3,
form:has(button[name="book"]) > .col-md-8 {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  flex: 1 1 180px;
  min-width: 170px;
}

/* doctor picker gets a little more room than the date/time/duration fields */
form:has(button[name="book"]) > .col-md-4:first-of-type { flex: 1.4 1 220px; }

/* the message box takes a full row of its own */
form:has(button[name="book"]) > .col-md-8 { flex: 1 1 100%; min-width: 100%; }

form:has(button[name="book"]) > .col-md-4:last-of-type {
  flex: 1 1 100%;
  min-width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 4px !important;
}

form:has(button[name="book"]) .form-group { margin-bottom: 16px; width: 100%; }

form:has(button[name="book"]) label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

/* consistent control height across select / text / time */
form:has(button[name="book"]) .form-control { height: 40px; }
form:has(button[name="book"]) textarea.form-control {
  height: auto;
  min-height: 96px;
  resize: vertical;
}

form:has(button[name="book"]) button[name="book"] {
  padding: 11px 30px;
  font-size: 14px;
  min-width: 190px;
}

/* the date field opens a datepicker — hint that it is clickable */
#txtdate { cursor: pointer; background: #fff; }

/* --- patient banner above the form ---------------------------------------
   Was a plain heading reading "Patient Name:… | Patient Id:…". Give it room
   to breathe so the doctor can confirm who they are booking for at a glance. */
header.panel-heading.cus_main_head,
section.panel > header.panel-heading {
  font-size: 14.5px;
  line-height: 1.5;
}

/* jQuery UI datepicker, so it matches the rest of the interface */
.ui-datepicker {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(33,37,41,.14) !important;
  padding: 8px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 13px;
  z-index: 1200 !important;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border: 0 !important;
  color: var(--h2s-ink) !important;
  font-weight: 600;
  padding-bottom: 6px;
}
.ui-datepicker .ui-datepicker-title { font-size: 13.5px; }
.ui-datepicker td a, .ui-datepicker td span {
  text-align: center;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--h2s-body) !important;
  padding: 6px !important;
}
.ui-datepicker td a:hover { background: var(--h2s-brand-lt) !important; color: var(--h2s-brand-dk) !important; }
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
  background: var(--h2s-brand) !important;
  color: #fff !important;
}

/* ==========================================================================
   Submit feedback overlay (see js/h2s-loader.js)
   Shown while a slow action — currently Book Appointment — is contacting the
   WhatsApp/SMS/mail gateways, so the page no longer looks frozen.
   ========================================================================== */

.h2s-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 20px;
}
.h2s-loading-overlay.is-visible { display: flex; }

.h2s-loading-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  width: 100%;
}

.h2s-spinner {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 3px solid var(--h2s-brand-lt);
  border-top-color: var(--h2s-brand);
  border-radius: 50%;
  animation: h2s-spin .7s linear infinite;
}
@keyframes h2s-spin { to { transform: rotate(360deg); } }

.h2s-loading-text { display: flex; flex-direction: column; gap: 3px; }
.h2s-loading-title { color: var(--h2s-ink); font-size: 15px; font-weight: 600; }
.h2s-loading-note  { color: var(--h2s-muted); font-size: 13px; line-height: 1.45; }

/* respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .h2s-spinner { animation-duration: 2s; }
}

/* ==========================================================================
   Clinic logo in the top bar
   The markup is <a class="logo">H2S Clinic</a>. Rather than edit header.php,
   the text is hidden and the existing images/logo.png painted in its place —
   the same logo the login screen already uses.
   ========================================================================== */

/* images/website-logo.png (300x65) is the horizontal lockup — caduceus beside
   the wordmark. images/logo.png is the same brand but STACKED (180x105), which
   only renders about 72px wide in a 62px-tall bar. The horizontal one fits the
   bar properly. To switch, change the background-image below and set
   width: 76px. */
.header .brand a.logo {
  display: block;
  width: 194px;
  height: 42px;
  margin: 10px 0 0 18px;
  padding: 0 !important;
  font-size: 0 !important;          /* hides the "H2S Clinic" text */
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url("../images/website-logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.header .brand a.logo:before { content: none !important; }   /* drop the teal dot */

/* the sidebar sits under a 240px brand column — keep the logo inside it */
.header .brand { width: 240px; }

@media (max-width: 991px) {
  .header .brand { width: auto; }
}
@media (max-width: 767px) {
  .header .brand a.logo { width: 150px; height: 33px; margin: 14px 0 0 12px; }
}

/* login screen already uses the stacked lockup, which suits it — leave it. */

/* ==========================================================================
   Appointments list — booking.php
   ========================================================================== */

/* status words rendered as pills by js/h2s-ui.js */
.h2s-status {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.h2s-status--ok        { background: #e4f3ea; color: var(--h2s-ok); }
.h2s-status--pending   { background: #fdf2e2; color: var(--h2s-warn); }
.h2s-status--cancelled { background: #f0f2f4; color: var(--h2s-muted); }
.h2s-status--noshow    { background: #fbeae9; color: var(--h2s-dang); }

/* --- pagination ----------------------------------------------------------
   598 page links are printed by booking.php. They all still exist and still
   work; h2s-ui.js hides the ones far from the current page. */

.h2s-page-hidden { display: none !important; }

.h2s-page-gap {
  display: inline-block;
  padding: 5px 4px;
  color: var(--h2s-muted);
  font-size: 13px;
  user-select: none;
}

.h2s-page-readout {
  display: inline-block;
  margin-right: 12px;
  color: var(--h2s-muted);
  font-size: 12.5px;
  font-weight: 600;
}

a.pagination-table.is-current {
  background: var(--h2s-brand) !important;
  border-color: var(--h2s-brand) !important;
  color: #fff !important;
  pointer-events: none;
}

a.pagination-table.h2s-page-step { font-weight: 700; }

/* give the pagination strip room to breathe under the table */
.pagination-table:first-of-type { margin-left: 0; }
table + a.pagination-table,
table ~ a.pagination-table { margin-top: 14px; }

/* --- appointments table --------------------------------------------------- */

table.display.table td { vertical-align: middle; }

/* the action pills sit in the last two columns */
table.display.table td:last-child { white-space: nowrap; }

/* ==========================================================================
   Patient search box — top bar
   ========================================================================== */

.top-nav .atulClassSearch {
  position: absolute;
  left: 262px; /* .header .brand width (240px) + the original 22px gap */
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  max-width: 460px;
  min-width: 220px;
  margin: 0;
}

/* magnifying glass inside the field (Font Awesome is already loaded) */
.top-nav .atulClassSearch:before {
  content: "\f002";
  font-family: FontAwesome;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--h2s-muted);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
  transition: color .15s;
}
.top-nav .atulClassSearch.is-focused:before { color: var(--h2s-brand); }

.top-nav .atulClassSearchInput,
#search_box {
  width: 100%;
  height: 38px !important;
  padding: 0 38px 0 38px !important;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 19px !important;
  background: var(--h2s-bg);
  font-size: 13.5px;
  color: var(--h2s-ink);
  box-shadow: none !important;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#search_box::placeholder { color: var(--h2s-muted); opacity: 1; }

#search_box:focus {
  background: #fff;
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
  outline: none !important;
}

/* clear button, shown by js/h2s-ui.js only when there is text */
.h2s-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #d6dee6;
  color: #fff;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 3;
}
.h2s-search-clear:hover { background: var(--h2s-muted); }
.h2s-search-clear.is-visible { display: block; }

/* a small hint that Esc closes the results */
.h2s-search-hint {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--h2s-muted);
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
  display: none;
  z-index: 3;
}
.h2s-search-hint.is-visible { display: block; }

@media (max-width: 991px) {
  .top-nav .atulClassSearch {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    float: none;
    width: calc(100% - 24px);
    max-width: none;
    margin: 8px 12px;
  }
  .h2s-search-hint { display: none !important; }
}

/* The theme sets .atulClassSearchInput background/radius with !important,
   so these have to match that weight to win. */
.top-nav .atulClassSearchInput,
input#search_box {
  background-color: var(--h2s-bg) !important;
  border-radius: 19px !important;
  color: var(--h2s-ink) !important;
  height: 38px !important;
  padding-right: 38px !important;
}
.top-nav input#search_box:focus,
input#search_box:focus {
  background-color: #fff !important;
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
}

/* ==========================================================================
   Appointment detail — booking_detail.php
   Presentation only; booking_detail.php is byte-identical to the original.
   ========================================================================== */

/* --- read-only patient fields --------------------------------------------
   Name / Email / Phone / Date are disabled inputs, but they looked exactly
   like editable boxes. Present them as values instead of empty form fields. */

.form-control[disabled],
.form-control[readonly] {
  background: #f7f9fb !important;
  border-color: #edf1f5 !important;
  color: var(--h2s-ink) !important;
  cursor: default;
  box-shadow: none !important;
  font-weight: 500;
}
.form-control[disabled]:focus,
.form-control[readonly]:focus { box-shadow: none !important; border-color: #edf1f5 !important; }

/* --- the two status dropdowns -------------------------------------------- */

select[name="confrm"],
select#paymentstatus {
  font-weight: 600;
  color: var(--h2s-ink);
  cursor: pointer;
}
select[name="confrm"]:focus,
select#paymentstatus:focus {
  border-color: var(--h2s-brand) !important;
  box-shadow: 0 0 0 3px var(--h2s-brand-lt) !important;
}

/* --- buttons -------------------------------------------------------------
   Both were btn-danger (red), which reads as "delete". "Next Appointment"
   is a normal navigation and "Submit" is the primary save on this page. */

input[name="nextappointment"] {
  background: #fff !important;
  border: 1px solid var(--h2s-brand) !important;
  color: var(--h2s-brand) !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 9px 18px !important;
}
input[name="nextappointment"]:hover {
  background: var(--h2s-brand-lt) !important;
  color: var(--h2s-brand-dk) !important;
}

section.panel input[type="submit"][name="submit"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 26px !important;
}
section.panel input[type="submit"][name="submit"]:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}

/* --- attachments ---------------------------------------------------------
   Was a bare list of 100x100 thumbnails with the file type underneath.
   Now a tidy grid of cards. The colorbox lightbox (bound to .group3 in
   footer.php) is untouched. */

ul.ac_atulSide {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

ul.ac_atulSide li {
  width: 108px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--h2s-line);
  border-radius: 9px;
  background: #fff;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
ul.ac_atulSide li:hover {
  border-color: var(--h2s-brand);
  box-shadow: 0 4px 14px rgba(33,37,41,.10);
}

ul.ac_atulSide li a { display: block; line-height: 0; }

ul.ac_atulSide li img {
  width: 94px !important;
  height: 94px !important;
  object-fit: cover;
  border-radius: 6px;
  background: var(--h2s-bg);
}

ul.ac_atulSide li br { display: none; }

ul.ac_atulSide li span {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--h2s-muted);
  line-height: 1.3;
  word-break: break-word;
}

/* --- layout tidy-ups ------------------------------------------------------ */

/* the page uses inline margin-top on labels to fake spacing */
.panel-body .form-group > label[style] { margin-top: 0 !important; }
.panel-body .form-group { margin-bottom: 15px; }

/* the two half-width columns should look like a matched pair */
section.panel .col-md-6.col-sm-6.col-xs-12 { padding-left: 0; padding-right: 0; }

/* the rich-text note boxes */
textarea.wysihtml5 { min-height: 110px; }

/* an empty <label>&nbsp;</label> is used purely to push buttons down */
.form-group > label:empty,
.form-group > label:only-child { min-height: 1px; }

/* --- booking_detail.php: stack the two panels ----------------------------
   The two halves live in DIFFERENT parents — the details panel is inside
   .adt_notify, the status panel is a sibling of it — which is why they never
   lined up. Both are made full width so the page reads top-to-bottom:
   Appointment Details, then Status & Notes.

   The inner Phone / Date pair also uses col-md-6 (with PNL0/PNR0) and must
   stay side by side, so these selectors are pinned to the exact depth. */

form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify > .col-md-6,
form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify { margin-bottom: 0; }

form[action^="booking_detail.php"] section.panel { margin-bottom: 20px; }

/* The status panel has no <header> of its own, unlike the details panel.
   Give it a matching title bar so the two cards are a pair. */
form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel:before {
  content: "Status & Notes";
  display: block;
  padding: 15px 18px;
  border-bottom: 1px solid var(--h2s-line);
  color: var(--h2s-ink);
  font-size: 14.5px;
  font-weight: 600;
}

/* keep the inner Phone / Date pair side by side */
form[action^="booking_detail.php"] .col-md-6.PNL0 { padding-left: 0 !important; padding-right: 8px !important; }
form[action^="booking_detail.php"] .col-md-6.PNL0.PNR0 { padding-left: 8px !important; padding-right: 0 !important; }

@media (max-width: 767px) {
  form[action^="booking_detail.php"] .col-md-6.PNL0,
  form[action^="booking_detail.php"] .col-md-6.PNL0.PNR0 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
}

/* the action buttons sit in a form-group with an empty spacer label */
form[action^="booking_detail.php"] .form-group:last-child { margin-bottom: 0; }
form[action^="booking_detail.php"] .btn.pull-right,
form[action^="booking_detail.php"] input[type="submit"].pull-right { margin-top: 4px; }

/* status/payment dropdowns read better on one row on wide screens */
@media (min-width: 992px) {
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body > .form-group:nth-child(n+3) {
    grid-column: 1 / -1;
  }
}

/* The status panel is wrapped in an extra Bootstrap .row, whose -15px side
   margins pushed it 15px wider and out of line with the details card above. */
form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The injected "Status & Notes" title is itself a grid item, so it has to span
   both columns — otherwise it occupies cell 1 and pushes the two dropdowns
   onto separate rows. */
@media (min-width: 992px) {
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel:before {
    grid-column: 1 / -1;
  }
}

/* Bootstrap gives .panel-body clearfix pseudo-elements (content:" "; display:table).
   In a grid container those count as grid items — the ::before took cell 1 and
   pushed Status/Payment onto separate rows. Grid needs no clearfix. */
@media (min-width: 992px) {
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body:before,
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body:after {
    display: none !important;
  }
}

/* --- booking_detail.php: field layout inside the two stacked cards --------
   Stacking the panels made every field span the full ~970px card, which looks
   worse than the original two-column page. Both card bodies become a two
   column grid so fields sit in sensible pairs, with wide controls spanning.

   Bootstrap's .panel-body clearfix pseudo-elements have to be suppressed in
   both, or they occupy grid cells and shift everything by one. */

@media (min-width: 992px) {

  form[action^="booking_detail.php"] section.panel > .panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    align-items: start;
  }
  form[action^="booking_detail.php"] section.panel > .panel-body:before,
  form[action^="booking_detail.php"] section.panel > .panel-body:after {
    display: none !important;
  }

  /* ---- Appointment Details card ----
     children: 1 Name | 2 Email | 3 Phone+Date wrapper | 4 Message | 5 button */
  form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify section.panel > .panel-body > .form-group:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  /* ---- Status & Notes card ----
     children: 1 Status | 2 Payment | 3 Executive Note | 4 Private Message
               5 Attachments | 6 Submit
     Pair the two note boxes; let attachments and the submit row span. */
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body > .form-group:nth-child(-n+4) {
    grid-column: auto;
  }
  form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row > section.panel > .panel-body > .form-group:nth-child(n+5) {
    grid-column: 1 / -1;
  }

  /* the two note textareas match height when side by side */
  form[action^="booking_detail.php"] textarea[name="executive_msg"],
  form[action^="booking_detail.php"] .form-group:nth-child(4) textarea {
    min-height: 130px;
  }
}

/* the trailing form-group holds only the button — keep it tight and right */
form[action^="booking_detail.php"] section.panel > .panel-body > .form-group:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
}
form[action^="booking_detail.php"] section.panel > .panel-body > .form-group:last-child > label { display: none; }
form[action^="booking_detail.php"] section.panel > .panel-body > .form-group:last-child .pull-right { float: none !important; }

/* --- REGRESSION FIX -------------------------------------------------------
   Un-floating the two columns (to stack them) removed the block formatting
   context that was containing their floated child, `section.panel` — the
   theme floats panels left. The columns collapsed to 1px high, the panels
   escaped, and the ancestor .row won the hit test, so the "Veiw Profile"
   link in the card header could not be clicked.

   display: flow-root re-establishes the BFC without clipping (overflow:hidden
   would have cut off the floated button). */

form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify,
form[action^="booking_detail.php"] > .row > .col-md-12 > .adt_notify > .col-md-6,
form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6,
form[action^="booking_detail.php"] > .row > .col-md-12 > .col-md-6 > .row {
  display: flow-root;
}

/* the header's floated action button needs the header to contain it too */
form[action^="booking_detail.php"] section.panel > header.panel-heading {
  display: flow-root;
  overflow: visible;
}

/* ==========================================================================
   Saved confirmation toast (see js/h2s-loader.js)
   booking_detail.php posts to itself, so a successful save just reloaded the
   page at the top with no feedback. This confirms it and the scroll position
   is restored.
   ========================================================================== */

.h2s-toast {
  position: fixed;
  top: 78px;
  right: 22px;
  z-index: 20001;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-left: 4px solid var(--h2s-ok);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(33,37,41,.16);
  padding: 13px 18px 13px 15px;
  max-width: 330px;
  /* Visible the instant it is inserted — no entrance animation.
     An opacity-0 start (via transition or an animation with fill-mode) leaves
     the toast permanently invisible whenever the tab is not rendering, which
     is exactly when a background save finishes. Only the EXIT is animated,
     and if that never runs the toast is simply removed instead. */
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.h2s-toast.is-leaving { opacity: 0; transform: translateY(-8px); }

.h2s-toast-tick {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--h2s-ok);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  font-weight: 700;
}
.h2s-toast-text { color: var(--h2s-ink); font-size: 13.5px; font-weight: 600; }

@media (max-width: 767px) {
  .h2s-toast { top: auto; bottom: 18px; right: 14px; left: 14px; max-width: none; }
}

/* ==========================================================================
   Patient list — customers.php
   Presentation only; customers.php is byte-identical to the original.
   ========================================================================== */

/* --- toolbar --------------------------------------------------------------
   Three actions rendered on two ragged lines: Export sat alone above, then
   "New Patient" and "Bulk Sms" floated right on the next line. They are
   gathered into one right-aligned toolbar row above the table. */

section.panel > .panel-body > #export {
  float: right;
  margin: 0 0 -48px 0 !important;   /* lift onto the row below */
  position: relative;
  z-index: 2;
}

section.panel > .panel-body > .row > .col-md-12 > a.btn.pull-right {
  float: right !important;
  margin: 0 0 14px 8px !important;
}

/* "New Patient" is the primary action here; the other two are secondary */
section.panel > .panel-body > #export,
section.panel > .panel-body > .row > .col-md-12 > a.btn[href="bulk_sms.php"] {
  background: #fff !important;
  border: 1px solid var(--h2s-line) !important;
  color: var(--h2s-body) !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 18px !important;
}
section.panel > .panel-body > #export:hover,
section.panel > .panel-body > .row > .col-md-12 > a.btn[href="bulk_sms.php"]:hover {
  border-color: var(--h2s-brand) !important;
  color: var(--h2s-brand-dk) !important;
  background: var(--h2s-brand-lt) !important;
}

section.panel > .panel-body > .row > .col-md-12 > a.btn[data-target="#myModal"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 18px !important;
}
section.panel > .panel-body > .row > .col-md-12 > a.btn[data-target="#myModal"]:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}

/* clear the floated toolbar so the table starts on its own line */
section.panel > .panel-body > .row > .col-md-12 > table#example { clear: both; }

/* --- table ---------------------------------------------------------------- */

table#example { margin-top: 4px; }

/* only three data columns, so give Name the room */
table#example th:nth-child(2),
table#example td:nth-child(2) { width: 55%; font-weight: 500; color: var(--h2s-ink); }

table#example th:nth-child(3),
table#example td:nth-child(3) { white-space: nowrap; color: var(--h2s-muted); font-variant-numeric: tabular-nums; }

table#example td:first-child { color: var(--h2s-muted); font-size: 12.5px; }

table#example td:last-child { white-space: nowrap; }

/* the Edit pill carries an unquoted <i class=fa fa-key> — space it off the text */
table#example td .label-mini .fa { margin-right: 5px; }

/* --- new patient modal ---------------------------------------------------- */

#myModal .modal-body .form-group { margin-bottom: 14px; }
#myModal .modal-body label { font-size: 13px; font-weight: 600; color: var(--h2s-ink); }

/* Export floats right from .panel-body while Bulk Sms floats right from the
   inner .col-md-12 — different containers, so they overlapped. Export is a
   different kind of action anyway, so it sits at the left of the toolbar. */
section.panel > .panel-body > #export {
  float: left !important;
  margin: 0 0 -48px 0 !important;
}

/* ==========================================================================
   "Add New Patient" modal — customers.php
   Scoped with :has(#gender) because index.php also uses id="myModal" for its
   Forgot Password dialog; that one has no gender field, so it is unaffected.

   The markup closes </form> in the middle of .modal-footer. The browser
   repairs it by keeping both buttons inside the form and nesting the footer
   inside .modal-body, so the buttons live in the scrolling area rather than a
   real footer bar. That is worked around below rather than edited.
   ========================================================================== */

#myModal:has(#gender) .modal-dialog {
  width: 620px;
  max-width: calc(100vw - 32px);
}

#myModal:has(#gender) .modal-body { padding: 20px 22px 0 !important; }

/* two-column field layout: Name | Gender, Phone | Email, Notes full width */
#myModal:has(#gender) .modal-body > form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

#myModal:has(#gender) .modal-body > form > .form-group { margin-bottom: 16px; }

/*
 * 2026-08-25: was `.form-group:nth-child(5)` (assuming Notes was always the
 * 5th field) to span both columns. Adding the Patient Type field shifted
 * every field's position by one, so that positional selector silently
 * started targeting Email instead of Notes - Email doesn't need the full
 * width, and Notes (and now Patient Type, which is too tall to pair neatly
 * with a single-line field like Name) lost it. An explicit class survives
 * fields being added/reordered; position-counting doesn't.
 */
#myModal:has(#gender) .modal-body > form > .form-group.h2s-full-row { grid-column: 1 / -1; }

#myModal:has(#gender) textarea#notes { min-height: 90px; resize: vertical; }

#myModal:has(#gender) .modal-body > form > label,
#myModal:has(#gender) .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
#myModal:has(#gender) .form-group > label span { color: var(--h2s-dang) !important; margin-left: 2px; }

/* the empty <span id="…error"> after each field must not add stray space */
#myModal:has(#gender) .form-group > span:empty { display: none; }

/* --- footer -------------------------------------------------------------- */

#myModal:has(#gender) .modal-footer {
  grid-column: 1 / -1;
  margin: 4px -22px 0 !important;
  padding: 15px 22px !important;
  border-top: 1px solid var(--h2s-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fbfcfd;
  border-radius: 0 0 12px 12px;
}

#myModal:has(#gender) .modal-footer > .btn { margin: 0 !important; float: none !important; }

#myModal:has(#gender) .modal-footer button[name="post"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 26px !important;
  order: 2;                       /* primary action sits on the right */
}
#myModal:has(#gender) .modal-footer button[name="post"]:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}

/* Close was btn-danger (red), which reads as "delete something" */
#myModal:has(#gender) .modal-footer button[data-dismiss="modal"] {
  background: #fff !important;
  border: 1px solid var(--h2s-line) !important;
  color: var(--h2s-body) !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  order: 1;
}
#myModal:has(#gender) .modal-footer button[data-dismiss="modal"]:hover {
  background: var(--h2s-bg) !important;
  border-color: #cfd8e0 !important;
}

/* never let the dialog run off a short screen */
#myModal:has(#gender) .modal-content { max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
#myModal:has(#gender) .modal-body { overflow-y: auto; }

@media (max-width: 640px) {
  #myModal:has(#gender) .modal-body > form { grid-template-columns: 1fr; }
  #myModal:has(#gender) .modal-body > form > .form-group.h2s-full-row { grid-column: auto; }
}

/* error variant of the toast (validation messages from customers.php) */
.h2s-toast--error { border-left-color: var(--h2s-dang); }
.h2s-toast--error .h2s-toast-tick { background: var(--h2s-dang); }

/* ==========================================================================
   Small CRUD forms — add_medical_advice.php, edit_dostotake.php,
   edit_procedure.php, add_procedure.php, add_dostotake.php, adduser.php …
   All share the .btnAdeptSave button, which is used to scope these rules.
   Presentation only; none of these PHP files were touched.
   ========================================================================== */

/* A one- or two-field form stretched across a ~970px card looked lost.
   Constrain the card; the fields then fill it properly. */
form:has(.btnAdeptSave) > .row > .col-md-12 > .adt_notify > section.panel,
form:has(.btnAdeptSave) > .row > .col-md-12 > section.panel {
  max-width: 640px;
}

/* the field column was col-md-5 — roughly 40% of the card, leaving the rest empty */
form:has(.btnAdeptSave) section.panel .panel-body > .row > .col-md-5,
form:has(.btnAdeptSave) section.panel .panel-body > .row > .col-md-6 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

form:has(.btnAdeptSave) section.panel .panel-body > .row > .col-md-12 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

form:has(.btnAdeptSave) section.panel .panel-body { display: flow-root; }
form:has(.btnAdeptSave) section.panel .panel-body > .row { display: flow-root; margin: 0; }

form:has(.btnAdeptSave) .form-group { margin-bottom: 16px; }
form:has(.btnAdeptSave) .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}

/* the save/update button sits on its own row — give it a divider and align it */
form:has(.btnAdeptSave) .btnAdeptSave {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 26px !important;
  float: right;
}
form:has(.btnAdeptSave) .btnAdeptSave:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}
form:has(.btnAdeptSave) .btnAdeptSave .fa { margin-left: 7px; }

form:has(.btnAdeptSave) section.panel .panel-body > .row > .col-md-12:last-child {
  border-top: 1px solid var(--h2s-line);
  margin-top: 4px !important;
  padding-top: 16px !important;
  display: flow-root;
}

/* ==========================================================================
   View Prescriptions — view-prescriptions.php
   ========================================================================== */

/* --- the date filter bar -------------------------------------------------- */
form:has(#start_date) > .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; margin: 0 0 6px; }

form:has(#start_date) > .row > .content-header-left {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
form:has(#start_date) > .row > .content-header-left:has(button) { flex: 0 0 auto; }

form:has(#start_date) label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
form:has(#start_date) input[type="date"] { width: 190px; height: 38px; cursor: pointer; }

form:has(#start_date) button[type="submit"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  height: 38px;
  padding: 0 22px !important;
  margin: 0 !important;
}
form:has(#start_date) button[type="submit"]:hover { background: var(--h2s-brand-dk) !important; }

/* the .searchmargin class pushes the button down to clear the label */
.searchmargin { margin-top: 0 !important; }

/* --- download selected ---------------------------------------------------- */
form:has(button[name="download_selected"]) { margin-top: 6px; }

button[name="download_selected"] {
  background: #fff !important;
  border: 1px solid var(--h2s-brand) !important;
  color: var(--h2s-brand) !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 9px 20px !important;
  margin: 0 0 14px 0 !important;
}
button[name="download_selected"]:hover {
  background: var(--h2s-brand-lt) !important;
  color: var(--h2s-brand-dk) !important;
}

/* --- the prescriptions table ---------------------------------------------- */
form:has(button[name="download_selected"]) table th:first-child,
form:has(button[name="download_selected"]) table td:first-child {
  text-align: center;
  white-space: nowrap;
}
form:has(button[name="download_selected"]) table input[type="checkbox"] {
  width: 15px; height: 15px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--h2s-brand);
}
form:has(button[name="download_selected"]) table th:first-child { font-size: 11.5px; }
form:has(button[name="download_selected"]) table td a { font-weight: 500; }
form:has(button[name="download_selected"]) table td:last-child {
  white-space: nowrap;
  color: var(--h2s-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The wrapper panel opened by header.php
   header.php ends with an unclosed <section class="panel"> whose heading
   (.cus_main_head) contains nothing but a chevron toggle. Pages that add their
   own <section class="panel"> therefore render a card inside a card, with a
   dead empty bar on top of the outer one.
   ========================================================================== */

/* 1. When the wrapper contains another panel, it is not a card — flatten it. */
section.panel:has(> header.panel-heading.cus_main_head):has(section.panel) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

/* 2. The wrapper heading holds only the chevron; collapse it wherever it is
      genuinely empty, so there is no blank strip above the content. */
header.panel-heading.cus_main_head:has(> .tools:only-child) {
  display: none !important;
}

/* ==========================================================================
   BROWSER-COMPATIBLE MIRRORS OF THE :has() RULES
   ==========================================================================
   Everything above that uses :has() is repeated here against plain classes
   applied by tagContainers() in js/h2s-ui.js.

   :has() only exists in Chrome/Edge 105+ and Firefox 121+. On anything older
   the original rules are dropped entirely and the affected pages — the small
   CRUD forms, View Prescriptions, the Add New Patient modal — render with no
   redesign at all. These duplicates work in every browser.
   ========================================================================== */

/* --- small CRUD forms ----------------------------------------------------- */

.h2s-crud-form > .row > .col-md-12 > .adt_notify > section.panel,
.h2s-crud-form > .row > .col-md-12 > section.panel { max-width: 640px; }

.h2s-crud-form section.panel .panel-body > .row > .col-md-5,
.h2s-crud-form section.panel .panel-body > .row > .col-md-6,
.h2s-crud-form section.panel .panel-body > .row > .col-md-12 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.h2s-crud-form section.panel .panel-body { display: flow-root; }
.h2s-crud-form section.panel .panel-body > .row { display: flow-root; margin: 0; }

.h2s-crud-form .form-group { margin-bottom: 16px; }
.h2s-crud-form .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}

.h2s-crud-form .btnAdeptSave {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 26px !important;
  float: right;
}
.h2s-crud-form .btnAdeptSave:hover {
  background: var(--h2s-brand-dk) !important;
  border-color: var(--h2s-brand-dk) !important;
}
.h2s-crud-form .btnAdeptSave .fa { margin-left: 7px; }

.h2s-crud-form section.panel .panel-body > .row > .col-md-12:last-child {
  border-top: 1px solid var(--h2s-line);
  margin-top: 4px !important;
  padding-top: 16px !important;
  display: flow-root;
}

/* --- view-prescriptions: filter bar ---------------------------------------- */

.h2s-presc-filter > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 14px;
  margin: 0 0 6px;
}
.h2s-presc-filter > .row > .content-header-left {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.h2s-presc-filter label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
.h2s-presc-filter input[type="date"] { width: 190px; height: 38px; cursor: pointer; }
.h2s-presc-filter button[type="submit"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  height: 38px;
  padding: 0 22px !important;
  margin: 0 !important;
}
.h2s-presc-filter button[type="submit"]:hover { background: var(--h2s-brand-dk) !important; }

/* --- view-prescriptions: download + table ---------------------------------- */

.h2s-presc-download { margin-top: 6px; }

.h2s-presc-download table th:first-child,
.h2s-presc-download table td:first-child { text-align: center; white-space: nowrap; }
.h2s-presc-download table input[type="checkbox"] {
  width: 15px; height: 15px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--h2s-brand);
}
.h2s-presc-download table th:first-child { font-size: 11.5px; }
.h2s-presc-download table td a { font-weight: 500; }
.h2s-presc-download table td:last-child {
  white-space: nowrap;
  color: var(--h2s-muted);
  font-variant-numeric: tabular-nums;
}

/* --- the wrapper panel header.php leaves open ------------------------------ */

section.panel.h2s-wrapper-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}
header.panel-heading.h2s-empty-heading { display: none !important; }

/* --- Add New Patient modal -------------------------------------------------- */

.h2s-patient-modal .modal-dialog { width: 620px; max-width: calc(100vw - 32px); }
.h2s-patient-modal .modal-body { padding: 20px 22px 0 !important; overflow-y: auto; }
.h2s-patient-modal .modal-content { max-height: calc(100vh - 60px); display: flex; flex-direction: column; }

.h2s-patient-modal .modal-body > form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.h2s-patient-modal .modal-body > form > .form-group { margin-bottom: 16px; }
/* 2026-08-25: same fix as the #myModal:has(#gender) block above, which
   this duplicates (the modal carries both the id/:has() selector and this
   class - two separate styling passes that were never consolidated).
   Adding the Patient Type field shifted every field's position, so
   :nth-child(5) silently started targeting Phone instead of Notes. */
.h2s-patient-modal .modal-body > form > .form-group.h2s-full-row { grid-column: 1 / -1; }
.h2s-patient-modal textarea#notes { min-height: 90px; resize: vertical; }

.h2s-patient-modal .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
.h2s-patient-modal .form-group > label span { color: var(--h2s-dang) !important; margin-left: 2px; }
.h2s-patient-modal .form-group > span:empty { display: none; }

.h2s-patient-modal .modal-footer {
  grid-column: 1 / -1;
  margin: 4px -22px 0 !important;
  padding: 15px 22px !important;
  border-top: 1px solid var(--h2s-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fbfcfd;
  border-radius: 0 0 12px 12px;
}
.h2s-patient-modal .modal-footer > .btn { margin: 0 !important; float: none !important; }
.h2s-patient-modal .modal-footer button[name="post"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 26px !important;
  order: 2;
}
.h2s-patient-modal .modal-footer button[data-dismiss="modal"] {
  background: #fff !important;
  border: 1px solid var(--h2s-line) !important;
  color: var(--h2s-body) !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  order: 1;
}

@media (max-width: 640px) {
  .h2s-patient-modal .modal-body > form { grid-template-columns: 1fr; }
  .h2s-patient-modal .modal-body > form > .form-group.h2s-full-row { grid-column: auto; }
}

/* --- booking_detail: stacked cards ----------------------------------------- */

.h2s-booking-detail > .row > .col-md-12 > .adt_notify,
.h2s-booking-detail > .row > .col-md-12 > .adt_notify > .col-md-6,
.h2s-booking-detail > .row > .col-md-12 > .col-md-6,
.h2s-booking-detail > .row > .col-md-12 > .col-md-6 > .row { display: flow-root; }

.h2s-booking-detail > .row > .col-md-12 > .adt_notify > .col-md-6,
.h2s-booking-detail > .row > .col-md-12 > .col-md-6 {
  float: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.h2s-booking-detail > .row > .col-md-12 > .col-md-6 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.h2s-booking-detail section.panel { margin-bottom: 20px; }
.h2s-booking-detail section.panel > header.panel-heading { display: flow-root; overflow: visible; }

/* ==========================================================================
   View Prescriptions — substantial redesign
   Filter becomes a titled card, the list gets a count and a selection
   toolbar, and the table is restyled properly. Class-based only (no :has()),
   so it works in every browser.
   ========================================================================== */

/* --- filter card ---------------------------------------------------------- */

form.h2s-presc-filter {
  display: block;
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin: 0 0 18px;
  box-shadow: var(--h2s-shadow);
}

.h2s-filter-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--h2s-muted);
  margin: 0 0 12px;
}

form.h2s-presc-filter > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 0;
}

/* --- result count --------------------------------------------------------- */

.h2s-result-count {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin: 0 0 10px;
}

/* --- selection toolbar ---------------------------------------------------- */

form.h2s-presc-download {
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  box-shadow: var(--h2s-shadow);
  padding: 16px 18px 6px;
}

.h2s-selected-count {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-brand-dk);
  vertical-align: middle;
}

button[name="download_selected"].is-armed {
  background: var(--h2s-brand) !important;
  color: #fff !important;
  border-color: var(--h2s-brand) !important;
}

/* --- the table ------------------------------------------------------------ */

form.h2s-presc-download table {
  margin-top: 14px;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 9px;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}

form.h2s-presc-download table thead th {
  background: #f7f9fb !important;
  color: var(--h2s-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 0 !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  padding: 12px 14px !important;
}

form.h2s-presc-download table tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  padding: 12px 14px !important;
  font-size: 13.5px;
  vertical-align: middle;
}
form.h2s-presc-download table tbody tr:last-child td { border-bottom: 0 !important; }
form.h2s-presc-download table tbody tr:hover td { background: var(--h2s-brand-lt) !important; }

/* file name column: document icon + medium weight */
form.h2s-presc-download table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--h2s-ink);
}
form.h2s-presc-download table tbody td:nth-child(2):before {
  /* file-pdf-o (\f1c1) is not in this app's Font Awesome 4.0.3 and rendered as
     an empty box. file-o (\f016) exists in 4.0.3. */
  content: "\f016";
  font-family: FontAwesome;
  color: var(--h2s-brand);
  margin-right: 9px;
  font-weight: normal;
}

form.h2s-presc-download table tbody td:last-child {
  color: var(--h2s-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  form.h2s-presc-filter > .row > .content-header-left { width: 100% !important; }
  form.h2s-presc-filter input[type="date"] { width: 100% !important; }
}

/* Higher specificity + literal colours, so the "armed" download button cannot
   lose to the base rule regardless of custom-property resolution order. */
form.h2s-presc-download button[name="download_selected"].is-armed,
form.h2s-presc-download button[name="download_selected"].is-armed:hover {
  background: #1e8a21 !important;
  background-color: #1e8a21 !important;
  border-color: #1e8a21 !important;
  color: #ffffff !important;
}

/* the prescription file name is a link now (added by js/h2s-ui.js) */
form.h2s-presc-download table tbody td:nth-child(2) a {
  color: var(--h2s-ink) !important;
  text-decoration: none;
  font-weight: 600;
}
form.h2s-presc-download table tbody td:nth-child(2) a:hover {
  color: var(--h2s-brand-dk) !important;
  text-decoration: underline;
}
/* a file we know is not present on this machine */
form.h2s-presc-download table tbody td:nth-child(2) a.h2s-missing {
  color: var(--h2s-muted) !important;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ==========================================================================
   Admin section — manage_user, edituser, managerole, enquiry-list, reports,
   managenotification, setting
   Class-based only (no :has()), so it works in every browser.
   ========================================================================== */

/* --- shared: intro text and empty states ---------------------------------- */

.h2s-page-intro {
  color: var(--h2s-body);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 70ch;
}

.h2s-empty-note {
  color: var(--h2s-muted);
  font-size: 13.5px;
  font-style: italic;
  background: #fbfcfd;
  border: 1px dashed var(--h2s-line);
  border-radius: 9px;
  padding: 18px;
  margin: 0;
}

/* --- toolbar buttons that float above a table ----------------------------- */

section.panel .panel-body > a.btn.pull-right,
section.panel .panel-body #unseen > a.btn.pull-right {
  float: right !important;
  margin: 0 0 14px 8px !important;
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 9px 18px !important;
}
section.panel .panel-body > a.btn.pull-right:hover { background: var(--h2s-brand-dk) !important; }

section.panel .panel-body table { clear: both; }

/* --- role matrix (managerole.php) ----------------------------------------- */
/* A grid of yes/no permissions. Centre the cells and make the state readable. */

.h2s-role-table th,
section.panel table th[style*="center"] { text-align: center; }

section.panel table td input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--h2s-brand);
  cursor: pointer;
  vertical-align: middle;
}

/* --- notification template panels (managenotification.php) ---------------- */
/* Four side-by-side panels of template titles; keep them even and readable. */

.h2s-noti-grid { display: flex; flex-wrap: wrap; gap: 0; }

section.panel table td a.label-mini { white-space: nowrap; }

/* --- enquiry list --------------------------------------------------------- */

section.panel table td p { margin: 0 0 2px; font-size: 13px; line-height: 1.5; }
section.panel table td p:last-child { margin-bottom: 0; }

/* the enquiry table carries a lot per row — tighten it up */
.h2s-enquiry-table td { vertical-align: top !important; }

/* --- reports -------------------------------------------------------------- */

/* report type reads as a category, not free text */
.h2s-report-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--h2s-brand-lt);
  color: var(--h2s-brand-dk);
  font-size: 11.5px;
  font-weight: 600;
}

/* --- edituser / adduser forms --------------------------------------------- */

.h2s-user-form .form-group { margin-bottom: 16px; }
.h2s-user-form .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
.h2s-user-form .form-control { height: 40px; }
.h2s-user-form textarea.form-control { height: auto; min-height: 90px; }

/* the permission checkboxes on the user form */
.h2s-user-form .checkbox label,
.h2s-user-form label.checkbox-inline {
  font-weight: 500;
  color: var(--h2s-body);
  font-size: 13.5px;
}

/* ==========================================================================
   Content pages — pagess, forpatient, editotherpage, table (photo gallery),
   adduser and their internal pages (pagenew, editpatient, imgform, uploadnews)
   Class-based only, no :has().
   ========================================================================== */

/* --- CMS list tables (pagess, forpatient) --------------------------------- */

.h2s-cms-list table td { vertical-align: middle !important; }
.h2s-cms-list table td:first-child { color: var(--h2s-muted); width: 60px; text-align: center; }
.h2s-cms-list table td:nth-child(2) { font-weight: 600; color: var(--h2s-ink); }
.h2s-cms-list table td:last-child { white-space: nowrap; text-align: center; }

/* --- the content editor (editotherpage, editpage, pagenew) ---------------- */

.h2s-cms-editor .form-group { margin-bottom: 18px; }
.h2s-cms-editor .form-group > label,
.h2s-cms-editor label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
  margin-bottom: 6px;
}
.h2s-cms-editor input.form-control { height: 40px; }
.h2s-cms-editor textarea.form-control,
.h2s-cms-editor textarea.wysihtml5 {
  min-height: 260px;
  line-height: 1.6;
  font-size: 13.5px;
}

/* the editor's Save button was btn-success (a different green from the app) */
.h2s-cms-editor button[type="submit"],
.h2s-cms-editor .btn-success[type="submit"] {
  background: var(--h2s-brand) !important;
  border: 1px solid var(--h2s-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 26px !important;
}
.h2s-cms-editor button[type="submit"]:hover { background: var(--h2s-brand-dk) !important; }
.h2s-cms-editor button[type="submit"] .fa { margin-left: 7px; }

/* wysihtml5 wraps the textarea in its own toolbar + iframe */
.wysihtml5-toolbar { margin-bottom: 8px; }
.wysihtml5-toolbar .btn {
  border-radius: 6px !important;
  font-size: 12.5px;
  padding: 5px 10px !important;
}
.wysihtml5-sandbox {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 8px !important;
}

/* --- photo gallery (table.php) -------------------------------------------- */

.h2s-gallery table td { vertical-align: middle !important; }
.h2s-gallery table td img {
  border-radius: 7px;
  border: 1px solid var(--h2s-line);
  object-fit: cover;
  background: var(--h2s-bg);
}
.h2s-gallery table td a.group3 { display: inline-block; line-height: 0; }
.h2s-gallery table td:nth-child(2) { color: var(--h2s-body); font-size: 13px; }

/* --- the empty state shared by these listings ----------------------------- */

.h2s-cms-empty td,
td.h2s-cms-empty {
  text-align: center !important;
  color: var(--h2s-muted) !important;
  font-style: italic;
  padding: 26px 12px !important;
  background: #fbfcfd;
}

/* The CMS editor's Save carries .btn-success; beat it with a literal colour and
   higher specificity rather than relying on custom-property resolution order. */
form.h2s-cms-editor button[type="submit"].btn-success,
form.h2s-cms-editor button[type="submit"].btn-success:hover,
form.h2s-cms-editor button[type="submit"] {
  background: #1e8a21 !important;
  background-color: #1e8a21 !important;
  border-color: #1e8a21 !important;
  color: #ffffff !important;
}
form.h2s-cms-editor button[type="submit"]:hover {
  background: #166b19 !important;
  background-color: #166b19 !important;
  border-color: #166b19 !important;
}

/* ==========================================================================
   adduser.php / edituser.php are LARGE forms — name, email, username, role,
   password, notes, a weekly-schedule table and a holidays table.

   They also carry .btnAdeptSave, so they were picking up the narrow
   single-column card intended for one- and two-field forms (card capped at
   640px, every column forced to 100%). That squashed the whole form into one
   strip. These rules undo that and restore a real multi-column layout.
   ========================================================================== */

form.h2s-user-form > .row > .col-md-12 > .adt_notify > section.panel,
form.h2s-user-form > .row > .col-md-12 > section.panel,
form.h2s-crud-form.h2s-user-form > .row > .col-md-12 > .adt_notify > section.panel,
form.h2s-crud-form.h2s-user-form > .row > .col-md-12 > section.panel {
  max-width: none !important;
}

@media (min-width: 992px) {
  form.h2s-user-form section.panel .panel-body > .row > .col-md-5 {
    width: 41.66666667% !important;
    float: left !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  form.h2s-user-form section.panel .panel-body > .row > .col-md-6 {
    width: 50% !important;
    float: left !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  form.h2s-user-form section.panel .panel-body > .row > .col-md-3 {
    width: 25% !important;
    float: left !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  form.h2s-user-form section.panel .panel-body > .row > .col-md-12 {
    width: 100% !important;
    float: none !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* the schedule / holiday tables sit inside those columns */
form.h2s-user-form section.panel table.table {
  margin-bottom: 0;
  border: 1px solid var(--h2s-line) !important;
  border-radius: 9px;
  overflow: hidden;
}
form.h2s-user-form section.panel table.table td { vertical-align: middle !important; }
form.h2s-user-form section.panel table.table label {
  font-weight: 500;
  font-size: 13px;
  color: var(--h2s-body);
  margin: 0;
  display: inline-block;
}
form.h2s-user-form label.pad-top-5 { padding-top: 4px; }

/* a header above each sub-table reads better than a bare grid */
form.h2s-user-form section.panel section > header,
form.h2s-user-form section.panel .panel-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--h2s-ink);
}

/* keep the action row clear of the floated columns */
form.h2s-user-form section.panel .panel-body { display: flow-root; }
form.h2s-user-form section.panel .panel-body > .row { display: flow-root; }

/* the weekday checkboxes */
form.h2s-user-form input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--h2s-brand);
  vertical-align: middle;
  margin-right: 5px;
}

/* time inputs in the schedule rows */
form.h2s-user-form input[type="time"],
form.h2s-user-form select.form-control { height: 36px; }

@media (max-width: 991px) {
  form.h2s-user-form section.panel .panel-body > .row > [class*="col-md-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==========================================================================
   adduser.php / edituser.php — proper section layout
   The form is three unrelated blocks (account details, a weekly availability
   table, holidays) that were sitting in ragged Bootstrap columns: 41.7% + 50%
   left an odd gap, and the 25% Holidays column was orphaned underneath.
   They are now equal halves with real section cards.
   ========================================================================== */

@media (min-width: 992px) {
  form.h2s-user-form section.panel .panel-body > .row > .col-md-5,
  form.h2s-user-form section.panel .panel-body > .row > .col-md-6 {
    width: 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  form.h2s-user-form section.panel .panel-body > .row > .col-md-5 { padding-right: 11px !important; }
  form.h2s-user-form section.panel .panel-body > .row > .col-md-6 { padding-left: 11px !important; }

  /* Holidays gets its own full-width row rather than a stranded quarter */
  form.h2s-user-form section.panel .panel-body > .row > .col-md-3 {
    width: 100% !important;
    float: none !important;
    clear: both;
    padding: 0 !important;
  }
}

/* each block reads as a card */
form.h2s-user-form .h2s-section {
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 0 4px;
  height: 100%;
}
form.h2s-user-form .h2s-section-title {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid var(--h2s-line);
  background: #fbfcfd;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--h2s-muted);
  margin: 0;
}
form.h2s-user-form .h2s-section > .h2s-section-body { padding: 16px; }
form.h2s-user-form .h2s-section .form-group:last-child { margin-bottom: 0; }

/* the tables inside the availability / holidays blocks lose their own frame */
form.h2s-user-form .h2s-section table.table {
  border: 0 !important;
  border-radius: 0;
  margin: 0;
}
form.h2s-user-form .h2s-section table.table > thead > tr > th {
  /* NOT transparent: the theme paints the <thead> itself teal, so a
     transparent <th> let that show straight through and the header stayed
     teal-on-teal. Paint the cell opaquely instead. */
  background: #f7f9fb !important;
  background-color: #f7f9fb !important;
  border-bottom: 1px solid var(--h2s-line) !important;
  font-size: 11px !important;
  padding: 10px 12px !important;
}
form.h2s-user-form .h2s-section table.table > tbody > tr > td {
  border-top: 1px solid var(--h2s-line) !important;
  padding: 8px 12px !important;
}
form.h2s-user-form .h2s-section table.table > tbody > tr:first-child > td { border-top: 0 !important; }
form.h2s-user-form .h2s-section table.table > tbody > tr:hover > td { background: transparent !important; }

/* day name + checkbox on the availability rows */
form.h2s-user-form .h2s-section table td label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--h2s-ink);
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}
form.h2s-user-form .h2s-section table td input[type="text"] {
  height: 34px;
  font-size: 13px;
  padding: 0 10px;
}

/* the save row */
form.h2s-user-form section.panel .panel-body > .row > .col-md-12 {
  border-top: 1px solid var(--h2s-line);
  margin-top: 18px !important;
  padding-top: 16px !important;
  display: flow-root;
}

@media (max-width: 991px) {
  form.h2s-user-form section.panel .panel-body > .row > .col-md-5,
  form.h2s-user-form section.panel .panel-body > .row > .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 16px;
  }
}


/* ==========================================================================
   adduser / edituser — visual corrections
   ========================================================================== */

/* 1. Table headers were rendering teal-on-teal and were unreadable.
      styles-cus.css sets  table thead tr th { background:#1fb5ad; color:#fff }
      app-wide with a bare element selector. Override it at the same shape so
      it cannot win anywhere, not just inside a section card. */
table thead tr th,
table thead tr th a,
.table thead tr th,
form.h2s-user-form table thead tr th {
  background: #f7f9fb !important;
  background-color: #f7f9fb !important;
  color: #6b7270 !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--h2s-line) !important;
}
table thead tr th a { color: var(--h2s-brand) !important; }

/* 2. The availability header row duplicated the card title. Make it a quiet
      column header instead of a coloured band. */
form.h2s-user-form .h2s-section table thead tr th {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 9px 12px !important;
}

/* 3. Holidays was a full card wrapping a table wrapping one link.
      Strip the chrome and present it as a plain action. */
form.h2s-user-form .h2s-section--holidays .h2s-section-body { padding: 12px 16px !important; }
form.h2s-user-form .h2s-section--holidays table,
form.h2s-user-form .h2s-section--holidays thead { display: none !important; }
form.h2s-user-form .h2s-section--holidays .form-group { margin: 0 !important; }
form.h2s-user-form .h2s-section--holidays label {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
form.h2s-user-form .h2s-holiday-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--h2s-line);
  border-radius: 8px;
  background: #fff;
  color: var(--h2s-brand) !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
form.h2s-user-form .h2s-holiday-link:hover {
  border-color: var(--h2s-brand);
  background: var(--h2s-brand-lt);
  color: var(--h2s-brand-dk) !important;
}
form.h2s-user-form .h2s-holiday-link.h2s-holiday-link-disabled {
  color: var(--h2s-muted) !important;
  background: var(--h2s-bg);
  cursor: not-allowed;
}
form.h2s-user-form .h2s-holiday-link.h2s-holiday-link-disabled:hover {
  border-color: var(--h2s-line);
  background: var(--h2s-bg);
  color: var(--h2s-muted) !important;
}

/* 4. Tighter account-details spacing so the two cards are closer in height */
form.h2s-user-form .h2s-section .form-group { margin-bottom: 13px; }
form.h2s-user-form .h2s-section textarea.form-control { min-height: 72px; }

/* the time pickers */
form.h2s-user-form input.timepicker { width: 100%; max-width: 150px; text-align: center; }

/* The teal actually lives on the <thead> element (and in places on <tr>), not
   only on <th>. Neutralise the containers too, otherwise any transparent or
   partially-transparent cell lets it bleed through. */
table > thead,
table > thead > tr,
.table > thead,
.table > thead > tr,
form.h2s-user-form table thead,
form.h2s-user-form table thead tr,
form.h2s-presc-download table thead,
form.h2s-presc-download table thead tr {
  background: #f7f9fb !important;
  background-color: #f7f9fb !important;
  background-image: none !important;
}

/* ==========================================================================
   Manage Reports — added 2026-07-28.

   The old page had a DataTables search box and "records per page" menu
   sitting above the table. Both looked functional but only ever acted on
   the 50 rows the server had already sent for the current page, so a search
   for anything on page 2+ silently found nothing. reports.php now runs a
   real, server-side search (?q=) instead, DataTables is turned off for this
   one table (js/dynamic_table_init.js checks for .h2s-no-datatable), and
   this section restyles the search card, result count and table to match
   the rest of the redesign.
   ========================================================================== */

form.h2s-reports-filter {
  display: block;
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin: 0 0 16px;
  box-shadow: var(--h2s-shadow);
}

form.h2s-reports-filter > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 0;
}

form.h2s-reports-filter .form-group {
  flex: 1 1 260px;
  margin: 0;
}

form.h2s-reports-filter label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2s-muted);
  margin-bottom: 6px;
}

form.h2s-reports-filter input[type="text"] {
  width: 100%;
  height: 38px;
  border: 1px solid var(--h2s-line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--h2s-ink);
}

form.h2s-reports-filter input[type="text"]:focus {
  outline: none;
  border-color: var(--h2s-brand);
  box-shadow: 0 0 0 3px var(--h2s-brand-lt);
}

.h2s-reports-search-btn {
  height: 38px;
  padding: 0 20px !important;
  background: var(--h2s-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 13.5px;
}
.h2s-reports-search-btn:hover { background: var(--h2s-brand-dk) !important; }

.h2s-reports-clear {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--h2s-line);
  border-radius: 8px;
  color: var(--h2s-body) !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.h2s-reports-clear:hover { background: var(--h2s-bg); }

/* result count, printed as the table's own first row so it scrolls with it */
.h2s-reports tr.h2s-result-count-row td {
  background: #fff !important;
  border: none !important;
  padding: 0 4px 12px !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--h2s-ink);
}

.h2s-reports table#dynamic-table {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 9px;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}

.h2s-reports table#dynamic-table thead th {
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.h2s-reports table#dynamic-table tbody tr:hover td {
  background: var(--h2s-brand-lt);
}

.h2s-reports table#dynamic-table td {
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--h2s-body);
}

@media (max-width: 640px) {
  form.h2s-reports-filter > .row { flex-direction: column; align-items: stretch; }
  .h2s-reports-search-btn, .h2s-reports-clear { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Dashboard — added 2026-07-28.

   Four cards: two of them ("Today" and "Tomorrow") are separate <section
   class="panel"> elements with no gap or heading between them, so they read
   as one card that's been accidentally cut in half. js/h2s-ui.js tags them
   h2s-dash-appt-first/-second; this joins them into one continuous card and
   turns their in-table <th colspan> labels into a proper sub-heading bar.
   ========================================================================== */

.h2s-dash-appt-first {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  border-radius: var(--h2s-radius) var(--h2s-radius) 0 0 !important;
}
.h2s-dash-appt-second {
  margin-top: 0 !important;
  border-top: none !important;
  border-radius: 0 0 var(--h2s-radius) var(--h2s-radius) !important;
  box-shadow: none !important;
}
.h2s-dash-appt-second .panel-body { padding-top: 6px !important; }

/* the "Today" / "Tomorrow" <th colspan> row, used as a sub-heading */
.h2s-dash-table thead th {
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--h2s-muted) !important;
  padding: 10px 14px !important;
}
.h2s-dash-table thead th a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600 !important;
  color: var(--h2s-brand) !important;
}
.h2s-dash-table thead th a:hover { color: var(--h2s-brand-dk) !important; }

.h2s-dash-table { border-collapse: separate !important; border-spacing: 0; }
.h2s-dash-table tbody td {
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--h2s-body);
  padding: 11px 14px !important;
}
.h2s-dash-table tbody tr:hover td { background: var(--h2s-brand-lt); }
.h2s-dash-table tbody td[onclick] { cursor: pointer; }
.h2s-dash-table tbody td a { color: var(--h2s-ink); font-weight: 600; }
.h2s-dash-table tbody td span[style*="italic"] {
  font-style: normal !important;
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--h2s-muted);
}

/* the status link that lost its icon (orphan </i> with no opening tag, and a
   misspelled href — js/h2s-ui.js fixes the href; this restores the icon) */
a.h2s-dash-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--h2s-muted) !important;
}
a.h2s-dash-view:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 15px;
}
a.h2s-dash-view:hover { color: var(--h2s-brand) !important; }

/* Patients Message / Personal Notes feed rows */
.h2s-dash-table td[colspan="2"] {
  padding: 12px 14px !important;
  line-height: 1.5;
}
.h2s-dash-table td[colspan="2"] > a { color: var(--h2s-brand-dk); font-weight: 600; }
.h2s-dash-table td[colspan="2"] span[style*="italic"] {
  display: block;
  margin-top: 4px;
  font-style: normal !important;
  font-size: 12px;
  color: var(--h2s-muted);
}

/* ==========================================================================
   holidays.php — added 2026-07-29.

   The year/prev/next links were completely empty (`<a class='holiday_prev'
   href='...'></a>`, no text, no icon) - invisible AND unusable, since the
   only way to change year was editing the URL by hand. Restored as visible
   chevrons. The page also has its own inline <style> block (loaded after
   this file in source order, so it would otherwise win the cascade) hard-
   coding colours that clash with the rest of the app - overridden here with
   !important, same as everywhere else in this file.
   ========================================================================== */

a.holiday_prev, a.holiday_next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--h2s-brand) !important;
  vertical-align: middle;
}
a.holiday_prev:hover, a.holiday_next:hover { background: var(--h2s-brand-lt); }
a.holiday_prev:before { content: "\f104"; font-family: FontAwesome; font-size: 16px; }
a.holiday_next:before { content: "\f105"; font-family: FontAwesome; font-size: 16px; }

.topic {
  font-family: inherit !important;
  text-decoration: none !important;
  padding: 4px 0 16px;
}
.topic .txtcntrAdept {
  font-size: 15px !important;
  font-weight: 700;
  color: var(--h2s-ink);
  margin: 0 10px;
}
.monthnames {
  color: var(--h2s-ink) !important;
  font-family: inherit !important;
  font-weight: 700;
  font-size: 12.5px !important;
}
.tab {
  border: 1px solid var(--h2s-line) !important;
  border-radius: 8px;
  overflow: hidden;
  height: auto !important;
}
.daynames {
  background: #f7f9fb !important;
  color: var(--h2s-muted) !important;
  font-family: inherit !important;
  font-weight: 700;
  font-size: 10.5px !important;
  text-transform: uppercase;
}
tr.daynames td {
  background: #f7f9fb !important;
  background-color: #f7f9fb !important;
  color: var(--h2s-muted) !important;
  padding: 6px 0;
}
.tab td[onclick] {
  cursor: pointer;
  font-size: 12.5px !important;
  color: var(--h2s-body);
  padding: 5px 0;
}
.tab td[onclick]:hover { background: var(--h2s-brand-lt); }
.curdate {
  background: var(--h2s-brand-lt) !important;
  color: var(--h2s-brand-dk) !important;
  font-family: inherit !important;
  text-decoration: none !important;
  border-radius: 4px;
}
.holiday { background: #fbeae9 !important; color: var(--h2s-dang) !important; }

/* ==========================================================================
   customer_update.php — "last visit" hint — added 2026-07-30.
   A small reference line under Chief Complaint / Physical Examination /
   Notes / Investigation / Instructions showing what was recorded last time,
   with a one-click way to reuse it. Never auto-fills on its own.
   ========================================================================== */

.h2s-last-visit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--h2s-brand-lt);
  border: 1px solid var(--h2s-line);
  border-radius: 7px;
  font-size: 12px;
}
.h2s-last-visit-label {
  font-weight: 700;
  color: var(--h2s-brand-dk);
  white-space: nowrap;
}
.h2s-last-visit-text {
  color: var(--h2s-body);
  flex: 1 1 auto;
  min-width: 120px;
}
.h2s-last-visit-use {
  border: 1px solid var(--h2s-brand);
  background: #fff;
  color: var(--h2s-brand) !important;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.h2s-last-visit-use:hover {
  background: var(--h2s-brand);
  color: #fff !important;
}

/* ==========================================================================
   appointment.php — schedule conflict warning — added 2026-07-30.
   Non-blocking: staff can still book. Just makes an overlap visible instead
   of invisible.
   ========================================================================== */

.h2s-conflict-warning {
  margin: 4px 0 14px;
  padding: 10px 14px;
  background: #fdf2e2;
  border: 1px solid #f0d9ad;
  border-radius: 8px;
  color: var(--h2s-warn);
  font-size: 13px;
  line-height: 1.5;
}
.h2s-conflict-warning strong { color: var(--h2s-ink); }

/* --- day schedule (doctor hours / holiday / existing bookings) ------------ */

.h2s-day-schedule {
  margin: 4px 0 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 10px;
  box-shadow: var(--h2s-shadow);
}
.h2s-day-schedule-holiday {
  margin-bottom: 10px;
  padding: 9px 12px;
  background: #fbeae9;
  border: 1px solid #edc7c4;
  border-radius: 7px;
  color: var(--h2s-dang);
  font-size: 13px;
}
.h2s-day-schedule-holiday strong { color: var(--h2s-ink); }
.h2s-day-schedule-hours {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--h2s-muted);
  margin-bottom: 8px;
}
.h2s-day-schedule-empty {
  font-size: 13px;
  color: var(--h2s-ok);
  font-weight: 600;
}
.h2s-day-schedule-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--h2s-muted);
  margin-bottom: 8px;
}
.h2s-day-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}
.h2s-day-schedule-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--h2s-line);
  font-size: 13px;
}
.h2s-day-schedule-list li:first-child { border-top: none; }
.h2s-day-schedule-time {
  color: var(--h2s-ink);
  font-weight: 600;
  white-space: nowrap;
}
.h2s-day-schedule-patient {
  color: var(--h2s-body);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   customer_update.php — searchable favourite lists — added 2026-07-30.
   ========================================================================== */

.h2s-search-select { position: relative; }

.h2s-search-select-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.h2s-search-select-input {
  cursor: text;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d8fa1' stroke-width='1.6'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4 4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 15px;
  padding-right: 32px !important;
}

.h2s-search-select-list {
  display: none;
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--h2s-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(33,37,41,.14);
}
/* customer_update.php's accordion items clip normal (absolutely-positioned,
   in-flow) overflow to invisible, so this list is appended straight to
   <body> and positioned with fixed coordinates (see js/h2s-ui.js) instead of
   relying on `top/left` relative to its old parent. */
.h2s-search-select-list-detached {
  position: fixed;
  top: auto; left: auto; right: auto;
  margin: 2px 0 0;
}
.h2s-search-select-list.is-open { display: block; }

.h2s-search-select-list li {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--h2s-body);
  cursor: pointer;
}
.h2s-search-select-list li:hover,
.h2s-search-select-list li.is-selected,
.h2s-search-select-list li.is-active {
  background: var(--h2s-brand-lt);
  color: var(--h2s-brand-dk);
}
.h2s-search-select-list li.h2s-search-select-empty {
  color: var(--h2s-muted);
  cursor: default;
  font-style: italic;
}
.h2s-search-select-list li.h2s-search-select-empty:hover { background: none; }

/* ==========================================================================
   dashboard.php — layout rebalance — added 2026-07-30.

   Follow-ups Due used to sit as its own full-width row below both columns.
   With Appointments (often just "Nothing here yet." x2) far shorter than
   Patients Message + Personal Notes stacked in the other column, the row's
   height matched its tallest child - leaving Appointments' column with a
   dead gap of plain page background before Follow-ups Due even started.
   Paired Follow-ups Due with Appointments instead (both "things to act on
   today"), and Patients Message with Personal Notes in their own row below
   (both message/note feeds) - a more sensible grouping, not just a height
   fix. Follow-ups Due can run to 20 rows, so it gets its own scroll cap
   instead of pushing the whole card (and its shorter sibling) very tall.
   ========================================================================== */

/* 2026-08-13: this was `padding: 0 !important` - the table sat flush against
   the card's own left/right/bottom border with no breathing room at all,
   inconsistent with every other panel-body in the app (18px on all sides is
   the norm - see the Appointments card next to this one). Matching that same
   18px on the sides and bottom; a smaller 4px on top since the header row's
   own cell padding already separates "PATIENT" from the card's heading bar
   above it. */
.h2s-followups-panel .panel-body { padding: 4px 18px 18px !important; }
.h2s-followups-panel table { margin-bottom: 0; }
.h2s-followups-panel tbody { display: block; max-height: 358px; overflow-y: auto; }
.h2s-followups-panel thead, .h2s-followups-panel tbody tr { display: table; width: 100%; table-layout: fixed; }
/* thead and each tbody row are independently-laid-out tables (needed so
   only tbody scrolls) - tbody's real scrollbar eats width its row-tables
   don't know about, so table-layout:fixed hands the header's 3 columns
   more pixels than the body's 3 columns get, and every column past the
   first drifts out of alignment with its header label. scrollbar-gutter
   doesn't fix this - it reserves outer space but table-layout:fixed still
   divides the full border-box width among columns, ignoring the gutter.
   Explicitly matching thead's padding-right to a real scrollbar's width
   forces both tables to divide the same usable width. window.scrollbarWidth
   (see js/h2s-ui.js) measures the browser's actual value at runtime instead
   of guessing a fixed px number that could be wrong on another OS/browser. */
.h2s-followups-panel thead { display: table; width: 100%; table-layout: fixed; padding-right: var(--h2s-scrollbar-width, 15px); box-sizing: border-box; }

/* 2026-08-24: the "Booked: <date>" / "Change Booking Date" labels in the
   date and action columns are long enough that section.panel table td
   a.label-mini's forced white-space:nowrap (above) pushed them past their
   fixed-width cell instead of respecting it, which is what produced a
   horizontal scrollbar on the whole panel. Wrapping is scoped to just this
   panel - other tables' single-word/short labels (e.g. booking.php's
   "View"/"Delete") still benefit from staying on one line. */
.h2s-followups-panel td .label-mini,
.h2s-followups-panel td a.label-mini {
  white-space: normal !important;
  line-height: 1.3;
  display: inline-block;
}

/* 2026-08-13: re-pairing the cards above (Follow-ups Due with Appointments,
   Patients Message with Personal Notes) didn't actually equalize their
   heights - Bootstrap 3's float-based .row never stretches columns to match
   a taller sibling, so whichever card had less content still left a dead
   gap of plain page background below it (confirmed: Appointments 310px vs
   Follow-ups Due 482px in the same row). Flexbox on just these two dashboard
   rows - scoped via .h2s-dash-row so no other .row on any other page is
   affected - makes both columns stretch to the row's full height, and each
   card's own white background/border fills that height instead of stopping
   short.

   The Appointments column holds TWO separate cards (Today, Tomorrow)
   stacked in one column. Giving both of them flex:1 1 auto split the extra
   height between them, so each card's own panel-body grew independently -
   panel-body is a plain block, so that extra height just became a stretch
   of dead space trailing after each card's own short table, i.e. two
   separate empty gaps rather than one. Only the LAST card now grows, so any
   leftover height becomes a single gap at the bottom of the column - a
   normal card with generous bottom padding, not two things that look like
   rendering glitches. A real gap between the two cards (they used to touch,
   margin-bottom:0) makes them read as distinct cards rather than one card
   with a stray internal seam. */
.h2s-dash-row { display: flex; flex-wrap: wrap; }
.h2s-dash-row > [class*="col-"] { display: flex; }
.h2s-dash-row > [class*="col-"] > .adt_notify { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.h2s-dash-row > [class*="col-"] > .adt_notify > .panel { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; margin-bottom: 0; }
.h2s-dash-row > [class*="col-"] > .adt_notify > .panel:last-child { flex: 1 1 auto; }
.h2s-dash-row .panel-body { flex: 1 1 auto; }

/* The two cards in each row (Appointments/Follow-ups Due, Patients
   Message/Personal Notes) were touching directly on all four sides -
   left/right because an unrelated, over-broad rule ("the two half-width
   columns should look like a matched pair", above) zeroes col-md-6 padding
   inside ANY section.panel, which this dashboard's outer wrapper also
   happens to be; top/bottom because the two stacked .h2s-dash-row rows
   have no margin between them. That zeroing rule has higher selector
   specificity (three classes) than this one (one class + one attribute
   selector), so !important is needed here to actually win. */
.h2s-dash-row > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }
.h2s-dash-row + .h2s-dash-row { margin-top: 10px; }
/* 2026-08-13: centering here was wrong - the table's own header row
   ("Tomorrow") sits inside the same <table> as its content, so centering
   the table pushed the header down too, leaving an empty gap ABOVE
   "Tomorrow" instead of just below it. Headers stay pinned at the top of
   their card; any absorbed height is ordinary trailing space below the
   content, same as a card with generous bottom padding. */

/* ==========================================================================
   Enquiries list — enquiry-list.php
   Brought in line with the rest of the app: reuses the same status-pill
   classes (.h2s-status--ok/--noshow) already used for appointment statuses
   on booking.php instead of ad-hoc inline colours, the same light
   accepted/cancelled backgrounds already used for status pills/alerts
   elsewhere instead of slightly-different one-off hex values, and the same
   a.pagination-table component booking.php uses (js/h2s-ui.js's
   compactPagination() already knows how to mark the current page and
   collapse long runs - this page gets that automatically just by using the
   same class, no page-specific JS needed).
   ========================================================================== */

.h2s-enquiry-table td p { margin: 0 0 3px; }
.h2s-enquiry-table td p:last-child { margin-bottom: 0; }

/* Actions column — Accept/Cancel/Called By used to be bare inline buttons
   with no shared container, so they wrapped wherever the column happened
   to be narrow, at uneven widths, right against the "Called By: <name>"
   text below them. One column of same-width buttons instead: Accept and
   Cancel as a pair on their own row, Called By (and its result once set)
   below that, all evenly spaced. */
.h2s-enquiry-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.h2s-enquiry-actions-row {
  display: flex;
  gap: 6px;
}
.h2s-enquiry-actions .btn {
  margin: 0 !important;
  flex: 1 1 0;
  white-space: nowrap;
}
.h2s-enquiry-calledby {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--h2s-line);
  font-size: 12.5px;
}

.h2s-enquiry-row--ok        { background: #e4f3ea; }
.h2s-enquiry-row--cancelled { background: #fbeae9; }

.h2s-enquiry-reason {
  margin-top: 6px;
  font-size: 12px;
  color: var(--h2s-muted);
}

.h2s-pagination-wrap {
  margin-top: 16px;
  text-align: center;
}