button[hidden],
.mobile-nav button[hidden] {
  display: none !important;
}

.master-appointment-sheet{max-width:560px}
.master-appointment-details{display:grid;gap:12px;margin:4px 0 18px}
.master-appointment-details>div,.master-consumables{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}
.master-appointment-details small,.master-consumables-heading small{display:block;margin-bottom:5px;color:var(--muted)}
.master-appointment-details strong{font-size:18px}
.master-appointment-details p{margin:0;white-space:pre-wrap;line-height:1.5}
.master-consumables-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.master-barcode-button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-weight:700}
.master-barcode-button span{font-size:24px;line-height:1}
.master-consumable-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.master-consumable-row div{display:flex;flex-direction:column;gap:3px;min-width:0}
.master-consumable-row small{color:var(--muted)}
.master-consumable-row button{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:transparent;color:#d95768;font-size:24px}
.master-consumables-empty{margin:0;color:var(--muted)}
.master-client-history-button{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--violet-soft);color:var(--text);text-align:left;cursor:pointer;touch-action:manipulation}
.master-client-history-button>svg{width:21px;height:21px;justify-self:center;fill:none;stroke:var(--primary)}
.master-client-history-button span,.master-client-history-button strong,.master-client-history-button small{display:block;min-width:0}
.master-client-history-button strong{font-size:10px}.master-client-history-button small{margin-top:3px;color:var(--muted);font-size:8px}.master-client-history-button>b{color:var(--primary);font-size:18px}.master-client-history-button:disabled{opacity:.45}
.master-scan-sheet{max-width:460px}

body.master-access #voiceAssistantButton,
body.master-access #notificationButton,
body.master-access:not(.telegram-admin-calendar) [data-open-booking],
body.master-access:not(.telegram-admin-calendar) #page-calendar .show-all-toggle,
body.master-access:not(.telegram-admin-calendar) #page-calendar .waitlist-open,
body.master-access:not(.telegram-admin-calendar) #openCancelledAppointments,
body.master-access .mobile-nav button:not([data-page="calendar"]):not([data-page="bar"]):not([data-page="services"]):not([data-page="finance"]):not([data-page="extra-shifts"]):not([data-page="celebrations"]) {
  display: none !important;
}
body.master-access.delegated-catalog-access .mobile-nav button[data-page="services"] {
  display: flex !important;
}

body.master-access:not(.telegram-admin-calendar) #bookingModal .client-compact-tools,
body.master-access:not(.telegram-admin-calendar) #bookingModal .compact-color-picker,
body.master-access:not(.telegram-admin-calendar) #bookingModal .booking-header-master{display:none!important}
body.master-access:not(.telegram-admin-calendar) #bookingModal .service-workflow-section .appointment-section-title small{display:none}
.master-phone-privacy{display:none}
body.master-access:not(.telegram-admin-calendar) #bookingModal .master-phone-privacy{display:block;margin:5px 2px 0;color:var(--muted);font-size:8px;line-height:1.35}
body.master-access #page-finance > :not(#masterFinance){display:none!important}

html.telegram-mini-app.master-access-mode,
html.telegram-mini-app.master-access-mode body {
  overscroll-behavior-y: none;
}

