/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_d8ebd1 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_d8ebd1 {--font-inter: 'Inter', 'Inter Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Space_Grotesk","arguments":[{"subsets":["latin"],"variable":"--font-space","display":"swap"}],"variableName":"spaceGrotesk"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_c219ed {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_c219ed {--font-space: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/flatpickr/dist/flatpickr.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  flex: 1 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/tokens.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Fondasi tampilan panel staf: skala huruf, jarak, sudut, dan warna.
   Mengikuti sistem desain Frappe (Espresso) yang dipakai ERPNext v15: Inter, teks dasar 14px,
   label 13px, kontrol setinggi 28px, sudut 8px, garis abu-abu tipis, tombol utama hitam.
   Situs pelanggan memakai palet sendiri di shop.css; yang dipakai bersama hanya --font-ui
   dan --font-display.

   Berkas lain memakai variabel di sini, tidak menulis ulang angka atau kode warna sendiri. */

:root{
  /* Huruf */
  --font-ui:var(--font-inter),"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-display:var(--font-space),var(--font-inter),"Segoe UI",system-ui,sans-serif;
  --fs-xs:12px;   /* keterangan kecil, label di kartu tabel ponsel */
  --fs-sm:13px;   /* label isian, pil status, teks pendukung */
  --fs-md:14px;   /* teks dasar: baris daftar, tombol, isian, sidebar */
  --fs-lg:16px;   /* judul kartu dan bagian */
  --fs-xl:18px;   /* judul dialog */
  --fs-2xl:20px;  /* judul halaman */
  --fs-3xl:24px;  /* angka di kartu ringkasan */
  --fs-4xl:26px;
  --lh-tight:1.3;
  --lh-snug:1.5;
  --lh-normal:1.6;
  --track-label:.02em;

  /* Jarak — kelipatan 4 supaya margin seluruh halaman selaras */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:56px;--s10:72px;

  /* Sudut dan bayangan (Espresso) */
  --r-xs:4px;--r-sm:8px;--r-md:10px;--r-lg:12px;--r-xl:12px;--r-full:999px;
  --shadow-xs:rgba(0,0,0,.05) 0 .5px 0 0,rgba(0,0,0,.08) 0 0 0 1px,rgba(0,0,0,.05) 0 2px 4px 0;
  --shadow-1:0 1px 2px rgba(0,0,0,.1);
  --shadow-2:0 0 1px rgba(0,0,0,.19),0 1px 2px rgba(0,0,0,.07),0 6px 15px -5px rgba(0,0,0,.11);
  --shadow-3:0 0 1px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.05),0 10px 24px -3px rgba(0,0,0,.1);
  --focus-ring:0 0 0 2px #c9c9c9;

  /* Kontrol: tinggi seragam seperti tombol dan isian Frappe */
  --control:28px;
  --control-sm:28px;
  --control-lg:36px;
  --tap:32px;

  /* Lebar isi dan tepi halaman */
  --page-max:1600px;
  --navbar-h:48px;
  --sidebar-w:248px;
  --gutter:clamp(12px,2.2vw,32px);

  /* Gerak */
  --ease:cubic-bezier(.2,.7,.3,1);
  --fast:.14s;--normal:.2s;
}

/* Layar sentuh: kontrol sedikit lebih tinggi agar mudah diketuk. */
@media(max-width:767px){
  :root{--control:32px;--control-sm:32px;--control-lg:40px;--tap:36px}
}

/* --- Tema terang (bawaan, seperti ERPNext) ------------------------------- */
:root{
  --gray-50:#f8f8f8;--gray-100:#f3f3f3;--gray-200:#ededed;--gray-300:#e2e2e2;--gray-400:#c7c7c7;
  --gray-500:#999999;--gray-600:#7c7c7c;--gray-700:#525252;--gray-800:#383838;--gray-900:#171717;

  --bg:#ffffff;
  --panel:#ffffff;        /* kartu */
  --panel2:#f3f3f3;       /* isian dan tombol biasa (control-bg) */
  --rail:#ffffff;         /* sidebar */
  --subtle:#f8f8f8;       /* sorotan baris */
  --line:#ededed;         /* border-color */
  --line-strong:#e2e2e2;  /* dark-border-color */
  --text:#171717;         /* judul dan angka */
  --text-soft:#383838;    /* teks isi */
  --muted:#6b6b6b;        /* keterangan; 5.3:1 di atas putih */
  --label:#525252;        /* label isian */
  --placeholder:#999999;

  --primary:#171717;      /* tombol utama */
  --primary-ink:#ffffff;
  --btn:#f3f3f3;          /* tombol biasa */
  --btn-hover:#e2e2e2;
  --hover:#f3f3f3;        /* sorotan menu sidebar */
  --focus:#999999;
  --link:#0070cc;

  /* Nama lama tetap ada agar komponen yang belum memakai nama baru ikut berganti. */
  --lime:var(--primary);
  --lime-ink:var(--primary-ink);
  --lime-text:var(--text);
  --lime-wash:var(--gray-100);
  --lime-edge:var(--gray-400);

  /* Pasangan latar dan teks untuk pil status (indicator-pill Frappe) */
  --green-bg:#e4f5e9;--green-text:#16794c;--green-solid:#30a66d;
  --red-bg:#fff0f0;--red-text:#b52a2a;--red-solid:#e03636;
  --orange-bg:#fff1e7;--orange-text:#bd3e0c;--orange-solid:#e86c13;
  --yellow-bg:#fff7d3;--yellow-text:#ab6e05;--yellow-solid:#edba13;
  --blue-bg:#edf6fd;--blue-text:#0070cc;--blue-solid:#0289f7;
  --purple-bg:#f9f0ff;--purple-text:#6e399d;
  --cyan-bg:#e0f8ff;--cyan-text:#267a94;
  --gray-bg:#f3f3f3;--gray-text:#525252;

  /* Palet grafik Frappe Charts */
  --chart-blue:#318ad8;--chart-green:#48bb74;--chart-red:#f56b6b;--chart-orange:#f8814f;

  --cyan:var(--blue-text);
  --violet:var(--purple-text);
  --orange:var(--orange-text);
  --danger:#cc2929;
  --danger-wash:#fff0f0;

  --backdrop:rgba(56,56,56,.5);
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* --- Tema gelap (pilihan di menu akun) ----------------------------------- */
html[data-theme="dark"]{
  --gray-700:#383838;--gray-800:#232323;

  --bg:#171717;
  --panel:#171717;
  --panel2:#232323;
  --rail:#171717;
  --subtle:#1f1f1f;
  --line:#2c2c2c;
  --line-strong:#383838;
  --text:#f8f8f8;
  --text-soft:#e2e2e2;
  --muted:#a3a3a3;
  --label:#c7c7c7;
  --placeholder:#7c7c7c;

  --primary:#e2e2e2;
  --primary-ink:#171717;
  --btn:#232323;
  --btn-hover:#383838;
  --hover:#232323;
  --focus:#7c7c7c;
  --link:#70b6f0;

  --green-bg:#173b2c;--green-text:#b6dec5;
  --red-bg:#4a1717;--red-text:#f9c6c6;
  --orange-bg:#4a2410;--orange-text:#f7d6bd;
  --yellow-bg:#4a3510;--yellow-text:#f5e171;
  --blue-bg:#0c2f4d;--blue-text:#c9e7fc;
  --purple-bg:#33194d;--purple-text:#e9d6f5;
  --cyan-bg:#123845;--cyan-text:#b3ecfc;
  --gray-bg:#2c2c2c;--gray-text:#e2e2e2;

  --danger:#eb9091;
  --danger-wash:#4a1717;

  --backdrop:rgba(0,0,0,.6);
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7c7c7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* --- Dasar --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:var(--fs-md);line-height:var(--lh-snug);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit}
img,svg,video{max-width:100%}
h1,h2,h3,h4,h5,h6{margin:0;line-height:var(--lh-tight)}
small{font-size:var(--fs-xs)}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}

@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Teks yang hanya dibaca pembaca layar: tetap ada di pohon aksesibilitas, tidak terlihat. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Merek dan halaman masuk staf (gaya halaman login Frappe). Dasar warna, huruf, dan jarak
   ada di tokens.css. */

/* Bilah geser yang serasi dengan tema, bukan bawaan sistem. */
*{scrollbar-color:var(--gray-400) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--r-full);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--gray-500);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* --- Merek --------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0;color:var(--text)}
.brand-mark{
  display:grid;place-items:center;flex:none;width:28px;height:28px;
  border-radius:var(--r-sm);background:var(--primary);color:var(--primary-ink);
}
.brand-mark svg{width:18px;height:18px}
.brand-name{font-family:var(--font-ui);font-size:var(--fs-lg);font-weight:600;letter-spacing:.01em;white-space:nowrap}

/* --- Halaman masuk staf --------------------------------------------------- */
.auth-page{
  position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:var(--s9) var(--s4) var(--s6);background:var(--gray-50);color:var(--text-soft);
  font-family:var(--font-ui);font-size:var(--fs-md);letter-spacing:.02em;
}
html[data-theme="dark"] .auth-page{background:var(--bg)}
.auth-back{
  position:absolute;top:var(--s4);right:var(--s4);
  display:inline-flex;align-items:center;gap:6px;height:var(--control);padding:0 var(--s2);
  border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--label);text-decoration:none;
}
.auth-back:hover{background:var(--btn);color:var(--text)}
.auth-back svg{width:14px;height:14px}
.auth-card{
  width:min(100%,400px);margin:auto 0;padding:var(--s7) var(--s7) var(--s6);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-1);
}
.auth-logo{display:flex;justify-content:center;margin-bottom:var(--s5)}
.auth-logo .brand-mark{width:40px;height:40px;border-radius:var(--r-md)}
.auth-logo .brand-mark svg{width:24px;height:24px}
.auth-logo .brand-name{display:none}
.auth-card h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:.01em;color:var(--text);text-align:center;margin:0 0 var(--s1)}
.auth-subtitle{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--muted);text-align:center;margin:0 0 var(--s5)}
.auth-card>p[role=alert]{margin:var(--s3) 0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--red-bg);color:var(--red-text);font-size:var(--fs-sm)}

.auth-form{display:flex;flex-direction:column;gap:6px}
.auth-form label{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--label)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-top:var(--s2)}
.label-row label{margin:0}
.input-wrap{
  position:relative;display:flex;align-items:center;gap:var(--s2);height:var(--control-lg);padding:0 var(--s3);
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--panel2);
  transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.input-wrap:focus-within{background:var(--panel);border-color:var(--gray-400);box-shadow:var(--focus-ring)}
.input-wrap>svg{width:16px;height:16px;flex:none;color:var(--muted)}
.input-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:var(--fs-md)}
.input-wrap input::placeholder{color:var(--placeholder)}
.eye-button{display:grid;place-items:center;width:28px;height:28px;flex:none;margin-right:-6px;border:0;border-radius:6px;background:none;color:var(--muted)}
.eye-button:hover{background:var(--btn-hover);color:var(--text)}
.eye-button svg{width:16px;height:16px}
.primary-button{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:var(--control-lg);margin-top:var(--s5);border:0;border-radius:var(--r-sm);
  background:var(--primary);color:var(--primary-ink);font-size:var(--fs-md);font-weight:500;text-decoration:none;
}
.primary-button:hover{filter:brightness(1.25)}
html[data-theme="dark"] .primary-button:hover{filter:brightness(.92)}
.primary-button svg{width:16px;height:16px}
.primary-button:disabled{opacity:.6;cursor:wait}
.divider{display:flex;align-items:center;gap:var(--s3);color:var(--muted);font-size:var(--fs-xs);margin:var(--s5) 0 var(--s2)}
.divider span{height:1px;background:var(--line);flex:1 1}
.auth-switch{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin:var(--s3) 0 0}
.auth-switch a{display:inline-block;padding:var(--s1) 2px;color:var(--text);text-decoration:none;font-weight:500}
.auth-switch a:hover{text-decoration:underline}
.form-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s3);gap:var(--s3)}
.form-grid>div{display:flex;flex-direction:column;gap:6px}
.compact-form{gap:6px}
.password-hint{font-size:var(--fs-xs);color:var(--muted);margin:0}
.auth-foot{margin-top:var(--s6);font-size:var(--fs-xs);color:var(--muted)}

@media(max-width:480px){
  .auth-page{padding:var(--s9) var(--s3) var(--s5);background:var(--panel)}
  .auth-card{padding:var(--s5) var(--s1);border:0;box-shadow:none}
  .form-grid{grid-template-columns:1fr}
}

/* --- Garis loading saat pindah halaman (components/route-progress.tsx) --- */
.route-progress{position:fixed;inset:0 0 auto;height:3px;z-index:10000;pointer-events:none}
.route-progress-bar{height:100%;width:0;background:var(--primary,#171717);
  box-shadow:0 0 8px color-mix(in srgb,var(--primary,#171717) 45%,transparent);
  transition:width .4s var(--ease,ease),opacity .3s ease .1s;border-radius:0 2px 2px 0}
.route-progress[data-state="done"] .route-progress-bar{opacity:0;transition:width .2s ease,opacity .25s ease .15s}
/* Situs pelanggan: hijau merek dengan kilau lime. */
html:has(.shop) .route-progress-bar{background:#0f3326;box-shadow:0 0 10px #c8ff3d}
@media(prefers-reduced-motion:reduce){.route-progress-bar{transition:none}}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/management.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* Kerangka panel staf bergaya desk ERPNext v15 (Frappe): bilah atas 48px, sidebar ruang kerja,
   judul halaman, daftar (list view), formulir, dialog, dan pil status. Ukuran dan warna
   berasal dari tokens.css. Semua aturan berada di bawah .desk agar tidak menyentuh situs pelanggan. */

/* --- Dasar desk ---------------------------------------------------------- */
.desk{
  --font-display:var(--font-ui);
  min-height:100vh;background:var(--bg);color:var(--text-soft);
  font-family:var(--font-ui);font-size:var(--fs-md);font-weight:420;letter-spacing:.02em;line-height:var(--lh-snug);
}
.desk ::selection{background:var(--gray-300);color:var(--text)}
html[data-theme="dark"] .desk ::selection{background:var(--gray-600)}
.desk h1,.desk h2,.desk h3,.desk h4{color:var(--text);letter-spacing:.01em}
.desk b,.desk strong{font-weight:600}
/* Ikon garis gaya Frappe: goresan tipis, ukuran 16px kecuali diatur lain. */
.desk svg.lucide{stroke-width:1.5}

/* --- Kontrol isian (form-control Frappe) --------------------------------- */
.desk :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea){
  min-width:0;height:var(--control);padding:0 var(--s2);
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--panel2);
  color:var(--text);font-size:var(--fs-md);font-weight:420;letter-spacing:.02em;line-height:1.4;text-transform:none;outline:0;
  transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.desk :where(textarea){height:auto;min-height:80px;padding:6px var(--s2);resize:vertical;line-height:var(--lh-normal)}
.desk :where(select){-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 6px center;background-size:16px;cursor:pointer}
.desk :where(input,select,textarea)::placeholder{color:var(--placeholder);opacity:1}
.desk :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{background-color:var(--panel);border-color:var(--gray-400);box-shadow:var(--focus-ring)}
html[data-theme="dark"] .desk :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--gray-600);box-shadow:0 0 0 2px var(--gray-700)}
.desk :where(input,select,textarea):disabled{background-color:var(--subtle);color:var(--muted);cursor:not-allowed;opacity:1}
.desk :where(input[type=date],input[type=time],input[type=month]){color-scheme:inherit}
.desk :where(input[type=checkbox]){
  -moz-appearance:none;
       appearance:none;-webkit-appearance:none;flex:none;width:14px;height:14px;margin:0;
  border:1px solid var(--gray-400);border-radius:4px;background:var(--panel) center/8px 7px no-repeat;cursor:pointer;
  transition:background-color var(--fast) var(--ease);
}
.desk :where(input[type=checkbox]):checked{border-color:var(--primary);background-color:var(--primary);background-image:var(--check)}
.desk :where(input[type=checkbox]):focus-visible{outline:0;box-shadow:var(--focus-ring)}
.desk :where(input[type=radio]){accent-color:var(--primary)}
/* Aturan lebar seperti ".modal-fields input{width:100%}" tidak boleh meregangkan kotak centang. */
.desk input[type=checkbox],.desk input[type=radio]{width:14px;min-width:14px;flex:none}

/* --- Tombol (btn Frappe) ------------------------------------------------- */
.desk .btn,.ops-primary,.ops-secondary,.ops-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--control);min-height:var(--control);padding:0 var(--s2);border:0;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:420;letter-spacing:.02em;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.ops-primary,.desk .btn-primary{background:var(--primary);color:var(--primary-ink)}
.ops-primary:hover,.desk .btn-primary:hover{filter:brightness(1.35)}
html[data-theme="dark"] .ops-primary:hover,html[data-theme="dark"] .desk .btn-primary:hover{filter:brightness(.9)}
.ops-secondary{background:var(--btn);color:var(--text-soft)}
.ops-secondary:hover{background:var(--btn-hover);color:var(--text)}
.ops-danger{background:var(--btn);color:var(--danger)}
.ops-danger:hover{background:var(--red-bg);color:var(--red-text)}
.ops-primary svg,.ops-secondary svg,.ops-danger svg{width:14px;height:14px;flex:none}
.ops-primary:disabled,.ops-secondary:disabled,.ops-danger:disabled{opacity:.5;filter:none}
.desk-icon-btn{
  display:inline-grid;place-items:center;flex:none;width:var(--control);height:var(--control);padding:0;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-soft);
}
.desk-icon-btn:hover{background:var(--btn)}
.desk-icon-btn svg{width:16px;height:16px}

/* --- Bilah atas (navbar) ------------------------------------------------- */
.desk-navbar{position:-webkit-sticky;position:sticky;top:0;z-index:40;height:var(--navbar-h);background:var(--bg);border-bottom:1px solid var(--line)}
.desk-navbar-inner{height:100%;display:flex;align-items:center;gap:var(--s2);padding-inline:var(--s3) var(--gutter)}
.desk-sidebar-toggle{flex:none}
.desk-logo .brand-name{font-size:var(--fs-md)}
.desk-logo{display:flex;align-items:center;text-decoration:none;border-radius:var(--r-sm)}
.desk-breadcrumbs{display:flex;align-items:center;gap:6px;min-width:0;margin-left:2px;font-size:var(--fs-md);color:var(--muted)}
.desk-breadcrumbs svg{width:14px;height:14px;flex:none;color:var(--gray-500)}
.desk-breadcrumbs span,.desk-breadcrumbs a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-breadcrumbs a{color:var(--text);text-decoration:none}
.desk-breadcrumbs a:hover{text-decoration:underline}
.desk-navbar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}

/* Pencarian (awesomebar) */
.desk-search{position:relative;width:min(300px,32vw)}
.desk-search-field{position:relative;display:flex;align-items:center}
.desk-search-icon{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.desk-search .desk-search-field input{width:100%;padding-left:32px;font-size:var(--fs-sm)}
.desk-search-open,.desk-search-close{display:none!important}
.desk-dropdown{
  position:absolute;z-index:60;margin:0;padding:6px;list-style:none;
  border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow-3);
  animation:desk-pop var(--fast) var(--ease);
}
html[data-theme="dark"] .desk-dropdown{border:1px solid var(--line)}
@keyframes desk-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.desk-search-results{top:calc(100% + 4px);left:0;right:0;max-height:min(360px,70vh);overflow:auto}
.desk-search-results button{
  width:100%;display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);
  border:0;border-radius:6px;background:none;color:var(--text-soft);font-size:var(--fs-sm);text-align:left;
}
.desk-search-results button.active{background:var(--hover);color:var(--text)}
.desk-search-results svg{width:16px;height:16px;flex:none;color:var(--muted)}
.desk-search-results small{margin-left:auto;font-size:var(--fs-xs);color:var(--muted)}
.desk-dropdown-empty{padding:var(--s2);font-size:var(--fs-sm);color:var(--muted)}

/* Menu akun */
.desk-user{position:relative}
.desk-avatar{
  display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:var(--gray-200);color:var(--gray-800);font-size:11px;font-weight:600;letter-spacing:.04em;
}
html[data-theme="dark"] .desk-avatar{background:var(--gray-700);color:var(--gray-100)}
button.desk-avatar:hover{box-shadow:0 0 0 2px var(--line-strong)}
.desk-avatar.large{width:36px;height:36px;font-size:var(--fs-sm)}
.desk-user-menu{top:calc(100% + 8px);right:0;width:240px;display:flex;flex-direction:column}
.desk-user-head{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2) var(--s2)}
.desk-user-head div{min-width:0;display:flex;flex-direction:column}
.desk-user-head b{font-size:var(--fs-md);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-user-head small{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-user-menu a,.desk-user-menu button{
  display:flex;align-items:center;gap:var(--s2);min-height:30px;padding:0 var(--s2);
  border:0;border-radius:6px;background:none;color:var(--text-soft);font-size:var(--fs-sm);text-align:left;text-decoration:none;
}
.desk-user-menu a:hover,.desk-user-menu button:hover{background:var(--hover);color:var(--text)}
.desk-user-menu svg{width:16px;height:16px;color:var(--muted)}
.desk-user-menu .danger:hover{background:var(--red-bg);color:var(--red-text)}
.desk-user-menu .danger:hover svg{color:var(--red-text)}
.desk-user-menu hr{width:100%;margin:6px 0;border:0;border-top:1px solid var(--line)}

/* --- Tubuh: sidebar dan isi ----------------------------------------------
   Sidebar menempel di tepi kiri layar pada semua lebar desktop (termasuk monitor 27 inci),
   isi halaman memakai sisa lebar. Ringkas = deretan ikon 60px dengan tooltip. */
.desk-body{display:flex;align-items:stretch;min-height:calc(100vh - var(--navbar-h))}
.desk-sidebar{
  position:-webkit-sticky;
  position:sticky;top:var(--navbar-h);flex:none;width:var(--sidebar-w);
  height:calc(100vh - var(--navbar-h));display:flex;flex-direction:column;
  background:var(--subtle);border-right:1px solid var(--line);
  transition:width var(--normal) var(--ease);
}
html[data-theme="dark"] .desk-sidebar{background:var(--bg)}
.desk-sidebar-scroll{flex:1 1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--s3) var(--s2) var(--s4);scrollbar-width:thin}
.desk-drawer-head{display:none}
.desk-nav{display:flex;flex-direction:column;gap:var(--s3)}
.desk-nav-section{display:flex;flex-direction:column;gap:2px}
.desk-nav-items{display:flex;flex-direction:column;gap:2px}
.desk-nav-label{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);width:100%;
  min-height:28px;margin:0;padding:0 var(--s2);border:0;border-radius:6px;background:none;cursor:pointer;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label);text-align:left;
}
.desk-nav-label:hover:not(:disabled){background:var(--hover);color:var(--text)}
.desk-nav-label:disabled{cursor:default;opacity:1}
.desk-nav-label svg{width:14px;height:14px;flex:none;color:var(--muted);transition:transform var(--fast) var(--ease)}
.desk-nav-label:disabled svg{visibility:hidden}
.desk-nav-label[aria-expanded=false] svg{transform:rotate(-90deg)}
.desk-nav-item{
  position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 var(--s2) 0 10px;border-radius:var(--r-sm);
  color:var(--text-soft);font-size:var(--fs-md);text-decoration:none;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.desk-nav-item svg{width:18px;height:18px;flex:none;color:var(--label)}
.desk-nav-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-nav-item:hover{background:var(--btn-hover);color:var(--text)}
.desk-nav-item:hover svg{color:var(--text)}
/* Halaman aktif: kartu putih, teks tebal, dan garis penanda di kiri supaya langsung terlihat. */
.desk-nav-item.selected{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)}
.desk-nav-item.selected svg{color:var(--text)}
.desk-nav-item.selected::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
html[data-theme="dark"] .desk-nav-item.selected{background:var(--panel2);box-shadow:none}
.desk-nav-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.desk-nav-divider{display:block;height:1px;margin:2px 10px 4px;background:var(--line-strong)}
.desk-nav-section:first-child .desk-nav-divider{display:none}
.desk-nav-tip{
  position:fixed;z-index:90;transform:translateY(-50%);padding:5px 10px;border-radius:6px;pointer-events:none;
  background:var(--gray-900);color:#fff;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;box-shadow:var(--shadow-2);
}
html[data-theme="dark"] .desk-nav-tip{background:var(--gray-100);color:var(--gray-900)}

