:root{
  --heal-bg:#f4f6f8;--heal-surface:#fff;--heal-surface-2:#f8fafb;--heal-text:#1e293b;--heal-muted:#64748b;
  --heal-border:#e2e8f0;--heal-dark:#20252b;--heal-dark-2:#2b3138;--heal-red:#d94141;--heal-red-dark:#b82e2e;
  --heal-green:#1f9d68;--heal-amber:#d99019;--heal-blue:#3976d4;--heal-radius:18px;--heal-shadow:0 10px 28px rgba(15,23,42,.06)
}
html,body{background:var(--heal-bg);color:var(--heal-text)}
body{min-height:100vh;font-size:15px}
a{text-decoration:none}.container,.container-fluid{max-width:1500px}
.heal-topbar{background:linear-gradient(135deg,var(--heal-dark),#15191d);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:1030;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.heal-navbar{min-height:72px}.heal-brand{display:flex;align-items:center;gap:12px;color:#fff!important;font-weight:800!important;letter-spacing:.01em}
.heal-brand-mark{width:38px;height:38px;border-radius:12px;background:var(--heal-red);display:grid;place-items:center;font-weight:800!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.heal-brand small{display:block;color:#9ca3af;font-size:11px;line-height:1.1;font-weight:500!important}.heal-navbar .nav-link{color:#cbd5e1!important;border-radius:10px;padding:9px 12px!important;font-weight:600!important}
.heal-navbar .nav-link:hover,.heal-navbar .nav-link.active{background:rgba(255,255,255,.08);color:#fff!important}.heal-navbar .dropdown-menu{border:0;border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.16)}
.heal-navbar .dropdown-item{border-radius:9px;padding:9px 11px}.heal-navbar .dropdown-item:hover{background:#f1f5f9}.heal-user-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.heal-page{padding:26px 20px 36px}.heal-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.heal-page-title{font-size:28px;font-weight:800!important;letter-spacing:-.02em;margin:0}.heal-page-subtitle{color:var(--heal-muted);margin-top:5px;margin-bottom:0}.heal-page-actions{display:flex;gap:10px;flex-wrap:wrap}
.heal-card,.card{background:var(--heal-surface);border:1px solid var(--heal-border)!important;border-radius:var(--heal-radius)!important;box-shadow:var(--heal-shadow)}
.heal-card-header{padding:18px 20px;border-bottom:1px solid var(--heal-border);display:flex;justify-content:space-between;align-items:center;gap:12px}.heal-card-title{font-size:16px;font-weight:700!important;margin:0}.heal-card-body{padding:20px}
.heal-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.heal-stat{background:#fff;border:1px solid var(--heal-border);border-radius:16px;padding:17px 18px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.heal-stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.heal-stat-label{color:var(--heal-muted);font-size:13px;font-weight:600!important}.heal-stat-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#f1f5f9;color:#475569}.heal-stat-value{font-size:27px;font-weight:800!important;margin-top:8px;line-height:1}.heal-stat-note{margin-top:7px;font-size:12px;color:#94a3b8}
.heal-stat.red .heal-stat-icon{background:#fff0f0;color:var(--heal-red)}.heal-stat.green .heal-stat-icon{background:#ecfdf5;color:var(--heal-green)}.heal-stat.blue .heal-stat-icon{background:#eff6ff;color:var(--heal-blue)}.heal-stat.amber .heal-stat-icon{background:#fffbeb;color:var(--heal-amber)}
.btn{border-radius:11px;font-weight:650!important;padding:.55rem .9rem}.btn-sm{border-radius:9px;padding:.38rem .62rem}.btn-danger,.btn-primary{border:0}.btn-danger{background:var(--heal-red)}.btn-danger:hover{background:var(--heal-red-dark)}.btn-dark{background:var(--heal-dark);border-color:var(--heal-dark)}
.btn-heal{background:var(--heal-red);color:#fff;border:0}.btn-heal:hover{background:var(--heal-red-dark);color:#fff}.btn-soft{background:#f8fafc;border:1px solid var(--heal-border);color:#334155}.btn-soft:hover{background:#eef2f6;color:#0f172a}
.badge{font-weight:700!important;border-radius:999px;padding:.45rem .65rem}.badge-issued{background:#e8f8f0;color:#18794e}.badge-void{background:#fff0f0;color:#c13030}.badge-converted{background:#eef2ff;color:#4f46e5}.badge-draft{background:#f1f5f9;color:#475569}
.heal-filter{padding:16px 18px;margin-bottom:16px}.heal-filter .form-label{font-size:12px;color:var(--heal-muted);font-weight:700!important;margin-bottom:6px}.form-control,.form-select{border:1px solid #dbe1e8;border-radius:11px;min-height:42px;background:#fff}.form-control:focus,.form-select:focus{border-color:#94a3b8;box-shadow:0 0 0 .22rem rgba(100,116,139,.12)}
textarea.form-control{min-height:92px}.input-group-text{border-color:#dbe1e8;background:#f8fafc}.select2-container .select2-selection--single{height:42px!important;border-radius:11px!important;border-color:#dbe1e8!important;padding:.48rem .75rem!important}.select2-selection__arrow{min-height:42px!important}
.table-responsive{border-radius:14px}.table{--bs-table-bg:transparent;margin-bottom:0}.table thead th{background:#f8fafc;color:#64748b;font-size:12px;text-transform:none;letter-spacing:.01em;font-weight:700!important;border-bottom:1px solid var(--heal-border);white-space:nowrap;padding:13px 14px}.table tbody td{padding:13px 14px;border-color:#edf1f5;vertical-align:middle}.table tbody tr:hover{background:#fbfcfd}.table .money{font-variant-numeric:tabular-nums;font-weight:700!important}.table .doc-no{font-weight:700!important;color:#1f2937}
.dt-container{width:100%!important;margin:0!important}.dt-container .dt-layout-row{margin:14px 0}.dt-container .dt-input{border:1px solid #dbe1e8!important;border-radius:10px!important;padding:7px 10px!important;background:#fff!important}.dt-container .dt-search label,.dt-container .dt-length label,.dt-container .dt-info{color:#64748b;font-size:13px}.dt-paging-button{border-radius:9px!important}
.heal-empty{text-align:center;padding:54px 20px;color:#94a3b8}.heal-empty i{font-size:42px;display:block;margin-bottom:10px;color:#cbd5e1}
.heal-section-title{font-size:15px;font-weight:800!important;margin:0 0 14px;display:flex;align-items:center;gap:8px}.heal-section-title i{color:var(--heal-red)}
form .row>[class*=col-]{margin-bottom:4px}.form-label{font-size:13px;font-weight:650!important;color:#475569}.star{color:var(--heal-red)!important}.modal-content{border:0;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.2)}.modal-header,.modal-footer{border-color:#edf1f5}
.heal-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.heal-quick{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;border:1px solid var(--heal-border);background:#fff;color:var(--heal-text);transition:.16s ease}.heal-quick:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(15,23,42,.07);border-color:#cbd5e1}.heal-quick-icon{width:44px;height:44px;min-width:44px;border-radius:12px;background:#f1f5f9;display:grid;place-items:center;font-size:20px}.heal-quick strong{font-weight:800!important}.heal-quick small{display:block;color:var(--heal-muted);margin-top:2px}
.heal-footer{color:#94a3b8;font-size:12px;padding:22px 16px 30px;text-align:center}.heal-footer strong{color:#64748b}
.swal2-popup{border-radius:20px!important}.swal2-confirm,.swal2-cancel{border-radius:10px!important}
@media(max-width:1100px){.heal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.heal-quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.heal-page{padding:18px 12px 28px}.heal-page-title{font-size:23px}.heal-stat-grid,.heal-quick-grid{grid-template-columns:1fr}.heal-page-actions{width:100%}.heal-page-actions .btn{flex:1}.heal-navbar{min-height:62px}.heal-brand small{display:none}}
/* Legacy create/edit pages: lift existing forms into the same HEAL visual system without changing their business logic */
body > .container{max-width:1380px;margin-top:24px}
body > .container > form{background:#fff;border:1px solid var(--heal-border);border-radius:20px;box-shadow:var(--heal-shadow);padding:22px;margin-bottom:24px}
body > .container > form > h5:first-child{border:0!important;text-align:left!important;padding:0 0 18px!important;margin:0 0 18px!important;font-size:23px;font-weight:800!important;border-bottom:1px solid var(--heal-border)!important}
body > .container > form .bg-body-tertiary{background:#f8fafc!important;border:1px solid var(--heal-border);border-radius:16px!important;padding:16px 20px!important}
body > .container > form .fw-bold{font-weight:700!important;color:#475569}
body > .container > form table{border:1px solid var(--heal-border);border-radius:14px;overflow:hidden}
body > .container > form tfoot td{background:#fbfcfd}
body > .container > form .btn-success{background:var(--heal-dark);border-color:var(--heal-dark)}
body > .container > form .btn-primary{background:var(--heal-red);border-color:var(--heal-red)}
body > .container > form hr{border-color:var(--heal-border);opacity:1}
@media(max-width:900px){body > .container > form{padding:14px}body > .container > form .d-grid{display:block!important}.cus-info,.invoice-info{width:100%}}

/* ========================================================================
   HEAL Responsive Layer v4
   Shared responsive behaviour for legacy + Phase 1 pages.
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%;height:auto}
main,section,article,aside,header,footer,nav,.container,.container-fluid,.row,[class*="col-"],.card,.heal-card,.heal-card-body,.heal-card-header{min-width:0}

/* Keep content comfortably fluid on every desktop size. */
.container-fluid{width:100%}
.heal-page{width:100%;max-width:1500px;margin-inline:auto}
.heal-card-body{min-width:0}

/* Tables: scroll inside their own surface instead of pushing the viewport. */
.table-responsive,.heal-responsive-table{
  width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
}
.heal-responsive-table{border:1px solid var(--heal-border);border-radius:14px;margin-block:16px;background:#fff}
.heal-responsive-table>.table{margin:0!important}
body:not(.pdf-page) form .heal-responsive-table .table{min-width:760px}
.table td,.table th{max-width:min(42vw,460px)}
.table td{overflow-wrap:anywhere}
.table .btn-group{white-space:nowrap;flex-wrap:nowrap}

/* Prevent DataTables controls from overflowing. */
.dt-container,.dt-layout-table,.dt-layout-row,.dt-layout-cell{max-width:100%;min-width:0}
.dt-container .dt-search,.dt-container .dt-length{max-width:100%}
.dt-container .dt-search input{max-width:min(280px,100%)}
.dt-container .dt-layout-table{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Legacy create/edit document forms. */
body> .container{width:100%;max-width:1380px;padding-inline:20px}
body> .container>form{width:100%;min-width:0}
body> .container>form>h1:first-child,
body> .container>form>h2:first-child,
body> .container>form>h5:first-child{
  overflow-wrap:anywhere;
}
body> .container>form .container.d-grid{width:100%;max-width:none;margin-inline:0!important;min-width:0}
body> .container>form .cus-info,
body> .container>form .invoice-info{min-width:0;overflow-wrap:anywhere}
body> .container>form .button-group{width:100%;max-width:100%;gap:12px;flex-wrap:wrap;align-items:flex-end}
body> .container>form .footer-button-group{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
body> .container>form .footer-button-group>.form-label{flex:0 0 100%;margin-bottom:0}
body> .container>form .footer-button-group .form-select,
body> .container>form .footer-button-group .form-control{max-width:100%}
body> .container>form .container.my-5.text-center{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-block:28px!important}

/* Form controls should never exceed their column. */
input,select,textarea,.form-control,.form-select,.input-group,.select2,.select2-container{max-width:100%!important;min-width:0}
.input-group{flex-wrap:nowrap}

/* Modal sizing on narrow screens. */
.modal-dialog{max-width:min(720px,calc(100vw - 28px));margin:1rem auto}
.modal-dialog.modal-lg{max-width:min(900px,calc(100vw - 28px))}
.modal-dialog.modal-xl{max-width:min(1140px,calc(100vw - 28px))}
.modal-body{overflow-wrap:anywhere}

/* Make action strips and filters naturally wrap. */
.heal-filter .row{row-gap:10px}
.heal-page-actions,.page-toolbar,.report-toolbar-inner{min-width:0}
.btn-group{max-width:100%}

/* Collapsed navigation behaves like a mobile application menu. */
@media(max-width:1199.98px){
  .heal-topbar{position:sticky;top:0}
  .heal-navbar{padding-block:10px;min-height:64px}
  .heal-navbar .navbar-collapse{max-height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;padding:10px 2px 14px}
  .heal-navbar .navbar-nav{gap:4px}
  .heal-navbar .nav-link{padding:11px 12px!important}
  .heal-navbar .dropdown-menu{position:static!important;transform:none!important;float:none;width:100%;margin:4px 0 8px;background:rgba(255,255,255,.97);box-shadow:none;border-radius:11px}
  .heal-navbar .dropdown-menu-end{position:absolute!important;right:0;left:auto;width:max-content;min-width:190px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.16)}
  .heal-navbar .heal-user-pill{width:100%;justify-content:space-between;display:flex;align-items:center;margin-top:6px}
}

@media(max-width:991.98px){
  .heal-page{padding:20px 16px 30px}
  .heal-page-head{align-items:stretch}
  .heal-page-head>div:first-child{min-width:0}
  .heal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heal-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Override old inline 80/20 and 70/30 document-form grids. */
  body> .container>form .container.d-grid[style*="grid-template-columns"]{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
    padding:14px!important;
  }
  body> .container>form .cus-info,
  body> .container>form .invoice-info{width:100%!important}
  body> .container>form .button-group{flex-direction:column;align-items:stretch!important}
  body> .container>form .footer-button-group{width:100%}
}

@media(max-width:767.98px){
  body{font-size:14px}
  .container,.container-fluid{--bs-gutter-x:1.25rem}
  .heal-page{padding:16px 10px 26px}
  .heal-page-head{gap:12px;margin-bottom:14px}
  .heal-page-title{font-size:22px;line-height:1.22}
  .heal-page-subtitle{font-size:13px}
  .heal-page-actions{display:grid;grid-template-columns:1fr;width:100%;gap:8px}
  .heal-page-actions .btn{width:100%}

  .heal-card,.card{border-radius:14px!important}
  .heal-card-header{padding:14px;align-items:flex-start;flex-wrap:wrap}
  .heal-card-body{padding:14px}
  .heal-filter{padding:12px;margin-bottom:12px}
  .heal-stat-grid,.heal-quick-grid{grid-template-columns:1fr;gap:10px}
  .heal-stat{padding:14px}
  .heal-stat-value{font-size:23px}
  .heal-quick{padding:14px}

  /* DataTables toolbar stacks cleanly. */
  .dt-container .dt-layout-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px;margin:10px 0!important}
  .dt-container .dt-layout-cell{width:100%!important;text-align:left!important}
  .dt-container .dt-search,.dt-container .dt-length{display:flex!important;align-items:center;gap:8px;width:100%}
  .dt-container .dt-search label,.dt-container .dt-length label{flex:0 0 auto;margin:0}
  .dt-container .dt-search input{flex:1 1 auto;width:100%!important;max-width:none!important;margin-left:0!important}
  .dt-container .dt-paging{overflow-x:auto;max-width:100%;padding-bottom:2px}
  .dt-container .dt-info{white-space:normal}

  body> .container{padding-inline:10px;margin-top:14px}
  body> .container>form{padding:12px;border-radius:14px!important}
  body> .container>form>h1:first-child,
  body> .container>form>h2:first-child,
  body> .container>form>h5:first-child{font-size:20px!important;padding-bottom:12px!important;margin-bottom:14px!important}
  body> .container>form .bg-body-tertiary{padding:12px!important;border-radius:12px!important}
  body> .container>form .cus-info .row,
  body> .container>form .invoice-info .row{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:3px!important;margin-block:9px!important;
  }
  body> .container>form .cus-info .row>[class*="col-"],
  body> .container>form .invoice-info .row>[class*="col-"]{
    width:100%!important;max-width:100%!important;padding:0!important;text-align:left!important;
  }
  body> .container>form .cus-info .row>[class*="col-"]:first-child,
  body> .container>form .invoice-info .row>[class*="col-"]:first-child{font-size:12px;color:var(--heal-muted)}

  body> .container>form .footer-button-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body> .container>form .footer-button-group>.form-label{grid-column:1/-1}
  body> .container>form .footer-button-group .btn,
  body> .container>form .footer-button-group .form-select,
  body> .container>form .footer-button-group .form-control,
  body> .container>form .footer-button-group .w-auto,
  body> .container>form .footer-button-group .w-25{width:100%!important;margin:0!important;min-width:0}
  body> .container>form .container.my-5.text-center{display:grid;grid-template-columns:1fr;margin-block:20px!important}
  body> .container>form .container.my-5.text-center .btn{width:100%}

  .modal-dialog,.modal-dialog.modal-lg,.modal-dialog.modal-xl{max-width:calc(100vw - 16px);margin:8px auto}
  .modal-content{border-radius:14px}
  .modal-header,.modal-body,.modal-footer{padding:14px}
  .modal-footer{display:grid;grid-template-columns:1fr;gap:8px}
  .modal-footer>*{width:100%;margin:0!important}

  /* Search/list action columns remain usable via horizontal table scroll. */
  .table thead th,.table tbody td{padding:10px 11px}
  .table-responsive .table,#dataTable{font-size:13px}
}

@media(max-width:575.98px){
  .heal-brand{gap:9px;font-size:15px;max-width:calc(100vw - 78px)}
  .heal-brand-mark{width:34px;height:34px;border-radius:10px;min-width:34px}
  .heal-brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .heal-brand small{display:none}
  .navbar-toggler{padding:.3rem .45rem}

  .btn{min-height:42px}
  .btn-sm{min-height:36px}
  .form-control,.form-select,.select2-container .select2-selection--single{min-height:44px!important;font-size:16px!important} /* avoids iOS zoom */
  textarea.form-control{font-size:16px!important}

  body> .container>form .footer-button-group{grid-template-columns:1fr}
  body> .container>form .button-group{gap:14px}

  .swal2-popup{width:calc(100vw - 20px)!important;padding:1.15rem!important}
}

/* A4 preview remains true A4; mobile scrolls inside the paper viewport rather than breaking the document. */
@media(max-width:820px){
  .doc-paper-wrap,.receipt-paper-wrap{max-width:100vw;overflow-x:auto!important;overscroll-behavior-inline:contain}
  .doc-toolbar,.receipt-toolbar{align-items:stretch!important}
  .doc-toolbar-left,.receipt-toolbar__left{min-width:0}
  .doc-toolbar-right,.receipt-toolbar__right{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  .doc-toolbar-right .btn,.receipt-toolbar__right .btn{width:100%}
}

/* Shared module navigation */
.heal-module-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.heal-module-nav .btn{min-height:40px;padding:7px 13px!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px;line-height:1.2!important;font-weight:600!important}
.heal-module-nav .btn-light{color:#34423d!important;background:#fff!important;border-color:#dce4e1!important}
.heal-module-nav .btn-light:hover{color:#1f6b52!important;background:#f5f8f7!important;border-color:#c8d8d2!important}
.heal-module-nav .btn-main-system{color:#fff!important;background:#243b35!important;border-color:#243b35!important}
.heal-module-nav .btn-main-system:hover{color:#fff!important;background:#182b26!important;border-color:#182b26!important}
@media(max-width:575.98px){.heal-module-nav .btn{flex:1 1 auto}}

/* Auto-save draft status */
.heal-draft-status{position:fixed;right:18px;bottom:18px;z-index:1020;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #d7e2de;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(25,55,45,.12);border-radius:999px;color:#66736f;font-size:12px;backdrop-filter:blur(8px)}
.heal-draft-status.saved{color:#1f6b52;border-color:#c8e3d8;background:rgba(245,251,248,.97)}
@media(max-width:575.98px){.heal-draft-status{right:10px;bottom:10px;font-size:11px;max-width:calc(100vw - 20px)}}


/* Floating table header for long list pages */
.heal-sticky-header-clone{
    position:fixed;
    top:0;
    left:0;
    z-index:1020;
    display:none;
    overflow:hidden;
    pointer-events:none;
    background:#fff;
    border-bottom:1px solid #dfe7e4;
    box-shadow:0 6px 18px rgba(25,55,46,.10);
}
.heal-sticky-header-clone table{
    margin:0!important;
    table-layout:fixed!important;
    width:auto!important;
    background:#fff!important;
}
.heal-sticky-header-clone thead th{
    background:#f7faf9!important;
    color:#33443e!important;
    font-weight:700!important;
    vertical-align:middle!important;
    white-space:nowrap;
    border-bottom:1px solid #dfe7e4!important;
}
@media(max-width:767.98px){
    .heal-sticky-header-clone thead th{
        font-size:.84rem;
    }
}


/* Sticky header must stay below navigation dropdowns/offcanvas */
.heal-sticky-header-clone{z-index:1020!important;}
.navbar,.heal-topbar,.topbar,.main-header,.app-header{position:relative;z-index:1030;}
.dropdown-menu{z-index:1080!important;}
.offcanvas{z-index:1090!important;}


/* Admin notification: pending password reset requests */
.heal-admin-notification{
    position:relative;
    width:40px;
    height:40px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    transition:.18s ease;
}
.heal-admin-notification:hover{
    color:#fff;
    background:rgba(255,255,255,.18);
    transform:translateY(-1px);
}
.heal-admin-notification.has-notification{
    background:rgba(220,53,69,.18);
    border-color:rgba(255,255,255,.35);
}
.heal-admin-notification i{font-size:1.08rem}
.heal-admin-notification-badge{
    position:absolute;
    top:-6px;
    right:-7px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dc3545;
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:800!important;
    border:2px solid #1f6b52;
}
.heal-user-pill{position:relative}
.heal-user-noti-dot{
    position:absolute;
    top:5px;
    right:3px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b4f;
    border:1.5px solid #fff;
}




@media (max-width: 575.98px){
  .heal-navbar .navbar-collapse{
    padding-bottom:16px!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0{
    gap:10px!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0 > .dropdown{
    flex:1 1 100%;
  }

  .heal-navbar .heal-admin-notification{
    flex:0 0 44px;
  }
}



/* ========================================================================
   FINAL MOBILE NAV FIX — admin dropdown must never be clipped / fall out
   ======================================================================== */
@media (max-width: 1199.98px){
  /* Let the collapsed nav grow naturally; page scroll handles long content. */
  .heal-navbar .navbar-collapse{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:16px!important;
  }

  /* User controls: bell + admin button in one row. */
  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0{
    position:relative!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    margin-top:12px!important;
    overflow:visible!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0 > .heal-admin-notification{
    grid-column:1!important;
    grid-row:1!important;
    width:48px!important;
    height:48px!important;
    margin:0!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0 > .dropdown{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    position:static!important;
  }

  .heal-navbar .heal-user-pill{
    width:100%!important;
    min-height:48px!important;
    margin:0!important;
    justify-content:space-between!important;
  }

  /* Place account menu as a full-width row below bell + admin. */
  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0 > .dropdown > .dropdown-menu.dropdown-menu-end{
    position:absolute!important;
    top:58px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    transform:none!important;
    margin:0!important;
    padding:8px!important;
    border-radius:12px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
    z-index:1085!important;
  }

  /* Reserve room inside nav while the account dropdown is open. */
  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0:has(.dropdown-menu.show){
    padding-bottom:310px!important;
  }

  .heal-navbar .dropdown-menu .dropdown-item{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    white-space:normal!important;
  }
}

/* iPhone / small phones */
@media (max-width: 575.98px){
  .heal-topbar{
    position:relative!important;
    top:auto!important;
  }

  .heal-navbar .navbar-collapse{
    max-height:none!important;
    overflow:visible!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0{
    grid-template-columns:48px minmax(0,1fr)!important;
  }

  .heal-navbar .navbar-collapse > .d-flex.align-items-center.gap-2.mt-2.mt-xl-0:has(.dropdown-menu.show){
    padding-bottom:325px!important;
  }
}







/* Refresh button - outlined large style */
.heal-refresh-btn{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:.85rem 1.4rem;
    border:2px solid #2f73e0 !important;
    border-radius:18px !important;
    background:#ffffff !important;
    color:#2f73e0 !important;
    box-shadow:0 8px 20px rgba(47,115,224,.10) !important;
    white-space:nowrap;
    font-weight:700 !important;
    font-size:1.02rem !important;
    line-height:1.2;
    transition:all .18s ease;
}
.heal-refresh-btn i{
    font-size:1.75rem;
    line-height:1;
    transition:transform .18s ease;
}
.heal-refresh-btn:hover,
.heal-refresh-btn:focus{
    background:#f7fbff !important;
    color:#2f73e0 !important;
    border-color:#2f73e0 !important;
    box-shadow:0 12px 24px rgba(47,115,224,.16) !important;
}
.heal-refresh-btn:active{
    transform:translateY(1px);
}
.heal-refresh-btn:active i{
    transform:rotate(180deg);
}
.heal-refresh-label{
    display:inline-block;
}

/* On larger screens keep it elegant but still obvious */
@media (min-width:1200px){
    .heal-navbar .d-flex.align-items-center.gap-2.mt-2.mt-xl-0{
        flex-wrap:wrap;
    }
    .heal-refresh-btn{
        min-width:220px;
    }
}

/* Mobile/tablet: make it full-width like the reference */
@media (max-width:1199.98px){
    .heal-navbar .d-flex.align-items-center.gap-2.mt-2.mt-xl-0{
        width:100%;
        flex-wrap:wrap;
    }
    .heal-refresh-btn{
        width:100%;
        min-width:100%;
        justify-content:center;
        order:-1;
    }
}

/* Small phones */
@media (max-width:575.98px){
    .heal-refresh-btn{
        min-height:60px;
        padding:1rem 1rem;
        border-radius:18px !important;
        font-size:1.12rem !important;
    }
    .heal-refresh-btn i{
        font-size:1.85rem;
    }
}



/* Persistent refresh button beside hamburger when nav is collapsed */
.heal-mobile-nav-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}
.heal-refresh-compact{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1.5px solid rgba(255,255,255,.52)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    box-shadow:none!important;
}
.heal-refresh-compact i{
    font-size:1.35rem;
    line-height:1;
    transition:transform .18s ease;
}
.heal-refresh-compact:hover,
.heal-refresh-compact:focus{
    color:#fff!important;
    background:rgba(255,255,255,.15)!important;
    border-color:rgba(255,255,255,.78)!important;
}
.heal-refresh-compact:active i{
    transform:rotate(180deg);
}
@media (max-width:575.98px){
    .heal-mobile-nav-actions{
        gap:4px;
    }
    .heal-refresh-compact{
        width:38px;
        height:38px;
        min-width:38px;
        border-radius:10px!important;
    }
    .heal-refresh-compact i{
        font-size:1.2rem;
    }
}



/* FIX v12: clearly visible refresh button next to hamburger */
.heal-mobile-nav-actions{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}
.heal-refresh-compact{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex:0 0 42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1.5px solid rgba(255,255,255,.72) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.10) !important;
    color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
    box-shadow:none !important;
}
.heal-refresh-compact:hover,
.heal-refresh-compact:focus{
    color:#ffffff !important;
    background:rgba(255,255,255,.18) !important;
    border-color:#ffffff !important;
}
.heal-refresh-svg{
    display:block !important;
    width:23px !important;
    height:23px !important;
    color:#ffffff !important;
    stroke:#ffffff !important;
    opacity:1 !important;
}
.heal-refresh-compact:active .heal-refresh-svg{
    transform:rotate(180deg);
    transition:transform .18s ease;
}
@media (max-width:575.98px){
    .heal-mobile-nav-actions{
        gap:6px !important;
    }
    .heal-refresh-compact{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        flex-basis:40px !important;
    }
    .heal-refresh-svg{
        width:22px !important;
        height:22px !important;
    }
}
@media (min-width:1200px){
    .heal-mobile-nav-actions{
        display:none !important;
    }
}



/* v13: avoid duplicate refresh controls on collapsed/mobile nav */
@media (max-width:1199.98px){
    #healMainNav .heal-refresh-btn{
        display:none !important;
    }
}
@media (min-width:1200px){
    #healMainNav .heal-refresh-btn{
        display:inline-flex !important;
    }
}



/* v14: desktop refresh button - match navbar better */
@media (min-width:1200px){
    .heal-refresh-btn{
        min-width:170px !important;
        min-height:48px !important;
        padding:.7rem 1rem !important;
        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.04) !important;
        color:#e8eefc !important;
        box-shadow:none !important;
        font-size:.98rem !important;
        font-weight:600 !important;
        gap:10px !important;
    }
    .heal-refresh-btn i{
        font-size:1.35rem !important;
    }
    .heal-refresh-btn:hover,
    .heal-refresh-btn:focus{
        background:rgba(255,255,255,.10) !important;
        color:#ffffff !important;
        border-color:rgba(255,255,255,.24) !important;
        box-shadow:none !important;
    }
    .heal-refresh-btn:active{
        transform:translateY(0) !important;
        background:rgba(255,255,255,.14) !important;
    }
}



/* v15: desktop refresh button refined to match navbar */
@media (min-width:1200px){
    .heal-refresh-btn{
        min-width:168px !important;
        min-height:44px !important;
        height:44px !important;
        padding:.55rem .95rem !important;
        gap:.65rem !important;
        border:1px solid rgba(255,255,255,.15) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.045) !important;
        color:#f2f5fb !important;
        box-shadow:none !important;
        font-size:.96rem !important;
        font-weight:600 !important;
        line-height:1 !important;
    }
    .heal-refresh-btn i{
        font-size:1.2rem !important;
        color:#9fc0ff !important;
        line-height:1 !important;
    }
    .heal-refresh-label{
        color:#f2f5fb !important;
        line-height:1 !important;
    }
    .heal-refresh-btn:hover,
    .heal-refresh-btn:focus{
        background:rgba(255,255,255,.09) !important;
        color:#ffffff !important;
        border-color:rgba(255,255,255,.22) !important;
        box-shadow:none !important;
    }
    .heal-refresh-btn:hover i,
    .heal-refresh-btn:focus i{
        color:#b6cfff !important;
    }
    .heal-refresh-btn:active{
        background:rgba(255,255,255,.12) !important;
        transform:none !important;
    }
}



/* v16 FINAL desktop refresh style */
@media (min-width:1200px){
  .heal-navbar .heal-refresh-btn{
    width:auto !important;
    min-width:148px !important;
    max-width:170px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 14px !important;

    background:#252b31 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    box-shadow:none !important;

    color:#e8edf5 !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }

  .heal-navbar .heal-refresh-btn i{
    font-size:18px !important;
    line-height:1 !important;
    color:#b8c8e8 !important;
  }

  .heal-navbar .heal-refresh-btn .heal-refresh-label{
    color:#e8edf5 !important;
    line-height:1 !important;
  }

  .heal-navbar .heal-refresh-btn:hover,
  .heal-navbar .heal-refresh-btn:focus{
    background:#2d343b !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    box-shadow:none !important;
  }
}