:root{
  --fawqia-scroll-offset:92px;
  --fawqia-scroll-size:10px;
  --fawqia-scroll-track:#f4ece8;
  --fawqia-scroll-thumb:#a06b78;
  --fawqia-scroll-thumb-hover:#7d1730;
  --fawqia-scroll-dark-thumb:rgba(255,236,240,.44);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--fawqia-scroll-offset);
  overscroll-behavior-y:none;
  scrollbar-width:thin;
  scrollbar-color:var(--fawqia-scroll-thumb) var(--fawqia-scroll-track);
}

body{
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch;
}

:where([id]){
  scroll-margin-top:calc(var(--fawqia-scroll-offset) + 12px);
}

:where(
  .nav-list,
  .subnav,
  .sidebar,
  .notification-list,
  .global-search-panel,
  .settings-editor,
  .room-edit-dialog,
  .roster-import-dialog,
  .hv-modal-card,
  .patient-section-modal-shell>main,
  .patient-delete-select-list,
  .notes-manager-list,
  .dd-scroll,
  .dd-table-wrap,
  .roster-table-scroll,
  .archive-table-scroll,
  .hv-tabs
){
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--fawqia-scroll-thumb) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
:where(
  .nav-list,
  .subnav,
  .sidebar,
  .notification-list,
  .global-search-panel,
  .settings-editor,
  .room-edit-dialog,
  .roster-import-dialog,
  .hv-modal-card,
  .patient-section-modal-shell>main,
  .patient-delete-select-list,
  .notes-manager-list,
  .dd-scroll,
  .dd-table-wrap,
  .roster-table-scroll,
  .archive-table-scroll,
  .hv-tabs
)::-webkit-scrollbar{
  width:var(--fawqia-scroll-size);
  height:var(--fawqia-scroll-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:var(--fawqia-scroll-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
:where(
  .notification-list,
  .global-search-panel,
  .settings-editor,
  .room-edit-dialog,
  .roster-import-dialog,
  .hv-modal-card,
  .patient-section-modal-shell>main,
  .patient-delete-select-list,
  .notes-manager-list,
  .dd-scroll,
  .dd-table-wrap,
  .roster-table-scroll,
  .archive-table-scroll,
  .hv-tabs
)::-webkit-scrollbar-thumb{
  min-height:42px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,#b78b96,#8b4052);
  background-clip:padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
:where(
  .notification-list,
  .global-search-panel,
  .settings-editor,
  .room-edit-dialog,
  .roster-import-dialog,
  .hv-modal-card,
  .patient-section-modal-shell>main,
  .patient-delete-select-list,
  .notes-manager-list,
  .dd-scroll,
  .dd-table-wrap,
  .roster-table-scroll,
  .archive-table-scroll,
  .hv-tabs
)::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#98445a,#74172e);
  background-clip:padding-box;
}

:where(.sidebar,.nav-list,.subnav){
  scrollbar-color:var(--fawqia-scroll-dark-thumb) transparent;
}

:where(.sidebar,.nav-list,.subnav)::-webkit-scrollbar-thumb{
  border:1px solid transparent;
  border-radius:999px;
  background:rgba(255,236,240,.42);
  background-clip:padding-box;
}

:where(.roster-table-scroll,.archive-table-scroll,.hv-tabs,.dd-table-wrap){
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  touch-action:pan-x pan-y;
}

:where(.settings-editor,.room-edit-dialog,.roster-import-dialog,.hv-modal-card,.patient-section-modal-shell>main){
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}

@media (min-width:901px){
  :where(
    .notification-list,
    .global-search-panel,
    .settings-editor,
    .room-edit-dialog,
    .roster-import-dialog,
    .hv-modal-card,
    .patient-section-modal-shell>main,
    .patient-delete-select-list,
    .notes-manager-list,
    .dd-scroll
  ){
    scrollbar-gutter:stable;
  }
}

@media (max-width:900px){
  :root{
    --fawqia-scroll-offset:74px;
    --fawqia-scroll-size:6px;
  }

  html,
  body{
    max-width:100%;
    overscroll-behavior-x:none;
  }

  :where(
    .sidebar,
    .nav-list,
    .subnav,
    .notification-list,
    .global-search-panel,
    .settings-editor,
    .room-edit-dialog,
    .roster-import-dialog,
    .hv-modal-card,
    .patient-section-modal-shell>main,
    .patient-delete-select-list,
    .notes-manager-list,
    .dd-scroll,
    .dd-table-wrap,
    .roster-table-scroll,
    .archive-table-scroll,
    .hv-tabs
  ){
    -webkit-overflow-scrolling:touch;
  }
}

@media (hover:none) and (pointer:coarse){
  body,
  :where(
    .sidebar,
    .nav-list,
    .subnav,
    .notification-list,
    .global-search-panel,
    .settings-editor,
    .room-edit-dialog,
    .roster-import-dialog,
    .hv-modal-card,
    .patient-section-modal-shell>main,
    .patient-delete-select-list,
    .notes-manager-list,
    .dd-scroll,
    .dd-table-wrap,
    .roster-table-scroll,
    .archive-table-scroll,
    .hv-tabs
  ){
    -webkit-overflow-scrolling:touch;
  }
}

@media (prefers-reduced-motion:reduce){
  html,
  body,
  :where(
    .nav-list,
    .subnav,
    .sidebar,
    .notification-list,
    .global-search-panel,
    .settings-editor,
    .room-edit-dialog,
    .roster-import-dialog,
    .hv-modal-card,
    .patient-section-modal-shell>main,
    .patient-delete-select-list,
    .notes-manager-list,
    .dd-scroll,
    .dd-table-wrap,
    .roster-table-scroll,
    .archive-table-scroll,
    .hv-tabs
  ){
    scroll-behavior:auto!important;
  }
}