.desk-sidebar-foot{display:flex;align-items:center;gap:var(--s1);padding:var(--s2);border-top:1px solid var(--line)}
.desk-sidebar-user{display:flex;align-items:center;gap:var(--s2);flex:1 1;min-width:0;padding:4px 6px;border-radius:var(--r-sm);text-decoration:none;color:inherit}
.desk-sidebar-user:hover{background:var(--btn-hover)}
.desk-sidebar-user-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.desk-sidebar-user-text b{font-size:var(--fs-sm);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-sidebar-user-text small{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-collapse-btn{color:var(--label)}

/* Mode ringkas di desktop */
.desk.sidebar-collapsed{--sidebar-w:60px}
.desk.sidebar-collapsed .desk-sidebar-scroll{padding-inline:10px}
.desk.sidebar-collapsed .desk-nav-item{justify-content:center;padding:0;min-height:40px}
.desk.sidebar-collapsed .desk-nav-item span{display:none}
.desk.sidebar-collapsed .desk-nav-item.selected::before{left:-10px}
.desk.sidebar-collapsed .desk-sidebar-foot{flex-direction:column;padding:var(--s2) 10px}
.desk.sidebar-collapsed .desk-sidebar-user{flex:none;padding:4px}
.desk.sidebar-collapsed .desk-sidebar-user-text{display:none}

.desk-sidebar-skeleton{display:flex;flex-direction:column;gap:14px;padding:var(--s2)}
.desk-sidebar-skeleton i{display:block;height:16px;border-radius:var(--r-xs);background:var(--gray-200);animation:desk-breathe 2s infinite}
.desk-sidebar-skeleton i:nth-child(odd){width:70%}
html[data-theme="dark"] .desk-sidebar-skeleton i{background:var(--panel2)}
@keyframes desk-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.desk-backdrop{display:none}

.desk-main{flex:1 1;min-width:0;padding:0 var(--gutter)}
.manage-content{width:100%;padding:0 0 var(--s9)}

/* --- Judul halaman (page-head) ------------------------------------------- */
.manage-heading{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s4);
  min-height:60px;padding:var(--s3) 0;margin-bottom:var(--s3);
}
.manage-heading>div{min-width:0;flex:1 1 320px}
.manage-heading p{display:none}
.manage-heading h1{font-size:var(--fs-2xl);font-weight:700;line-height:1.3;color:var(--text);margin:0}
.manage-heading>div>span{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--muted);max-width:80ch}
.manage-heading>button,.manage-heading>.ops-primary{
  flex:none;display:inline-flex;align-items:center;gap:6px;height:var(--control);padding:0 var(--s2);
  border:0;border-radius:var(--r-sm);background:var(--primary);color:var(--primary-ink);
  font-size:var(--fs-md);font-weight:420;text-decoration:none;
}
.manage-heading>button:hover{filter:brightness(1.35)}
html[data-theme="dark"] .manage-heading>button:hover{filter:brightness(.9)}
.manage-heading>button svg,.manage-heading>.ops-primary svg{width:14px;height:14px}

/* --- Saringan dan daftar (list view) ------------------------------------- */
.manage-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);
  padding:var(--s2) var(--s3);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--panel);
}
.manage-toolbar>div{position:relative;display:flex;align-items:center;flex:1 1;min-width:0;max-width:320px}
.manage-toolbar svg{position:absolute;left:var(--s2);width:14px;height:14px;color:var(--muted);pointer-events:none}
.manage-toolbar input{flex:1 1;width:100%;padding-left:28px}
.manage-toolbar>span{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.manage-toolbar+.manage-table-card{border-top-left-radius:0;border-top-right-radius:0}
.manage-toolbar+.manage-table-card thead th{border-top-width:4px}

.manage-table-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow-x:auto}
.manage-table-card table{width:100%;border-collapse:separate;border-spacing:0}
/* Kepala daftar abu-abu membulat dengan jarak di tepinya, seperti list-row-head Frappe. */
.manage-table-card th{
  text-align:left;white-space:nowrap;height:46px;padding:0 var(--s3);
  border-top:8px solid var(--panel);border-bottom:6px solid var(--panel);background:var(--panel2);background-clip:padding-box;
  color:var(--muted);font-size:var(--fs-sm);font-weight:420;letter-spacing:.02em;text-transform:none;
}
.manage-table-card th:first-child{border-left:5px solid var(--panel);border-radius:15px 0 0 15px/18px 0 0 18px;padding-left:10px}
.manage-table-card th:last-child{border-right:5px solid var(--panel);border-radius:0 15px 15px 0/0 18px 18px 0}
.manage-table-card td{
  padding:10px var(--s3);border-bottom:1px solid var(--line);
  font-size:var(--fs-md);color:var(--text-soft);vertical-align:middle;line-height:var(--lh-snug);
}
.manage-table-card td:first-child{padding-left:15px}
.manage-table-card td b{color:var(--text);font-weight:500}
.manage-table-card tbody tr:last-child td{border-bottom:0}
.manage-table-card tbody tr:hover td{background:var(--subtle)}
.manage-table-card td>small,.manage-table-card td small.table-description,.ops-table .table-description{
  display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-snug);
}
.manage-table-card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);
  color:var(--purple-text);background:var(--purple-bg);padding:2px 6px;border-radius:var(--r-xs);
}
.manage-table-card td.right,.manage-table-card th.right{text-align:right}

.user-cell{display:flex;align-items:center;gap:10px;min-width:0}
.user-cell>span{
  display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--gray-200);color:var(--gray-800);font-size:11px;font-weight:600;
}
html[data-theme="dark"] .user-cell>span{background:var(--gray-700);color:var(--gray-100)}
.user-cell>div{min-width:0;display:flex;flex-direction:column}
.user-cell b{font-size:var(--fs-md);font-weight:500;color:var(--text)}
.user-cell small{font-size:var(--fs-xs);color:var(--muted)}

/* --- Pil status (indicator-pill) ----------------------------------------- */
.status-pill,.access-badge{
  display:inline-flex;align-items:center;height:20px;padding:0 var(--s2);border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:420;letter-spacing:.02em;line-height:1;white-space:nowrap;
  background:var(--gray-bg);color:var(--gray-text);
}
.status-pill:before{content:"";flex:none;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor}
.status-pill.on{background:var(--green-bg);color:var(--green-text)}
.status-pill.off{background:var(--red-bg);color:var(--red-text)}
.status-pill.done{background:var(--blue-bg);color:var(--blue-text)}
.status-pill.wait{background:var(--orange-bg);color:var(--orange-text)}
.access-badge{background:var(--gray-bg);color:var(--gray-text)}

/* --- Tombol ikon di baris ------------------------------------------------ */
.row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-actions button,.row-actions a{
  display:grid;place-items:center;width:var(--control);height:var(--control);padding:0;
  border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);text-decoration:none;
}
.row-actions button:hover,.row-actions a:hover{background:var(--btn-hover);color:var(--text)}
.row-actions button.delete:hover{background:var(--red-bg);color:var(--red-text)}
.row-actions button:disabled{opacity:.4}
.row-actions button:disabled:hover{background:var(--btn);color:var(--text-soft)}
.row-actions svg{width:14px;height:14px}

/* .empty-state juga dipakai keranjang pelanggan (shop.css menimpanya); aturan dasarnya dibiarkan. */
.empty-state,.manage-loading{padding:var(--s9) var(--s5);text-align:center;color:var(--muted);font-size:var(--fs-md);line-height:1.65}
.desk .empty-state{padding:var(--s8) var(--s5)}
.manage-loading svg{width:16px;height:16px;vertical-align:-3px;margin-right:var(--s2);animation:spin 1s linear infinite}

/* --- Kartu angka (number card) ------------------------------------------- */
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:var(--s3);gap:var(--s3)}
.metric-card{display:flex;flex-direction:column;min-width:0;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.metric-top{display:none}
.metric-card>p{order:1;margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric-card h2{order:2;margin:var(--s2) 0 0;font-size:var(--fs-3xl);font-weight:600;letter-spacing:.005em;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metric-card small{order:3;display:block;margin-top:var(--s1);font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-snug)}

/* --- Dialog -------------------------------------------------------------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;
  padding:min(8vh,64px) var(--s4) var(--s4);overflow-y:auto;background:var(--backdrop);
  animation:fade-in var(--fast) var(--ease);
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes lift-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.crud-modal{
  width:min(575px,100%);max-height:calc(100vh - min(8vh,64px) - var(--s6));overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);color:var(--text-soft);
  font-family:var(--font-ui);font-size:var(--fs-md);letter-spacing:.02em;
  box-shadow:var(--shadow-3);animation:lift-in var(--normal) var(--ease);
}
.modal-head{
  position:-webkit-sticky;
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:var(--panel);
}
.modal-head p{display:none}
.modal-head h2{font-size:var(--fs-xl);font-weight:600;line-height:1.6;margin:0;color:var(--text)}
.modal-head button{
  display:grid;place-items:center;flex:none;width:var(--control);height:var(--control);padding:0;
  border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);
}
.modal-head button:hover{background:var(--btn-hover);color:var(--text)}
.modal-head button svg{width:16px;height:16px}
.modal-fields{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.modal-fields label,.settings-card>label{
  display:flex;flex-direction:column;gap:6px;
  font-size:var(--fs-sm);font-weight:420;letter-spacing:.02em;text-transform:none;color:var(--label);
}
.modal-fields input,.modal-fields select,.settings-card input{width:100%}
.modal-fields textarea{width:100%}
/* Petunjuk di bawah isian (help-box Frappe). */
.field-hint{font-size:var(--fs-xs);font-weight:420;letter-spacing:.02em;text-transform:none;line-height:var(--lh-normal);color:var(--muted)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s3);gap:var(--s3)}
.menu-access-label{margin-top:var(--s2)}
.menu-checks{display:grid;grid-template-columns:1fr 1fr;grid-gap:2px var(--s3);gap:2px var(--s3)}
.menu-checks button{
  display:flex;align-items:center;gap:var(--s2);text-align:left;min-height:30px;padding:0 6px;
  border:0;border-radius:6px;background:none;color:var(--text-soft);font-size:var(--fs-md);
}
.menu-checks button:hover{background:var(--subtle)}
.menu-checks button>span{display:grid;place-items:center;flex:none;width:14px;height:14px;border:1px solid var(--gray-400);border-radius:4px;background:var(--panel)}
.menu-checks button>span svg{width:10px;height:10px;stroke-width:3}
.menu-checks button.checked{color:var(--text)}
.menu-checks button.checked>span{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.switch-field{flex-direction:row!important;align-items:center;gap:var(--s2)!important;font-size:var(--fs-md)!important;color:var(--text-soft)!important}
.switch-field>span{display:none}
.modal-actions{
  position:-webkit-sticky;
  position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:var(--s2);
  padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--panel);
}
.modal-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--control);padding:0 var(--s3);border:0;border-radius:var(--r-sm);
  background:var(--btn);color:var(--text-soft);font-size:var(--fs-md);font-weight:420;
}
.modal-actions button:hover{background:var(--btn-hover);color:var(--text)}
.modal-actions button:last-child{background:var(--primary);color:var(--primary-ink)}
.modal-actions button:last-child:hover{filter:brightness(1.35)}
html[data-theme="dark"] .modal-actions button:last-child:hover{filter:brightness(.9)}
.modal-actions svg{width:14px;height:14px}

/* --- Kartu (frappe-card) ------------------------------------------------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));grid-gap:var(--s4);gap:var(--s4);align-items:start}
.settings-card{
  display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s5) var(--s5);min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
}
.settings-title{display:flex;align-items:flex-start;gap:10px;padding-bottom:var(--s3);margin-bottom:var(--s1);border-bottom:1px solid var(--line)}
.settings-title>svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--text-soft)}
.settings-title h2{font-size:var(--fs-lg);font-weight:600;margin:0 0 2px}
.settings-title p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--muted)}
.save-settings{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:var(--s1);
  height:var(--control);padding:0 var(--s2);border:0;border-radius:var(--r-sm);
  background:var(--primary);color:var(--primary-ink);font-size:var(--fs-md);font-weight:420;
}
.save-settings:hover{filter:brightness(1.35)}
html[data-theme="dark"] .save-settings:hover{filter:brightness(.9)}
.save-settings svg{width:14px;height:14px}

/* --- Tautan teks --------------------------------------------------------- */
.ops-link{
  display:inline-flex;align-items:center;gap:4px;min-height:var(--control);
  font-size:var(--fs-sm);font-weight:420;color:var(--text-soft);text-decoration:none;white-space:nowrap;
}
.ops-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ops-link svg{width:14px;height:14px}

/* --- Layar sedang: sidebar menjadi laci (overlay-sidebar Frappe) --------- */
@media(max-width:991px){
  body.nav-open{overflow:hidden}
  .desk-body{display:block}
  .desk-sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(300px,85vw);height:auto;
    background:var(--rail);border-right:0;
    box-shadow:var(--shadow-3);transform:translateX(-105%);visibility:hidden;
    transition:transform var(--normal) ease-in-out,visibility 0s linear var(--normal);
  }
  .desk-sidebar.open{transform:none;visibility:visible;transition:transform var(--normal) ease-in-out}
  .desk-drawer-head{
    display:flex;flex:none;align-items:center;justify-content:space-between;
    height:var(--navbar-h);padding:0 var(--s2) 0 var(--s4);border-bottom:1px solid var(--line);
  }
  .desk-sidebar-scroll{padding:var(--s3)}
  .desk-collapse-btn{display:none}
  .desk-nav-item{min-height:44px;font-size:15px}
  .desk-nav-label{min-height:32px}
  .desk-backdrop{
    display:block;position:fixed;inset:0;z-index:75;border:0;padding:0;
    background:#000;opacity:0;pointer-events:none;transition:opacity var(--normal) ease;
  }
  .desk-backdrop.open{opacity:.35;pointer-events:auto}
}

/* --- Layar sempit -------------------------------------------------------- */
@media(max-width:767px){
  .desk-breadcrumbs{display:none}
  .desk-search{position:static;width:auto}
  .desk-search-open{display:inline-grid!important}
  .desk-search-field{display:none}
  .desk-search.expanded .desk-search-field{
    display:flex;position:absolute;inset:0;z-index:5;padding:0 var(--gutter);gap:var(--s2);background:var(--bg);
  }
  .desk-search.expanded .desk-search-icon{left:calc(var(--gutter) + 10px)}
  .desk-search.expanded .desk-search-close{display:inline-grid!important}
  .desk-search-results{position:fixed;top:calc(var(--navbar-h) + 4px);left:var(--gutter);right:var(--gutter)}
  .desk-navbar-end{gap:var(--s1)}

  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .metric-card{padding:var(--s3)}
  .metric-card h2{font-size:var(--fs-2xl)}
  .manage-heading{min-height:0;padding:var(--s3) 0 var(--s1)}
  .manage-heading h1{font-size:var(--fs-xl)}

  /* Daftar menjadi kartu bertumpuk. */
  .table-cards table{min-width:0}
  .table-cards thead{display:none}
  .table-cards tbody tr{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s2) var(--s3);gap:var(--s2) var(--s3);padding:var(--s3) var(--s3);border-bottom:1px solid var(--line)}
  .table-cards tbody tr:last-child{border-bottom:0}
  .table-cards tbody tr:hover td{background:none}
  .table-cards tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0!important;border:0;min-width:0}
  .table-cards tbody td::before{content:attr(data-label);font-size:var(--fs-xs);font-weight:420;letter-spacing:.02em;color:var(--muted)}
  .table-cards tbody td.wide,.table-cards tbody td.actions{grid-column:1/-1}
  .table-cards tbody td.actions::before{content:none}
  .table-cards tbody td.right{text-align:left}
  .table-cards tbody td.actions>.ops-secondary,.table-cards tbody td.actions>.ops-danger,.table-cards tbody td.actions>.ops-primary{width:100%}
  .manage-toolbar>div{max-width:none}

  .modal-backdrop{padding:var(--s2)}
  .crud-modal{max-height:calc(100vh - var(--s4))}
  .modal-head,.modal-fields,.modal-actions{padding-left:var(--s4);padding-right:var(--s4)}
  .modal-actions button{flex:1 1}
  .field-grid,.menu-checks{grid-template-columns:1fr}
}
@media(max-width:340px){
  .metric-grid{grid-template-columns:1fr}
  .table-cards tbody tr{grid-template-columns:1fr}
}

/* --- Notifikasi (toast) seperti alert Frappe: kartu putih berbayang ------- */
body:has(.desk) [data-sonner-toaster],body:has(.auth-page) [data-sonner-toaster]{
  --normal-bg:var(--panel);--normal-border:var(--line);--normal-text:var(--text);
  --success-bg:var(--panel);--success-border:var(--line);--success-text:var(--green-text);
  --error-bg:var(--panel);--error-border:var(--line);--error-text:var(--red-text);
  --warning-bg:var(--panel);--warning-border:var(--line);--warning-text:var(--yellow-text);
  --info-bg:var(--panel);--info-border:var(--line);--info-text:var(--blue-text);
  --border-radius:var(--r-sm);font-family:var(--font-ui);
}
body:has(.desk) [data-sonner-toast],body:has(.auth-page) [data-sonner-toast]{font-size:var(--fs-sm);letter-spacing:.02em;box-shadow:var(--shadow-3)}

/* --- Foto profil staf ---------------------------------------------------- */
.desk-avatar,.user-cell>span{overflow:hidden}
.desk-avatar .avatar-img,.user-cell .avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.desk-avatar.xl{position:relative;width:64px;height:64px;font-size:var(--fs-xl)}
.desk-avatar.xl i{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / .45);color:#fff}
.desk-avatar.xl i svg{width:20px;height:20px;animation:spin 1s linear infinite}
.profile-photo{display:flex;align-items:center;gap:var(--s3)}
.profile-photo>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.profile-photo-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.profile-photo-actions svg{width:14px;height:14px}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/operations.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* Perkakas operasional: judul bagian, saringan, dialog rincian, peringatan, dan grafik.
   Dipakai bersama oleh Ringkasan, Booking, Lapangan, Sewa & Tambahan, Pembayaran, dan Keuangan.
   Tombol .ops-primary/.ops-secondary/.ops-danger ada di management.css. */

/* --- Judul bagian dan baris tindakan ------------------------------------- */
.ops-actions,.ops-section-title,.ops-card-head,.ops-detail-head,.ops-total,.ops-history{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.ops-actions{margin-bottom:var(--s4);flex-wrap:wrap}
.ops-actions p,.ops-muted,.ops-section-title p{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-snug);margin:0}
.ops-section-title{margin:var(--s6) 0 var(--s3);flex-wrap:wrap}
.ops-section-title h2,.ops-card-head h2{font-size:var(--fs-lg);font-weight:600;margin:0}
.ops-card-head h3{font-size:var(--fs-md);font-weight:600;margin:0}
.ops-card-head strong{font-size:var(--fs-lg);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.ops-price{font-size:var(--fs-2xl);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.ops-price small{font-size:var(--fs-sm);font-weight:420;color:var(--muted)}

/* --- Kisi kartu ---------------------------------------------------------- */
.ops-court-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));grid-gap:var(--s4);gap:var(--s4)}
.ops-empty{padding:var(--s8) var(--s5);text-align:center;color:var(--muted);font-size:var(--fs-md);line-height:var(--lh-normal)}
.ops-empty h2{font-size:var(--fs-lg);font-weight:600;color:var(--text);margin-bottom:var(--s1)}

/* --- Tabel padat --------------------------------------------------------- */
.ops-table table{width:100%}

/* --- Saringan (page-form Frappe) ----------------------------------------- */
.ops-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s3);margin-bottom:var(--s3);
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
}
.ops-filters:has(+.manage-table-card){margin-bottom:0;border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.ops-filters+.manage-table-card{border-top-left-radius:0;border-top-right-radius:0}
.ops-filters+.manage-table-card thead th{border-top-width:4px}
.ops-filters label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:420;color:var(--label)}
.ops-filters label:first-child{flex:1 1;min-width:200px;max-width:420px}
.ops-filters input,.ops-filters .rs,.ops-filters .dp-field{width:100%;min-width:140px}

/* --- Dialog operasional -------------------------------------------------- */
.ops-modal{width:min(760px,100%)}
.ops-modal .modal-fields{gap:var(--s3)}
.ops-modal p{font-size:var(--fs-sm);line-height:var(--lh-normal);margin:0;color:var(--text-soft)}
.ops-modal h3{font-size:var(--fs-lg);font-weight:600;margin:var(--s1) 0}

/* --- Pesan (alert Frappe) ------------------------------------------------ */
.ops-error,.ops-alert{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s3);
  margin-bottom:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:var(--lh-normal);
}
.ops-error{background:var(--red-bg);color:var(--red-text)}
.ops-alert{background:var(--yellow-bg);color:var(--yellow-text)}
.ops-alert b,.ops-error b{font-weight:600}
.ops-alert .ops-link,.ops-error .ops-link{color:inherit;min-height:0}
.ops-error button{margin-left:var(--s2);padding:0;border:0;background:none;color:inherit;text-decoration:underline;font-size:inherit}

