/**
 * Dining House Kitchen — global scrollbars
 * Teal gradient pill · Firefox + WebKit · works on page + nested panels
 */

:root {
  --sb-thumb: #0f766e;
  --sb-thumb-soft: #2dd4bf;
  --sb-thumb-deep: #0d5f59;
  --sb-track: rgba(15, 118, 110, 0.07);
  --sb-size: 11px;
}

html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
  margin: 3px;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.04);
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      165deg,
      var(--sb-thumb-soft) 0%,
      var(--sb-thumb) 48%,
      var(--sb-thumb-deep) 100%
    );
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 3px rgba(15, 118, 110, 0.25);
  transition: background 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background:
    linear-gradient(
      165deg,
      #5eead4 0%,
      #14b8a6 42%,
      var(--sb-thumb) 100%
    );
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 10px rgba(45, 212, 191, 0.45),
    0 2px 6px rgba(15, 118, 110, 0.3);
}

::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background: var(--sb-thumb-deep);
  background-clip: padding-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Dark surfaces (admin sidebar, dark drawers) */
.sidebar,
.side-nav,
.hist-modal-body,
.dhk-hist-body,
.form-drawer > form,
.form-drawer-body {
  scrollbar-color: rgba(45, 212, 191, 0.55) rgba(255, 255, 255, 0.06);
}

.sidebar::-webkit-scrollbar,
.side-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.side-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  margin: 6px 2px;
  box-shadow: none;
}

.sidebar::-webkit-scrollbar-thumb,
.side-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.75), rgba(15, 118, 110, 0.9));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: none;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.side-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5eead4, #0f766e);
  background-clip: padding-box;
  border-width: 1px;
}

/* Compact scroll areas */
.enquire-drawer .enquire-form,
.nav,
.hist-modal-body,
.dhk-hist-body,
.form-drawer > form,
.form-drawer-body,
.table-wrap {
  scrollbar-width: thin;
}

.enquire-drawer .enquire-form::-webkit-scrollbar,
.nav::-webkit-scrollbar,
.hist-modal-body::-webkit-scrollbar,
.dhk-hist-body::-webkit-scrollbar,
.form-drawer > form::-webkit-scrollbar,
.form-drawer-body::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}