@media (max-width: 880px) {
  html.master-access-mode {
    /* Some Telegram WebViews occasionally report a content safe-area that is
       hundreds of pixels tall. Keep only the real device inset and the space
       required by Telegram's own header buttons. */
    --tg-content-safe-top: 0px !important;
    --tg-content-safe-right: 0px !important;
    --tg-content-safe-bottom: 0px !important;
    --tg-content-safe-left: 0px !important;
    --master-mobile-safe-top: max(68px, env(safe-area-inset-top));
  }

  html.telegram-mini-app.master-access-mode {
    --master-mobile-safe-top: max(128px, env(safe-area-inset-top));
    --appointment-modal-safe-top: max(128px, env(safe-area-inset-top)) !important;
  }

  html.telegram-mini-app.master-access-mode .main > .calendar-duty-admins:not([hidden]) {
    position: absolute;
    z-index: 46;
    top: max(31px, calc(env(safe-area-inset-top) + 27px));
    left: 50%;
    right: auto;
    display: flex !important;
    transform: translateX(-50%);
  }

  html.master-access-mode .sidebar {
    display: none !important;
  }

  body.master-access .main {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  html.telegram-mini-app body.master-access .modal-backdrop.open {
    padding-top: var(--master-mobile-safe-top) !important;
  }

  body.master-access:not(.telegram-admin-calendar) #bookingModal .modal-title-color-row{display:none!important}
  body.master-access:not(.telegram-admin-calendar) #bookingModal .modal-heading-with-colors{padding-top:0}
  body.master-access #bookingModal .client-lookup-row{gap:10px}
  body.master-access #bookingModal .client-lookup-row>.field{margin-bottom:0}

  html.master-access-mode,
  html.master-access-mode body,
  body.master-access .app-shell {
    touch-action: manipulation;
  }

  html.master-access-mode,
  html.master-access-mode body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body.master-access .content,
  body.master-access .page,
  body.master-access #masterFinance,
  body.master-access #extraShifts,
  body.master-access #celebrations {
    min-width: 0;
    max-width: 100%;
  }

  body.master-access .page > :not(.page-heading):not(.calendar-toolbar):not(.calendar-card) {
    width: calc(100% / var(--ui-scale, 1)) !important;
    max-width: none !important;
    zoom: var(--ui-scale, 1) !important;
  }

  /* Android WebView can drop raster tiles from a long document scroller while
     Telegram's native header and the fixed navigation remain visible. Keep the
     viewport itself stationary and scroll the one bounded container shared by
     every master page. iOS and regular mobile browsers retain their old path. */
  html.android-telegram-master-scroll,
  html.android-telegram-master-scroll body.master-access {
    width: 100%;
    height: 100vh;
    height: var(--app-stable-viewport-height, var(--tg-viewport-stable-height, 100vh));
    min-height: 0;
    overflow: hidden !important;
  }

  html.android-telegram-master-scroll body.master-access {
    position: relative;
    padding-bottom: 0 !important;
  }

  html.android-telegram-master-scroll body.master-access .app-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  html.android-telegram-master-scroll body.master-access .main {
    height: 100%;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-anchor: none;
    overscroll-behavior-y: none;
    background: var(--bg);
    transition: none !important;
  }

  html.android-telegram-master-scroll body.master-access .mobile-nav {
    position: absolute !important;
    bottom: calc(10px + max(env(safe-area-inset-bottom), var(--tg-safe-bottom, 0px))) !important;
  }

  html.android-telegram-master-scroll body.master-access .content::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(92px + max(env(safe-area-inset-bottom), var(--tg-safe-bottom, 0px)));
    pointer-events: none;
  }

  html.android-telegram-master-scroll body.master-access .page > .page-heading > div:first-child,
  html.android-telegram-master-scroll body.master-access .page > :not(.page-heading):not(.calendar-toolbar):not(.calendar-card) {
    zoom: normal !important;
  }

  /* In the one-master day view horizontal pinning is unnecessary. Chromium
     otherwise promotes every one of the 56 time cells to its own sticky grid
     stacking context inside .main. Telegram's Android WebView can then drop
     the ordinary raster tiles while scrolling, leaving only the sticky times,
     absolutely positioned empty state and bottom navigation visible. Static
     grid items occupy exactly the same cells without creating those layers. */
  html.android-telegram-master-scroll body.master-access #page-calendar .planner-time,
  html.android-telegram-master-scroll body.master-access #page-calendar .day-corner,
  html.android-telegram-master-scroll body.master-access #page-calendar .master-column-head {
    position: static !important;
    z-index: auto !important;
  }

  /* Telegram Android renders the WebView through a hardware layer. Avoid a
     separate GPU surface for every blurred badge, animated child and filtered
     icon while keeping the same layout, colors and controls. */
  html.android-telegram-master-scroll body.master-access .main *,
  html.android-telegram-master-scroll body.master-access .main *::before,
  html.android-telegram-master-scroll body.master-access .main *::after,
  html.android-telegram-master-scroll body.master-access .mobile-nav,
  html.android-telegram-master-scroll body.master-access .mobile-nav *,
  html.android-telegram-master-scroll body.master-access .mobile-nav *::before,
  html.android-telegram-master-scroll body.master-access .mobile-nav *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    will-change: auto !important;
  }

  html.android-telegram-master-scroll body.master-access.appointment-modal-open .main,
  html.android-telegram-master-scroll body.master-access:has(.modal-backdrop.open) .main {
    overflow-y: hidden !important;
  }

  body.master-access .page,
  body.master-access #weekGrid,
  body.master-access .day-calendar,
  body.master-access .planner-event {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body.master-access .planner-event {
    container-type: normal !important;
    box-shadow: none !important;
  }

  body.master-access .calendar-current-time {
    transition: none !important;
  }
}