/* --- Rincian booking ----------------------------------------------------- */
.ops-schedule{display:flex;flex-direction:column;gap:6px;padding:var(--s3);border-radius:var(--r-sm);background:var(--subtle);border:1px solid var(--line);font-size:var(--fs-sm)}
.ops-schedule b{color:var(--text)}
.ops-schedule span{color:var(--muted)}
.ops-total{padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.ops-total strong{font-size:var(--fs-xl);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.ops-payment,.ops-status-actions{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s1)}
.ops-payment>button,.ops-status-actions>button{align-self:flex-start}
.ops-history{padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.ops-history:last-child{border-bottom:0}
.ops-history>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ops-history b{color:var(--text);font-weight:500}
.ops-history small{font-size:var(--fs-xs);color:var(--muted)}
.ops-history strong{white-space:nowrap}

/* --- Grafik ringkasan (gaya Frappe Charts) ------------------------------- */
.ops-dashboard-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-gap:var(--s4);gap:var(--s4);margin-top:var(--s4)}
.ops-chart{display:flex;gap:var(--s2);align-items:stretch;padding-top:var(--s3);border-bottom:1px solid var(--line)}
.ops-chart-column{flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ops-chart-column>span{font-size:11px;color:var(--muted);text-align:center;overflow-wrap:anywhere;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.ops-chart-column>small{padding-bottom:6px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.ops-bar-track{height:156px;width:56%;max-width:36px;display:flex;align-items:flex-end;background:repeating-linear-gradient(to top,transparent 0 38px,var(--line) 38px 39px)}
.ops-bar-track i{display:block;width:100%;background:var(--chart-blue);border-radius:3px 3px 0 0;min-height:2px}
.ops-bar-track i.negative{background:var(--chart-red)}
.ops-chart-empty{
  min-height:196px;display:grid;place-items:center;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--s5);
  color:var(--muted);font-size:var(--fs-sm);
}
.ops-chart-empty p{margin:0;line-height:var(--lh-normal)}

/* Tautan teks di dalam isi halaman staf. */
.manage-content a:not(.ops-primary):not(.ops-secondary):not(.ops-danger):not(.ops-link):not(.site-link){color:var(--text)}

@media(max-width:900px){.ops-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:767px){
  .ops-actions,.ops-section-title{align-items:flex-start;gap:var(--s2)}
  .ops-actions>.ops-primary{width:100%}
  .ops-filters label,.ops-filters label:first-child{flex:1 1 140px;min-width:0;max-width:none}
  .ops-filters label:first-child{flex-basis:100%}
  .ops-filters input,.ops-filters .rs,.ops-filters .dp-field{min-width:0}
  .ops-filters>.ops-secondary{flex:1 1}
  .ops-modal .field-grid{grid-template-columns:1fr}
  .ops-chart{gap:2px}
  .ops-chart-column>span{font-size:10px}
  .ops-detail-head,.ops-card-head{flex-wrap:wrap;align-items:flex-start}
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/layout-editor.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Editor denah venue di panel admin. Memakai token tema admin agar mode terang ikut bekerja.
   Area kerja setinggi layar: denah selalu terlihat, panel samping bergulir sendiri. */
:root{--venue-grid-line:#1717170d;--venue-stage:#f8f8f8;--venue-handle-bg:#fff;--venue-court:#30a66d;--venue-court-bg:#30a66d1f;--venue-select:#0289f7;--venue-select-bg:#0289f714}
html[data-theme="dark"]{--venue-grid-line:#ffffff0d;--venue-stage:#1f1f1f;--venue-handle-bg:#171717;--venue-court:#59ba8b;--venue-court-bg:#59ba8b26;--venue-select:#70b6f0;--venue-select-bg:#70b6f01f}

/* Toolbar */
.venue-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s4);margin-bottom:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.venue-area{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}
.venue-area-label{align-self:center;margin-right:4px;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.venue-times{align-self:flex-end;height:var(--control);display:grid;place-items:center;color:var(--muted);font-size:14px}
.venue-gridpick{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--label)}
.venue-gridpick .rs{width:auto;min-width:96px}
.venue-history{display:flex;gap:6px}
.venue-toolbar .grow{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.venue-dirty{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--orange-text)}
.venue-dirty:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.venue-tool{height:var(--control);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 var(--s2);border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);font-size:var(--fs-md);cursor:pointer;white-space:nowrap}
.venue-tool svg{width:14px;height:14px}
.venue-tool:hover:not(:disabled){background:var(--btn-hover);color:var(--text)}
.venue-tool:disabled{opacity:.4;cursor:not-allowed}
.venue-tool.icon{width:var(--control);padding:0}
.venue-tool.danger:hover:not(:disabled){background:var(--red-bg);color:var(--red-text)}

/* Input meter dengan tombol kurang/tambah */
.venue-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:var(--fs-sm);color:var(--label)}
.venue-stepper{display:flex;align-items:stretch;height:var(--control);border:1px solid transparent;border-radius:var(--r-sm);background:var(--panel2);overflow:hidden}
.venue-stepper:focus-within{background:var(--panel);border-color:var(--gray-400);box-shadow:var(--focus-ring)}
.desk .venue-stepper input{flex:1 1;width:52px;min-width:0;height:auto;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text);text-align:right;font-size:var(--fs-md);font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;outline:0;padding:0 2px}
.venue-stepper .unit{display:grid;place-items:center;padding:0 6px 0 3px;font-size:var(--fs-sm);color:var(--muted)}
.venue-stepper button{flex:none;width:28px;border:0;padding:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.venue-stepper button svg{width:14px;height:14px}
.venue-stepper button:hover:not(:disabled){color:var(--text);background:var(--btn-hover)}
.venue-stepper button:disabled{opacity:.35;cursor:not-allowed}
.venue-input{width:100%}

/* Area kerja */
/* 340px = bilah atas, judul halaman, dan toolbar di atas area kerja: seluruh area kerja muat di layar. */
.venue-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-gap:var(--s3);gap:var(--s3);height:clamp(480px,calc(100vh - 290px),980px)}
.venue-workspace{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.venue-stagebar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);padding:var(--s2);border-bottom:1px solid var(--line)}
.venue-zoom{display:flex;gap:2px;padding:2px;border-radius:var(--r-sm);background:var(--panel2)}
.venue-zoom button{height:24px;min-width:26px;padding:0 4px;border:0;border-radius:6px;background:transparent;color:var(--text-soft);display:grid;place-items:center;cursor:pointer;font-size:var(--fs-xs);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.venue-zoom button svg{width:14px;height:14px}
.venue-zoom button:hover:not(:disabled){background:var(--panel)}
.venue-zoom button.pct{min-width:48px;color:var(--text)}
.venue-zoom button:hover:not(:disabled){color:var(--text)}
.venue-zoom button:disabled{opacity:.4;cursor:not-allowed}
.venue-status{flex:1 1;min-width:0;margin:0;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.venue-status b{color:var(--text)}
.venue-warn{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 var(--s2);border-radius:var(--r-full);background:var(--orange-bg);color:var(--orange-text);font-size:var(--fs-xs);white-space:nowrap}
.venue-warn svg{width:12px;height:12px}
.venue-quick{display:flex;gap:6px}
.venue-stage{flex:1 1;min-height:0;display:flex;overflow:auto;padding:34px;background:var(--venue-stage)}

/* Kanvas */
.venue-canvas{position:relative;flex:none;margin:auto;border:1px dashed var(--gray-400);border-radius:6px;background-color:var(--panel);background-image:linear-gradient(var(--venue-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--venue-grid-line) 1px,transparent 1px);touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none}
/* Hanya kotak dan titik tarik yang mengunci gestur sentuh; usapan di latar denah tetap menggulir halaman di HP. */
.venue-canvas.gesture-move,.venue-canvas.gesture-move *{cursor:-webkit-grabbing!important;cursor:grabbing!important}
.venue-area-size{position:absolute;right:0;bottom:calc(100% + 7px);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;pointer-events:none}
.venue-canvas.gesture-venue .venue-area-size{color:var(--venue-select)}

.venue-court{position:absolute;z-index:2;border:2px solid var(--venue-court);border-radius:6px;background:var(--venue-court-bg);color:var(--text);cursor:-webkit-grab;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;text-align:center;overflow:hidden;touch-action:none}
.venue-court b{position:relative;z-index:1;max-width:100%;padding:1px 6px;border-radius:5px;background:var(--panel);font-size:12px;font-weight:500;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.venue-court small{position:relative;z-index:1;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.venue-court .net{position:absolute;left:8%;right:8%;top:50%;height:2px;background:currentColor;opacity:.3}
.venue-court.selected{border-color:var(--venue-select);background:var(--venue-select-bg)}
.venue-court.inactive{border-style:dashed;opacity:.6}
.venue-court.clash{border-color:var(--orange-solid);background:var(--orange-bg)}
.venue-court:focus-visible,.venue-feature:focus-visible{outline:2px solid var(--venue-select);outline-offset:2px}
.venue-feature{position:absolute;z-index:1;border:1px dashed;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:3px;cursor:-webkit-grab;cursor:grab;overflow:hidden;text-align:center;font-size:var(--fs-xs);font-weight:600;line-height:1.2;touch-action:none}
.venue-feature span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.venue-feature.selected{border-style:solid}
/* Kotak yang tampil kecil: cukup nama singkat tanpa ukuran. */
.venue-court.tiny{padding:2px}
.venue-court.tiny small{display:none}
.venue-court.tiny b{font-size:var(--fs-xs);padding:1px 3px}
.venue-feature.tiny span{display:none}

/* Bingkai pilihan dan titik tarik */
.venue-frame{position:absolute;z-index:6;pointer-events:none;border-radius:6px;box-shadow:0 0 0 2px var(--venue-select)}
.venue-frame-size{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);padding:3px 8px;border-radius:6px;background:var(--venue-select);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.venue-frame.below .venue-frame-size{bottom:auto;top:calc(100% + 9px)}
.venue-handle{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--venue-select);border-radius:3px;background:var(--venue-handle-bg);pointer-events:auto;touch-action:none}
.venue-handle:after{content:"";position:absolute;inset:-8px}
.venue-handle:hover{background:var(--venue-select)}
.venue-handle.h-nw{left:0;top:0;cursor:nwse-resize}
.venue-handle.h-n{left:50%;top:0;cursor:ns-resize}
.venue-handle.h-ne{left:100%;top:0;cursor:nesw-resize}
.venue-handle.h-e{left:100%;top:50%;cursor:ew-resize}
.venue-handle.h-se{left:100%;top:100%;cursor:nwse-resize}
.venue-handle.h-s{left:50%;top:100%;cursor:ns-resize}
.venue-handle.h-sw{left:0;top:100%;cursor:nesw-resize}
.venue-handle.h-w{left:0;top:50%;cursor:ew-resize}

/* Pegangan tepi area venue */
.venue-area-handle{position:absolute;z-index:7;display:grid;place-items:center;padding:0;border:0;background:none;touch-action:none}
.venue-area-handle i{display:block;border-radius:99px;background:var(--gray-400);transition:background .15s}
.venue-area-handle:hover i,.venue-area-handle:focus-visible i,.venue-canvas.gesture-venue .venue-area-handle i{background:var(--venue-select)}
.venue-area-handle:focus-visible{outline:2px solid var(--venue-select);outline-offset:2px;border-radius:6px}
.venue-area-handle.e{top:50%;right:-22px;width:18px;height:64px;margin-top:-32px;cursor:ew-resize}
.venue-area-handle.e i{width:6px;height:44px}
.venue-area-handle.s{left:50%;bottom:-22px;width:64px;height:18px;margin-left:-32px;cursor:ns-resize}
.venue-area-handle.s i{width:44px;height:6px}
.venue-area-handle.se{right:-24px;bottom:-24px;width:22px;height:22px;cursor:nwse-resize}
.venue-area-handle.se i{width:13px;height:13px;border-radius:4px}

/* Panel samping */
.venue-side{display:flex;flex-direction:column;gap:var(--s3);min-height:0;overflow:auto;padding-right:2px}
.venue-panel{flex:none;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.venue-panel h3{margin:0;font-size:var(--fs-md);font-weight:600}
.venue-panel .hint{margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--muted)}
.venue-inspector{border-color:var(--venue-select)}
.venue-inspector header{display:flex;align-items:center;gap:10px}
.venue-inspector header small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.venue-swatch{flex:none;width:16px;height:16px;border:2px solid;border-radius:4px}
.venue-swatch.court{border-color:var(--venue-court);background:var(--venue-court-bg)}
.venue-grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s2);gap:var(--s2)}
.venue-presets{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
.venue-presets span{margin-right:2px}
.venue-presets button{height:24px;padding:0 var(--s2);border:0;border-radius:6px;background:var(--btn);color:var(--text-soft);font-size:var(--fs-xs);cursor:pointer}
.venue-presets button:hover{background:var(--btn-hover);color:var(--text)}
.venue-side .row-buttons{display:flex;gap:var(--s2)}
.venue-side .row-buttons button{flex:1 1;height:var(--control);display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer}
.venue-side .row-buttons button svg{width:14px;height:14px}
.venue-side .row-buttons button:hover{background:var(--btn-hover);color:var(--text)}
.venue-side .row-buttons button.danger{color:var(--danger)}
.venue-side .row-buttons button.danger:hover{background:var(--red-bg);color:var(--red-text)}
.venue-tips ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--muted)}
.venue-tips b{color:var(--text)}
.venue-tips kbd{padding:0 5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;background:var(--panel);color:var(--text);font:600 var(--fs-xs) ui-monospace,Consolas,monospace}
.venue-add-court{align-self:stretch}
.venue-kinds{display:flex;flex-wrap:wrap;gap:6px}
.venue-kinds button{height:var(--control);display:inline-flex;align-items:center;gap:6px;padding:0 var(--s2);border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer}
.venue-kinds button:hover{background:var(--btn-hover);color:var(--text)}
.venue-kinds i.dot{width:9px;height:9px;border-radius:3px;border:0}
.venue-list{display:flex;flex-direction:column;gap:2px}
.venue-list-title{margin:4px 0 0;font-size:var(--fs-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.venue-list button{display:flex;align-items:center;gap:var(--s2);min-height:32px;padding:6px var(--s2);border:0;border-radius:var(--r-sm);background:none;color:var(--text-soft);font-size:var(--fs-md);cursor:pointer;text-align:left}
.venue-list button:hover{background:var(--hover)}
.venue-list button.on{background:var(--venue-select-bg);color:var(--text)}
.venue-list button i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--venue-court)}
.venue-list button i.off{background:var(--muted)}
.venue-list button span{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}

/* Warna per jenis, dipakai bersama oleh kotak di kanvas dan titik di daftar. */
.kind-jalan{border-color:#8b95a1;background:#8b95a11f;color:#525c68}
.kind-kantin{border-color:#e0913f;background:#e0913f1f;color:#8a5410}
.kind-tempat-duduk{border-color:#4de4ed;background:#4de4ed1a;color:#136f76}
.kind-toilet{border-color:#6fbf8f;background:#6fbf8f1f;color:#2c6b45}
.kind-parkir{border-color:#7d87b8;background:#7d87b81f;color:#414a78}
.kind-resepsionis{border-color:#a578ff;background:#a578ff1f;color:#5a3a9c}
.kind-loker{border-color:#b98a5e;background:#b98a5e1f;color:#754c25}
.kind-lainnya{border-color:#8a9299;background:#8a92991f;color:#4d545a}
.kind-pintu-masuk{border-color:#ef6f6c;background:#ef6f6c24;color:#a33a36}
.kind-tangga{border-color:#d4a72c;background:#d4a72c1f;color:#7a5d08}
.kind-lift{border-color:#5aa9e6;background:#5aa9e61f;color:#1f5f94}
i.dot.kind-pintu-masuk{background:#ef6f6c}
i.dot.kind-tangga{background:#d4a72c}
i.dot.kind-lift{background:#5aa9e6}
.venue-feature.kind-pintu-masuk{border-style:solid}

/* Tab lantai di atas denah */
.venue-floors{display:flex;align-items:center;gap:var(--s5);padding:0 var(--s3);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.venue-floors [role=tab]{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0;margin-bottom:-1px;border:0;border-bottom:1px solid transparent;background:none;color:var(--muted);font-size:var(--fs-md);cursor:pointer;white-space:nowrap}
.venue-floors [role=tab] svg{width:14px;height:14px}
.venue-floors [role=tab]:hover{color:var(--text)}
.venue-floors [role=tab][aria-selected=true]{border-bottom-color:var(--text);color:var(--text);font-weight:500}
.venue-floors [role=tab] small{font-size:var(--fs-xs);font-weight:420;color:var(--muted)}
.venue-floor-warn{width:6px;height:6px;border-radius:50%;background:var(--orange-solid)}
.venue-floor-add{flex:none;display:inline-flex;align-items:center;gap:6px;height:var(--control);padding:0 var(--s2);border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.venue-floor-add svg{width:14px;height:14px}
.venue-floor-add:hover:not(:disabled){color:var(--text);background:var(--btn)}
.venue-floor-add:disabled{opacity:.4;cursor:not-allowed}
.venue-floor-panel .row-buttons button{font-size:12px}
i.dot.kind-jalan{background:#8b95a1}
i.dot.kind-kantin{background:#e0913f}
i.dot.kind-tempat-duduk{background:#4de4ed}
i.dot.kind-toilet{background:#6fbf8f}
i.dot.kind-parkir{background:#7d87b8}
i.dot.kind-resepsionis{background:#a578ff}
i.dot.kind-loker{background:#b98a5e}
i.dot.kind-lainnya{background:#8a9299}

/* Layar sedang dan sempit: denah di atas, panel di bawah */
@media(max-width:1000px){
  .venue-editor{grid-template-columns:minmax(0,1fr);height:auto}
  /* Tinggi area denah mengikuti proporsi venue agar denah tidak mengecil di kotak kosong. */
  .venue-stage{flex:none;height:clamp(260px,calc((100vw - 120px) * var(--venue-ratio,.66) + 64px),70vh)}
  .venue-side{overflow:visible}
  .venue-toolbar .grow{margin-left:0;width:100%}
}
@media(max-width:600px){
  .venue-toolbar{display:grid;grid-template-columns:1fr auto;align-items:end;padding:var(--s3);grid-gap:var(--s2);gap:var(--s2)}
  .venue-area{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:6px;gap:6px}
  .venue-area .venue-tool{grid-column:1/-1}
  .venue-toolbar .grow{grid-column:1/-1}
  .venue-toolbar .grow button{flex:1 1}
  .venue-stage{padding:30px 28px}
  .venue-status{flex-basis:100%;order:3;font-size:12px}
  .venue-quick{margin-left:auto}
  .venue-handle{width:16px;height:16px;margin:-8px 0 0 -8px}
  .venue-grid2{gap:8px}
}
@media(prefers-reduced-motion:reduce){.venue-area-handle i{transition:none}}

/* Tema gelap: teks jenis elemen memakai warna yang lebih terang. */
html[data-theme="dark"] .kind-jalan{color:#aab4c0}
html[data-theme="dark"] .kind-kantin{color:#f0b877}
html[data-theme="dark"] .kind-tempat-duduk{color:#8df1f6}
html[data-theme="dark"] .kind-toilet{color:#9bd8b3}
html[data-theme="dark"] .kind-parkir{color:#a6aed6}
html[data-theme="dark"] .kind-resepsionis{color:#c4a5ff}
html[data-theme="dark"] .kind-loker{color:#d6ab84}
html[data-theme="dark"] .kind-lainnya{color:#b0b7bd}
html[data-theme="dark"] .kind-pintu-masuk{color:#f5a3a1}
html[data-theme="dark"] .kind-tangga{color:#e8c865}
html[data-theme="dark"] .kind-lift{color:#95c8f0}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/admin-content.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Panel admin untuk informasi pelanggan: Info Venue, foto lapangan, tarif khusus, dan pelanggan.
   Bergaya formulir ERPNext: kartu bergaris tipis, label 13px, isian abu-abu tanpa garis. */

/* Daftar kelengkapan */
.cms{display:flex;flex-direction:column;gap:var(--s4)}
.cms-checklist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s4) var(--s5)}
.cms-checklist-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.cms-checklist h2{font-size:var(--fs-lg);font-weight:600;margin:0 0 2px}
.cms-checklist p{margin:0;font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-snug)}
.cms-checklist strong{font-size:var(--fs-3xl);font-weight:600;color:var(--text);white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.cms-checklist strong small{font-size:var(--fs-md);font-weight:420;color:var(--muted)}
.cms-progress{height:6px;border-radius:var(--r-full);background:var(--panel2);margin:var(--s3) 0;overflow:hidden}
.cms-progress i{display:block;height:100%;background:var(--green-solid);border-radius:inherit;transition:width .3s}
.cms-checklist ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-gap:2px var(--s3);gap:2px var(--s3)}
.cms-checklist li{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--muted)}
.cms-checklist li svg{flex:none;width:16px;height:16px;color:var(--gray-400)}
.cms-checklist li.done svg{color:var(--green-solid)}
.cms-checklist li button,.cms-checklist li a{display:inline-flex;align-items:center;min-height:var(--control);background:none;border:0;padding:2px 0;color:var(--text);font-size:var(--fs-sm);text-align:left;cursor:pointer;text-decoration:underline;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);text-underline-offset:3px}
.cms-checklist li.done button,.cms-checklist li.done a{color:var(--muted);text-decoration:none}
.manage-content .cms-checklist li a{color:var(--text)}
.manage-content .cms-checklist li.done a{color:var(--muted)}

/* Tab (form-tabs Frappe) */
.cms-tabs{display:flex;align-items:center;gap:var(--s6);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cms-tabs::-webkit-scrollbar{display:none}
.cms-tabs [role=tab]{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0;border:0;border-bottom:1px solid transparent;background:none;color:var(--muted);font-size:var(--fs-md);font-weight:420;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.cms-tabs [role=tab] svg{width:16px;height:16px}
.cms-tabs [role=tab]:hover{color:var(--text)}
.cms-tabs [role=tab][aria-selected=true]{color:var(--text);font-weight:500;border-bottom-color:var(--text)}
.cms-dot{width:6px;height:6px;border-radius:50%;background:var(--orange-solid)}
.manage-content .cms-site-link{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--control);gap:6px;font-size:var(--fs-sm);color:var(--muted);text-decoration:none;white-space:nowrap;padding:0 var(--s1)}
.manage-content .cms-site-link svg{width:14px;height:14px}
.manage-content .cms-site-link:hover{color:var(--text)}

/* Form */
.cms-form{display:flex;flex-direction:column;gap:var(--s4)}
.cms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--s4);gap:var(--s4)}
.cms-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.cms-card.wide{grid-column:1/-1}
.cms-card>header{padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.cms-card>header h2{font-size:var(--fs-lg);font-weight:600;margin:0 0 2px}
.cms-card>header p{margin:0;font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-snug)}
.cms-stack{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.cms-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--s3);gap:var(--s3)}
.cms-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cms-label{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);font-weight:420;color:var(--label)}
.cms-label small{font-size:var(--fs-xs);color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.cms-field input,.cms-field select,.cms-field textarea,.cms-inline input,.cms-tier input{width:100%}
.cms-field textarea{min-height:84px}
.cms-field textarea.tall{min-height:280px}
.cms-hint{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-snug)}
.cms-hint.warn{color:var(--orange-text)}
.cms-check{display:flex;align-items:center;gap:var(--s2);min-height:var(--control);font-size:var(--fs-md);color:var(--text-soft);cursor:pointer}
.cms-empty{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.cms-add{align-self:flex-start}
.cms-icon{width:var(--control);height:var(--control);display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);cursor:pointer;flex:none;padding:0}
.cms-icon svg{width:14px;height:14px}
.cms-icon:hover:not(:disabled){background:var(--btn-hover);color:var(--text)}
.cms-icon.danger:hover:not(:disabled){background:var(--red-bg);color:var(--red-text)}

/* Lokasi */
.cms-location{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:var(--s5);gap:var(--s5);align-items:start}
.cms-map-preview{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--subtle);display:grid;place-items:center}
.cms-map-preview iframe{width:100%;height:100%;border:0}
.cms-map-preview p{margin:0;padding:var(--s5);text-align:center;font-size:var(--fs-sm);color:var(--muted)}

/* Fasilitas: kotak centang seperti bidang Check di ERPNext */
.cms-facilities{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:2px var(--s3);gap:2px var(--s3)}
.cms-facilities button{display:flex;align-items:center;gap:var(--s2);min-height:32px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--text-soft);font-size:var(--fs-md);cursor:pointer;text-align:left}
.cms-facilities button:hover{background:var(--subtle)}
.cms-facilities button>svg{width:16px;height:16px;flex:none;color:var(--muted)}
.cms-facilities button span{flex:1 1}
.cms-facilities button i{order:-1;width:14px;height:14px;border-radius:4px;border:1px solid var(--gray-400);background:var(--panel);display:grid;place-items:center;flex:none}
.cms-facilities button i svg{width:10px;height:10px;stroke-width:3}
.cms-facilities button[aria-pressed=true]{color:var(--text)}
.cms-facilities button[aria-pressed=true]>svg{color:var(--text)}
.cms-facilities button[aria-pressed=true] i{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.cms-inline{display:flex;gap:var(--s2)}
.cms-inline input{flex:1 1}
.cms-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cms-chips li{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 var(--s2);border-radius:var(--r-full);font-size:var(--fs-sm);background:var(--gray-bg);color:var(--gray-text)}
.cms-chips button{width:20px;height:20px;padding:0;border-radius:50%;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.cms-chips button svg{width:12px;height:12px}
.cms-chips button:hover{background:var(--btn-hover);color:var(--text)}

/* Kebijakan */
.cms-policy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-gap:var(--s5);gap:var(--s5);align-items:start}
.cms-tier{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);font-size:var(--fs-md);color:var(--text-soft)}
.cms-tier input{width:72px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.cms-tier .cms-icon{margin-left:auto}
.cms-preview{position:-webkit-sticky;position:sticky;top:calc(var(--navbar-h) + var(--s4));border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--s3) var(--s4);background:var(--subtle)}
.cms-preview>small{display:block;font-size:var(--fs-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.cms-preview ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-md);line-height:1.55}
.cms-preview p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.cms-preview .rich-text{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--muted)}
.cms-details{border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--s3)}
.cms-details summary{cursor:pointer;padding:10px 0;font-size:var(--fs-sm);font-weight:500;color:var(--text-soft)}
.cms-details .rich-text{padding-bottom:var(--s3);font-size:var(--fs-md)}
/* .rich-text juga dipakai halaman pelanggan; shop.css menimpanya. */
.rich-text p{margin:0 0 10px;white-space:pre-line;line-height:1.65}
.rich-text ul,.rich-text ol{margin:0 0 10px;padding-left:22px;line-height:1.65}
.rich-text>:last-child{margin-bottom:0}

/* FAQ */
.cms-faqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.cms-faq{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s3);background:var(--panel)}
.cms-faq-head{display:flex;justify-content:space-between;align-items:center}
.cms-faq-number{min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--gray-bg);color:var(--gray-text);font-weight:500;font-size:var(--fs-sm)}
.cms-faq-actions{display:flex;gap:6px}
.cms-suggest{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.cms-suggest>div{display:flex;flex-wrap:wrap;gap:6px}
.cms-suggest button{display:inline-flex;align-items:center;gap:6px;height:var(--control);padding:0 10px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:none;color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer;text-align:left}
.cms-suggest button svg{width:14px;height:14px}
.cms-suggest button:hover{color:var(--text);background:var(--subtle)}

/* Bilah simpan menempel di bawah layar selama form terlihat */
.cms-savebar{position:-webkit-sticky;position:sticky;bottom:var(--s3);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s2) var(--s2) var(--s2) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-3)}
.cms-savebar span{font-size:var(--fs-sm);color:var(--muted)}
.cms-savebar.dirty span{color:var(--orange-text)}

/* Kartu lapangan dengan foto */
.court-admin-card{gap:var(--s3);padding:0 0 var(--s4);overflow:hidden}
.court-admin-card>*:not(.court-admin-cover){margin-left:var(--s4);margin-right:var(--s4)}
.court-admin-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/9;width:100%;border:0;border-bottom:1px solid var(--line);background:var(--subtle);padding:0;cursor:pointer;overflow:hidden;color:var(--muted)}
.court-admin-cover img{width:100%;height:100%;object-fit:cover;display:block}
.court-admin-cover.empty span{display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:var(--fs-sm)}
.court-admin-cover.empty:hover{color:var(--text);background:var(--panel2)}
.court-admin-cover em{position:absolute;right:var(--s2);bottom:var(--s2);display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 var(--s2);border-radius:var(--r-full);background:rgba(23,23,23,.75);color:#fff;font-style:normal;font-size:var(--fs-xs)}
.court-admin-cover em svg{width:12px;height:12px}
.court-admin-tags{display:flex;flex-wrap:wrap;gap:6px}
.court-admin-tags span{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 var(--s2);border-radius:var(--r-full);font-size:var(--fs-xs);background:var(--gray-bg);color:var(--gray-text)}
.court-admin-tags span svg{width:12px;height:12px}
.court-admin-tags span.rule{background:var(--orange-bg);color:var(--orange-text)}
.court-admin-desc{margin-top:0;margin-bottom:0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.court-admin-desc.missing{color:var(--muted);font-style:italic}
.court-admin-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:auto}
.court-admin-actions .ops-secondary{flex:1 1}
.ops-court-grid .court-admin-card .ops-card-head{margin-top:var(--s1)}

/* Pengelola foto */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-gap:var(--s3);gap:var(--s3)}
.photo-tile{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--panel)}
.photo-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-badge{position:absolute;left:var(--s2);top:var(--s2);display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 var(--s2);border-radius:var(--r-full);background:var(--primary);color:var(--primary-ink);font-size:var(--fs-xs)}
.photo-badge svg{width:12px;height:12px}
.photo-tile figcaption{display:flex;align-items:center;gap:4px;padding:6px}
.photo-tile figcaption button{height:28px;min-width:28px;display:grid;place-items:center;border:0;border-radius:6px;background:var(--btn);color:var(--text-soft);cursor:pointer;padding:0 6px}
.photo-tile figcaption button svg{width:14px;height:14px}
.photo-tile figcaption button.text{flex:1 1;font-size:var(--fs-xs)}
.photo-tile figcaption .grow{flex:1 1}
.photo-tile figcaption button:hover:not(:disabled){background:var(--btn-hover);color:var(--text)}
.photo-tile figcaption button.danger:hover:not(:disabled){background:var(--red-bg);color:var(--red-text)}
.photo-add{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-md);padding:var(--s3);text-align:center}
.photo-add svg{width:20px;height:20px}
.photo-add small{font-size:var(--fs-xs)}
.photo-add:hover:not(:disabled){background:var(--subtle);color:var(--text)}

/* Pilihan berbentuk chip di modal tarif khusus */
.ops-modal .modal-subhead{margin:var(--s1) 0 -4px;padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--fs-md);color:var(--text);font-weight:600}
.ops-modal .field-counter{margin-top:-6px;font-size:var(--fs-xs)}
.chip-field{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.chip-field legend{padding:0;margin-bottom:6px;font-size:var(--fs-sm);font-weight:420;color:var(--label)}
.chip-group,.chip-presets{display:flex;flex-wrap:wrap;gap:6px}
.chip-group button{min-height:var(--control);padding:0 10px;border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer}
.chip-group button:hover{background:var(--btn-hover)}
.chip-group.days button{min-width:48px}
.chip-group button[aria-pressed=true]{background:var(--primary);color:var(--primary-ink)}
.chip-presets button{height:24px;padding:0 var(--s2);border:0;border-radius:var(--r-full);background:none;color:var(--muted);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chip-presets button[aria-pressed=true]{color:var(--text);text-decoration:none;background:var(--gray-bg)}

@media(max-width:1100px){.cms-policy,.cms-location{grid-template-columns:1fr}.cms-preview{position:static}}
@media(max-width:850px){.cms-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .cms-card,.cms-checklist{padding:var(--s3) var(--s4) var(--s4)}
  .cms-row{grid-template-columns:1fr}
  .cms-tabs{gap:var(--s5)}
  .manage-content .cms-site-link span,.cms-site-link{font-size:0}
  .cms-savebar{bottom:var(--s2)}
  .cms-savebar button{width:100%}
  .cms-facilities{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:1fr 1fr}
  .cms-tier input{width:64px}
}

/* --- Pelanggan: akun dan login Google ------------------------------------ */
.user-cell>.cust-photo{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover}
.cust-note{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--muted)}
.cust-note svg{flex:none;width:14px;height:14px;margin-top:3px}
.cust-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.cust-checks li{display:flex;align-items:flex-start;gap:var(--s3);padding:10px var(--s3)}
.cust-checks li+li{border-top:1px solid var(--line)}
.cust-checks li>svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%}
.cust-checks li.ok>svg{background:var(--green-bg);color:var(--green-text)}
.cust-checks li.bad>svg{background:var(--red-bg);color:var(--red-text)}
.cust-checks li.unknown>svg{background:var(--orange-bg);color:var(--orange-text)}
.cust-checks div{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);line-height:var(--lh-normal)}
.cust-checks b{color:var(--text)}
.cust-checks span{color:var(--muted)}
.cust-steps{margin:0;padding:0;list-style:none;counter-reset:langkah;display:flex;flex-direction:column;gap:var(--s4)}
.cust-steps li{position:relative;display:flex;flex-direction:column;gap:var(--s1);padding-left:36px;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-soft)}
.cust-steps li:before{
  counter-increment:langkah;content:counter(langkah);position:absolute;left:0;top:0;
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--gray-bg);color:var(--gray-text);font-weight:500;font-size:var(--fs-sm);
}
.cust-steps b{color:var(--text);font-size:var(--fs-md);font-weight:500}
.cust-steps i{font-style:normal;font-weight:500;color:var(--text)}
.cust-steps code{padding:1px 6px;border-radius:var(--r-xs);background:var(--panel2);color:var(--text);font-size:var(--fs-xs)}
.cust-steps .pay-copy{margin-top:var(--s1)}
.cust-steps .pay-copy input{min-width:0}
.cust-paste{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-sm)!important;line-height:1.5}

/* Akun pelanggan di rincian booking */
.booking-account{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s1)}
.booking-account h3{margin:0;font-size:var(--fs-md);font-weight:600}
.booking-account p{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--muted)}
.booking-account-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--subtle)}
.booking-account-row div{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-sm)}
.booking-account-row small{color:var(--muted)}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/addons.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Sewa & tambahan: panel admin dan tambahan di formulir booking.
   Pilihan tambahan di halaman pelanggan ditata ulang di shop-booking.css. */

/* Foto atau ikon item. Aturan dasar ini juga dipakai halaman pelanggan (shop.css menimpa warnanya),
   jadi bentuknya dipertahankan; tampilan desk ada di bawah .desk. */
.addon-thumb{flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--panel2);border:1px solid var(--line);color:var(--text-soft)}
.addon-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.desk .addon-thumb{width:36px;height:36px;border:0;border-radius:var(--r-sm)}
.desk .addon-thumb svg{width:18px;height:18px}

/* Katalog admin */
.addon-metrics{margin-bottom:var(--s1)}
.addon-cell{display:flex;align-items:center;gap:10px;min-width:0}
.addon-cell>div{min-width:0}
.addon-table tr.inactive td:not(.actions){opacity:.55}
.addon-type{display:inline-flex;align-items:center;height:20px;padding:0 var(--s2);border-radius:var(--r-full);font-size:var(--fs-sm);white-space:nowrap;background:var(--gray-bg);color:var(--gray-text)}
.addon-type.sewa{background:var(--blue-bg);color:var(--blue-text)}
.addon-type.jual{background:var(--green-bg);color:var(--green-text)}
.addon-type.layanan{background:var(--purple-bg);color:var(--purple-text)}
.addon-stock{display:inline-flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.addon-stock svg{width:14px;height:14px}
.addon-stock.low{color:var(--orange-text)}
.addon-stock.unlimited{color:var(--muted);font-weight:420}
.addon-overdue{color:var(--orange-text);font-weight:500}
.addon-alert{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4)}
.addon-alert .ops-link{margin-left:auto}

/* Formulir item */
.addon-type-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--s2);gap:var(--s2)}
.addon-type-picker button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s2) 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--muted);text-align:left;cursor:pointer}
.addon-type-picker button:hover{background:var(--subtle)}
.addon-type-picker button b{color:var(--text);font-size:var(--fs-md);font-weight:500}
.addon-type-picker button small{font-size:var(--fs-xs);line-height:1.45}
.addon-type-picker button[aria-pressed=true]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--panel)}
.addon-photo-field{display:flex;align-items:center;gap:var(--s3)}
.addon-photo-field>.addon-thumb{width:72px;height:72px;border-radius:var(--r-md);color:var(--muted)}
.addon-photo-field>.addon-thumb svg{width:24px;height:24px}
.addon-photo-field>div{display:flex;flex-direction:column;gap:6px}
.addon-photo-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Stok */
.stock-now{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--subtle)}
.stock-now small{display:block;font-size:var(--fs-sm);color:var(--label)}
.stock-now strong{font-size:var(--fs-3xl);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.stock-form{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s1)}
.stock-form>button{align-self:flex-start}
.stock-preview{font-size:var(--fs-sm);color:var(--muted)}
.stock-preview b{color:var(--text);font-size:var(--fs-md)}
.stock-preview.invalid b{color:var(--danger)}
.stock-delta{white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.stock-delta small{margin-left:6px;font-weight:420;color:var(--muted)}
.stock-delta.plus{color:var(--green-text)}
.stock-delta.minus{color:var(--red-text)}

/* Pilihan tambahan di formulir booking */
.ops-modal .modal-subhead small{margin-left:6px;font-weight:420;font-size:var(--fs-xs)}
.addon-editor{display:flex;flex-direction:column;gap:var(--s2)}
.addon-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.addon-lines li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 96px;align-items:center;grid-gap:var(--s3);gap:var(--s3);padding:var(--s2) 10px;background:var(--panel)}
.addon-lines li+li{border-top:1px solid var(--line)}
.addon-lines li.chosen{background:var(--subtle)}
.addon-lines .addon-thumb{width:32px;height:32px}
.addon-lines .info{display:flex;flex-direction:column;gap:1px;min-width:0}
.addon-lines .info b{font-size:var(--fs-md);font-weight:500;color:var(--text)}
.addon-lines .info small{font-size:var(--fs-xs);color:var(--muted)}
.addon-lines .info em{font-style:normal;font-size:var(--fs-xs);font-weight:500;color:var(--orange-text)}
.addon-lines .info em.out{color:var(--red-text)}
.addon-lines strong{text-align:right;font-size:var(--fs-md);font-weight:500;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.qty-stepper button{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--text);cursor:pointer;padding:0}
.qty-stepper output{min-width:28px;text-align:center;font-weight:700;font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.desk .qty-stepper{border:0;border-radius:var(--r-sm);background:var(--panel2)}
.desk .qty-stepper button{width:28px;height:28px;color:var(--text-soft)}
.desk .qty-stepper button svg{width:14px;height:14px}
.desk .qty-stepper button:hover:not(:disabled){background:var(--btn-hover)}
.desk .qty-stepper output{min-width:24px;text-align:center;font-weight:500;font-size:var(--fs-md);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.addon-custom{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;align-items:end;grid-gap:var(--s2);gap:var(--s2)}

/* Detail booking */
.ops-addons{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4)}
.addon-summary-lines{list-style:none;margin:0;padding:0}
.addon-summary-lines li{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.addon-summary-lines li:first-child{padding-top:0}
.addon-summary-lines li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.addon-summary-lines small{font-size:var(--fs-xs);color:var(--muted)}
.addon-summary-lines strong{white-space:nowrap;font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.addon-return-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:2px}
.addon-return{display:inline-flex;align-items:center;height:20px;padding:0 var(--s2);border-radius:var(--r-full);font-size:var(--fs-xs);background:var(--orange-bg);color:var(--orange-text)}
.addon-return.done{background:var(--green-bg);color:var(--green-text)}
.ops-link-button{background:none;border:0;padding:0;color:var(--text);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.addon-edit-actions{display:flex;justify-content:flex-end;gap:var(--s2)}
.addon-return-all{align-self:flex-start}

@media(max-width:600px){
  .addon-type-picker{grid-template-columns:1fr}
  .addon-lines li{grid-template-columns:auto minmax(0,1fr) auto}
  .addon-lines li strong{grid-column:2/-1;text-align:left}
  .addon-lines li strong:empty{display:none}
  .addon-custom{grid-template-columns:minmax(0,1fr) 110px}
  .addon-custom button{grid-column:1/-1}
  .addon-alert .ops-link{margin-left:0}
}

/* Transaksi kasir tanpa booking (Booking › Sewa & jual langsung) */
@media(min-width:992px){.metric-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.counter-window{align-self:end;margin:0 0 6px}
.counter-discount-toggle{align-self:flex-start;font-size:var(--fs-sm)}
.counter-grand strong{font-size:var(--fs-2xl)}
.counter-cash{display:flex;flex-direction:column;gap:var(--s2)}
.counter-change{margin:0;font-size:var(--fs-lg);font-weight:600;color:var(--green-text)}
.counter-change.short{color:var(--red-text,var(--orange-text))}
.cms-tabs .tab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--orange-bg);color:var(--orange-text);font-size:var(--fs-xs);font-style:normal;font-weight:600}
.addon-moved{margin:0}
.counter-metrics{margin-bottom:var(--s4)}
/* Pilih pelanggan dari riwayat */
.customer-option{display:flex;flex-direction:column;gap:2px;min-width:0}
.customer-option b{font-weight:560}
.customer-option small{color:var(--muted);font-size:var(--fs-xs)}
.customer-option em{align-self:flex-start;margin-top:2px;padding:1px 6px;border-radius:var(--r-full);background:var(--green-bg);color:var(--green-text);font-size:var(--fs-xs);font-style:normal}
.customer-option-new{font-weight:560;color:var(--text)}
.customer-value small{color:var(--muted)}
.customer-select .rs__option--is-selected::after{display:none}
/* Tautan ke booking lapangan */
.counter-booking-tag{display:inline-flex!important;align-items:center;gap:4px;color:var(--green-text)!important}
.counter-booking-link{display:flex;align-items:center;gap:6px;margin:0;padding:var(--s2);border-radius:var(--r-sm);background:var(--green-bg);color:var(--green-text);font-size:var(--fs-sm)}
.counter-booking-link svg{flex:none}
/* Menunggu bayar Midtrans */
.chip-group button svg{margin-right:4px;vertical-align:-2px}
.counter-pay{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--subtle);text-align:center}
.counter-pay-amount{display:flex;flex-direction:column;align-items:center;gap:2px}
.counter-pay-amount span{color:var(--muted);font-size:var(--fs-sm)}
.counter-pay-amount strong{font-size:var(--fs-3xl);letter-spacing:-.01em}
.counter-pay-amount small{color:var(--muted);font-size:var(--fs-sm)}
.counter-pay-amount small.late{color:var(--orange-text);font-weight:600}
.counter-pay-qr{display:grid;place-items:center;width:236px;height:236px;padding:8px;border-radius:var(--r-md);background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.12)}
.counter-pay-qr img{display:block;width:220px;height:220px;image-rendering:pixelated}
.counter-pay-hint{max-width:340px;margin:0;color:var(--text-soft);font-size:var(--fs-sm)}
.counter-pay-live{margin:0;color:var(--muted);font-size:var(--fs-xs)}
.counter-pay-dot{display:inline-block;margin-right:6px;vertical-align:0;width:8px;height:8px;border-radius:50%;background:var(--orange-solid);animation:counter-pulse 1.4s ease-in-out infinite}
@keyframes counter-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.counter-pay-dot{animation:none}}
.counter-pay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s1)}
.counter-pay-actions a.ops-secondary{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.counter-pay .ops-error{align-self:stretch;text-align:left}
/* Detail booking: transaksi kasir terkait */
.booking-sales{display:flex;flex-direction:column;gap:var(--s2)}
.booking-sales ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.booking-sales li{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;border-top:1px solid var(--line)}
.booking-sales li:first-child{border-top:0}
.booking-sales li small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.ops-row-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2)}
@media(max-width:991px){.ops-row-buttons{justify-content:flex-start}}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/members.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Panel Member di admin. Kartu member di halaman akun pelanggan ada di shop-account.css. */
.member-card{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--panel2);border:1px solid var(--line)}
.member-card small{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--track-label)}
.member-card h3{margin:2px 0;font-size:var(--fs-xl);font-weight:600;color:var(--text)}
.member-card p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.member-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.member-card code{font-size:var(--fs-sm);font-weight:600;color:var(--text);letter-spacing:.04em}
.member-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--s3);gap:var(--s3);margin:0}
.member-facts div{display:flex;flex-direction:column;gap:2px;min-width:0}
.member-facts dt{font-size:var(--fs-xs);color:var(--muted)}
.member-facts dd{margin:0;font-size:var(--fs-md);color:var(--text);font-weight:500}
.member-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.member-actions button[aria-pressed=true]{outline:2px solid var(--text);outline-offset:1px}
.member-cost{display:flex;flex-direction:column}
.member-settings{display:flex;flex-direction:column;gap:var(--s4);max-width:720px}
.member-settings h2{margin:0;font-size:var(--fs-lg);font-weight:600}
@media(max-width:560px){
  .member-card{flex-direction:column}
  .member-card-side{flex-direction:row;align-items:center;justify-content:space-between}
  .member-facts{grid-template-columns:1fr}
}

/* Pilihan member di dialog booking */
.member-picker{display:flex;flex-direction:column;gap:var(--s2)}
.member-search{position:relative;display:block}
.member-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.member-search input{width:100%;padding-left:30px}
.member-results{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.member-results li+li{border-top:1px solid var(--line)}
.member-results button{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);width:100%;padding:var(--s2) 10px;border:0;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;font-size:var(--fs-md)}
.member-results button:hover:not(:disabled){background:var(--subtle)}
.member-results button:disabled{cursor:not-allowed;opacity:.6}
.member-results span{display:flex;flex-direction:column;min-width:0}
.member-results small{font-size:var(--fs-xs);color:var(--muted)}
.member-picked>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.member-picked b{display:inline-flex;align-items:center;gap:4px}
.member-picked small{font-size:var(--fs-xs);color:var(--muted)}
.member-picked .member-invalid,.member-invalid{color:var(--red-text)}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/payments.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* Pembayaran online: panel admin Midtrans dan riwayat transaksinya. */

.pay-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.pay-badge{display:flex;align-items:flex-start;gap:10px;min-width:min(100%,260px);flex:1 1}
.pay-badge>svg{width:20px;height:20px;flex:none;margin-top:1px}
.pay-badge b{display:block;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.pay-badge small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--muted)}
.pay-badge.on>svg{color:var(--green-text)}
.pay-badge.off>svg{color:var(--orange-text)}
.pay-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--s2) var(--s5);gap:var(--s2) var(--s5);margin:0}
.pay-meta dt{font-size:var(--fs-sm);color:var(--label)}
.pay-meta dd{margin:2px 0 0;font-size:var(--fs-md);font-weight:500;color:var(--text)}
.pay-test{display:flex;align-items:center;gap:var(--s2);margin:0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.pay-test svg{width:16px;height:16px;flex:none}
.pay-test.ok{background:var(--green-bg);color:var(--green-text)}
.pay-test.warn{background:var(--yellow-bg);color:var(--yellow-text)}
.pay-copy{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.pay-copy input{flex:1 1;min-width:min(100%,240px);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm)}
.pay-copy button{flex:none}
.pay-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-soft)}
.pay-steps code{padding:1px 6px;border-radius:var(--r-xs);background:var(--panel2);color:var(--text);font-size:var(--fs-xs)}
@media(max-width:600px){.pay-meta{grid-template-columns:1fr}.pay-status{padding:var(--s3)}}

/* Cadangan data dan Log Aktivitas */
.backup-path{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--fs-sm)!important;word-break:break-all}
.audit-detail{display:grid;grid-gap:4px;gap:4px;margin:var(--s2) 0 0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--btn);font-size:var(--fs-sm);min-width:220px}
.audit-detail div{display:grid;grid-template-columns:minmax(90px,auto) 1fr;grid-gap:var(--s2);gap:var(--s2)}
.audit-detail dt{color:var(--label)}
.audit-detail dd{margin:0;color:var(--text);word-break:break-word}
.audit-target{word-break:break-all}

/* Notifikasi: status tiga kanal, pilihan penyedia WhatsApp, dan pratinjau pesan. */
.notif-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--s3);gap:var(--s3)}
.notif-channels .pay-badge{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);min-width:0}
.notif-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--s2) var(--s5);gap:var(--s2) var(--s5)}
.notif-providers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:var(--s2);gap:var(--s2)}
.notif-provider{position:relative;display:flex;flex-direction:column;gap:4px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);cursor:pointer}
.notif-provider input{position:absolute;opacity:0;pointer-events:none}
.notif-provider b{font-size:var(--fs-md);font-weight:600;color:var(--text)}
.notif-provider small{font-size:var(--fs-xs);line-height:var(--lh-snug);color:var(--muted)}
.notif-provider.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.notif-provider:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}
.notif-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-md);background:var(--panel2)}
.notif-seg button{display:inline-flex;align-items:center;gap:6px;height:var(--control);padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:var(--fs-sm);cursor:pointer}
.notif-seg button[aria-selected=true]{background:var(--panel);color:var(--text);font-weight:500;box-shadow:var(--shadow-1)}
.notif-preview summary{display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none}
.notif-preview summary::-webkit-details-marker{display:none}
.notif-preview pre{margin:var(--s2) 0 0;padding:var(--s3);max-width:420px;border-radius:var(--r-md);background:var(--green-bg,#e8f5e9);color:var(--text);font:inherit;font-size:var(--fs-sm);line-height:var(--lh-snug);white-space:pre-wrap;word-break:break-word}
@media(max-width:900px){.notif-channels,.notif-providers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.notif-channels,.notif-providers,.notif-events{grid-template-columns:1fr}}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/finance.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Pembukuan: ringkasan, catatan pengeluaran/pemasukan, dan laporan keuangan, bergaya
   laporan ERPNext (kartu angka, tab formulir, tabel laporan). Semua kelas diawali .fin agar
   warna angka (.plus/.minus) tidak bocor ke halaman lain. */

.fin{display:flex;flex-direction:column;gap:var(--s4)}
.fin-overview,.fin-records,.fin-reports,.fin-setup{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.fin .plus{color:var(--green-text)}
.fin .minus{color:var(--red-text)}
.fin .muted{color:var(--muted)}
.fin .right{text-align:right}

/* Navigasi bagian (form-tabs) */
.fin-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s6);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.fin-tabs::-webkit-scrollbar{display:none}
.fin-tabs>button{flex:none;height:40px;margin-bottom:-1px;padding:0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);font-size:var(--fs-md);font-weight:420;cursor:pointer;white-space:nowrap}
.fin-tabs>button:hover{color:var(--text)}
.fin-tabs>button[aria-selected="true"]{color:var(--text);font-weight:500;border-bottom-color:var(--text)}
.fin-locked{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--s2);border-radius:var(--r-full);background:var(--yellow-bg);color:var(--yellow-text);font-size:var(--fs-xs)}
.fin-locked svg{width:12px;height:12px}
/* Sub-bagian: tombol bersegmen (TabButtons Frappe UI) */
.fin-subtabs{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:2px;padding:2px;border-radius:var(--r-sm);background:var(--panel2)}
.fin-subtabs>button{height:24px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.fin-subtabs>button:hover{color:var(--text)}
.fin-subtabs>button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:var(--shadow-1)}
html[data-theme="dark"] .fin-subtabs>button[aria-selected="true"]{background:var(--gray-700)}

/* Periode */
.fin-period{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3)}
.fin-chips{display:flex;flex-wrap:wrap;gap:6px}
.fin-chips>button{height:var(--control);padding:0 10px;border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fin-chips>button svg{width:14px;height:14px}
.fin-chips>button:hover{background:var(--btn-hover);color:var(--text)}
.fin-chips>button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.fin-chips.wide{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s2);gap:var(--s2)}
.fin-chips.wide>button{justify-content:center;height:auto;min-height:36px;padding:var(--s2) var(--s3)}
.fin-dates{display:flex;gap:var(--s2);flex-wrap:wrap}
.fin-dates label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--label)}
.fin-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.fin-head-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.fin-card>.fin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.fin-card-head .ops-link{flex:none;margin-top:2px}

/* Kartu angka utama (number card) */
.fin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));grid-gap:var(--s3);gap:var(--s3)}
.fin-stat{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);min-width:0}
.fin-stat-label{font-size:var(--fs-sm);font-weight:500;color:var(--label)}
.fin-stat>strong{margin-top:var(--s1);font-size:var(--fs-3xl);font-weight:600;letter-spacing:.005em;line-height:1.2;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-stat-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:16px}
.fin-stat-foot small{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-snug)}
.fin-stat-foot em{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-full);font-style:normal;font-size:var(--fs-xs);background:var(--gray-bg);color:var(--gray-text)}
.fin-stat-foot em.plus{background:var(--green-bg);color:var(--green-text)}
.fin-stat-foot em.minus{background:var(--red-bg);color:var(--red-text)}