@media (max-width: 880px) {
  body.master-access .mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: 68px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(19,20,24,.96);
    box-shadow: 0 10px 28px rgba(7,8,12,.24), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.master-access .mobile-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    font-size: 0;
    transition: background .2s ease,color .2s ease,transform .2s ease;
  }

  body.master-access .mobile-nav button.active {
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  }

  body.master-access .mobile-nav button > span:not(.bar-nav-icon) {
    display: none;
  }

  body.master-access .mobile-nav svg {
    width: 27px;
    height: 27px;
    stroke-width: 1.8;
  }

  body.master-access .mobile-nav .bar-nav-icon {
    font-size: 27px;
  }

  body.master-access .mobile-nav .celebrations-nav img {
    width: 31px;
    height: 31px;
  }

  body.master-access.barista-access:not(.client-access) .mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.master-access.barista-access.delegated-catalog-access:not(.client-access) .mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  body.master-access:not(.barista-access).delegated-catalog-access .mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}

  html.master-access-mode .topbar {
    display: none !important;
  }

  html.master-access-mode .master-appearance-controls {
    display: flex !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 3px !important;
    gap: 2px !important;
    transform: none !important;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-solid);
    box-shadow: none;
  }

  html.master-access-mode .master-appearance-controls > .appearance-button,
  html.master-access-mode .master-appearance-controls .scale-control > .icon-button {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.master-access-mode .content {
    padding-top: var(--master-mobile-safe-top) !important;
  }

  body.master-access #page-calendar .calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.master-access #page-calendar .calendar-view-controls {
    order: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
  }

  body.master-access #page-calendar #calendarModes {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  body.master-access #page-calendar #calendarToday {
    position: static !important;
    right: auto !important;
    padding: 0 10px;
  }

  body.master-access #page-calendar .date-switcher {
    order: 2;
    width: 100%;
    min-height: 54px;
    padding: 6px 8px;
    justify-content: stretch;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-solid);
    box-shadow: 0 5px 16px rgba(29, 25, 70, .06);
  }

  body.master-access #page-calendar .date-switcher strong {
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  body.master-access #page-calendar .calendar-toolbar-actions {
    display: none !important;
  }

  body.master-access #page-calendar .calendar-card {
    margin-top: 0;
    overflow: visible;
  }

  body.master-access #page-calendar .calendar-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }

  body.master-access.telegram-admin-calendar #page-calendar .calendar-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.master-access #page-calendar .day-corner,
  body.master-access #page-calendar .master-column-head {
    position: static !important;
    backdrop-filter: none;
  }
}

.master-calendar-loading-host {
  display: grid !important;
  min-height: 420px;
  min-height: min(58dvh, 520px);
  place-items: center;
}

.master-calendar-loading {
  display: grid;
  justify-items: center;
  gap: 9px;
  max-width: 290px;
  padding: 28px 20px;
  text-align: center;
  color: var(--text);
}

.master-calendar-loading small {
  color: var(--muted);
  line-height: 1.4;
}

.master-calendar-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(101, 87, 235, .18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: master-calendar-spin .8s linear infinite;
}

.master-calendar-load-error button {
  min-height: 42px;
  margin-top: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 750;
}

@keyframes master-calendar-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .master-calendar-spinner { animation-duration: 1.8s; }
}

@media (max-width: 880px) and (hover: none) {
  body.master-access :is(.mobile-nav button,.bar-shop-card,.appointment,.service-card) {transition: none !important}
  body.master-access .bar-shop-card:hover {transform: none}
}

/* Compact mobile shift controls so the readable month grid gets the screen space. */
@media (max-width: 650px) {
  #page-calendar .month-planner {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  #page-calendar .month-weekday {
    min-width: 0;
    height: 28px;
    font-size: 7px;
  }

  #page-calendar .month-day {
    min-width: 0;
    min-height: 96px;
    padding: 4px 3px;
  }

  #page-calendar .month-day > strong {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  #page-calendar .month-count {
    max-width: calc(100% - 24px);
    padding: 2px 3px;
    overflow: hidden;
    font-size: 6px;
    line-height: 16px;
    text-overflow: clip;
    white-space: nowrap;
  }

  #page-calendar .month-appointment {
    margin-top: 3px;
    padding: 3px;
    font-size: 6px;
  }

  #page-calendar .month-day > small {
    margin-top: 3px;
    font-size: 6px;
  }

  body.master-access #shiftPlannerModal .shift-planner-sheet {
    padding: 12px 10px calc(12px + var(--app-safe-bottom));
  }

  body.master-access #shiftPlannerModal .modal-header {
    align-items: center;
    margin-bottom: 8px;
  }

  body.master-access #shiftPlannerModal .modal-header h2 {
    margin-top: 1px;
  }

  body.master-access #shiftPlannerModal .shift-planner-toolbar {
    margin-bottom: 7px;
  }

  body.master-access #shiftPlannerModal .shift-patterns-bar {
    gap: 6px;
    margin-bottom: 7px;
  }

  body.master-access #shiftPlannerModal .shift-time-selector {
    gap: 6px;
    margin-bottom: 7px;
    padding: 7px 8px;
  }

  body.master-access #shiftPlannerModal .shift-time-selector > div small {
    display: none;
  }

  body.master-access #shiftPlannerModal .shift-time-selector input {
    height: 38px;
    font-size: 16px;
  }

  body.master-access #shiftPlannerModal .shift-calendar {
    border-radius: 12px;
  }

  body.master-access #shiftPlannerModal .shift-weekday {
    height: 28px;
    font-size: 9px;
  }

  body.master-access #shiftPlannerModal .shift-day {
    min-height: 62px;
    padding: 5px 3px;
  }

  body.master-access #shiftPlannerModal .shift-day strong {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: 12px;
  }

  body.master-access #shiftPlannerModal .shift-day span {
    margin-top: 4px;
    font-size: 7.5px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
  }

  body.master-access #shiftPlannerModal .shift-legend {
    gap: 10px;
    padding: 6px 2px 8px;
    font-size: 7.5px;
  }

  body.master-access #shiftPlannerModal .shift-legend small {
    display: none;
  }
}