/* Tindakan cepat */
.fin-quick{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Kartu isi */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));grid-gap:var(--s4);gap:var(--s4)}
.fin-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.fin-card>header h3{font-size:var(--fs-lg);font-weight:600;margin:0}
.fin-card>header p{font-size:var(--fs-sm);color:var(--muted);margin:2px 0 0;line-height:var(--lh-snug)}
.fin-card .manage-table-card{border:0;border-radius:0}
.fin-subhead{font-size:var(--fs-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:var(--s1) 0 0}

/* Grafik enam bulan (Frappe Charts) */
.fin-chart{display:flex;gap:var(--s2);align-items:flex-end;border-bottom:1px solid var(--line)}
.fin-chart-col{flex:1 1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.fin-bars{height:130px;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.fin-bars>i{display:block;width:40%;max-width:18px;border-radius:3px 3px 0 0;min-height:2px}
.fin-bars>i.plus{background:var(--chart-green)}
.fin-bars>i.minus{background:var(--chart-orange)}
.fin-chart-col>span{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.fin-chart-col>small{padding-bottom:6px;font-size:11px;font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}

/* Daftar perhatian dan rincian */
.fin-attention{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fin-attention li{display:grid;grid-template-columns:1fr auto;grid-gap:2px var(--s3);gap:2px var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.fin-attention li:last-child{border-bottom:0}
.fin-attention span{font-size:var(--fs-md);color:var(--text-soft)}
.fin-attention b{font-size:var(--fs-md);font-weight:500;text-align:right;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-attention small{grid-column:1/-1;font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-snug)}
.fin-due{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fin-due li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.fin-due li:last-child{border-bottom:0}
.fin-due b{font-size:var(--fs-md);font-weight:500;display:block;color:var(--text)}
.fin-due small{font-size:var(--fs-xs);color:var(--muted)}
.fin-due strong{font-size:var(--fs-md);font-weight:500;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fin-breakdown li{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;align-items:center;grid-gap:var(--s3);gap:var(--s3)}
.fin-breakdown span{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-breakdown b{font-size:var(--fs-md);font-weight:500;white-space:nowrap;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-share{display:block;height:6px;border-radius:var(--r-full);background:var(--panel2);overflow:hidden}
.fin-share>i{display:block;height:100%;border-radius:inherit;background:var(--gray-500)}
.fin-share.plus>i{background:var(--chart-green)}
.fin-share.minus>i{background:var(--chart-orange)}

/* Kosong */
.fin-empty{padding:var(--s6) var(--s4);text-align:center;color:var(--muted)}
.fin-empty b{display:block;color:var(--text);font-size:var(--fs-md);font-weight:500;margin-bottom:var(--s1)}
.fin-empty p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-normal);max-width:420px;margin-inline:auto}

/* Toolbar daftar */
.fin-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.fin-search{position:relative;flex:1 1;min-width:min(100%,210px);display:flex;align-items:center;color:var(--muted)}
.fin-search>svg{position:absolute;left:var(--s2);width:14px;height:14px;pointer-events:none}
.fin-search input{flex:1 1;width:100%;padding-left:28px}
.fin-inline-field{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--label)}
.fin-inline-field.wide{display:flex;max-width:520px;margin-bottom:var(--s3)}
.fin-inline-field.wide .rs{flex:1 1}
.fin-check{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--control);font-size:var(--fs-sm);color:var(--text-soft);cursor:pointer}
.fin-toolbar-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--s2)}
.fin-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));grid-gap:var(--s3);gap:var(--s3);margin-bottom:var(--s3)}
.fin-totals>div{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.fin-totals span{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--label)}
.fin-totals strong{display:block;margin-top:var(--s1);font-size:var(--fs-xl);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}

/* Label status (indicator-pill) */
.fin-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 var(--s2);border-radius:var(--r-full);background:var(--gray-bg);font-size:var(--fs-xs);color:var(--gray-text);white-space:nowrap}
.fin-tag svg{width:12px;height:12px}
.fin-tag.ok{background:var(--green-bg);color:var(--green-text)}
.fin-tag.warn{background:var(--orange-bg);color:var(--orange-text)}

/* Formulir */
.fin-form{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s5) var(--s5)}
.fin-form-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s3);gap:var(--s3)}
.fin-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fin-label{font-size:var(--fs-sm);font-weight:420;color:var(--label)}
.fin-label em{font-style:normal;color:var(--muted)}
.fin-field input,.fin-field select,.fin-field textarea{width:100%}
.fin-hint{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-normal)}
.fin-fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.fin-fieldset legend{padding:0 6px;font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.fin-addpartner{display:flex;gap:var(--s2);flex-wrap:wrap}
.fin-addpartner input{flex:1 1;min-width:min(100%,170px)}
.fin-note{margin:0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--blue-bg);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--blue-text)}
.fin-note b{color:inherit}

/* Pratinjau pencatatan pada formulir */
.fin-preview{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--s3);background:var(--subtle);display:flex;flex-direction:column;gap:6px}
.fin-preview>b{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.fin-preview table{width:100%;border-collapse:collapse}
.fin-preview td{padding:5px 0;font-size:var(--fs-sm);border-bottom:1px solid var(--line)}
.fin-preview tr:last-child td{border-bottom:0}
.fin-preview td:first-child{width:56px;color:var(--muted);font-size:var(--fs-xs)}
.fin-preview td.right{text-align:right;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-preview small{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-normal)}

/* Rincian catatan */
.fin-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:var(--s3) var(--s5);gap:var(--s3) var(--s5);margin:0}
.fin-detail dt{font-size:var(--fs-sm);color:var(--label)}
.fin-detail dd{margin:2px 0 0;font-size:var(--fs-md);font-weight:500;color:var(--text)}
.fin-detail dd small{color:var(--muted);font-size:var(--fs-xs);font-weight:420}
.fin-receipt{display:flex;flex-direction:column;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s3)}
.fin-receipt>b{font-size:var(--fs-sm)}
.fin-receipt img{max-width:100%;max-height:280px;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.fin-receipt-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

/* Laporan (query report) */
.fin-report{display:flex;flex-direction:column;gap:var(--s4)}
.fin-report-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.fin-report-head h3{font-size:var(--fs-lg);font-weight:600;margin:0}
.fin-report-head p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-snug)}
.fin-report-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.fin-result{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fin-result>div{background:var(--panel);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.fin-result span{font-size:var(--fs-sm);font-weight:500;color:var(--label)}
.fin-result strong{font-size:var(--fs-2xl);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-result em{font-style:normal;font-size:var(--fs-xs)}
.fin-result-net{background:var(--subtle)!important}
.fin-sheet-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--s4);gap:var(--s4);align-items:start}
.fin-sheet{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.fin-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border-bottom:1px solid var(--line);padding-bottom:10px}
.fin-sheet>header h4{margin:0;font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;gap:6px}
.fin-sheet>header h4 svg{width:16px;height:16px}
.fin-sheet>header span{font-size:var(--fs-md);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-sheet table{width:100%;border-collapse:collapse}
.fin-sheet th{text-align:left;font-size:var(--fs-sm);font-weight:420;color:var(--muted);padding:var(--s2) 0 6px;border-bottom:1px solid var(--line)}
.fin-sheet td{padding:var(--s2) 0;font-size:var(--fs-md);border-bottom:1px solid var(--line);vertical-align:top}
.fin-sheet tr:last-child td{border-bottom:0}
.fin-sheet td.right,.fin-sheet th.right{text-align:right;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-sheet td.muted{color:var(--muted);font-size:var(--fs-sm)}
.fin-sheet>footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border-top:1px solid var(--line-strong);padding-top:10px;font-size:var(--fs-md);font-weight:500}
.fin-sheet>footer strong{font-size:var(--fs-md);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-sheet>p.muted{margin:0;font-size:var(--fs-sm)}
.fin-cell-name b{display:block;font-size:var(--fs-md);font-weight:500;color:var(--text)}
.fin-cell-name small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted)}
.fin-cell-bar{width:90px;padding-right:var(--s3)!important;vertical-align:middle!important}
.fin-account-note{margin-top:var(--s1)!important;line-height:var(--lh-snug)}
.fin-balance-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.fin-subdetail{list-style:none;margin:var(--s2) 0 0;padding:var(--s2) 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.fin-subdetail li{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.fin-subdetail b{color:var(--text);font-weight:500}

/* Jurnal */
.fin-journal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.fin-journal>li{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s3) var(--s4)}
.fin-journal>li>header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.fin-journal>li>header b{display:block;font-size:var(--fs-md);font-weight:500;color:var(--text)}
.fin-journal>li>header small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted)}
.fin-journal-actions{display:flex;align-items:center;gap:6px}
.fin-journal-actions strong{font-size:var(--fs-md);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-journal-actions button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-sm);background:var(--btn);color:var(--text-soft);cursor:pointer}
.fin-journal-actions button svg{width:14px;height:14px}
.fin-journal-actions button:hover{background:var(--btn-hover);color:var(--text)}
.fin-journal-actions button.delete:hover{background:var(--red-bg);color:var(--red-text)}
.fin-journal table{width:100%;border-collapse:collapse;margin-top:var(--s1)}
.fin-journal td{padding:6px 0;font-size:var(--fs-sm);border-bottom:1px solid var(--line)}
.fin-journal tr:last-child td{border-bottom:0}
.fin-journal td.right{text-align:right;white-space:nowrap;width:120px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-journal td small{color:var(--muted)}

/* Baris jurnal manual */
.fin-lines{display:flex;flex-direction:column;gap:var(--s2)}
.fin-line{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;grid-gap:var(--s2);gap:var(--s2);align-items:end}
.fin-line>.rs{width:100%;min-width:0}
.fin-line>button{height:var(--control);width:var(--control);display:grid;place-items:center;padding:0}
.fin-lines-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}

/* Pengaturan */
.fin-method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));grid-gap:var(--s3);gap:var(--s3)}

/* Layar sempit */
@media(max-width:900px){
  .fin-sheet-grid{grid-template-columns:1fr}
  .fin-line{grid-template-columns:1fr 1fr;grid-template-areas:"account account" "debit credit" "remove remove"}
  .fin-line>.rs{grid-area:account}
  .fin-line>button{grid-area:remove;width:100%}
}
@media(max-width:640px){
  .fin-form-grid{grid-template-columns:1fr}
  .fin-toolbar-actions{margin-left:0;width:100%}
  .fin-toolbar-actions button{flex:1 1}
  .fin-quick button{flex:1 1 140px}
  .fin-breakdown li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .fin-breakdown .fin-share{grid-column:1/-1}
  .fin-chart{gap:4px}
  .fin-stat>strong{font-size:var(--fs-2xl)}
  .fin-form{padding:var(--s3) var(--s4) var(--s4)}
  .fin-inline-field.wide{flex-direction:column;align-items:stretch}
}

/* Cetak: hanya laporannya yang keluar di kertas. */
@media print{
  .desk-navbar,.desk-sidebar,.desk-backdrop,.manage-heading,
  .fin-tabs,.fin-subtabs,.fin-period,.fin-report-actions,.fin-balance-toolbar .fin-inline-field,
  .fin-toolbar,.fin-quick,.fin-head{display:none!important}
  .desk,.desk-body,.desk-main,.manage-content{display:block!important;padding:0!important;margin:0!important;max-width:none!important;background:#fff!important}
  .fin,.fin-report{gap:14px}
  .fin-card,.fin-sheet,.fin-result>div,.fin-journal>li{background:#fff!important;border-color:#c7c7c7!important;box-shadow:none!important;page-break-inside:avoid;break-inside:avoid}
  .fin-sheet-grid{grid-template-columns:1fr 1fr!important}
  body{background:#fff!important;color:#000!important}
  .fin .plus{color:#16794c!important}
  .fin .minus{color:#b52a2a!important}
}

/* Ringkasan pembukuan di dashboard operasional */
.fin-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);margin:var(--s3) 0}
.fin-strip>div{display:flex;flex-direction:column;gap:2px}
.fin-strip span{font-size:var(--fs-sm);color:var(--label)}
.fin-strip b{font-size:var(--fs-lg);font-weight:600;color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.fin-strip .plus{color:var(--green-text)}
.fin-strip .minus{color:var(--red-text)}
.fin-strip>a{margin-left:auto}
@media(max-width:640px){.fin-strip{gap:var(--s3)}.fin-strip>div{flex:1 1 40%}.fin-strip>a{margin-left:0;width:100%}}

/* Grafik mengisi tinggi kartunya, dan dua kartu per baris terasa lebih seimbang di layar lebar. */
.fin-chart{flex:1 1;align-items:stretch;min-height:150px}
.fin-chart-col{justify-content:flex-end}
.fin-bars{flex:1 1;height:auto;min-height:110px}
.fin-bars>i{min-height:0}
@media(min-width:1100px){.fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/form-controls.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Kontrol isian bersama (components/form-controls.tsx): pilihan react-select, kalender
   flatpickr, dan isian rupiah. Ukuran mengikuti form-control Frappe di tokens.css. */

/* --- Pilihan (react-select) ------------------------------------------------ */
.rs{position:relative;min-width:0;font-size:var(--fs-md);text-align:left;letter-spacing:.02em}
.rs__control{
  min-height:var(--control)!important;height:var(--control);padding:0 4px 0 var(--s2);
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--panel2);color:var(--text);cursor:pointer;
  transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.rs__control--is-focused{background:var(--panel);border-color:var(--gray-400);box-shadow:var(--focus-ring)}
html[data-theme="dark"] .rs__control--is-focused{border-color:var(--gray-600);box-shadow:0 0 0 2px var(--gray-700)}
.rs__control--is-disabled{background:var(--subtle);color:var(--muted);cursor:not-allowed}
.rs__value-container{padding:0;gap:0;overflow:hidden}
.rs__single-value{color:var(--text);font-weight:420;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs__control--is-disabled .rs__single-value{color:var(--muted)}
.rs__placeholder{color:var(--placeholder);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs__input-container{margin:0;padding:0;color:var(--text)}
/* Isian pencarian bawaan react-select tidak boleh ikut gaya kotak isian panel. */
.desk .rs__input-container input,.rs__input-container input{height:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.rs__indicators{gap:0}
.rs__indicator-separator{display:none}
.rs__indicator{display:grid;place-items:center;width:20px;color:var(--label)}
.rs__indicator svg{width:14px;height:14px}
.rs__control--menu-is-open .rs__dropdown-indicator svg{transform:rotate(180deg)}

.rs-portal{z-index:200!important}
.rs__menu{
  margin:4px 0;padding:6px;border-radius:var(--r-sm);background:var(--panel);
  box-shadow:var(--shadow-2);border:1px solid var(--line);font-family:var(--font-ui);font-size:var(--fs-md);letter-spacing:.02em;
}
html[data-theme="dark"] .rs__menu{background:var(--panel2);border-color:var(--line-strong)}
.rs__menu-list{padding:0}
.rs__option{
  display:flex;align-items:center;min-height:var(--control);padding:4px var(--s2);border-radius:6px;
  color:var(--text-soft);cursor:pointer;line-height:1.35;
}
.rs__option--is-focused{background:var(--hover);color:var(--text)}
html[data-theme="dark"] .rs__option--is-focused{background:var(--btn-hover)}
.rs__option--is-selected{color:var(--text);font-weight:600}
.rs__option--is-selected::after{content:"";width:14px;height:14px;margin-left:auto;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.rs__option--is-disabled{color:var(--placeholder);cursor:not-allowed;background:none}
.rs__menu-notice{padding:var(--s2);color:var(--muted);font-size:var(--fs-sm)}

/* --- Tanggal dan jam (flatpickr) ------------------------------------------- */
.dp-field{position:relative;display:flex;align-items:center;min-width:0}
.dp-field .dp-input{width:100%;padding-right:30px!important;cursor:pointer;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.dp-field.disabled .dp-input{cursor:not-allowed}
.dp-icon{position:absolute;right:8px;width:15px;height:15px;color:var(--label);pointer-events:none}
.dp-guard{position:absolute;left:50%;bottom:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}

.flatpickr-calendar.dp-desk,.flatpickr-calendar.dp-shop{
  --dp-bg:var(--panel);--dp-line:var(--line);--dp-text:var(--text);--dp-soft:var(--text-soft);--dp-muted:var(--placeholder);
  --dp-hover:var(--hover);--dp-accent:var(--primary);--dp-accent-ink:var(--primary-ink);--dp-today:var(--gray-400);
  --dp-radius:var(--r-lg);--dp-cell:var(--r-sm);
  width:288px;padding:var(--s3);border:1px solid var(--dp-line);border-radius:var(--dp-radius);background:var(--dp-bg);
  box-shadow:var(--shadow-3);font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--dp-text);letter-spacing:.01em;
}
html[data-theme="dark"] .flatpickr-calendar.dp-desk{--dp-bg:var(--panel2);--dp-line:var(--line-strong);--dp-hover:var(--btn-hover)}
.flatpickr-calendar.dp-shop{
  --dp-bg:#ffffff;--dp-line:#e3e7de;--dp-text:#111811;--dp-soft:#454c43;--dp-muted:#a3aaa1;
  --dp-hover:#eef1ea;--dp-accent:#0f3326;--dp-accent-ink:#ffffff;--dp-today:#bfe075;--dp-radius:16px;--dp-cell:10px;
  width:308px;box-shadow:0 1px 2px #11181108,0 12px 32px #1118111f;
}
.flatpickr-calendar.dp-desk::before,.flatpickr-calendar.dp-desk::after,
.flatpickr-calendar.dp-shop::before,.flatpickr-calendar.dp-shop::after{display:none}
.flatpickr-calendar.animate.open{animation:dp-in .14s var(--ease)}
@keyframes dp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.dp-desk .flatpickr-months,.dp-shop .flatpickr-months{align-items:center;margin-bottom:var(--s2)}
.dp-desk .flatpickr-months .flatpickr-month,.dp-shop .flatpickr-months .flatpickr-month{height:32px;color:var(--dp-text);fill:var(--dp-text)}
.dp-desk .flatpickr-current-month,.dp-shop .flatpickr-current-month{
  left:0;width:100%;height:32px;padding:0;display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:var(--fs-md);font-weight:600;
}
.dp-desk .flatpickr-current-month span.cur-month,.dp-shop .flatpickr-current-month span.cur-month{margin:0;font-weight:600;color:var(--dp-text)}
.dp-desk .flatpickr-current-month span.cur-month:hover,.dp-shop .flatpickr-current-month span.cur-month:hover{background:none}
.dp-desk .flatpickr-current-month .numInputWrapper,.dp-shop .flatpickr-current-month .numInputWrapper{width:7ch}
.dp-desk .flatpickr-current-month input.cur-year,.dp-shop .flatpickr-current-month input.cur-year{
  height:auto;padding:0 0 0 2px;border:0;background:none;box-shadow:none;color:var(--dp-text);font-weight:600;font-size:inherit;
}
.dp-desk .numInputWrapper span,.dp-shop .numInputWrapper span{border:0;opacity:0}
.dp-desk .numInputWrapper:hover span,.dp-shop .numInputWrapper:hover span{opacity:.6}
.dp-desk .numInputWrapper span.arrowUp::after{border-bottom-color:var(--dp-text)}
.dp-desk .numInputWrapper span.arrowDown::after{border-top-color:var(--dp-text)}
.dp-shop .numInputWrapper span.arrowUp::after{border-bottom-color:var(--dp-text)}
.dp-shop .numInputWrapper span.arrowDown::after{border-top-color:var(--dp-text)}
.dp-desk .numInputWrapper:hover,.dp-shop .numInputWrapper:hover{background:none}
.dp-desk .flatpickr-months .flatpickr-prev-month,.dp-desk .flatpickr-months .flatpickr-next-month,
.dp-shop .flatpickr-months .flatpickr-prev-month,.dp-shop .flatpickr-months .flatpickr-next-month{
  top:var(--s3);display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:var(--dp-cell);color:var(--dp-soft);fill:var(--dp-soft);
}
.dp-desk .flatpickr-months .flatpickr-prev-month,.dp-shop .flatpickr-months .flatpickr-prev-month{left:var(--s3)}
.dp-desk .flatpickr-months .flatpickr-next-month,.dp-shop .flatpickr-months .flatpickr-next-month{right:var(--s3)}
.dp-desk .flatpickr-months .flatpickr-prev-month:hover,.dp-desk .flatpickr-months .flatpickr-next-month:hover,
.dp-shop .flatpickr-months .flatpickr-prev-month:hover,.dp-shop .flatpickr-months .flatpickr-next-month:hover{background:var(--dp-hover)}
.dp-desk .flatpickr-months .flatpickr-prev-month:hover svg,.dp-desk .flatpickr-months .flatpickr-next-month:hover svg,
.dp-shop .flatpickr-months .flatpickr-prev-month:hover svg,.dp-shop .flatpickr-months .flatpickr-next-month:hover svg{fill:var(--dp-text)}
.dp-desk .flatpickr-months svg,.dp-shop .flatpickr-months svg{width:10px;height:10px}
.dp-desk .flatpickr-disabled,.dp-shop .flatpickr-disabled{opacity:.3}

.dp-desk .flatpickr-innerContainer,.dp-shop .flatpickr-innerContainer,
.dp-desk .flatpickr-rContainer,.dp-shop .flatpickr-rContainer,
.dp-desk .flatpickr-days,.dp-shop .flatpickr-days{width:100%}
.dp-desk .flatpickr-weekdays,.dp-shop .flatpickr-weekdays{height:28px}
.dp-desk span.flatpickr-weekday,.dp-shop span.flatpickr-weekday{color:var(--dp-muted);font-size:var(--fs-xs);font-weight:500;background:none}
.dp-desk .dayContainer,.dp-shop .dayContainer{width:100%;min-width:0;max-width:none;gap:2px 0}
.dp-desk .flatpickr-day,.dp-shop .flatpickr-day{
  flex-basis:calc(100% / 7);max-width:none;height:34px;line-height:32px;margin:0;
  border:1px solid transparent;border-radius:var(--dp-cell);color:var(--dp-soft);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.dp-shop .flatpickr-day{height:38px;line-height:36px;font-size:14px;font-weight:600}
.dp-desk .flatpickr-day:hover,.dp-desk .flatpickr-day:focus,.dp-shop .flatpickr-day:hover,.dp-shop .flatpickr-day:focus{background:var(--dp-hover);border-color:transparent;color:var(--dp-text)}
.dp-desk .flatpickr-day.today,.dp-shop .flatpickr-day.today{border-color:var(--dp-today);font-weight:600;color:var(--dp-text)}
.dp-desk .flatpickr-day.today:hover,.dp-shop .flatpickr-day.today:hover{background:var(--dp-hover);color:var(--dp-text)}
.dp-desk .flatpickr-day.selected,.dp-desk .flatpickr-day.selected:hover,.dp-desk .flatpickr-day.selected:focus,
.dp-shop .flatpickr-day.selected,.dp-shop .flatpickr-day.selected:hover,.dp-shop .flatpickr-day.selected:focus{
  background:var(--dp-accent);border-color:var(--dp-accent);color:var(--dp-accent-ink);font-weight:600;
}
.dp-desk .flatpickr-day.prevMonthDay,.dp-desk .flatpickr-day.nextMonthDay,
.dp-shop .flatpickr-day.prevMonthDay,.dp-shop .flatpickr-day.nextMonthDay{color:var(--dp-muted)}
.dp-desk .flatpickr-day.flatpickr-disabled,.dp-desk .flatpickr-day.flatpickr-disabled:hover,
.dp-shop .flatpickr-day.flatpickr-disabled,.dp-shop .flatpickr-day.flatpickr-disabled:hover{color:var(--dp-muted);opacity:.45;background:none;border-color:transparent;cursor:not-allowed}

/* Jam saja (tanpa kalender) */
.flatpickr-calendar.noCalendar.dp-desk,.flatpickr-calendar.noCalendar.dp-shop{width:180px;padding:var(--s2)}
.dp-desk .flatpickr-time,.dp-shop .flatpickr-time{height:40px;max-height:40px;line-height:40px;border:0!important}
.dp-desk .flatpickr-time input,.dp-shop .flatpickr-time input{
  height:40px;padding:0;border:0;border-radius:var(--dp-cell);background:none;box-shadow:none;
  color:var(--dp-text);font-size:var(--fs-lg);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.dp-desk .flatpickr-time input:hover,.dp-desk .flatpickr-time input:focus,
.dp-shop .flatpickr-time input:hover,.dp-shop .flatpickr-time input:focus{background:var(--dp-hover)}
.dp-desk .flatpickr-time .flatpickr-time-separator,.dp-shop .flatpickr-time .flatpickr-time-separator{color:var(--dp-text);font-weight:600}
.dp-desk .flatpickr-time .numInputWrapper span.arrowUp::after{border-bottom-color:var(--dp-text)}
.dp-desk .flatpickr-time .numInputWrapper span.arrowDown::after{border-top-color:var(--dp-text)}

/* --- Nominal rupiah (react-number-format) ---------------------------------- */
.money-field{
  display:flex;align-items:center;gap:6px;min-width:0;height:var(--control);padding:0 var(--s2);
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--panel2);
  transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.money-field:focus-within{background:var(--panel);border-color:var(--gray-400);box-shadow:var(--focus-ring)}
html[data-theme="dark"] .money-field:focus-within{border-color:var(--gray-600);box-shadow:0 0 0 2px var(--gray-700)}
.money-field.disabled{background:var(--subtle)}
.money-prefix{flex:none;font-size:var(--fs-sm);color:var(--muted)}
.desk .money-field input,.money-field input{
  flex:1 1;width:100%;min-width:0;height:auto;padding:0;border:0;background:transparent;box-shadow:none;outline:0;
  color:var(--text);font-size:var(--fs-md);font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}
.desk .money-field input:focus{box-shadow:none;background:transparent;border:0}

/* --- Lebar di tata letak formulir yang ada --------------------------------- */
.rs,.dp-field,.money-field{width:100%}
.fin-inline-field .dp-field,.fin-inline-field .rs{width:auto;min-width:160px}
.fin-dates .dp-field{width:150px}
.rs__group{padding:0}
.rs__group+.rs__group{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.rs__group-heading{padding:6px var(--s2) 2px;font-size:var(--fs-xs);font-weight:500;color:var(--muted)}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/receipt.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Nota cetak kasir (/cetak/nota/<id>) dan pratinjaunya di Pengaturan › Nota & Cetak.
   Warnanya sengaja tetap hitam di atas putih di tema apa pun karena mengikuti kertas. */
.receipt-screen{min-height:100vh;background:#e9ebe7;color:#111;padding:16px;font-family:var(--font-inter),system-ui,sans-serif}
.receipt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:820px;margin:0 auto 8px}
.receipt-papers{display:flex;flex-wrap:wrap;gap:4px;flex:1 1}
.receipt-papers button,.receipt-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #c9cdc5;background:#fff;color:#111;border-radius:8px;padding:7px 11px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.receipt-papers button.active{background:#111;color:#fff;border-color:#111}
.receipt-btn.primary{background:#16794c;border-color:#16794c;color:#fff;font-weight:600}
.receipt-btn.ghost{background:transparent}
.receipt-width{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.receipt-width input{width:70px;padding:6px 8px;border:1px solid #c9cdc5;border-radius:8px;font:inherit}
.receipt-hint{max-width:820px;margin:0 auto 14px;font-size:12.5px;color:#4b5049}
.receipt-message{max-width:420px;margin:60px auto;background:#fff;border-radius:12px;padding:20px;display:grid;grid-gap:12px;gap:12px;justify-items:start}
.receipt-stage{display:flex;justify-content:center;overflow-x:auto;padding-bottom:24px}

.receipt{background:#fff;color:#000;box-shadow:0 2px 14px rgba(0,0,0,.12);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1.35;box-sizing:border-box}
.receipt *{box-sizing:border-box}
.receipt h1{margin:0;font-size:inherit}
.receipt dl,.receipt dd,.receipt p{margin:0}
.receipt .num{text-align:right;white-space:nowrap;vertical-align:top}
.receipt table{width:100%;border-collapse:collapse}
.receipt td,.receipt th{padding:0;text-align:left;font-weight:inherit}
.receipt td span{display:block}
.receipt .muted{color:#444}

.receipt-head{display:grid;grid-gap:1px;gap:1px}
.receipt-venue{font-weight:700}
.receipt-note{font-style:italic}
.receipt-title{display:flex;justify-content:space-between;align-items:center;gap:8px}
.receipt-title h1{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.receipt-state{font-weight:700;border:1.5px solid #000;padding:1px 6px;border-radius:4px;white-space:nowrap}
.receipt-meta div{display:flex;justify-content:space-between;gap:8px}
.receipt-meta dt{color:#333}
.receipt-meta dd{text-align:right;font-weight:600;overflow-wrap:anywhere}
.receipt-lines tbody td{padding-bottom:4px}
.receipt-lines tfoot td{padding-top:2px}
.receipt-lines tr.total td{font-weight:700}
.receipt-lines tr.due td{font-weight:700}
.receipt-foot{display:grid;grid-gap:3px;gap:3px}

/* Kertas gulung (thermal 58/80 mm atau lebar lain). Lebar diatur lewat atribut style. */
.receipt.roll{padding:4mm 3.5mm 6mm;font-size:12px;display:grid;grid-gap:2.5mm;gap:2.5mm}
.receipt.roll.size-narrow{font-size:10.5px;padding:3mm 2.5mm 5mm}
.receipt.roll .receipt-head,.receipt.roll .receipt-foot{text-align:center;justify-items:center}
.receipt.roll .receipt-venue{font-size:1.25em}
.receipt.roll .receipt-title,.receipt.roll .receipt-meta,.receipt.roll .receipt-lines tfoot{border-top:1px dashed #000;padding-top:2mm}
.receipt.roll .receipt-lines tr.total td{border-top:1px dashed #000;padding-top:1.5mm;font-size:1.15em}
.receipt.roll .receipt-foot{border-top:1px dashed #000;padding-top:2mm}
.receipt.roll td span{font-size:.92em;color:#222}

/* Lembar A4/A5. */
.receipt.sheet{padding:10mm;font-size:13px;display:grid;grid-gap:6mm;gap:6mm}
.receipt.sheet.size-a5{width:148mm;font-size:12px;padding:8mm}
.receipt.sheet.size-a4{width:210mm;min-height:120mm}
.receipt.sheet .receipt-venue{font-size:1.5em}
.receipt.sheet .receipt-title h1{font-size:1.6em}
.receipt.sheet .receipt-meta{display:grid;grid-template-columns:1fr 1fr;grid-gap:3px 24px;gap:3px 24px;border-top:1px solid #000;border-bottom:1px solid #000;padding:3mm 0}
.receipt.sheet .receipt-lines th{border-bottom:1px solid #000;padding:0 0 2mm;font-weight:700}
.receipt.sheet .receipt-lines th.num{text-align:right}
.receipt.sheet .receipt-lines tbody td{padding:2mm 0;border-bottom:1px solid #ddd}
.receipt.sheet .receipt-lines tfoot td{padding:1.2mm 0}
.receipt.sheet .receipt-lines tfoot tr.total td{border-top:1.5px solid #000;font-size:1.15em;padding-top:2mm}
.receipt.sheet td span{color:#333;font-size:.92em}
.receipt.sheet .receipt-foot{border-top:1px solid #000;padding-top:3mm}

@media print{
  html,body{background:#fff!important}
  .receipt-screen{padding:0;background:#fff;min-height:0}
  .receipt-screen .no-print,[data-sonner-toaster]{display:none!important}
  .receipt-stage{display:block;padding:0;overflow:visible}
  .receipt{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Lembar: margin diatur @page, jadi nota mengisi lebar area cetak. */
  .receipt.sheet,.receipt.sheet.size-a5,.receipt.sheet.size-a4{width:auto;min-height:0;padding:0}
  .receipt-preview{display:none}
}

/* Pratinjau di halaman pengaturan. */
.receipt-preview{background:#e9ebe7;border-radius:12px;padding:16px;display:flex;justify-content:center;overflow-x:auto}
.receipt-preview .receipt.sheet{transform-origin:top center}
.receipt-paper-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:var(--s2);gap:var(--s2)}
.receipt-paper-choices .cms-check{border:1px solid var(--line);border-radius:var(--r-md,8px);padding:8px 10px;align-items:flex-start}
.receipt-paper-choices .cms-check.active{border-color:var(--green-solid,#16794c);box-shadow:0 0 0 1px var(--green-solid,#16794c)}
.receipt-paper-choices .cms-check span{display:grid;grid-gap:2px;gap:2px}
.receipt-paper-choices input{margin-top:3px}

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/shop.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* Situs pelanggan — fondasi: palet, rangka halaman, dan komponen dasar.
   Halaman pelanggan selalu terang dan tidak ikut tema panel staf, jadi paletnya
   ditetapkan sendiri di sini dengan nama yang tidak dipakai panel staf.
   Ditulis mobile-first: aturan dasar untuk ponsel, layar lebar ditambahkan di bawah.

   Berkas lain untuk pelanggan: shop-home.css (beranda), shop-booking.css (jadwal),
   shop-checkout.css (keranjang dan pesanan), shop-account.css (akun, masuk, dokumen). */

.shop{
  --paper:#f5f6f2;
  --card:#ffffff;
  --sunk:#eef1ea;
  --rule:#e3e7de;
  --rule-2:#cfd6c9;

  --ink:#111811;
  --ink-2:#454c43;
  --ink-3:#656d63;     /* 4.9:1 di atas --paper */

  --green:#0f3326;     /* warna utama: tombol, pilihan aktif */
  --green-2:#1b4a37;
  --green-wash:#e7f0ea;
  --lime:#c8ff3d;      /* aksen merek */
  --lime-ink:#1b2600;
  --lime-deep:#3e6309; /* lime sebagai teks di atas terang */
  --lime-wash:#eff8d9;
  --lime-edge:#bfe075;

  --amber:#8a5700; --amber-wash:#fdf3dd; --amber-edge:#efd9a6;
  --red:#a8361f;   --red-wash:#fcebe6;   --red-edge:#f0c9bd;
  --blue:#245c8f;  --blue-wash:#e7f0f9;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px #11181108,0 6px 20px #1118110d;
  --shadow-up:0 -6px 24px #11181114;
  --head-h:60px;
  --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);

  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-size:15px;line-height:1.5;
}
html:has(.shop),html:has(.shop) body{background:var(--paper)}
.shop h1,.shop h2,.shop h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.shop a{text-decoration:none;color:inherit}
.shop :focus-visible{outline:3px solid #2f7d4f;outline-offset:2px;border-radius:8px}
.shop button{-webkit-tap-highlight-color:transparent}
.shop a{-webkit-tap-highlight-color:transparent}
.shop .shop-body{flex:1 1;display:flex;flex-direction:column}
.shop .muted{color:var(--ink-3)}
.shop .small{font-size:13px}

.shop .shop-skip{
  position:fixed;left:16px;top:-80px;z-index:80;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:10px;background:var(--ink);color:#fff;font-weight:700;transition:top .15s;
}
.shop .shop-skip:focus{top:12px}

.shop .shop-wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px}
.shop .shop-band{padding-block:24px 48px}

/* --- Kepala halaman ------------------------------------------------------ */
.shop .shop-head{
  position:-webkit-sticky;
  position:sticky;top:0;z-index:40;height:var(--head-h);
  background:#ffffffeb;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
}
.shop .shop-head-inner{height:100%;display:flex;align-items:center;gap:16px}
.shop .shop-brand{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.shop .shop-brand-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--green);color:var(--lime)}
.shop .shop-brand-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop .shop-nav{display:none}
.shop .shop-head-actions{display:flex;align-items:center;gap:6px}
.shop .shop-head-cta,.shop .shop-login{display:none!important}

.shop .shop-icon-btn{
  position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:12px;background:transparent;color:var(--ink);
}
.shop .shop-icon-btn:hover{background:var(--sunk)}
.shop .shop-icon-btn[aria-current=page]{background:var(--green-wash);color:var(--green)}
.shop .shop-icon-btn.outline{border:1px solid var(--rule);background:var(--card)}
.shop .shop-icon-btn.soft{background:var(--sunk)}
.shop .shop-icon-btn:disabled{opacity:.5}
.shop .shop-icon-btn.account{width:44px}
.shop .shop-badge{
  position:absolute;top:4px;right:2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;background:var(--lime);color:var(--lime-ink);border:2px solid #fff;
  font-size:11px;font-weight:800;font-style:normal;line-height:1;
}
.shop .shop-avatar{flex:none;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--green);color:var(--lime);font-weight:700}
.shop .shop-avatar img{width:100%;height:100%;object-fit:cover}

/* --- Bilah navigasi bawah (ponsel) -------------------------------------- */
.shop .shop-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:#ffffffF2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--rule);
}
.shop .shop-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);font-size:11.5px;font-weight:600}
.shop .shop-tabbar .icon{position:relative;display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .15s}
.shop .shop-tabbar .shop-badge{top:-3px;right:4px}
.shop .shop-tabbar a[aria-current=page]{color:var(--green)}
.shop .shop-tabbar a[aria-current=page] .icon{background:var(--lime-wash);color:var(--green)}

/* --- Kaki halaman -------------------------------------------------------- */
.shop .shop-foot{margin-top:48px;background:var(--green);color:#cfdcd3;padding:40px 0 calc(var(--tab-h) + var(--safe-b) + 20px)}
.shop .shop-foot-inner{display:grid;grid-gap:28px;gap:28px}
.shop .shop-foot-brand b{display:block;font-family:var(--font-display);font-size:20px;color:#fff;margin-bottom:6px}
.shop .shop-foot-brand p{font-size:14px;line-height:1.6;max-width:420px}
.shop .shop-foot-brand .addr{display:flex;gap:8px;margin-top:10px}
.shop .shop-foot-brand .addr svg{flex:none;margin-top:3px;color:var(--lime)}
.shop .shop-foot-links{display:grid;grid-template-columns:1fr 1fr;grid-gap:2px 16px;gap:2px 16px}
.shop .shop-foot-contact{display:flex;flex-direction:column;gap:2px}
.shop .shop-foot-links a,.shop .shop-foot-contact a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:#e5ede7;max-width:100%}
.shop .shop-foot-links a:hover,.shop .shop-foot-contact a:hover{color:var(--lime)}
.shop .shop-foot-contact svg{color:var(--lime)}
.shop .shop-foot-copy{margin-top:28px;padding-top:18px;border-top:1px solid #ffffff1f;font-size:13px;color:#a9bcae}

/* --- Tombol -------------------------------------------------------------- */
.shop .shop-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;
  border:1px solid transparent;border-radius:12px;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;
  cursor:pointer;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
}
.shop .shop-btn:active:not(:disabled){transform:scale(.98)}
.shop .shop-btn:disabled{opacity:.45;cursor:not-allowed}
.shop .shop-btn svg{flex-shrink:0}
.shop .shop-btn.sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
.shop .shop-btn.lg{min-height:54px;font-size:16px;border-radius:14px}
.shop .shop-btn.wide{width:100%}
.shop .shop-btn.primary{background:var(--green);color:#fff;box-shadow:0 6px 16px #0f33262e}
.shop .shop-btn.primary:hover:not(:disabled){background:var(--green-2)}
.shop .shop-btn.lime{background:var(--lime);color:var(--lime-ink)}
.shop .shop-btn.lime:hover{background:#d6ff6e}
.shop .shop-btn.outline{background:var(--card);border-color:var(--rule-2);color:var(--ink)}
.shop .shop-btn.outline:hover:not(:disabled){border-color:var(--ink-3);background:#fafbf8}
.shop .shop-btn.ghost{background:transparent;color:var(--green)}
.shop .shop-btn.ghost:hover{background:var(--green-wash)}
.shop .shop-btn.on-dark{background:#ffffff14;border-color:#ffffff33;color:#fff}
.shop .shop-btn.on-dark:hover{background:#ffffff24}
.shop .shop-btn.danger{background:var(--red);color:#fff}
.shop .shop-btn.danger-text{color:var(--red)}
.shop .btn-row{display:flex;flex-wrap:wrap;gap:10px}
.shop .btn-row.center{justify-content:center}
.shop .btn-col{display:flex;flex-direction:column;gap:10px}
.shop .text-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--green);min-height:36px}
.shop .text-link:hover{text-decoration:underline}
.shop .link-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--green);font-size:14px;font-weight:700}
.shop .link-btn:hover{background:var(--sunk)}
.shop .link-btn.danger{color:var(--red)}
.shop .link-btn .chevron{transition:transform .2s}
.shop .link-btn[aria-expanded=true] .chevron{transform:rotate(180deg)}

/* --- Kartu, catatan, label status ---------------------------------------- */
.shop .card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.shop .card-title{font-size:17px;margin-bottom:14px}
.shop .pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.shop .pill.on{background:var(--lime-wash);color:var(--lime-deep)}
.shop .pill.wait{background:var(--amber-wash);color:var(--amber)}
.shop .pill.off{background:var(--red-wash);color:var(--red)}
.shop .pill.done{background:var(--blue-wash);color:var(--blue)}
.shop .shop-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-deep)}
.shop .shop-note{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--blue-wash);color:var(--blue);font-size:14px;line-height:1.5}
.shop .shop-note.error{background:var(--red-wash);color:var(--red)}
.shop .shop-note.warn{background:var(--amber-wash);color:var(--amber)}
.shop .shop-note.ok{background:var(--lime-wash);color:var(--lime-deep);font-weight:600}
.shop .shop-note svg{flex:none;margin-top:1px}
.shop .shop-note button{border:0;background:none;padding:0;color:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.shop .shop-empty{padding:32px 16px;text-align:center;color:var(--ink-3)}
.shop .field-error{color:var(--red)!important}

.shop .skeleton{position:relative;overflow:hidden;min-height:180px;border-radius:var(--radius);background:var(--sunk)}
.shop .skeleton.tall{min-height:340px;margin-top:24px}
.shop .skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffb0,transparent);transform:translateX(-100%);animation:shop-shimmer 1.3s infinite}
.shop .skeleton-stack{display:flex;flex-direction:column;gap:14px}
@keyframes shop-shimmer{to{transform:translateX(100%)}}

/* --- Judul halaman dan langkah pemesanan --------------------------------- */
.shop .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:16px 0 16px}
.shop .page-head h1{font-size:26px;line-height:1.15}
.shop .page-head p{margin-top:4px;font-size:14px;color:var(--ink-3)}

.shop .shop-steps{list-style:none;display:flex;align-items:center;gap:6px;margin:16px 0 0;padding:0;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.shop .shop-steps li{display:flex;align-items:center;gap:6px;min-width:0}
.shop .shop-steps li+li:before{content:"";flex:none;width:16px;height:2px;border-radius:2px;background:var(--rule-2)}
.shop .shop-steps .dot{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sunk);font-size:12px}
.shop .shop-steps .now{color:var(--ink)}
.shop .shop-steps .now .dot{background:var(--green);color:var(--lime)}
.shop .shop-steps .done{color:var(--lime-deep)}
.shop .shop-steps .done .dot{background:var(--lime);color:var(--lime-ink)}
.shop .shop-steps .done+li:before{background:var(--lime-edge)}
.shop .shop-steps .label{white-space:nowrap}

/* --- Isian formulir ------------------------------------------------------ */
.shop .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.shop .field>span{font-size:14px;font-weight:700;color:var(--ink)}
.shop .field>span em{font-style:normal;font-weight:500;color:var(--ink-3);margin-left:4px}
.shop .field small{font-size:13px;color:var(--ink-3)}
.shop input:not([type=date]):not(.dp-input):not([type=checkbox]):not([type=radio]),.shop textarea{
  width:100%;min-height:50px;padding:0 14px;border:1px solid var(--rule-2);border-radius:12px;background:#fff;color:var(--ink);font-size:16px;
  transition:border-color .15s,box-shadow .15s;
}
.shop input::placeholder{color:#8a9188}
.shop input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px #0f33261a}
.shop input[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 4px #a8361f14}

/* --- Pilihan tanggal (dipakai di beranda dan halaman jadwal) ------------- */
.shop .date-chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px;margin:-2px}
.shop .date-chips::-webkit-scrollbar{display:none}
.shop .date-chip{
  position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:68px;height:64px;padding:0 4px;border:1px solid var(--rule);border-radius:14px;background:var(--card);color:var(--ink);
  scroll-snap-align:start;cursor:pointer;transition:border-color .15s,background .15s;
}
.shop .date-chip small{font-size:11.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.shop .date-chip b{font-size:15px;white-space:nowrap}
.shop .date-chip:hover{border-color:var(--rule-2)}
.shop .date-chip[aria-pressed=true],.shop .date-chip.on{background:var(--green);border-color:var(--green);color:#fff}
.shop .date-chip[aria-pressed=true] small,.shop .date-chip.on small{color:var(--lime)}
.shop .date-chip.other{color:var(--green);overflow:hidden}
.shop .date-chip.other small{color:inherit}
.shop .date-chip.other input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0}
.shop .date-chip.other input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}

/* --- Pilihan bersegmen dan chip ----------------------------------------- */
.shop .seg{display:flex;align-items:center;gap:4px;padding:4px;border-radius:14px;background:var(--sunk)}
.shop .seg button{flex:1 1;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:700;white-space:nowrap}
.shop .seg button[aria-pressed=true],.shop .seg button[aria-selected=true]{background:var(--card);color:var(--green);box-shadow:0 1px 3px #1118111f}
.shop .seg button:disabled{opacity:.4}
.shop .seg-label{display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 6px;font-size:13px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.shop .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.shop .chips::-webkit-scrollbar{display:none}
.shop .chip{flex:none;min-height:38px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink-2);font-size:14px;font-weight:600}
.shop .chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* --- Sampul foto lapangan dan galeri layar penuh ------------------------- */
.shop .court-cover{position:relative;display:block;width:100%;aspect-ratio:16/10;margin:0;padding:0;border:0;background:var(--lime-wash);overflow:hidden}
.shop .court-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.shop button.court-cover{cursor:zoom-in}
.shop button.court-cover:hover img{transform:scale(1.04)}
.shop .court-cover-count{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#111811b3;color:#fff;font-size:12px;font-weight:700}
.shop .court-cover.empty{background:linear-gradient(150deg,#1d5a40,#0f3326)}
.shop .court-cover-lines{position:absolute;inset:20% 16%;border:2px solid #c8ff3d8c;border-radius:3px}
.shop .court-cover-lines:before{content:"";position:absolute;left:50%;top:-14%;bottom:-14%;width:2px;margin-left:-1px;background:#ffffffb3}
.shop .court-cover-lines:after{content:"";position:absolute;inset:0 24%;border-inline:2px solid #c8ff3d59;background:linear-gradient(#c8ff3d59,#c8ff3d59) center/100% 2px no-repeat}

.shop .lightbox{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#070a07f5;color:#fff;outline:0}
.shop .lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;color:#d6dccf}
.shop .lightbox-bar b{color:#fff}
.shop .lightbox-bar button,.shop .lightbox-nav{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff1f;color:#fff}
.shop .lightbox-stage{margin:0;min-height:0;display:grid;place-items:center;padding-inline:8px}
.shop .lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.shop .lightbox-nav{position:absolute;bottom:96px}
.shop .lightbox-nav.prev{left:16px}
.shop .lightbox-nav.next{right:16px}
.shop .lightbox-thumbs{display:flex;justify-content:center;gap:8px;padding:16px;overflow-x:auto}
.shop .lightbox-thumbs button{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;opacity:.5}
.shop .lightbox-thumbs button[aria-current=true]{border-color:var(--lime);opacity:1}
.shop .lightbox-thumbs img{display:block;width:100%;height:100%;object-fit:cover}

/* --- Penghitung jumlah dan gambar item (dipakai bersama panel staf) ------- */
.shop .qty-stepper{border-color:var(--rule-2);border-radius:12px;background:var(--card)}
.shop .qty-stepper button{width:40px;height:40px;color:var(--green)}
.shop .qty-stepper button:hover:not(:disabled){background:var(--green-wash)}
.shop .qty-stepper button:disabled{color:var(--ink-3);opacity:.4}
.shop .qty-stepper output{min-width:26px;font-size:15px;color:var(--ink)}
.shop .addon-thumb{width:48px;height:48px;border-radius:12px;background:var(--lime-wash);border-color:transparent;color:var(--green)}

/* --- Teks bebas dari admin ---------------------------------------------- */
.shop .rich-text p{margin-bottom:12px;white-space:pre-line;line-height:1.65}
.shop .rich-text ul,.shop .rich-text ol{margin:0 0 12px;padding-left:22px;line-height:1.65}
.shop .rich-text li+li{margin-top:4px}
.shop .rich-text>:last-child{margin-bottom:0}

/* --- Keadaan kosong ------------------------------------------------------ */
.shop .empty-state{color:var(--ink);font-size:15px;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:460px;margin:40px auto;padding:0 8px}
.shop .empty-icon{display:grid;place-items:center;width:76px;height:76px;margin-bottom:18px;border-radius:24px;background:var(--lime-wash);color:var(--green);font-family:var(--font-display);font-size:22px;font-weight:700}
.shop .empty-state h1{font-size:24px;margin-bottom:8px}
.shop .empty-state p{color:var(--ink-3);line-height:1.6;margin-bottom:22px}

/* --- Layar lebar --------------------------------------------------------- */
@media (min-width:720px){
  .shop .shop-wrap{padding-inline:24px}
  .shop .page-head h1{font-size:32px}
  .shop .shop-steps{font-size:13px}
  .shop .shop-steps li+li:before{width:28px}
  .shop .shop-foot-inner{grid-template-columns:1.4fr 1fr 1fr}
  .shop .shop-foot-links{display:flex;flex-direction:column}
}
@media (min-width:960px){
  .shop{--head-h:68px}
  .shop .shop-tabbar{display:none}
  .shop .shop-foot{padding-bottom:28px}
  .shop .shop-nav{display:flex;align-items:center;gap:4px}
  .shop .shop-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
  .shop .shop-nav a:hover{background:var(--sunk);color:var(--ink)}
  .shop .shop-nav a[aria-current=page]{color:var(--green);background:var(--green-wash)}
  .shop .shop-head-cta,.shop .shop-login{display:inline-flex!important}
  .shop .shop-brand-mark{width:38px;height:38px}
  .shop .shop-brand-name{font-size:18px}
  .shop .lightbox-stage{padding-inline:76px}
  .shop .lightbox-nav{top:50%;bottom:auto;transform:translateY(-50%)}
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/shop-home.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* Beranda pelanggan. Dasar palet dan komponen ada di shop.css. */

/* --- Hero ---------------------------------------------------------------- */
.shop .hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 0%,#1f5a40 0%,var(--green) 55%,#0a241b 100%);color:#fff;padding:28px 0 24px}
.shop .hero-photo{position:absolute;inset:0}
.shop .hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.32}
.shop .hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f3326cc,#0f3326f2 70%)}
.shop .hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-gap:22px;gap:22px}
.shop .hero-copy,.shop .start-card{min-width:0}
.shop .hero-venue{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#c8ff3d1f;color:var(--lime);font-size:13px;font-weight:700}
.shop .hero h1{margin:0 0 10px;font-size:32px;line-height:1.08;color:#fff;letter-spacing:-.03em}
.shop .hero h1 em{display:block;font-style:normal;color:var(--lime)}
.shop .hero-lead{font-size:15.5px;line-height:1.6;color:#d4e0d7;max-width:520px}
.shop .hero-live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:#e5ede7}
.shop .hero-live b{color:#fff}
.shop .hero-live i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #c8ff3d33;animation:hero-pulse 2s infinite}
.shop .hero-live.idle i{background:#f5b453;box-shadow:0 0 0 4px #f5b45333;animation:none}
@keyframes hero-pulse{50%{box-shadow:0 0 0 8px #c8ff3d00}}
.shop .hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;font-size:13.5px;color:#b9cabd}
.shop .hero-facts b{color:#fff}

.shop .start-card{background:var(--card);color:var(--ink);border-radius:20px;padding:16px;box-shadow:0 20px 50px #0000004d}
.shop .start-title{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:12px}
.shop .start-card .date-chips{margin-bottom:14px}
.shop .start-card .date-chip{width:64px;height:62px}

/* --- Bagian beranda ------------------------------------------------------ */
.shop .home-sec{padding:36px 0}
.shop .home-sec.tight{padding:24px 0}
.shop .home-sec.soft{background:#eef2ea}
.shop .home-sec[id]{scroll-margin-top:calc(var(--head-h) + 8px)}
.shop .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.shop .sec-head h2{font-size:23px;line-height:1.15}
.shop .sec-head p{margin-top:4px;font-size:14px;color:var(--ink-3)}
.shop .sec-head .text-link{flex:none}

/* Kartu lapangan: geser ke samping di ponsel, kisi di layar lebar. */
.shop .court-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,320px);grid-gap:14px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:4px 16px 12px;scrollbar-width:none}
.shop .court-rail::-webkit-scrollbar{display:none}
.shop .court-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.shop .court-card-media{position:relative}
.shop .avail-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:800;box-shadow:0 2px 8px #0000001f}
.shop .avail-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.shop .avail-badge.open{color:var(--lime-deep)}
.shop .avail-badge.few{color:var(--amber)}
.shop .avail-badge.full{color:var(--red)}
.shop .court-card-body{flex:1 1;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.shop .court-card-body h3{font-size:19px}
.shop .court-card-tags{font-size:13.5px;color:var(--ink-3)}
.shop .court-card-desc{margin-top:4px;font-size:14px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop .court-card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.shop .court-card-foot .price small{display:block;font-size:12px;color:var(--ink-3)}
.shop .court-card-foot .price b{font-family:var(--font-display);font-size:19px}
.shop .court-card-foot .price span{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--ink-3)}

/* Cara booking */
.shop .how{list-style:none;margin:0;padding:0;display:grid;grid-gap:12px;gap:12px;counter-reset:how}
.shop .how li{display:flex;gap:14px;padding:16px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius)}
.shop .how-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--green);color:var(--lime)}
.shop .how h3{font-size:16.5px;margin-bottom:4px}
.shop .how p{font-size:14px;line-height:1.55;color:var(--ink-2)}

/* Sewa & tambahan */
.shop .addon-rail{list-style:none;margin:0 -16px;padding:2px 16px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,64%);grid-gap:10px;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.shop .addon-rail::-webkit-scrollbar{display:none}
.shop .addon-rail li{scroll-snap-align:start;display:flex;gap:12px;align-items:center;padding:12px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius)}
.shop .addon-rail li>div{min-width:0;display:flex;flex-direction:column}
.shop .addon-rail small{font-size:12px;color:var(--ink-3)}
.shop .addon-rail b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop .addon-rail .price{font-size:14px;font-weight:700;color:var(--green)}
.shop .addon-rail .price small{font-weight:500}
.shop .addon-rail .out{font-style:normal;font-size:12px;color:var(--red)}

/* Fasilitas */
.shop .facility-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shop .facility-list li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--rule);font-size:14px;font-weight:600}
.shop .facility-list svg{color:var(--lime-deep)}

/* Lokasi */
.shop .place{display:grid;grid-gap:14px;gap:14px}
.shop .place-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:16px}
.shop .place-about{font-size:14.5px;color:var(--ink-2)}
.shop .contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.shop .contact-list li{display:flex;gap:12px;align-items:flex-start}
.shop .contact-list svg{flex:none;width:36px;height:36px;padding:8px;border-radius:10px;background:var(--sunk);color:var(--green)}
.shop .contact-list div{display:flex;flex-direction:column;min-width:0}
.shop .contact-list small{font-size:12px;color:var(--ink-3)}
.shop .contact-list span,.shop .contact-list a{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.shop .contact-list a{color:var(--green)}
.shop .place-map{min-height:260px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rule);background:var(--sunk)}
.shop .place-map iframe{display:block;width:100%;height:100%;min-height:260px;border:0}

/* Sebelum memesan */
.shop .before{display:grid;grid-gap:14px;gap:14px}
.shop .policy-card h3{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:12px}
.shop .policy-card h3 svg{color:var(--lime-deep)}
.shop .policy-card .muted{margin-top:12px;font-size:14px;line-height:1.55}
.shop .policy-card .text-link{margin-top:8px}
.shop .faq-more{margin-top:8px}

/* Ajakan penutup */
.shop .closing{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:radial-gradient(120% 120% at 100% 0,#1f5a40,var(--green));color:#fff}
.shop .closing h2{color:#fff;font-size:24px}
.shop .closing p{margin-top:4px;color:#cbd9cf;font-size:14.5px}

@media (min-width:720px){
  .shop .hero{padding:56px 0 52px}
  .shop .hero h1{font-size:46px}
  .shop .court-rail{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;margin:0;padding:0}
  .shop .how{grid-template-columns:repeat(3,1fr)}
  .shop .how li{flex-direction:column}
  .shop .addon-rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow:visible;margin:0;padding:0}
  .shop .home-sec{padding:52px 0}
  .shop .sec-head h2{font-size:28px}
  .shop .closing{flex-direction:row;align-items:center;justify-content:space-between;padding:32px}
}
@media (min-width:960px){
  .shop .hero{padding:72px 0}
  .shop .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:48px}
  .shop .hero h1{font-size:50px}
  .shop .hero-lead{font-size:17px}
  .shop .start-card{padding:22px}
  .shop .start-card .date-chips{flex-wrap:wrap;overflow:visible}
  .shop .start-card .date-chip{width:calc((100% - 24px)/4)}
  .shop .court-rail{grid-template-columns:repeat(3,1fr)}
  .shop .place{grid-template-columns:1fr 1fr}
  .shop .place.single{grid-template-columns:1fr;max-width:720px}
  .shop .before{grid-template-columns:1fr 1.2fr;align-items:start}
  .shop .before.single{grid-template-columns:1fr;max-width:760px}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/shop-booking.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* Halaman jadwal & booking pelanggan. Dasar palet dan komponen ada di shop.css. */

.shop .book{padding-bottom:24px}
.shop .book.has-bar{padding-bottom:96px}
.shop .book.has-sheet{padding-bottom:58vh}

/* Pengatur tanggal, durasi, dan rentang jam menempel di bawah kepala halaman. */
.shop .book-controls{position:relative;z-index:20;display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.shop .book-filters{display:flex;flex-direction:column;gap:10px}
.shop .book-filters .seg{align-self:stretch}

.shop .book-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:6px 0 12px;font-size:13px;color:var(--ink-2)}
.shop .book-legend span{display:inline-flex;align-items:center;gap:6px}
.shop .book-legend i{width:14px;height:14px;border-radius:4px;border:1px solid var(--rule-2);background:var(--card)}
.shop .book-legend i.free{border-color:var(--lime-edge);background:#fff}
.shop .book-legend i.pick{border-color:var(--green);background:var(--green)}
.shop .book-legend i.busy{border-color:var(--rule);background:repeating-linear-gradient(135deg,var(--sunk) 0 3px,#e2e6dc 3px 6px)}
.shop .book-legend i.special{width:8px;height:8px;margin-inline:3px;border:0;border-radius:50%;background:#e2a21a}
.shop .book-legend i.incart{border-color:var(--lime-edge);background:var(--lime)}
.shop .map-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--green);font-size:13px;font-weight:700}
.shop .book-map{margin-bottom:14px}
.shop .book-map>.muted{font-size:13.5px;margin-bottom:10px}

.shop .floor-head{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:18px}
.shop .floor-head svg{color:var(--lime-deep)}
.shop .floor-head small{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--ink-3)}

/* --- Satu lapangan ------------------------------------------------------- */
.shop .court-block{scroll-margin-top:calc(var(--head-h) + 12px);margin-bottom:14px;padding:14px;background:var(--card);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow);transition:border-color .2s}
.shop .court-block.active{border-color:var(--green)}
.shop .court-block header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.shop .court-block .thumb{flex:none;width:52px;height:52px;aspect-ratio:auto;border-radius:12px}
.shop .court-block .thumb .court-cover-count{display:none}
.shop .court-block .thumb .court-cover-lines{inset:18% 14%}
.shop .court-block .title{flex:1 1;min-width:0}
.shop .court-block h3{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop .court-block .title small{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop .court-block .rate{flex:none;text-align:right}
.shop .court-block .rate b{display:block;font-size:15px;font-family:var(--font-display)}
.shop .court-block .rate small{font-size:12px;color:var(--ink-3)}
.shop .court-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:14px;background:var(--sunk);font-size:14px;color:var(--ink-2)}

/* --- Tombol jam ---------------------------------------------------------- */
.shop .slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));grid-gap:8px;gap:8px}
.shop .slot{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px;padding:4px;
  border:1.5px solid var(--lime-edge);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s,transform .1s;
}
.shop .slot b{font-size:15px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.shop .slot small{font-size:11.5px;font-weight:600;color:var(--lime-deep);white-space:nowrap}
.shop .slot:hover:not(:disabled):not(.picked){background:var(--lime-wash);border-color:#9fca45}
.shop .slot:active:not(:disabled){transform:scale(.96)}
.shop .slot:disabled{cursor:not-allowed;opacity:1}
.shop .slot.special small{color:var(--amber)}
.shop .slot.special:after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#e2a21a}
.shop .slot.short{border-style:dashed;border-color:var(--rule-2);background:#fff}
.shop .slot.short small{color:var(--ink-3)}
.shop .slot.nofit{border-style:dashed;border-color:var(--rule);background:#fafbf8;color:var(--ink-3)}
.shop .slot.nofit small{color:var(--ink-3)}
.shop .slot.booked,.shop .slot.maintenance,.shop .slot.past{border-color:transparent;background:repeating-linear-gradient(135deg,var(--sunk) 0 6px,#e8ece3 6px 12px);color:#8a918a}
.shop .slot.booked b,.shop .slot.maintenance b{text-decoration:line-through;text-decoration-thickness:1px}
.shop .slot.booked small,.shop .slot.maintenance small{color:#7d847d}
.shop .slot.incart{border-color:var(--lime-edge);background:var(--lime);color:var(--lime-ink)}
.shop .slot.incart small{color:var(--lime-ink)}
.shop .slot.picked{border-color:var(--green);background:var(--green);color:#fff}
.shop .slot.picked small{color:var(--lime)}
.shop .slot.picked:after{display:none}

/* --- Lembar pilihan ------------------------------------------------------ */
.shop .sheet{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:44;display:flex;justify-content:center;pointer-events:none;animation:sheet-in .22s cubic-bezier(.2,.8,.3,1)}
@keyframes sheet-in{from{transform:translateY(30px);opacity:0}}
.shop .sheet-inner{
  pointer-events:auto;width:100%;max-width:560px;max-height:min(72vh,640px);overflow-y:auto;overscroll-behavior:contain;
  padding:16px 16px 12px;background:var(--card);border:1px solid var(--rule);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:var(--shadow-up),0 -1px 0 #ffffff;
}
.shop .sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.shop .sheet-head small{font-size:12.5px;font-weight:700;color:var(--lime-deep);text-transform:capitalize}
.shop .sheet-head h2{font-size:20px;margin-top:2px}
.shop .sheet-head .when{font-family:var(--font-display);font-size:18px;font-weight:700;margin-top:2px}
.shop .sheet-head .when span{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--ink-3)}
.shop .seg.full button{flex:1 1}
.shop .sheet-note{margin-top:8px;font-size:13px;color:var(--amber)}
.shop .sheet-addons{margin-top:12px;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.shop .sheet-addons-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 14px;border:0;background:#fafbf8;color:var(--ink);font-size:14.5px;text-align:left}
.shop .sheet-addons-toggle svg:first-child{color:var(--green)}
.shop .sheet-addons-toggle span{flex:1 1}
.shop .sheet-addons-toggle small{margin-left:6px;font-size:12px;color:var(--ink-3)}
.shop .sheet-addons-toggle .chevron{transition:transform .2s;color:var(--ink-3)}
.shop .sheet-addons-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
.shop .sheet-addons .addon-pick{padding:4px 12px 8px;border-top:1px solid var(--rule)}
.shop .sheet-foot{position:-webkit-sticky;position:sticky;bottom:-12px;z-index:2;margin:14px -16px 0;padding:12px 16px;background:#fff;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.shop .sheet-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.shop .sheet-total small{font-size:13px;color:var(--ink-3)}
.shop .sheet-total b{font-family:var(--font-display);font-size:24px}
.shop .sheet-actions{display:grid;grid-template-columns:1fr 1.3fr;grid-gap:8px;gap:8px}
.shop .sheet-actions .shop-btn{padding:0 10px}
.shop .sheet-fine{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--ink-3);text-align:center}
.shop .sheet-fine a{color:var(--green);font-weight:700;text-decoration:underline}

/* Daftar tambahan dengan penghitung (lembar pilihan dan keranjang) */
.shop .addon-pick ul{list-style:none;margin:0;padding:0}
.shop .addon-pick li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.shop .addon-pick li:last-child{border-bottom:0}
.shop .addon-pick li.out{opacity:.55}
.shop .addon-pick .addon-thumb{width:42px;height:42px}
.shop .addon-pick .info{flex:1 1;min-width:0;display:flex;flex-direction:column}
.shop .addon-pick .info b{font-size:14.5px}
.shop .addon-pick .info small{font-size:13px;color:var(--ink-3)}
.shop .addon-pick .info em{font-style:normal;font-size:12px;font-weight:700;color:var(--amber)}
.shop .addon-pick-note{padding:8px 0;font-size:13px;color:var(--ink-3)}

/* --- Bilah keranjang ----------------------------------------------------- */
.shop .cart-bar{
  position:fixed;left:12px;right:12px;bottom:calc(var(--tab-h) + var(--safe-b) + 10px);z-index:44;
  display:flex;align-items:center;gap:12px;max-width:560px;margin-inline:auto;min-height:60px;padding:8px 8px 8px 12px;
  border-radius:18px;background:var(--green);color:#fff;box-shadow:0 12px 30px #0f332659;animation:sheet-in .22s;
}
.shop .cart-bar .count{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;background:#ffffff1a;font-weight:800;color:var(--lime)}
.shop .cart-bar .sum{flex:1 1;display:flex;flex-direction:column;line-height:1.25}
.shop .cart-bar .sum small{font-size:12px;color:#c1d1c6}
.shop .cart-bar .sum b{font-size:16px}
.shop .cart-bar .go{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:12px;background:var(--lime);color:var(--lime-ink);font-weight:800}

/* --- Denah venue --------------------------------------------------------- */
.shop .venue-map-block{width:100%}
.shop .venue-floor-switcher{margin-bottom:12px}
.shop .venue-floor-switcher-head{display:none}
.shop .venue-map-floors{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.shop .venue-map-floors button{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 6px;border:1px solid var(--rule);border-radius:14px;background:var(--card);text-align:left}
.shop .venue-floor-number{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--sunk);font-weight:800}
.shop .venue-floor-copy{display:flex;flex-direction:column}
.shop .venue-floor-copy strong{font-size:14px}
.shop .venue-floor-copy small{font-size:12px;color:var(--ink-3)}
.shop .venue-floor-copy small i{font-style:normal}
.shop .venue-floor-action{display:none}
.shop .venue-map-floors button[aria-selected=true]{background:var(--green);border-color:var(--green);color:#fff}
.shop .venue-map-floors button[aria-selected=true] .venue-floor-number{background:#ffffff1a;color:var(--lime)}
.shop .venue-map-floors button[aria-selected=true] small{color:#c1d1c6}
.shop .venue-map{position:relative;width:100%;border-radius:14px;border:1px solid var(--rule);background:linear-gradient(#e9ede4 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#e9ede4 1px,transparent 1px) 0 0/24px 24px,#f8faf5;overflow:hidden}
.shop .venue-map-court{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;border:2px solid;border-radius:8px;cursor:pointer;transition:transform .15s;overflow:hidden}
.shop .venue-map-court:hover{transform:scale(1.03)}
.shop .venue-map-court .net{position:absolute;left:10%;right:10%;top:50%;height:2px;background:currentColor;opacity:.25}
.shop .venue-map-court b{position:relative;z-index:1;max-width:100%;padding:1px 6px;border-radius:6px;background:#ffffffd9;font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop .venue-map-court small{position:relative;z-index:1;font-size:11px;font-weight:700}
.shop .venue-map-court.open{border-color:#7fae2a;background:var(--lime-wash);color:var(--lime-deep)}
.shop .venue-map-court.few{border-color:var(--amber-edge);background:var(--amber-wash);color:var(--amber)}
.shop .venue-map-court.full{border-color:var(--red-edge);background:var(--red-wash);color:var(--red);cursor:default}
.shop .venue-map-court.full:hover{transform:none}
.shop .venue-map-court.selected{box-shadow:0 0 0 3px var(--green);z-index:3}
.shop .venue-map-feature{position:absolute;display:grid;place-items:center;padding:2px;border:1px dashed;border-radius:6px;font-size:11px;font-weight:600;text-align:center;line-height:1.15;overflow:hidden;pointer-events:none}
.shop .venue-map-feature span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop .venue-map-feature.kind-jalan{border-color:#b7bec4;background:#f1f3f5;color:#4f5862}
.shop .venue-map-feature.kind-pintu-masuk{border-style:solid;border-color:#e08f8c;background:#fdecec;color:#983330}
.shop .venue-map-feature.kind-kantin{border-color:#e0b177;background:#fdf3e6;color:#85570a}
.shop .venue-map-feature.kind-tempat-duduk{border-color:#87ced2;background:#eaf9fa;color:#11666d}
.shop .venue-map-feature.kind-toilet{border-color:#98cdae;background:#eef8f2;color:#27603d}
.shop .venue-map-feature.kind-parkir{border-color:#a9b0cf;background:#f0f1f8;color:#3b4470}
.shop .venue-map-feature.kind-resepsionis{border-color:#bda8ea;background:#f5f0fd;color:#523392}
.shop .venue-map-feature.kind-loker{border-color:#cfb190;background:#faf3ea;color:#6c4521}
.shop .venue-map-feature.kind-tangga{border-color:#ddbe64;background:#fdf6df;color:#705505}
.shop .venue-map-feature.kind-lift{border-color:#95c1e9;background:#eaf4fd;color:#1c578a}
.shop .venue-map-feature.kind-lainnya{border-color:#c0c5c9;background:#f3f5f6;color:#4e555b}

@media (min-width:720px){
  .shop .book-controls{position:-webkit-sticky;position:sticky;top:var(--head-h);margin-inline:-24px;padding:10px 24px 12px;background:#f5f6f2f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
  .shop .court-block{scroll-margin-top:calc(var(--head-h) + 150px)}
  .shop .book-filters{flex-direction:row;align-items:center;justify-content:space-between}
  .shop .book-filters .seg{align-self:auto}
  .shop .seg button{flex:none}
  .shop .seg.full button{flex:1 1}
  .shop .slot-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .shop .court-block{padding:18px}
  .shop .court-block .thumb{width:64px;height:64px}
  .shop .sheet{left:auto;right:24px;bottom:24px;width:420px}
  .shop .sheet-inner{border-radius:22px;border-bottom:1px solid var(--rule);box-shadow:0 24px 60px #11181133}
  .shop .cart-bar{bottom:calc(var(--tab-h) + var(--safe-b) + 16px)}
}
@media (min-width:960px){
  .shop .sheet{bottom:24px}
  .shop .cart-bar{bottom:24px}
  .shop .book.has-sheet{padding-bottom:24px}
  .shop .book.has-sheet .book-controls,.shop .book.has-sheet>.court-block,.shop .book.has-sheet>.page-head,.shop .book.has-sheet>.book-legend,.shop .book.has-sheet>.floor-head{margin-right:440px}
}

/* Durasi di atas 2 jam: tombol "Lebih lama" yang membuka daftar pilihan bawaan perangkat. */
.shop .seg-more{position:relative;flex:1 1;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.shop .seg-more.on{background:var(--card);color:var(--green);box-shadow:0 1px 3px #1118111f}
.shop .seg-more select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.shop .seg-more select:disabled{cursor:not-allowed}
.shop .seg-more:has(select:disabled){opacity:.4}
.shop .seg-more:has(select:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.shop .seg-more svg{flex:none}
/* Ponsel: empat pilihan durasi harus muat satu baris, jadi label cukup ikon jam. */
@media (max-width:719px){
  .shop .book-filters .seg-label{padding:0 2px 0 6px}
  .shop .book-filters .seg-label-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .shop .seg button,.shop .seg-more{padding:0 8px}
}
@media (min-width:720px){.shop .book-filters .seg-more{flex:none}}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/shop-checkout.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Keranjang, data pemesan, dan halaman pesanan. Dasar palet dan komponen ada di shop.css. */

.shop .cart{padding-bottom:24px}
.shop .cart.has-bar{padding-bottom:96px}
.shop .cart-grid{display:grid;grid-gap:16px;gap:16px}
.shop .cart-list{display:flex;flex-direction:column;gap:12px}

.shop .cart-item{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.shop .cart-item.problem{border-color:var(--red-edge);background:#fffaf8}
.shop .cart-item-main{display:flex;gap:12px;align-items:flex-start}
.shop .date-tile{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:58px;border-radius:14px;background:var(--green);color:#fff;line-height:1}
.shop .date-tile b{font-family:var(--font-display);font-size:22px}
.shop .date-tile small{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--lime);text-transform:uppercase}
.shop .cart-item .what{flex:1 1;min-width:0}
.shop .cart-item h2{font-size:17px}
.shop .cart-item h2 small{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--ink-3)}
.shop .cart-item .what p{font-size:13.5px;color:var(--ink-3);text-transform:capitalize}
.shop .cart-item .what .time{margin-top:2px;font-size:15px;font-weight:700;color:var(--ink);text-transform:none}
.shop .cart-item .what .time span{font-weight:500;color:var(--ink-3)}
.shop .cart-item .cost{flex:none;font-family:var(--font-display);font-size:16px}
.shop .cart-problem{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--red-wash);color:var(--red);font-size:14px;font-weight:600}
.shop .cart-problem svg{flex:none;margin-top:1px}
.shop .cart-lines{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--rule-2);display:flex;flex-direction:column;gap:4px}
.shop .cart-lines li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-2)}
.shop .cart-item .addon-pick{margin-top:10px;padding:4px 12px;border-radius:14px;background:#fafbf8;border:1px solid var(--rule)}
.shop .cart-item footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px -6px -6px}

.shop .cart-side{display:flex;flex-direction:column;gap:12px}
.shop .bill{margin:0;display:flex;flex-direction:column;gap:8px}
.shop .bill>div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.shop .bill dt{color:var(--ink-2)}
.shop .bill dd{margin:0;font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}
.shop .bill .total{margin-top:4px;padding-top:12px;border-top:1px solid var(--rule)}
.shop .bill .total dt,.shop .bill .total dd{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink)}
.shop .bill .now{padding:10px 12px;margin-inline:-4px;border-radius:12px;background:var(--lime-wash)}
.shop .bill .now dt,.shop .bill .now dd{color:var(--lime-deep);font-weight:800}
.shop .bill .due{padding:10px 12px;margin-inline:-4px;border-radius:12px;background:var(--amber-wash)}
.shop .bill .due dt,.shop .bill .due dd{color:var(--amber);font-weight:800}
.shop .policy-chip{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:13.5px;font-weight:600;color:var(--green)}
.shop .policy-chip svg{flex:none}

.shop .checkout .account-note{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px;border-radius:12px;background:var(--sunk);font-size:13.5px;color:var(--ink-2)}
.shop .checkout .account-note svg{flex:none;color:var(--green)}
.shop .checkout .account-note.invite{background:var(--lime-wash);color:var(--ink)}
.shop .checkout .account-note.invite span{flex:1 1}
.shop .checkout .muted{font-size:14px;line-height:1.55;margin-bottom:14px}
.shop .checkout .fine{display:flex;gap:8px;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.shop .checkout .fine svg{flex:none;margin-top:2px;color:var(--lime-deep)}

/* Bilah bayar di ponsel: total dan tombol selalu terlihat. */
.shop .pay-bar{
  position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:44;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;
  background:#fffffff5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);box-shadow:var(--shadow-up);
}
.shop .pay-bar small{display:block;font-size:12px;color:var(--ink-3)}
.shop .pay-bar b{font-family:var(--font-display);font-size:20px}
.shop .pay-bar .shop-btn{min-width:140px}

/* --- Halaman pesanan ----------------------------------------------------- */
.shop .order{max-width:640px;padding-bottom:24px}
.shop .order-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:20px 0 14px;padding:26px 18px 20px;border-radius:24px;background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow)}
.shop .order-hero-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:12px;border-radius:50%}
.shop .order-hero.on .order-hero-icon{background:var(--lime);color:var(--lime-ink)}
.shop .order-hero.wait .order-hero-icon{background:var(--amber-wash);color:var(--amber)}
.shop .order-hero.done .order-hero-icon{background:var(--blue-wash);color:var(--blue)}
.shop .order-hero.off .order-hero-icon{background:var(--red-wash);color:var(--red)}
.shop .order-hero h1{font-size:24px}
.shop .order-hero p{margin-top:6px;max-width:400px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.shop .order-code{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:48px;padding:0 16px;border:1px dashed var(--rule-2);border-radius:14px;background:var(--paper);color:var(--ink)}
.shop .order-code small{font-size:12px;color:var(--ink-3)}
.shop .order-code b{font-family:var(--font-display);font-size:18px;letter-spacing:.04em}
.shop .order-code svg{color:var(--green)}
.shop .order-pay{margin-bottom:14px}
.shop .order-pay-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.shop .order-pay-top small{display:block;font-size:13px;color:var(--ink-3)}
.shop .order-pay-top b{font-family:var(--font-display);font-size:26px}
.shop .timer{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:var(--amber-wash);color:var(--amber);font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.shop .timer.late{background:var(--red-wash);color:var(--red)}
/* Jendela Midtrans yang ditanam di halaman pesanan. */
.shop .snap-box{display:none}
.shop .snap-box.on{display:block;min-height:520px;margin:0 -4px 12px;border-radius:16px;overflow:hidden;border:1px solid var(--rule);background:#fff}
.shop .snap-box.on iframe{display:block;width:100%;min-height:520px;border:0}
.shop .snap-wait{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;margin-bottom:12px;border-radius:16px;background:var(--sunk);font-size:14px;font-weight:600;color:var(--ink-2)}
.shop .snap-fine{display:flex;align-items:flex-start;gap:6px;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.shop .snap-fine svg{flex:none;margin-top:2px;color:var(--lime-deep)}
.shop .receipt{margin-bottom:14px}
.shop .receipt-sessions{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column}
.shop .receipt-sessions>li{padding:12px 0;border-bottom:1px solid var(--rule)}
.shop .receipt-sessions>li:first-child{padding-top:0}
.shop .receipt-sessions .row{display:flex;justify-content:space-between;gap:12px}
.shop .receipt-sessions .row>div:first-child{display:flex;flex-direction:column;gap:2px}
.shop .receipt-sessions .row b{font-size:15.5px}
.shop .receipt-sessions .row span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.shop .receipt-sessions .row svg{color:var(--ink-3)}
.shop .receipt-sessions .cost{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.shop .receipt-lines{list-style:none;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--paper);display:flex;flex-direction:column;gap:4px}
.shop .receipt-lines li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.shop .receipt .warn{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:13px;color:var(--red)}
.shop .receipt>.muted{margin-top:12px}

@media (min-width:720px){
  .shop .cart-item{padding:18px}
  .shop .order-hero{padding:34px 24px 26px}
  .shop .order-hero h1{font-size:28px}
}
@media (min-width:960px){
  .shop .cart.has-bar{padding-bottom:24px}
  .shop .cart-grid{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:24px}
  .shop .cart-side{position:-webkit-sticky;position:sticky;top:calc(var(--head-h) + 16px)}
  .shop .pay-bar{display:none}
  .shop .order{margin-inline:auto}
}

/* --- Pesanan terkonfirmasi: langkah berikutnya ---------------------------- */
.shop .order-progress{justify-content:center;margin:18px 0 0}
.shop .order-next{margin-bottom:14px}
.shop .order-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}
.shop .order-next-grid>*{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:14px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper);color:var(--green);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.shop .order-next-grid>*:hover{border-color:var(--green);background:var(--green-wash)}
.shop .order-next-grid b{margin-top:4px;font-size:14.5px;color:var(--ink)}
.shop .order-next-grid small{font-size:12.5px;line-height:1.4;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.shop .receipt-payments{list-style:none;margin:0 0 12px;padding:10px 0 0;border-top:1px dashed var(--rule-2);display:flex;flex-direction:column;gap:8px}
.shop .receipt-payments li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:14px}
.shop .receipt-payments span{display:flex;flex-direction:column;color:var(--ink-2)}
.shop .receipt-payments small{font-size:12px;color:var(--ink-3)}
.shop .receipt-payments .refund b{color:var(--red)}
.shop .receipt .text-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px}

/* --- Kwitansi dan tagihan siap cetak --------------------------------------- */
.shop .invoice-page{padding-top:20px;padding-bottom:32px;max-width:820px}
.shop .invoice-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:14px}
.shop .invoice{padding:22px;border:1px solid var(--rule);border-radius:var(--radius);background:#fff;color:#111;box-shadow:var(--shadow)}
.shop .invoice-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--green)}
.shop .invoice-head>div:first-child{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.shop .invoice-venue{font-family:var(--font-display);font-size:20px;color:var(--green)}
.shop .invoice-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.shop .invoice-title h1{margin:0;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.shop .invoice-stamp{padding:4px 12px;border:2px solid currentColor;border-radius:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
.shop .invoice-stamp.on{color:var(--lime-deep)}
.shop .invoice-stamp.wait{color:var(--amber)}
.shop .invoice-stamp.off{color:var(--red)}
.shop .invoice-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px 16px;gap:10px 16px;margin:16px 0}
.shop .invoice-meta dt{font-size:12px;color:var(--ink-3)}
.shop .invoice-meta dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.shop .invoice-lines{width:100%;border-collapse:collapse;font-size:14px}
.shop .invoice-lines th{padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:12px;text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.shop .invoice-lines td{padding:8px 0;vertical-align:top}
.shop .invoice-lines .num{text-align:right;white-space:nowrap;padding-left:12px}
.shop .invoice-lines .session td{padding-top:12px;border-top:1px solid var(--rule)}
.shop .invoice-lines .session td:first-child{display:flex;flex-direction:column;gap:2px}
.shop .invoice-lines .session span{font-size:13px;color:var(--ink-3)}
.shop .invoice-lines .sub td{padding:3px 0 3px 14px;color:var(--ink-2);font-size:13.5px}
.shop .invoice-lines .sub td.num{padding-left:12px}
.shop .invoice-lines .off td{color:var(--ink-3);text-decoration:line-through}
.shop .invoice-lines tfoot td{padding:6px 0;font-size:13.5px;color:var(--ink-2)}
.shop .invoice-lines tfoot .total td{padding-top:12px;border-top:2px solid var(--ink);font-size:16px;font-weight:800;color:var(--ink)}
.shop .invoice-lines tfoot .due td{padding-top:10px;border-top:1px solid var(--rule-2);font-size:16px;font-weight:800;color:var(--ink)}
.shop .invoice-foot{margin-top:20px;font-size:13.5px;color:var(--ink-2)}
.shop .invoice-foot .muted{margin-top:6px;font-size:12px;color:var(--ink-3)}
@media (min-width:720px){
  .shop .invoice{padding:36px}
  .shop .invoice-title{align-items:flex-end}
  .shop .invoice-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media print{
  @page{margin:14mm}
  .shop{background:#fff}
  .shop .shop-head,.shop .shop-tabbar,.shop .shop-foot,.shop .shop-skip,.shop .no-print,[data-sonner-toaster]{display:none !important}
  .shop .shop-body{padding:0 !important}
  .shop .invoice-page{max-width:none;padding:0}
  .shop .invoice{border:0;box-shadow:none;padding:0}
  .shop .invoice-stamp,.shop .invoice-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/shop-account.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* Area akun pelanggan, halaman masuk, serta halaman FAQ dan kebijakan.
   Dasar palet dan komponen ada di shop.css. */

/* --- Rangka akun --------------------------------------------------------- */
.shop .acct{padding-block:20px 32px}
.shop .acct-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.shop .acct-head>div{flex:1 1;min-width:0}
.shop .acct-head h1{font-size:24px}
.shop .acct-head p{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13.5px;color:var(--ink-3)}
.shop .acct-head p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop .acct-head .shop-btn{display:none}
.shop .acct-tabs{display:flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:14px;background:var(--sunk)}
.shop .acct-tabs a{flex:1 1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink-2)}
.shop .acct-tabs a[aria-current=page]{background:var(--card);color:var(--green);box-shadow:0 1px 3px #1118111f}

.shop .acct-home,.shop .acct-history,.shop .acct-profile{display:flex;flex-direction:column;gap:14px}
.shop .acct-alert{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--amber-wash);border:1px solid var(--amber-edge);color:var(--amber)}
.shop .acct-alert span{flex:1 1;display:flex;flex-direction:column;font-size:13.5px}
.shop .acct-alert b{color:var(--ink);font-size:14.5px}
.shop .acct-alert em{flex-basis:100%;padding-left:32px;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:800;white-space:nowrap}

.shop .acct-next{padding:20px;border-radius:22px;background:radial-gradient(120% 120% at 100% 0,#1f5a40,var(--green));color:#fff;box-shadow:0 14px 34px #0f332640}
.shop .acct-next h2{margin:10px 0 4px;font-size:26px;color:#fff}
.shop .acct-next-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shop .acct-next-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--lime)}
.shop .acct-next-meta{font-size:14px;color:#c9d7cd;text-transform:capitalize}
.shop .acct-next-court{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:15px;font-weight:700}
.shop .acct-next-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.shop .acct-next .shop-btn.primary{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.shop .acct-next .shop-btn.outline{background:#ffffff14;border-color:#ffffff33;color:#fff}
.shop .acct-next-due{margin-top:12px;font-size:13.5px;color:#e6c98f}
.shop .acct-next.empty{background:var(--card);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--shadow)}
.shop .acct-next.empty h2{color:var(--ink)}
.shop .acct-next.empty .acct-next-label{color:var(--lime-deep)}
.shop .acct-next.empty .acct-next-meta{color:var(--ink-3);text-transform:none}
.shop .acct-next.empty .shop-btn.primary{background:var(--green);color:#fff}
.shop .acct-next.empty .shop-btn.outline{background:var(--card);border-color:var(--rule-2);color:var(--ink)}

.shop .acct-stats{margin:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}
.shop .acct-stats>div{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.shop .acct-stats dt{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.shop .acct-stats dt svg{color:var(--lime-deep)}
.shop .acct-stats dd{margin:6px 0 0;font-family:var(--font-display);font-size:22px;font-weight:700}
.shop .acct-stats dd.text{font-size:16px}

.shop .acct-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 10px}
.shop .acct-section-head h2{font-size:18px}
.shop .acct-list{display:flex;flex-direction:column;gap:10px}
.shop .acct-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shop .acct-recent li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.shop .acct-recent li>div{display:flex;flex-direction:column;min-width:0}
.shop .acct-recent span{font-size:13px;color:var(--ink-3)}

.shop .acct-booking{display:flex;gap:12px;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow)}
.shop .acct-booking.cancelled{opacity:.8}
.shop .acct-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:14px;background:var(--green);color:#fff;line-height:1}
.shop .acct-booking.past .acct-date,.shop .acct-booking.cancelled .acct-date{background:var(--sunk);color:var(--ink-2)}
.shop .acct-date b{font-family:var(--font-display);font-size:21px}
.shop .acct-date small{margin-top:3px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--lime)}
.shop .acct-booking.past .acct-date small,.shop .acct-booking.cancelled .acct-date small{color:var(--ink-3)}
.shop .acct-booking-body{flex:1 1;min-width:0}
.shop .acct-booking header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px}
.shop .acct-booking h3{font-size:16px}
.shop .acct-booking header p{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink-2)}
.shop .acct-lines{list-style:none;margin:6px 0 0;padding:0;font-size:13px;color:var(--ink-3)}
.shop .acct-warn{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--red)}
.shop .acct-booking footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px}
.shop .acct-money{display:flex;flex-direction:column}
.shop .acct-money b{font-size:15.5px}
.shop .acct-money small{font-size:12.5px;color:var(--ink-3)}
.shop .acct-actions{display:flex;flex-wrap:wrap;gap:6px}
.shop .acct-actions .shop-btn{min-height:38px;padding:0 12px;font-size:13.5px}

.shop .acct-filter{margin-bottom:2px}
.shop .acct-filter .count{display:inline-grid;place-items:center;min-width:22px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--rule);font-size:12px}
.shop .acct-filter button[aria-pressed=true] .count{background:var(--lime-wash);color:var(--lime-deep)}
.shop .acct-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;text-align:center;border-radius:18px;background:var(--card);border:1px dashed var(--rule-2);color:var(--ink-3)}
.shop .acct-empty svg{color:var(--lime-deep)}

.shop .acct-claim{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--rule)}
.shop .acct-claim h2{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:6px}
.shop .acct-claim h2 svg{color:var(--lime-deep)}
.shop .acct-claim p{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-bottom:12px}
.shop .acct-claim form{display:grid;grid-gap:10px;gap:10px}

/* Isian di area akun memakai label pembungkus; tampilannya sama dengan .field. */
.shop .acct-form,.shop .acct-claim form{display:flex;flex-direction:column;gap:12px}
.shop .acct-form label,.shop .acct-claim label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.shop .acct-form label small{font-size:13px;font-weight:500;color:var(--ink-3)}

.shop .acct-card{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--rule)}
.shop .acct-card h2{font-size:17px;margin-bottom:4px}
.shop .acct-card>p{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-bottom:14px}
.shop .acct-card.danger{border-color:var(--red-edge)}
.shop .acct-google-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.shop .acct-google-row>div{display:flex;flex-direction:column;min-width:0}
.shop .acct-google-row span{font-size:13px;color:var(--ink-3)}
.shop .acct-confirm{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--red-wash)}
.shop .acct-confirm>div{display:flex;flex-wrap:wrap;gap:8px}

/* --- Halaman masuk ------------------------------------------------------- */
.shop .acct-login-page{display:flex;justify-content:center;padding-block:24px 40px}
.shop .acct-login{width:100%;max-width:440px;padding:24px 20px;border-radius:24px;background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow)}
.shop .acct-step{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:999px;background:var(--lime-wash);color:var(--lime-deep);font-size:12.5px;font-weight:800}
.shop .acct-login h1{margin:12px 0 6px;font-size:25px;line-height:1.15}
.shop .acct-login>p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:16px}
.shop .acct-login .acct-signed{padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:13.5px}
.shop .acct-perks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.shop .acct-perks li{display:flex;gap:12px}
.shop .acct-perks svg{flex:none;width:40px;height:40px;padding:10px;border-radius:12px;background:var(--green);color:var(--lime)}
.shop .acct-perks span{display:flex;flex-direction:column;font-size:13.5px;color:var(--ink-3)}
.shop .acct-perks b{font-size:14.5px;color:var(--ink)}
.shop .acct-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;border:1px solid var(--rule-2);border-radius:14px;background:#fff;color:var(--ink);font-size:16px;font-weight:700;box-shadow:0 2px 6px #1118110f}
.shop .acct-google:hover:not(:disabled){border-color:var(--ink-3)}
.shop .acct-fine{display:flex;gap:8px;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.shop .acct-fine svg{flex:none;margin-top:2px;color:var(--lime-deep)}
.shop .acct-guest{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;min-height:44px;border-radius:12px;font-size:14px;font-weight:700;color:var(--green)}
.shop .acct-guest:hover{background:var(--sunk)}

/* --- FAQ dan kebijakan --------------------------------------------------- */
.shop .doc{max-width:760px}
.shop .doc-head{margin:8px 0 20px}
.shop .doc-head h1{margin:8px 0 6px;font-size:28px;line-height:1.15}
.shop .doc-head p{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.shop .doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.shop .doc-toc a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--rule);font-size:14px;font-weight:600;color:var(--green)}
.shop .doc-card{scroll-margin-top:calc(var(--head-h) + 12px);margin-bottom:14px;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--rule)}
.shop .doc-card h2{font-size:19px;margin-bottom:14px}
.shop .doc-card>p{color:var(--ink-2);margin-bottom:14px}
.shop .doc-notes{margin:14px 0 0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.shop .doc-text{margin-top:14px;font-size:14.5px;color:var(--ink-2)}
.shop .doc-more{margin:18px 0;font-size:14.5px;color:var(--ink-2)}
.shop .doc-more a{color:var(--green);font-weight:700;text-decoration:underline}

.shop .tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shop .tiers li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--paper)}
.shop .tiers strong{flex:none;display:grid;place-items:center;width:56px;height:42px;border-radius:10px;font-family:var(--font-display);font-size:16px}
.shop .tiers .full strong{background:var(--lime-wash);color:var(--lime-deep)}
.shop .tiers .part strong{background:var(--amber-wash);color:var(--amber)}
.shop .tiers .none strong{background:var(--red-wash);color:var(--red)}
.shop .tiers b{display:block;font-size:14.5px}
.shop .tiers span{display:block;font-size:13px;line-height:1.45;color:var(--ink-3)}

.shop .faq{display:flex;flex-direction:column;gap:8px}
.shop .faq details{border-radius:16px;background:var(--card);border:1px solid var(--rule);padding:0 16px;transition:box-shadow .2s}
.shop .faq details[open]{box-shadow:var(--shadow)}
.shop .faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 0;font-weight:700;font-size:15px;cursor:pointer;list-style:none}
.shop .faq summary::-webkit-details-marker{display:none}
.shop .faq summary svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--sunk);color:var(--green);transition:transform .2s}
.shop .faq details[open] summary svg{transform:rotate(45deg);background:var(--green);color:var(--lime)}
.shop .faq .rich-text{padding-bottom:16px;font-size:14.5px;color:var(--ink-2)}

.shop .help-card{display:flex;flex-direction:column;gap:14px;margin-top:20px;padding:20px;border-radius:20px;background:radial-gradient(120% 120% at 100% 0,#1f5a40,var(--green));color:#fff}
.shop .help-card h2{color:#fff;font-size:20px}
.shop .help-card p{margin-top:4px;font-size:14px;color:#c9d7cd}
.shop .help-card .actions{display:flex;flex-wrap:wrap;gap:8px}
.shop .help-card .shop-btn.primary{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.shop .help-card .shop-btn.outline{background:#ffffff14;border-color:#ffffff33;color:#fff}

@media (min-width:720px){
  .shop .acct{padding-top:28px}
  .shop .acct-alert{flex-wrap:nowrap}
  .shop .acct-alert em{flex-basis:auto;padding-left:0}
  .shop .acct-head h1{font-size:28px}
  .shop .acct-head .shop-btn{display:inline-flex}
  .shop .acct-tabs{display:inline-flex}
  .shop .acct-tabs a{flex:none;padding:0 18px}
  .shop .acct-stats{grid-template-columns:repeat(4,1fr)}
  .shop .acct-claim form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end}
  .shop .acct-login{padding:32px}
  .shop .doc-head h1{font-size:34px}
  .shop .help-card{flex-direction:row;align-items:center;justify-content:space-between}
}
.shop .acct-filter button{padding:0 8px}

/* Pindah jadwal di kartu booking. */
.shop .acct-move{margin:12px 0;padding:14px;border-radius:14px;background:var(--bg-2,#f4f6f3);border:1px solid var(--rule)}
.shop .acct-move-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}
.shop .acct-move select{min-height:44px;width:100%;padding:0 12px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:500}
.shop .acct-move select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px #0f33261a}
@media (max-width:560px){.shop .acct-move-row{grid-template-columns:1fr}}

/* --- Tab akun dengan hitungan notifikasi ---------------------------------- */
.shop .acct-tabs a{position:relative}
.shop .acct-tab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-style:normal;font-weight:800}
/* Empat tab di ponsel: ikon di atas label agar tidak berdesakan di layar 360px. */
@media (max-width:519px){
  .shop .acct-tabs a{flex-direction:column;gap:2px;min-height:52px;font-size:12px}
  .shop .acct-tab-count{position:absolute;top:4px;left:calc(50% + 6px)}
}

/* --- Kotak masuk notifikasi ------------------------------------------------ */
.shop .acct-inbox{display:flex;flex-direction:column;gap:14px}
.shop .acct-inbox .acct-section-head h2{display:flex;align-items:center;gap:8px}
.shop .acct-inbox-count{white-space:nowrap;padding:2px 8px;border-radius:999px;background:var(--red-wash);color:var(--red);font-size:12px;font-weight:800}
.shop .acct-inbox-tools{display:flex;gap:6px}
.shop .acct-inbox-day h3{margin:4px 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.shop .acct-inbox-day ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);overflow:hidden}
.shop .acct-inbox-day li+li{border-top:1px solid var(--rule)}
.shop .acct-inbox-item{display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.shop .acct-inbox-item:hover{background:var(--paper)}
.shop .acct-inbox-item:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.shop .acct-inbox-item.unread{background:#fbfdf6}
.shop .acct-inbox-item .icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green-wash);color:var(--green)}
.shop .acct-inbox-item.success .icon{background:var(--lime-wash);color:var(--lime-deep)}
.shop .acct-inbox-item.warning .icon{background:var(--amber-wash);color:var(--amber)}
.shop .acct-inbox-item.danger .icon{background:var(--red-wash);color:var(--red)}
.shop .acct-inbox-item .text{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shop .acct-inbox-item .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.shop .acct-inbox-item .top b{font-size:15px}
.shop .acct-inbox-item.unread .top b{font-weight:800}
.shop .acct-inbox-item time{flex:none;font-size:12px;color:var(--ink-3)}
.shop .acct-inbox-item .body{font-size:13.5px;line-height:1.45;color:var(--ink-2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.shop .acct-inbox-item .dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--red)}
.shop .acct-inbox-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;border:1px dashed var(--rule-2);border-radius:var(--radius);background:var(--card);text-align:center;color:var(--ink-3)}
.shop .acct-inbox-empty b{color:var(--ink);font-size:16px}
.shop .acct-inbox-empty p{max-width:340px;font-size:14px}

/* --- Pilihan kanal di profil ----------------------------------------------- */
.shop .acct-prefs{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.shop .acct-pref{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-sm);cursor:pointer;color:var(--green)}
.shop .acct-pref span{flex:1 1;min-width:0;display:flex;flex-direction:column;color:var(--ink)}
.shop .acct-pref small{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.shop .acct-pref input[role=switch]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--rule-2);cursor:pointer;transition:background .15s}
.shop .acct-pref input[role=switch]:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.shop .acct-pref input[role=switch]:checked{background:var(--green)}
.shop .acct-pref input[role=switch]:checked:after{transform:translateX(18px)}
.shop .acct-pref input[role=switch]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.shop .acct-pref input[role=switch]:disabled{opacity:.6}
.shop .acct-pref-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.shop .acct-inbox .acct-section-head{flex-wrap:wrap;gap:8px}

/* --- Member ------------------------------------------------------------- */
.shop .member-pass{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px;background:radial-gradient(120% 120% at 100% 0,#1f5a40,var(--green));color:#fff;box-shadow:0 14px 34px #0f332640}
.shop .member-pass.expired,.shop .member-pass.frozen,.shop .member-pass.pending_approval{background:radial-gradient(120% 120% at 100% 0,#4b524a,#262b26)}
.shop .member-pass-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shop .member-pass-top span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--lime)}
.shop .member-pass code{padding:4px 10px;border-radius:999px;background:#ffffff1f;font-size:13px;font-weight:800;letter-spacing:.06em;color:#fff}
.shop .member-pass h2{margin:6px 0 0;font-size:26px;color:#fff}
.shop .member-pass-perk{font-size:15px;font-weight:700;color:#e3ffa3}
.shop .member-pass dl{display:flex;flex-wrap:wrap;gap:10px 24px;margin:8px 0 4px}
.shop .member-pass dt{font-size:12px;color:#c9d7cd}
.shop .member-pass dd{margin:0;font-size:15px;font-weight:700}
.shop .member-pass small{font-size:12.5px;line-height:1.5;color:#c9d7cd}
.shop .member-plans{display:grid;grid-gap:10px;gap:10px;margin-bottom:14px}
.shop .member-plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 14px 44px;border-radius:14px;border:1.5px solid var(--rule);background:var(--card);cursor:pointer}
.shop .member-plan[data-checked=true]{border-color:var(--green);background:var(--green-wash)}
.shop .member-plan input{position:absolute;left:14px;top:16px;width:18px;height:18px;accent-color:var(--green)}
.shop .member-plan-head{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.shop .member-plan-head strong{white-space:nowrap}
.shop .member-plan-head small{font-weight:500;color:var(--ink-3)}
.shop .member-plan-perk{font-size:14px;font-weight:700;color:var(--lime-deep)}
.shop .member-plan>small{font-size:13px;color:var(--ink-3)}
.shop .acct-form .member-agree{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500}
.shop .member-agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--green)}
.shop .member-fine{font-size:12.5px;color:var(--ink-3);text-align:center}
.shop .member-row-actions{display:flex;flex-wrap:wrap;gap:8px}
.shop .member-claim-fields{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}
.shop .member-invoices{list-style:none;margin:0;padding:0}
.shop .member-invoices li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.shop .member-invoices li:first-child{border-top:0}
.shop .member-invoices span{display:flex;flex-direction:column;min-width:0}
.shop .member-invoices small{font-size:12.5px;color:var(--ink-3)}
.shop .member-terms summary{cursor:pointer;font-size:15px;font-weight:700}
.shop .member-terms p{margin-top:10px;white-space:pre-line;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:519px){.shop .member-claim-fields{grid-template-columns:1fr}}

/* --- Foto profil --------------------------------------------------------- */
.shop .acct-photo{display:flex;align-items:center;gap:16px}
.shop .acct-photo-frame{position:relative;display:inline-flex;flex:none;border-radius:50%;overflow:hidden}
.shop .acct-photo-frame i{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / .45);color:#fff}
.shop .acct-photo>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.shop .acct-photo .shop-btn.ghost{padding:0 8px}
.shop .acct-photo small{flex-basis:100%;font-size:12.5px;color:var(--ink-3)}