/* Mobile stabilization layer.
   Desktop is frozen; every rule here is limited to phone width only. */
@media (max-width: 760px) {
  :root {
    --sticky-topbar-height: 96px;
  }

  html,
  body,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  .app-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px calc(150px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .topbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 8px 10px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    border-radius: 18px !important;
    position: relative !important;
  }

  .login-layout {
    gap: 10px !important;
  }

  body:has(.login-entry-layout) {
    background:
      radial-gradient(circle at 20% 0%, rgba(147, 169, 54, 0.18), transparent 34%),
      linear-gradient(180deg, #fbfdf7 0%, #f4f8ec 100%) !important;
  }

  body:has(.login-entry-layout) .app-shell {
    padding: 0 10px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  body:has(.login-entry-layout) .bottom-nav {
    display: none !important;
  }

  body:has(.login-entry-layout) .topbar {
    margin: 0 0 10px !important;
    padding: 7px 10px !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 12px 30px rgba(61, 79, 24, 0.1) !important;
  }

  body:has(.login-entry-layout) .topbar-brand {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding-right: 0 !important;
  }

  body:has(.login-entry-layout) .brand-logo {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  body:has(.login-entry-layout) .brand-logo img,
  body:has(.login-entry-layout) .brand-logo svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body:has(.login-entry-layout) #app-title {
    font-size: clamp(1.12rem, 6vw, 1.42rem) !important;
    line-height: 0.98 !important;
  }

  .login-entry-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .login-card,
  .hero-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .login-hero-card {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(61, 79, 24, 0.07) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 251, 0.98), rgba(240, 248, 225, 0.96)),
      radial-gradient(circle at 90% 0%, rgba(147, 169, 54, 0.18), transparent 42%) !important;
  }

  .login-hero-card::before,
  .login-hero-card::after {
    display: none !important;
  }

  .login-access-panel {
    max-width: none !important;
    padding-left: 0 !important;
    gap: 5px !important;
  }

  .login-access-panel .eyebrow {
    font-size: 0.52rem !important;
    letter-spacing: 0.12em !important;
  }

  .login-access-title {
    max-width: 100% !important;
    font-family: var(--font-sans) !important;
    font-size: clamp(0.94rem, 4.55vw, 1.12rem) !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
  }

  .login-access-copy {
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  .login-access-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    margin-top: 1px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .login-access-strip span {
    padding: 5px 4px !important;
    font-size: 0.5rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0.04em !important;
  }

  .login-access-strip b {
    font-size: 0.48rem !important;
  }

  .login-entry-card {
    min-height: 0 !important;
    padding: 13px 14px 13px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 30px rgba(61, 79, 24, 0.1) !important;
  }

  .login-entry-card .eyebrow {
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }

  .login-entry-card h2 {
    margin-top: 5px !important;
    font-size: clamp(1.28rem, 6.45vw, 1.62rem) !important;
    line-height: 1.03 !important;
  }

  .login-entry-card .support-text {
    margin-top: 8px !important;
    max-width: 100% !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .login-entry-card .form-grid {
    gap: 9px !important;
    margin-top: 12px !important;
  }

  .login-entry-card .field {
    gap: 7px !important;
  }

  .login-entry-card .field label {
    margin: 0 !important;
    font-size: 0.88rem !important;
  }

  .login-entry-card input {
    min-height: 45px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 0.96rem !important;
  }

  .login-entry-card .primary-button {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 0.98rem !important;
  }

  .login-help-link {
    width: 100% !important;
    margin-top: -2px !important;
    padding: 2px 0 !important;
    font-size: 0.9rem !important;
  }

  .login-entry-notice {
    margin: -2px 0 0 !important;
    padding: 9px 11px !important;
    border-radius: 14px !important;
    font-size: 0.74rem !important;
    line-height: 1.24 !important;
  }

  .login-entry-note {
    margin-top: 9px !important;
    padding: 9px 11px !important;
    border-radius: 14px !important;
    font-size: 0.74rem !important;
    line-height: 1.24 !important;
  }

  .legal-links,
  .legal-inline-links {
    gap: 7px 10px !important;
    margin-top: 8px !important;
  }

  .legal-page {
    width: calc(100% - 16px) !important;
    padding: 10px 0 22px !important;
  }

  .legal-document-card {
    padding: 18px 15px !important;
    border-radius: 18px !important;
  }

  .legal-document-card h1 {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
  }

  .legal-document-card h2 {
    margin-top: 20px !important;
    font-size: 1.12rem !important;
  }

  .legal-document-card p,
  .legal-document-card li {
    font-size: 0.92rem !important;
    line-height: 1.48 !important;
  }

  .privacy-consent-card {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .privacy-consent-card p,
  .privacy-consent-card li {
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
  }

  .privacy-consent-card details {
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }

  .privacy-consent-check {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  .topbar-brand {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 86px 0 0 !important;
  }

  .brand-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .brand-logo img,
  .brand-logo svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: auto !important;
  }

  .brand-copy {
    min-width: 0 !important;
    gap: 3px !important;
  }

  .topbar .eyebrow {
    font-size: 0.52rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.08em !important;
    white-space: normal !important;
  }

  .topbar h1,
  #app-title {
    max-width: 100% !important;
    font-size: clamp(1.2rem, 6.1vw, 1.56rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  .topbar-tools,
  .header-nav {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  .topbar-tools {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 0 !important;
    position: static !important;
  }

  .header-nav {
    display: block !important;
  }

  .header-nav-buttons {
    display: none !important;
  }

  .header-menu,
  .header-menu-toggle {
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar-tools button,
  .header-nav button,
  .header-menu-trigger,
  .user-chip,
  #header-action {
    min-height: 36px !important;
    padding: 7px 11px !important;
    border-radius: 15px !important;
    font-size: 0.86rem !important;
  }

  #header-action:not(.hidden) {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 4 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 78px !important;
    white-space: nowrap !important;
  }

  .screen-toolbar-card,
  .content-card,
  .month-block,
  .employee-sidebar-card {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .smart-search-bar,
  .employee-search-panel,
  .admin-search-panel,
  #employee-events-top #employee-events-filters > .employee-search-panel:not(.admin-search-panel) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  .smart-search-bar .field,
  .smart-search-bar input[type="search"],
  #event-search,
  #admin-search {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .smart-search-bar input[type="search"],
  #event-search,
  #admin-search {
    height: 46px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    z-index: 24 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-style: solid !important;
    border-radius: 16px !important;
    background: rgba(248, 252, 239, 0.97) !important;
    box-shadow: 0 10px 22px rgba(60, 77, 29, 0.12) !important;
  }

  body.employee-mode:has(#employee-selection-return) #employee-events-list {
    padding-bottom: 108px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return .support-text {
    display: block !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return #jump-to-employee-top-floating {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) #reset-employee-event-filters {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .employee-top-panel,
  .quick-inline-group {
    overflow: visible !important;
  }

  #employee-date-filter .quick-inline-group,
  #admin-date-filter .quick-inline-group,
  .quick-inline-group.employee-top-panel {
    display: grid !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .employee-top-chip-grid,
  .filter-chip-row,
  .compact-chip-row,
  .quick-date-row,
  .quick-month-row {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .quick-date-row,
  .quick-month-row,
  #employee-date-filter .quick-date-row,
  #employee-date-filter .quick-month-row,
  #admin-date-filter .quick-date-row,
  #admin-date-filter .quick-month-row,
  .month-summary-row,
  .sidebar-top-pills,
  .selected-filter-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(142px, 72%) !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .quick-month-row {
    grid-auto-columns: minmax(142px, 48%) !important;
  }

  #employee-date-filter .quick-month-row,
  #admin-date-filter .quick-month-row {
    grid-auto-columns: minmax(142px, 48%) !important;
  }

  #employee-date-filter .quick-month-row,
  #admin-date-filter .quick-month-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-right: 0 !important;
    position: relative !important;
  }

  #employee-date-filter .quick-month-row > *,
  #admin-date-filter .quick-month-row > * {
    flex: 0 0 auto !important;
    width: max-content !important;
  }

  #employee-date-filter .quick-month-group,
  #admin-date-filter .quick-month-group {
    position: relative !important;
  }

  #employee-date-filter .quick-month-group::after,
  #admin-date-filter .quick-month-group::after {
    content: "→" !important;
    position: absolute !important;
    right: 2px !important;
    bottom: 8px !important;
    z-index: 3 !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(111, 129, 31, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(248, 252, 239, 0.96) !important;
    color: var(--olive-900) !important;
    box-shadow: 0 10px 22px rgba(60, 77, 29, 0.14) !important;
    pointer-events: none !important;
  }

  #employee-date-filter .quick-month-group::before,
  #admin-date-filter .quick-month-group::before {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    width: 30px !important;
    height: 52px !important;
    background: linear-gradient(90deg, rgba(248, 252, 239, 0), rgba(248, 252, 239, 0.96) 62%) !important;
    pointer-events: none !important;
  }

  #employee-date-filter .quick-month-group::after,
  #admin-date-filter .quick-month-group::after {
    display: none !important;
    content: "" !important;
  }

  .month-summary-row,
  .sidebar-top-pills,
  .selected-filter-row {
    display: grid !important;
    gap: 8px !important;
    margin-inline: -2px !important;
    padding-inline: 2px !important;
  }

  .quick-date-row::-webkit-scrollbar,
  .quick-month-row::-webkit-scrollbar,
  .month-summary-row::-webkit-scrollbar,
  .sidebar-top-pills::-webkit-scrollbar,
  .selected-filter-row::-webkit-scrollbar {
    display: none !important;
  }

  .quick-date-row > *,
  .quick-month-row > *,
  .month-summary-row > *,
  .sidebar-top-pills > *,
  .selected-filter-row > * {
    scroll-snap-align: start !important;
  }

  .date-option-chip,
  .filter-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #employee-date-filter .quick-month-row > .filter-chip,
  #admin-date-filter .quick-month-row > .filter-chip {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 132px !important;
    max-width: none !important;
    min-height: 50px !important;
    padding: 10px 13px !important;
    border-radius: 18px !important;
    font-size: 0.88rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  .date-option-chip {
    min-height: 92px !important;
  }

  .filter-chip {
    min-height: 52px !important;
  }

  .highlight-pill {
    white-space: nowrap !important;
  }

  .mobile-search-results-panel {
    display: grid !important;
    gap: 6px !important;
    margin: 8px 0 10px !important;
    padding: 8px !important;
    border: 1px solid rgba(111, 129, 31, 0.16) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 229, 0.92)) !important;
    box-shadow: 0 12px 26px rgba(60, 77, 29, 0.08) !important;
  }

  .mobile-search-results-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .mobile-search-results-list {
    display: grid !important;
    gap: 6px !important;
  }

  .mobile-search-result-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(111, 129, 31, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .mobile-search-result-card .booking-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .mobile-search-result-card .stage-pill,
  .mobile-search-result-card .highlight-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.72rem !important;
  }

  .mobile-search-result-card .highlight-pill {
    display: none !important;
  }

  .mobile-search-result-card .booking-pill-row::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-search-result-card h3,
  .mobile-search-result-card .mobile-search-title {
    display: grid !important;
    gap: 1px !important;
    margin: 5px 0 1px !important;
    line-height: 1.08 !important;
    overflow: visible !important;
  }

  .mobile-search-title-main,
  .mobile-search-title-detail {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  .mobile-search-title-main {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
  }

  .mobile-search-title-detail {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--olive-900) !important;
    opacity: 0.88 !important;
  }

  .mobile-search-result-card .support-text {
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-search-result-card > button {
    width: auto !important;
    max-width: 112px !important;
    min-width: 88px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
  }

  .mobile-search-more-note {
    padding: 6px 8px !important;
    color: var(--muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body.employee-mode:has(#employee-search-results-panel) #employee-events-list .employee-search-grid {
    display: none !important;
  }

  .split-layout,
  .employee-overview-stack,
  .employee-booking-status-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .split-layout > *,
  .employee-overview-stack > *,
  .employee-booking-status-layout > *,
  .content-card,
  .screen-toolbar-card,
  .month-block,
  .event-card,
  .booking-card,
  .employee-sidebar-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .employee-sidebar-workspace,
  .employee-sidebar-card {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.employee-mode:has(#employee-events-top) .split-layout > aside {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-top {
    gap: 6px !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-top .support-text,
  body.employee-mode:has(#employee-bookings-top) #back-to-events,
  body.employee-mode:has(#employee-bookings-top) #bookings-shortcut-events,
  body.employee-mode:has(#employee-bookings-top) .content-card > .inline-note,
  body.employee-mode:has(#employee-bookings-top) .mini-card .support-text {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .content-card > .mini-card {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .content-card > .mini-card .content-head {
    display: block !important;
  }

  body.employee-mode:has(#employee-bookings-top) .content-card > .mini-card h3 {
    margin-bottom: 0 !important;
    font-size: 1.12rem !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
    margin: 8px 0 12px !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters .filter-chip-row {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters .filter-chip-row::-webkit-scrollbar {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters .filter-chip {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 8px !important;
    scroll-snap-align: none !important;
    font-size: 0.86rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body.employee-mode:has(#employee-bookings-top) .screen-return-strip {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .month-block .month-summary-row {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .employee-booking-status-layout {
    gap: 10px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .employee-booking-status-layout > section,
  body.employee-mode:has(#employee-bookings-top) .employee-booking-status-layout > article {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .employee-booking-status-layout > section > .content-head,
  body.employee-mode:has(#employee-bookings-top) .employee-booking-status-layout > article > .content-head {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card {
    padding: 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card > .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: start !important;
    margin: 0 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 1px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-pill-row::-webkit-scrollbar {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .status-pill,
  body.employee-mode:has(#employee-bookings-top) .booking-card .stage-pill {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    padding: 5px 7px !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card h3 {
    margin: 7px 0 0 !important;
    font-size: clamp(1rem, 4.8vw, 1.22rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-items: start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    color: var(--muted) !important;
    font-weight: 700 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-facts-grid {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 6px 10px !important;
    margin-top: 0 !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(111, 129, 31, 0.12) !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-card {
    display: contents !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-label {
    align-self: baseline !important;
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-card strong {
    font-size: 0.92rem !important;
    line-height: 1.22 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-seats strong {
    font-size: 1rem !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions > * {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.12 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions [data-booking-open-event] {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions [data-booking-action="edit"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions [data-booking-action="cancel"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions [data-booking-action="confirm-offer"],
  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions [data-booking-action="decline-offer"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card-compact-offered .booking-card-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #employee-events-list,
  .month-list,
  .events-grid,
  .day-events-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-events-list {
    gap: 10px !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-month-list .month-block {
    padding: 14px !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-month-list .month-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-month-list .month-head h2 {
    font-size: 1.35rem !important;
    line-height: 1.05 !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-month-list .month-head .support-text,
  body.employee-mode:has(#employee-events-top) .employee-month-list > .month-block > .month-summary-row {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) .day-group {
    display: grid !important;
    gap: 8px !important;
  }

  body.employee-mode:has(#employee-events-top) .day-group h3,
  body.employee-mode:has(#employee-events-top) .day-head h3 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  body.employee-mode:has(#employee-events-top) .day-events-grid .event-card,
  body.employee-mode:has(#employee-events-top) .employee-search-grid .event-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 20px !important;
    display: grid !important;
    gap: 9px !important;
    justify-content: stretch !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 1px !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .pill-row::-webkit-scrollbar {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .status-pill,
  body.employee-mode:has(#employee-events-top) .event-card .stage-pill {
    flex: 0 0 auto !important;
    padding: 6px 9px !important;
    font-size: 0.75rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card h3 {
    margin: 0 !important;
    font-size: clamp(1.16rem, 5.5vw, 1.42rem) !important;
    line-height: 1.05 !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .event-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
    margin-top: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .inline-note {
    margin-top: 0 !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .card-highlight-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .card-highlight-row::-webkit-scrollbar {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .highlight-pill {
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .quick-card-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  body.employee-mode:has(#employee-events-top) .event-card .quick-card-actions > * {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    border-radius: 18px !important;
    font-size: 0.95rem !important;
  }

  .bottom-nav {
    left: 18px !important;
    right: 18px !important;
    bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 18px !important;
    z-index: 2147483001 !important;
    background: rgba(48, 37, 31, 0.9) !important;
    box-shadow: 0 10px 24px rgba(42, 31, 24, 0.24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    contain: paint !important;
  }

  .bottom-nav button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 7px !important;
    border-radius: 14px !important;
    font-size: 0.88rem !important;
    line-height: 1.05 !important;
  }

  .sidebar-floating-actions,
  .admin-floating-actions {
    display: none !important;
  }

  body:has(.employee-booking-modal-card) {
    overflow: hidden !important;
  }

  body:has(.employee-booking-modal-card) .bottom-nav {
    display: none !important;
  }

  .modal-root:has(.employee-booking-modal-card) {
    align-items: stretch !important;
    place-items: stretch !important;
    padding: 8px !important;
    z-index: 2147483100 !important;
  }

  .modal-root:has(.message-modal-card),
  .modal-root:has(.confirm-modal-card) {
    display: grid !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 18px !important;
    z-index: 2147483200 !important;
  }

  .message-modal-card,
  .confirm-modal-card {
    width: min(100%, 340px) !important;
    max-height: calc(100dvh - 36px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .message-modal-card h2,
  .confirm-modal-card h2 {
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
    margin: 6px 0 !important;
  }

  .message-modal-card .support-text,
  .confirm-modal-card .support-text {
    font-size: 0.96rem !important;
    line-height: 1.35 !important;
  }

  .message-modal-card .button-row,
  .confirm-modal-card .button-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .message-modal-card #close-message-modal {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 18px !important;
  }

  .confirm-modal-card #confirm-modal-accept,
  .confirm-modal-card #confirm-modal-cancel {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 18px !important;
  }

  body:has(.admin-create-event-modal-card) {
    overflow: hidden !important;
  }

  .modal-root:has(.admin-create-event-modal-card) {
    align-items: stretch !important;
    place-items: stretch !important;
    padding: 8px !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    z-index: 2147483100 !important;
  }

  .admin-create-event-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 0 14px 14px !important;
    border-radius: 22px !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .admin-create-event-modal-card .admin-create-event-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 -14px 12px !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid rgba(111, 129, 31, 0.14) !important;
    background: linear-gradient(180deg, rgba(248, 251, 240, 1), rgba(242, 248, 229, 0.98)) !important;
    box-shadow: 0 10px 22px rgba(60, 77, 29, 0.08) !important;
  }

  .admin-create-event-modal-card .admin-create-event-modal-header .eyebrow {
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  .admin-create-event-modal-card .admin-create-event-modal-header h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(1.34rem, 7vw, 1.72rem) !important;
    line-height: 1 !important;
  }

  .admin-create-event-modal-card #close-event-modal {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
  }

  .admin-create-event-modal-card #event-form {
    gap: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .admin-create-event-modal-card #event-form .field {
    gap: 6px !important;
  }

  .admin-create-event-modal-card #event-form input,
  .admin-create-event-modal-card #event-form select {
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .admin-create-event-modal-card #event-form .button-row {
    margin-top: 2px !important;
  }

  .admin-create-event-modal-card #event-form .primary-button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 18px !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  .employee-booking-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 22px !important;
    padding: 0 14px 0 !important;
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: 98px !important;
    scroll-padding-bottom: 104px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    margin: 0 -14px 8px !important;
    padding: 8px 14px 10px !important;
    background:
      linear-gradient(180deg, rgba(250, 254, 242, 0.99), rgba(244, 250, 232, 0.96));
    border-bottom: 1px solid rgba(111, 129, 31, 0.16) !important;
    box-shadow: 0 10px 22px rgba(60, 77, 29, 0.1) !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .modal-header-actions {
    position: static !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .employee-booking-modal-card #close-booking-form {
    width: auto !important;
    min-width: 42px !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .eyebrow {
    font-size: 0.62rem !important;
    line-height: 1.05 !important;
    margin: 0 0 3px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head h2 {
    margin: 0 !important;
    font-size: clamp(1.26rem, 6.6vw, 1.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .support-text {
    margin-top: 4px !important;
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  .employee-booking-modal-card .employee-booking-event-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .employee-booking-modal-card .employee-booking-event-meta .stage-pill {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
  }

  .employee-booking-modal-card .mini-card {
    padding: 12px !important;
    border-radius: 18px !important;
    margin-top: 10px !important;
  }

  .employee-booking-modal-card > .mini-card .support-text {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  .employee-booking-modal-card #booking-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }

  .employee-booking-modal-card #booking-form .field:has(#surname) {
    order: 1 !important;
  }

  .employee-booking-modal-card #booking-form .field:has(#seats) {
    order: 2 !important;
  }

  .employee-booking-modal-card.has-quick-seats #booking-form .field:has(#seats) {
    display: none !important;
  }

  .employee-booking-modal-card #booking-form .field:has(.compact-chip-row) {
    order: 3 !important;
    display: grid !important;
  }

  .employee-booking-modal-card #booking-form > .mini-card {
    order: 5 !important;
  }

  .employee-booking-modal-card #booking-form > details.accordion-card {
    order: 4 !important;
  }

  .employee-booking-modal-card #booking-form > .form-action-bar {
    order: 6 !important;
  }

  .employee-booking-modal-card #booking-form .field {
    gap: 6px !important;
  }

  .employee-booking-modal-card #booking-form label {
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
  }

  .employee-booking-modal-card #surname {
    min-height: 48px !important;
    font-size: 1.08rem !important;
  }

  .employee-booking-modal-card #seats {
    min-height: 52px !important;
    font-size: 1.08rem !important;
  }

  .employee-booking-modal-card .info-list {
    display: grid !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }

  .employee-booking-modal-card .info-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 5px 0 !important;
    font-size: 0.86rem !important;
  }

  .employee-booking-modal-card .info-row span:first-child {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .employee-booking-modal-card #employee-booking-summary-note {
    display: none !important;
  }

  .employee-booking-modal-card .compact-chip-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .employee-booking-modal-card .compact-chip-row .filter-chip {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 6px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
  }

  .employee-booking-modal-card details.accordion-card {
    border-radius: 18px !important;
    overflow: visible !important;
    scroll-margin-top: 150px !important;
  }

  .employee-booking-modal-card .accordion-summary {
    min-height: 46px !important;
    padding: 11px 14px !important;
  }

  .employee-booking-modal-card .accordion-body {
    padding: 10px 12px 12px !important;
  }

  .employee-booking-modal-card #comment {
    min-height: 128px !important;
    scroll-margin-top: 152px !important;
  }

  .employee-booking-modal-card > .inline-note:last-child {
    display: none !important;
  }

  .employee-booking-modal-card .form-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 14 !important;
    margin: 0 -14px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    background:
      linear-gradient(180deg, rgba(244, 250, 232, 0.25), rgba(238, 247, 220, 0.98) 34%, rgba(238, 247, 220, 1));
    box-shadow: 0 -12px 22px rgba(60, 77, 29, 0.11) !important;
  }

  .employee-booking-modal-card .form-action-bar .primary-button {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
  }

  /* Employee booking modal: compact, tap-first mobile layout. */
  .employee-booking-modal-card {
    border-radius: 20px !important;
    padding-inline: 12px !important;
    scroll-padding-top: 82px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head {
    margin: 0 -12px 8px !important;
    padding: 7px 12px 9px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .modal-header-actions {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    margin: 0 !important;
    justify-content: flex-end !important;
  }

  .employee-booking-modal-card #close-booking-form {
    min-width: 38px !important;
    min-height: 32px !important;
    padding: 5px 12px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .eyebrow {
    margin-right: 46px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head h2 {
    max-width: calc(100% - 42px) !important;
    font-size: clamp(1.12rem, 5.8vw, 1.48rem) !important;
    line-height: 1.02 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .support-text {
    font-size: 0.8rem !important;
    line-height: 1.12 !important;
  }

  .employee-booking-modal-card .employee-booking-event-meta .stage-pill {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
  }

  .employee-booking-modal-card #booking-form {
    gap: 7px !important;
  }

  .employee-booking-modal-card #booking-form > .mini-card {
    order: 4 !important;
  }

  .employee-booking-modal-card #booking-form > details.accordion-card {
    order: 5 !important;
  }

  .employee-booking-modal-card .mini-card {
    padding: 10px !important;
    border-radius: 16px !important;
    margin-top: 8px !important;
  }

  .employee-booking-modal-card #booking-form label {
    font-size: 0.9rem !important;
  }

  .employee-booking-modal-card #surname {
    min-height: 46px !important;
    font-size: 1rem !important;
  }

  .employee-booking-modal-card .info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  .employee-booking-modal-card .info-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    align-items: start !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    box-shadow: inset 0 0 0 1px rgba(111, 129, 31, 0.1) !important;
  }

  .employee-booking-modal-card .info-row span:first-child {
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .employee-booking-modal-card .info-row span:last-child {
    min-width: 0 !important;
    color: var(--olive-900) !important;
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .employee-booking-modal-card .employee-booking-result-row {
    grid-column: 1 / -1 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 42px !important;
    background: linear-gradient(135deg, rgba(246, 251, 235, 0.96), rgba(255, 255, 255, 0.92)) !important;
  }

  .employee-booking-modal-card .employee-booking-result-row span:first-child {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .employee-booking-modal-card .employee-booking-result-row span:last-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
    font-size: 0.88rem !important;
    line-height: 1.12 !important;
  }

  .employee-booking-modal-card .compact-chip-row .filter-chip {
    min-height: 40px !important;
  }

  .employee-booking-modal-card details.accordion-card {
    border-radius: 16px !important;
    scroll-margin-top: 118px !important;
  }

  .employee-booking-modal-card .accordion-summary {
    min-height: 44px !important;
    padding: 10px 12px !important;
    cursor: text !important;
  }

  .employee-booking-modal-card .accordion-body {
    padding: 8px 10px 10px !important;
  }

  .employee-booking-modal-card #comment {
    min-height: 104px !important;
    scroll-margin-top: 96px !important;
  }

  .employee-booking-modal-card .form-action-bar {
    margin-inline: -12px !important;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  .employee-booking-modal-card .form-action-bar .primary-button {
    min-height: 50px !important;
    border-radius: 17px !important;
    font-size: 0.98rem !important;
  }

  /* Final mobile navigation/search model: one destination button, no bottom tab bar. */
  body.employee-mode .app-shell {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  body.employee-mode .bottom-nav {
    display: none !important;
  }

  .mobile-view-switch-row {
    display: flex !important;
    justify-content: flex-end !important;
    margin: -2px 0 8px !important;
    pointer-events: none !important;
  }

  .mobile-view-switch-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(92, 113, 24, 0.96), rgba(60, 77, 18, 0.96)) !important;
    color: #fffef8 !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(42, 55, 16, 0.22) !important;
    pointer-events: auto !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  body.employee-mode:has(#employee-events-top) .mobile-view-switch-button::before {
    content: "→";
    margin-right: 6px;
  }

  body.employee-mode:has(#employee-bookings-top) .mobile-view-switch-button::before {
    content: "←";
    margin-right: 6px;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 45 !important;
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(111, 129, 31, 0.18) !important;
    border-radius: 16px !important;
    background: #fbfff3 !important;
    box-shadow: 0 10px 20px rgba(60, 77, 29, 0.1) !important;
    pointer-events: auto !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return #jump-to-employee-top-floating {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return .support-text {
    display: block !important;
    min-width: 0 !important;
    color: var(--olive-900) !important;
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.employee-mode:has(#employee-selection-return) #employee-date-filter {
    display: none !important;
  }

  body.employee-mode:has(#employee-selection-return) #employee-events-top {
    padding-bottom: 4px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return::before {
    content: "Фильтр";
    display: block !important;
    grid-column: 1 / -1 !important;
    color: var(--olive-900) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  body.employee-mode:has(#employee-events-top) #reset-employee-event-filters {
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(92, 113, 24, 0.96), rgba(60, 77, 18, 0.96)) !important;
    color: #fffef8 !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(60, 77, 29, 0.08) !important;
    pointer-events: auto !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-selection-return::before {
    content: "" !important;
    display: none !important;
  }

  body.employee-mode:has(#employee-selection-return) #employee-events-list {
    padding-bottom: 0 !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    gap: 9px !important;
    overflow: visible !important;
    padding-right: 0 !important;
    scroll-snap-type: none !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter {
    gap: 10px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-inline-group {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-inline-head,
  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-group > .quick-inline-label {
    margin-bottom: 8px !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-date-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(212px, 82%) !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-right: 12px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-date-row > .date-option-chip {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 86px !important;
    padding: 10px 11px !important;
    border-radius: 17px !important;
    scroll-snap-align: start !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .date-option-preview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.08 !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-row > [data-month-filter="all"] {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-group::before,
  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-group::after {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-row > .filter-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 12px 12px !important;
    border-radius: 18px !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-month-row > .filter-chip.active,
  body.employee-mode:has(#employee-events-top) #employee-date-filter .quick-date-row > .date-option-chip.active {
    border-color: rgba(92, 113, 24, 0.42) !important;
    background:
      linear-gradient(180deg, rgba(229, 245, 190, 0.98), rgba(203, 225, 143, 0.96)),
      radial-gradient(circle at top right, rgba(92, 113, 24, 0.16), transparent 46%) !important;
    box-shadow: 0 12px 24px rgba(60, 77, 29, 0.14) !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-flyout {
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(111, 129, 31, 0.18) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 232, 0.96)) !important;
    box-shadow: 0 14px 30px rgba(60, 77, 29, 0.1) !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-flyout-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-flyout-label {
    min-width: 0 !important;
    text-align: center !important;
    font-size: 0.96rem !important;
    font-weight: 900 !important;
    color: var(--olive-900) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-nav-button {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-weekdays-row,
  body.employee-mode:has(#employee-events-top) .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-weekdays-row {
    margin-bottom: 6px !important;
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-day-button,
  body.employee-mode:has(#employee-events-top) .calendar-day-filler {
    min-width: 0 !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-day-button {
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
  }

  body.employee-mode:has(#employee-events-top) .calendar-day-button.is-selected {
    outline: 2px solid rgba(60, 77, 18, 0.36) !important;
    outline-offset: 2px !important;
  }

  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) .search-title-dropdown,
  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) #employee-events-list,
  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) .content-card > #employee-events-list {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) #employee-date-filter,
  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) .content-card > .support-text,
  body.employee-mode:has(#employee-events-top .employee-search-panel.is-searching) .content-card > .mobile-search-results-panel {
    display: none !important;
  }

  body.employee-mode:has(#employee-search-results-panel) .mobile-search-results-panel {
    display: grid !important;
    margin-top: 8px !important;
  }

  body.employee-mode .content-card > .mobile-search-results-panel {
    display: none !important;
  }

  body.employee-mode .employee-search-panel .mobile-search-results-inline {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(111, 129, 31, 0.16) !important;
    border-radius: 18px !important;
    background: #fbfff3 !important;
    box-shadow: 0 12px 28px rgba(60, 77, 29, 0.1) !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.employee-mode .employee-search-panel .mobile-search-results-inline .mobile-search-results-head {
    position: static !important;
    top: auto !important;
    z-index: 2 !important;
    display: flex !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 0 6px !important;
    background: #fbfff3 !important;
  }

  body.employee-mode .employee-search-panel .mobile-search-results-inline .mobile-search-results-head .eyebrow,
  body.employee-mode .employee-search-panel .mobile-search-results-inline .mobile-search-results-head .support-text {
    display: none !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching {
    position: relative !important;
    gap: 0 !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching .field {
    margin: 0 !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching #event-search {
    padding-right: 46px !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching .smart-search-actions {
    position: absolute !important;
    top: 34px !important;
    right: 10px !important;
    z-index: 3 !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching #clear-event-search {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching #clear-event-search::before {
    content: "×";
    font-size: 1.28rem;
    line-height: 1;
    color: var(--olive-900);
  }

  body.employee-mode .employee-search-panel .mobile-search-results-inline [data-mobile-search-close] {
    display: none !important;
  }

  body.employee-mode .employee-search-panel .mobile-search-results-inline .mobile-search-results-list {
    align-content: start !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body.employee-mode:has(#employee-search-results-panel) .mobile-search-result-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.employee-mode:has(#employee-search-results-panel) .mobile-search-result-card > button {
    width: 100% !important;
    max-width: none !important;
  }

  body.employee-mode:has(#employee-events-top) .employee-search-panel.is-searching #clear-event-search::before {
    content: "×" !important;
  }
  /* Final mobile pass: booking form and My bookings only. */
  body.employee-mode:has(.employee-booking-modal-card) .modal-root {
    align-items: stretch !important;
    padding: 8px !important;
  }

  .employee-booking-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    scroll-padding-top: 76px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 16 !important;
    margin: 0 -10px 7px !important;
    padding: 7px 10px 8px !important;
    border-radius: 18px 18px 14px 14px !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head h2 {
    max-width: calc(100% - 44px) !important;
    font-size: clamp(1.02rem, 5.15vw, 1.34rem) !important;
    line-height: 1.02 !important;
    -webkit-line-clamp: 2 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .support-text {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    margin-top: 3px !important;
    font-size: 0.76rem !important;
    line-height: 1.08 !important;
  }

  .employee-booking-modal-card .employee-booking-sticky-head .eyebrow {
    font-size: 0.58rem !important;
    margin-bottom: 2px !important;
  }

  .employee-booking-modal-card #close-booking-form {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }

  .employee-booking-modal-card #booking-form {
    gap: 6px !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .employee-booking-modal-card #booking-form .field {
    gap: 4px !important;
  }

  .employee-booking-modal-card #booking-form label {
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
  }

  .employee-booking-modal-card #surname,
  .employee-booking-modal-card #seats {
    min-height: 43px !important;
    padding-block: 8px !important;
    font-size: 0.98rem !important;
  }

  .employee-booking-modal-card .compact-chip-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .employee-booking-modal-card .compact-chip-row .filter-chip {
    min-height: 38px !important;
    padding: 7px 5px !important;
    font-size: 0.96rem !important;
  }

  .employee-booking-modal-card .mini-card {
    margin-top: 4px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  .employee-booking-modal-card .mini-card .eyebrow {
    font-size: 0.6rem !important;
    line-height: 1.05 !important;
  }

  .employee-booking-modal-card .info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }

  .employee-booking-modal-card .info-row {
    min-height: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
  }

  .employee-booking-modal-card .info-row span:first-child {
    font-size: 0.62rem !important;
    line-height: 1.06 !important;
  }

  .employee-booking-modal-card .info-row span:last-child {
    font-size: 0.88rem !important;
    line-height: 1.08 !important;
  }

  .employee-booking-modal-card .employee-booking-result-row {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
    min-height: 44px !important;
    align-items: center !important;
  }

  .employee-booking-modal-card .employee-booking-result-row span:last-child {
    text-align: right !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.84rem !important;
    line-height: 1.14 !important;
  }

  .employee-booking-modal-card details.accordion-card {
    margin-top: 0 !important;
    border-radius: 15px !important;
    scroll-margin-top: 84px !important;
  }

  .employee-booking-modal-card .accordion-summary {
    min-height: 40px !important;
    padding: 9px 11px !important;
  }

  .employee-booking-modal-card .accordion-body {
    padding: 7px 9px 9px !important;
  }

  .employee-booking-modal-card #comment {
    min-height: 96px !important;
    scroll-margin-top: 84px !important;
    font-size: 0.96rem !important;
  }

  .employee-booking-modal-card .form-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 18 !important;
    margin-inline: -10px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .employee-booking-modal-card .form-action-bar .primary-button {
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .employee-booking-modal-card #cancel-form {
    display: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters {
    margin: 7px 0 10px !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters .filter-chip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.employee-mode:has(#employee-bookings-top) #employee-bookings-filters .filter-chip {
    min-height: 40px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card {
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 7px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .status-pill,
  body.employee-mode:has(#employee-bookings-top) .booking-card .stage-pill {
    width: auto !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card h3 {
    margin-top: 6px !important;
    font-size: clamp(1rem, 4.35vw, 1.16rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    text-wrap: auto !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-top: 3px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-facts-grid {
    display: grid !important;
    grid-template-columns: minmax(72px, 0.5fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-card {
    min-height: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.58) !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-surname,
  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-position {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-seats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 3px !important;
    grid-column: auto !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-wide,
  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-position {
    grid-column: auto !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-comment {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-comment .booking-fact-label {
    text-align: left !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-label {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-card strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: 0.86rem !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-surname strong,
  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-position strong {
    display: inline-block !important;
    margin-top: 0 !important;
    line-height: 1.05 !important;
    text-align: right !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-fact-seats strong {
    display: block !important;
    margin-top: 0 !important;
    text-align: left !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 4px !important;
  }

  body.employee-mode:has(#employee-bookings-top) .booking-card .booking-card-actions > * {
    min-height: 40px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
  }
  /* Admin mobile stage 1: events home, matching employee mobile patterns. */
  body.admin-mode:has(#admin-events-top) .app-shell {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  body.admin-mode:has(#admin-events-top) .bottom-nav,
  body.admin-mode:has(#admin-events-top) .admin-sidebar,
  body.admin-mode:has(#admin-events-top) .screen-return-strip {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .topbar {
    padding: 8px 10px 9px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }

  body.admin-mode:has(#admin-events-top) .topbar-brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 76px !important;
  }

  body.admin-mode:has(#admin-events-top) #app-title {
    font-size: clamp(1.08rem, 5.35vw, 1.42rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin-mode:has(#admin-events-top) .topbar .eyebrow {
    font-size: 0.5rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-toggle {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-size: 0.84rem !important;
  }

  body.admin-mode:has(#admin-events-top) #header-action:not(.hidden) {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 5 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 78px !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    border-radius: 15px !important;
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) .topbar-tools {
    height: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.admin-mode:has(#admin-events-top) .header-nav {
    display: flex !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-toggle {
    width: auto !important;
    min-width: 0 !important;
    max-width: 86px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    border-color: rgba(111, 129, 31, 0.18) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 14px rgba(60, 77, 29, 0.06) !important;
    overflow: hidden !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-toggle span:first-child {
    display: inline-flex !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-toggle span:first-child::before {
    content: "Меню" !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-toggle::after {
    margin-left: 6px !important;
    font-size: 0.76rem !important;
    opacity: 0.72 !important;
  }

  body.admin-mode:has(#admin-events-top) .header-menu-badge {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 0.72rem !important;
  }

  body.admin-mode:has(#admin-events-top) .split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) .content-card {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    margin-bottom: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-top .eyebrow {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-top h2 {
    margin: 2px 0 0 !important;
    font-size: clamp(1.26rem, 6vw, 1.58rem) !important;
    line-height: 1 !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-top .support-text {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-top #create-event {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-mobile-create-event-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: auto !important;
    max-width: 190px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: -44px 0 8px auto !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(60, 77, 29, 0.12) !important;
    position: relative !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card {
    padding: 10px !important;
    border-radius: 17px !important;
    margin: 8px 0 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card .eyebrow {
    font-size: 0.62rem !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card h3 {
    margin-top: 4px !important;
    font-size: 0.98rem !important;
    line-height: 1.12 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card .support-text {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-priority-card button {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-filters {
    display: grid !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    margin: 8px 0 12px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter {
    display: grid !important;
    gap: 9px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-inline-group {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-inline-head,
  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-month-group > .quick-inline-label {
    margin-bottom: 7px !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-date-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(212px, 82%) !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-right: 10px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-date-row > .date-option-chip {
    width: auto !important;
    min-height: 82px !important;
    padding: 10px 11px !important;
    border-radius: 17px !important;
    scroll-snap-align: start !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .date-option-preview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-month-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-right: 0 !important;
    scroll-snap-type: none !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-month-row > .filter-chip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 54px !important;
    padding: 11px 10px !important;
    border-radius: 17px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-month-group::before,
  body.admin-mode:has(#admin-events-top) #admin-date-filter .quick-month-group::after {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel .field {
    margin: 0 !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-search {
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel.is-searching {
    position: relative !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel.is-searching #admin-search {
    padding-right: 46px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel.is-searching .smart-search-actions {
    position: absolute !important;
    top: 29px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    display: block !important;
    pointer-events: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel.is-searching #clear-admin-search {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    pointer-events: auto !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-search-panel.is-searching #clear-admin-search::before {
    content: "\00d7" !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
    color: var(--olive-900) !important;
  }

  body.admin-mode:has(#admin-events-top .admin-search-panel.is-searching) #admin-date-filter,
  body.admin-mode:has(#admin-events-top .admin-search-panel.is-searching) #admin-events-list,
  body.admin-mode:has(#admin-events-top .admin-search-panel.is-searching) #admin-selection-return,
  body.admin-mode:has(#admin-events-top .admin-search-panel.is-searching) .admin-title-dropdown {
    display: none !important;
  }

  body.admin-mode .admin-search-panel .mobile-search-results-inline {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 10px !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(111, 129, 31, 0.16) !important;
    border-radius: 18px !important;
    background: #fbfff3 !important;
    box-shadow: 0 12px 28px rgba(60, 77, 29, 0.1) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-mode .admin-search-panel .mobile-search-results-inline .mobile-search-results-head {
    display: none !important;
  }

  body.admin-mode .admin-search-panel .mobile-search-results-inline .mobile-search-results-list {
    align-content: start !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body.admin-mode .admin-search-panel .mobile-search-result-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  body.admin-mode .admin-search-panel .mobile-search-result-card > button {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-selection-return {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(111, 129, 31, 0.18) !important;
    border-radius: 16px !important;
    background: #fbfff3 !important;
    box-shadow: 0 10px 20px rgba(60, 77, 29, 0.1) !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-selection-return .support-text {
    display: block !important;
    min-width: 0 !important;
    color: var(--olive-900) !important;
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin-mode:has(#admin-events-top) #reset-admin-filters-mobile {
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(92, 113, 24, 0.96), rgba(60, 77, 18, 0.96)) !important;
    color: #fffef8 !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(60, 77, 29, 0.08) !important;
    pointer-events: auto !important;
  }

  body.admin-mode:has(#admin-events-top) #admin-events-list {
    display: grid !important;
    gap: 12px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-events-month-list .month-block {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-events-month-list .month-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: start !important;
    margin-bottom: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-events-month-list .month-head h2 {
    font-size: 1.28rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-events-month-list .month-head .support-text {
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
  }

  body.admin-mode:has(#admin-events-top) .month-collapse-toggle {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card {
    padding: 11px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    gap: 8px !important;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(247, 252, 238, 0.98)),
      radial-gradient(circle at 92% 0%, rgba(136, 165, 48, 0.14), transparent 36%) !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-event-title-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .stage-pill {
    width: auto !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card-title-button {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--olive-900) !important;
    font-family: var(--serif) !important;
    font-size: clamp(1rem, 4.75vw, 1.22rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .support-text {
    margin-top: 4px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .card-highlight-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 9px !important;
    overflow: visible !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .card-highlight-row .highlight-success {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .card-highlight-row:not(:has(.highlight-attention, .highlight-waitlist, .highlight-neutral)) {
    display: none !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .highlight-pill {
    width: auto !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .seat-progress {
    margin-top: 9px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-mobile-event-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-mobile-event-summary span {
    min-width: 0 !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 7px !important;
    border-radius: 999px !important;
    background: rgba(215, 235, 151, 0.7) !important;
    border: 1px solid rgba(111, 129, 31, 0.2) !important;
    color: var(--olive-900) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-mobile-event-summary .is-attention {
    background: rgba(255, 238, 190, 0.82) !important;
    color: #7b4d11 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-mobile-event-summary .is-waitlist {
    background: rgba(232, 238, 216, 0.9) !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card > .inline-note {
    display: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(125, 151, 36, 0.16) !important;
    color: var(--olive-900) !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-meta {
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-meta span {
    min-height: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: var(--muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .quick-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 10px !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .quick-card-actions > * {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
  }

  body.admin-mode:has(#admin-events-top) .admin-card .quick-card-actions > [data-admin-quick-bulk] {
    grid-column: 1 / -1 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .icon-utility-button,
  .modal-root .modal-card #cancel-admin-booking-form-top.icon-utility-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .modal-root.manage-event-root {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 8px !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  .modal-root.manage-event-root .manage-event-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    border-radius: 22px 22px 0 0 !important;
    z-index: 20 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header > div {
    min-width: 0 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(1.52rem, 9vw, 2.18rem) !important;
    line-height: 0.94 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .manage-event-meta-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    margin-top: 7px !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .stage-pill {
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .icon-utility-button {
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: auto !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body > .chip-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    position: static !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body > .chip-row .metric-chip {
    min-height: 34px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .modal-root.manage-event-root .sticky-quick-card {
    margin: 0 0 11px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    position: static !important;
  }

  .modal-root.manage-event-root .sticky-quick-card > .eyebrow {
    display: none !important;
  }

  .modal-root.manage-event-root .admin-priority-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > #open-admin-booking-form,
  .modal-root.manage-event-root .admin-priority-actions > #open-admin-bulk-form {
    min-height: 48px !important;
    background: linear-gradient(180deg, rgba(133, 164, 42, 0.98), rgba(105, 132, 26, 0.98)) !important;
    color: #fffef8 !important;
    border-color: rgba(84, 105, 20, 0.28) !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > #toggle-event-settings {
    grid-column: 1 / -1 !important;
  }

  #admin-menu-root .admin-drawer-backdrop {
    background: rgba(16, 20, 10, 0.12) !important;
    backdrop-filter: none !important;
  }

  #admin-menu-root .admin-menu-drawer {
    top: calc(78px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    width: auto !important;
    max-height: min(48dvh, 380px) !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 21px !important;
    border-color: rgba(111, 129, 31, 0.22) !important;
    background:
      radial-gradient(circle at 94% 0%, rgba(176, 204, 88, 0.16), transparent 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 230, 0.97)) !important;
    box-shadow: 0 18px 44px rgba(38, 49, 14, 0.18) !important;
    animation: adminMobileMenuIn 0.16s ease-out !important;
  }

  #admin-menu-root .admin-menu-drawer::before {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    right: 58px !important;
    width: 14px !important;
    height: 14px !important;
    border-left: 1px solid rgba(111, 129, 31, 0.22) !important;
    border-top: 1px solid rgba(111, 129, 31, 0.22) !important;
    border-radius: 4px 0 0 0 !important;
    background: rgba(255, 255, 255, 0.99) !important;
    transform: rotate(45deg) !important;
  }

  #admin-menu-root .admin-menu-drawer-head {
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 2px 4px !important;
  }

  #admin-menu-root .admin-menu-drawer-head .eyebrow {
    display: none !important;
  }

  #admin-menu-root .admin-menu-drawer-head h2 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
  }

  #admin-menu-root .admin-menu-drawer-head button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
  }

  #admin-menu-root .admin-menu-drawer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #admin-menu-root .admin-menu-drawer-item {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 10px !important;
    align-items: center !important;
    padding: 11px 12px !important;
    border-radius: 17px !important;
    border-color: rgba(111, 129, 31, 0.14) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 232, 0.88)) !important;
    box-shadow: none !important;
  }

  #admin-menu-root .admin-menu-drawer-item::after {
    content: "›";
    grid-row: 1 / span 2 !important;
    grid-column: 2 !important;
    color: var(--olive-900) !important;
    font-weight: 900 !important;
    opacity: 0.48 !important;
  }

  #admin-menu-root .admin-menu-drawer-item strong {
    font-size: 0.95rem !important;
    line-height: 1.08 !important;
  }

  #admin-menu-root .admin-menu-drawer-item span {
    font-size: 0.74rem !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
  }

  #admin-menu-root .admin-menu-drawer-item:hover {
    transform: none !important;
  }

  @keyframes adminMobileMenuIn {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Admin mobile: event management works as one clean sheet. */
  .modal-root.manage-event-root {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .modal-root.manage-event-root .manage-event-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-radius: 23px !important;
  }

  .modal-root.manage-event-root .manage-event-modal-card .manage-event-modal-header {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    border-radius: 23px 23px 0 0 !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(177, 205, 83, 0.24), transparent 42%),
      linear-gradient(180deg, rgba(251, 255, 241, 0.98), rgba(243, 249, 229, 0.95)) !important;
    border-bottom: 1px solid rgba(111, 129, 31, 0.16) !important;
    box-shadow: 0 10px 20px rgba(50, 65, 18, 0.08) !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header > div {
    min-width: 0 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .icon-utility-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(1.55rem, 8.2vw, 2.12rem) !important;
    line-height: 0.98 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .eyebrow {
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  .modal-root.manage-event-root .manage-event-modal-header .manage-event-meta-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 7px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 10px 12px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body > .chip-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .modal-root.manage-event-root .manage-event-scroll-body > .chip-row .metric-chip {
    min-height: 34px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .modal-root.manage-event-root .sticky-quick-card {
    margin: 0 0 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    position: static !important;
  }

  .modal-root.manage-event-root .sticky-quick-card > .eyebrow {
    display: none !important;
  }

  .modal-root.manage-event-root .admin-priority-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 8px !important;
    border-radius: 16px !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > #open-admin-booking-form,
  .modal-root.manage-event-root .admin-priority-actions > #open-admin-bulk-form {
    min-height: 48px !important;
    background: linear-gradient(180deg, rgba(133, 164, 42, 0.98), rgba(105, 132, 26, 0.98)) !important;
    color: #fffef8 !important;
    border-color: rgba(84, 105, 20, 0.28) !important;
  }

  .modal-root.manage-event-root .admin-priority-actions > #toggle-event-settings {
    grid-column: 1 / -1 !important;
  }

  /* Admin mobile: compact inner work forms. */
  .modal-root:has(#admin-booking-form),
  .modal-root:has(#admin-bulk-booking-form) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .modal-root .admin-mobile-form-card {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 23px !important;
  }

  .modal-root .admin-booking-modal-card > .content-head {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 10px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    border-radius: 23px 23px 0 0 !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(177, 205, 83, 0.22), transparent 42%),
      linear-gradient(180deg, rgba(251, 255, 241, 0.98), rgba(243, 249, 229, 0.95)) !important;
    border-bottom: 1px solid rgba(111, 129, 31, 0.16) !important;
    box-shadow: 0 10px 20px rgba(50, 65, 18, 0.08) !important;
  }

  .modal-root .admin-booking-modal-card > .content-head > div {
    min-width: 0 !important;
  }

  .modal-root .admin-booking-modal-card > .content-head h2,
  .modal-root .admin-bulk-modal-card > h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(1.45rem, 7.4vw, 1.95rem) !important;
    line-height: 1.02 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .modal-root .admin-booking-modal-card > .content-head .support-text,
  .modal-root .admin-bulk-modal-card > .support-text {
    margin-top: 5px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  .modal-root .admin-booking-modal-card #cancel-admin-booking-form-top,
  .modal-root .admin-bulk-modal-card #cancel-admin-bulk-form-top {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    justify-self: end !important;
    align-self: start !important;
  }

  .modal-root .admin-bulk-modal-card {
    position: relative !important;
    padding-top: 0 !important;
  }

  .modal-root .admin-bulk-modal-card > .eyebrow,
  .modal-root .admin-bulk-modal-card > h2,
  .modal-root .admin-bulk-modal-card > .support-text,
  .modal-root .admin-bulk-modal-card > .card-highlight-row,
  .modal-root .admin-bulk-modal-card > .button-row:not(.form-action-bar) {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 58px !important;
  }

  .modal-root .admin-bulk-modal-card > .eyebrow {
    padding-top: 12px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  .modal-root .admin-bulk-modal-card > h2 {
    padding-top: 3px !important;
  }

  .modal-root .admin-bulk-modal-card > .card-highlight-row {
    margin-top: 7px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(111, 129, 31, 0.16) !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(177, 205, 83, 0.18), transparent 42%),
      linear-gradient(180deg, rgba(251, 255, 241, 0.98), rgba(243, 249, 229, 0.95)) !important;
  }

  .modal-root .admin-bulk-modal-card #cancel-admin-bulk-form-top {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 12 !important;
  }

  .modal-root .admin-mobile-form-card > .mini-card {
    flex: 0 0 auto !important;
    margin: 10px 12px 0 !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }

  .modal-root .admin-mobile-form-card > .mini-card .support-text {
    display: none !important;
  }

  .modal-root .admin-mobile-form-card > .mini-card .button-row {
    margin-top: 8px !important;
  }

  .modal-root .admin-mobile-form-card > .mini-card .ghost-button {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 15px !important;
  }

  .modal-root .admin-mobile-form-card > .inline-note {
    display: none !important;
  }

  .modal-root #admin-booking-form,
  .modal-root #admin-bulk-booking-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 11px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .modal-root #admin-booking-form .field,
  .modal-root #admin-bulk-booking-form .field {
    gap: 6px !important;
  }

  .modal-root #admin-booking-form label,
  .modal-root #admin-bulk-booking-form label {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  .modal-root #admin-booking-form input,
  .modal-root #admin-booking-form select,
  .modal-root #admin-booking-form textarea,
  .modal-root #admin-bulk-booking-form input,
  .modal-root #admin-bulk-booking-form select,
  .modal-root #admin-bulk-booking-form textarea {
    min-height: 46px !important;
    border-radius: 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }

  .modal-root #admin-booking-form textarea,
  .modal-root #admin-bulk-booking-form textarea {
    min-height: 78px !important;
    resize: vertical !important;
  }

  .modal-root #admin-bulk-booking-form #bulk-surnames {
    min-height: 86px !important;
  }

  .modal-root #admin-booking-form .admin-guest-toggle {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    border-radius: 16px !important;
    padding: 9px 11px !important;
    font-size: 0.84rem !important;
    line-height: 1.12 !important;
  }

  .modal-root #admin-booking-form .mini-card,
  .modal-root #admin-bulk-booking-form #bulk-preview-card {
    padding: 10px !important;
    border-radius: 17px !important;
  }

  .modal-root #admin-booking-form .mini-card .info-list,
  .modal-root #admin-bulk-booking-form #bulk-preview-card .info-list {
    gap: 7px !important;
    margin-top: 8px !important;
  }

  .modal-root #admin-booking-form .mini-card .info-row,
  .modal-root #admin-bulk-booking-form #bulk-preview-card .info-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 8px 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  .modal-root #admin-manual-result,
  .modal-root #bulk-preview-after-save {
    text-align: right !important;
    max-width: 150px !important;
    white-space: normal !important;
  }

  .modal-root #admin-booking-form .live-suggestion-list {
    max-height: 30dvh !important;
    overflow-y: auto !important;
  }

  .modal-root #admin-booking-form .form-action-bar,
  .modal-root #admin-bulk-booking-form .form-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 18 !important;
    margin: auto -12px calc(-12px - env(safe-area-inset-bottom)) !important;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    background:
      linear-gradient(180deg, rgba(244, 250, 229, 0), rgba(244, 250, 229, 0.97) 22%, rgba(244, 250, 229, 1)) !important;
  }

  .modal-root #admin-booking-form .form-action-bar .primary-button,
  .modal-root #admin-bulk-booking-form .form-action-bar .primary-button {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 17px !important;
    font-size: 0.98rem !important;
  }

  .modal-root #admin-booking-form .form-action-bar .danger-button {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 17px !important;
  }

  .modal-root #admin-bulk-booking-form .admin-bulk-hard-hidden {
    display: none !important;
  }

  /* Admin mobile: booking management inside an event. */
  html body .modal-root.manage-event-root .manage-section-head {
    margin-top: 12px !important;
  }

  html body .modal-root.manage-event-root .manage-section-head .eyebrow {
    display: none !important;
  }

  html body .modal-root.manage-event-root .manage-section-head h3 {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.1 !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 9px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar .field {
    gap: 6px !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar label {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  html body .modal-root.manage-event-root #manage-booking-search {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    padding: 0 42px 0 14px !important;
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar .button-row button {
    min-height: 38px !important;
    padding: 8px 9px !important;
    border-radius: 15px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
  }

  html body .modal-root.manage-event-root .manage-event-scroll-body > .filter-chip-row,
  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar + .filter-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 9px !important;
    padding: 0 0 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body .modal-root.manage-event-root .manage-event-scroll-body > .filter-chip-row::-webkit-scrollbar,
  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar + .filter-chip-row::-webkit-scrollbar {
    display: none !important;
  }

  html body .modal-root.manage-event-root #event-bookings-section + .filter-bar + .filter-chip-row .filter-chip {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .modal-root.manage-event-root .admin-booking-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }

  html body .modal-root.manage-event-root .admin-booking-grid > .admin-booking-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 222, 0.9)) !important;
  }

  html body .modal-root.manage-event-root .admin-booking-grid > .admin-booking-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .status-pill {
    min-height: 28px !important;
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card h3 {
    margin-top: 7px !important;
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    justify-items: end !important;
    text-align: right !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    color: var(--muted) !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-meta span {
    max-width: 128px !important;
    white-space: normal !important;
  }

  html body .modal-root.manage-event-root .admin-booking-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-details .inline-note {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body .modal-root.manage-event-root .admin-booking-details .admin-booking-comment {
    flex-basis: 100% !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    line-height: 1.15 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-action-stack {
    margin-top: 0 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-action-row button {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .booking-action-row .danger-button:last-child:nth-child(odd),
  html body .modal-root.manage-event-root .admin-booking-card .booking-action-row button:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  html body .modal-root.manage-event-root .admin-booking-card .admin-booking-created {
    position: static !important;
    justify-self: end !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .modal-root.manage-event-root .is-focused-manage-booking {
    border-color: rgba(111, 129, 31, 0.52) !important;
    box-shadow: 0 14px 28px rgba(111, 129, 31, 0.16) !important;
  }

  /* Admin mobile: queue and offered seats inside event management. */
  html body .modal-root.manage-event-root #event-queue-accordion {
    margin-top: 10px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 225, 0.9)) !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .accordion-summary {
    min-height: 46px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .accordion-summary > span:first-child {
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .accordion-summary .support-text {
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .accordion-body {
    padding: 10px !important;
    display: grid !important;
    gap: 8px !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .accordion-body > .filter-chip-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion [data-queue-shortcut] {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 9px !important;
    border-radius: 15px !important;
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card {
    margin-top: 0 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    min-height: 0 !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 224, 0.9)) !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card .eyebrow {
    margin: 0 0 6px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card h3 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card .support-text {
    margin-top: 4px !important;
    font-size: 0.76rem !important;
    line-height: 1.12 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-card > .inline-note {
    display: none !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .mini-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .button-row button {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body .modal-root.manage-event-root #event-queue-accordion .button-row button:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  /* Admin mobile: access and files workspaces. */
  body.admin-mode #admin-access-panel,
  body.admin-mode #admin-files-panel {
    border-radius: 20px !important;
    margin: 10px 0 14px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 229, 0.94)) !important;
  }

  body.admin-mode #admin-access-panel > .accordion-summary,
  body.admin-mode #admin-files-panel > .accordion-summary {
    min-height: 52px !important;
    padding: 12px 14px !important;
  }

  body.admin-mode #admin-access-panel .workspace-panel-summary,
  body.admin-mode #admin-files-panel .workspace-panel-summary {
    gap: 3px !important;
  }

  body.admin-mode #admin-access-panel .workspace-panel-title,
  body.admin-mode #admin-files-panel .workspace-panel-title {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode #admin-access-panel .workspace-panel-summary > .support-text,
  body.admin-mode #admin-files-panel .workspace-panel-summary > .support-text {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  body.admin-mode #admin-access-panel > .accordion-body,
  body.admin-mode #admin-files-panel > .accordion-body {
    padding: 10px !important;
    max-height: calc(100dvh - 188px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-stack,
  body.admin-mode #admin-files-panel .admin-panel-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-card,
  body.admin-mode #admin-files-panel .admin-panel-card {
    padding: 12px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 224, 0.9)) !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-card > .eyebrow,
  body.admin-mode #admin-access-panel .admin-panel-card > h2,
  body.admin-mode #admin-access-panel .admin-panel-card > .inline-note,
  body.admin-mode #admin-files-panel .admin-panel-card > .eyebrow,
  body.admin-mode #admin-files-panel .admin-panel-card > h2,
  body.admin-mode #admin-files-panel .admin-panel-card > .inline-note {
    display: none !important;
  }

  body.admin-mode #admin-access-panel .card-highlight-row,
  body.admin-mode #admin-files-panel .card-highlight-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 0 !important;
    padding-bottom: 2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row {
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row .highlight-pill:nth-of-type(1),
  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row .highlight-pill:nth-of-type(2),
  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row .highlight-pill:nth-of-type(4),
  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row .highlight-pill:nth-of-type(5),
  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row > button {
    display: none !important;
  }

  body.admin-mode #admin-access-panel .admin-panel-card:first-child > .card-highlight-row .highlight-pill {
    width: 100% !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin-mode #admin-access-panel .card-highlight-row::-webkit-scrollbar,
  body.admin-mode #admin-files-panel .card-highlight-row::-webkit-scrollbar {
    display: none !important;
  }

  body.admin-mode #admin-access-panel .highlight-pill,
  body.admin-mode #admin-files-panel .highlight-pill,
  body.admin-mode #admin-access-panel .metric-chip,
  body.admin-mode #admin-files-panel .metric-chip {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.admin-mode #admin-access-panel .card-highlight-row > button,
  body.admin-mode #admin-files-panel .button-row > button {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
  }

  body.admin-mode #admin-access-panel .access-notifications-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body.admin-mode #admin-access-panel .access-notifications-card:has(.highlight-success) {
    display: none !important;
  }

  body.admin-mode #admin-access-panel .access-notifications-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.admin-mode #admin-access-panel .access-notifications-card h3 {
    font-size: 0.94rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode #admin-access-panel .access-notifications-card .empty-state,
  body.admin-mode #admin-access-panel .access-log-accordion .empty-state {
    min-height: 38px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
  }

  body.admin-mode #admin-access-panel .access-log-accordion {
    margin-top: 8px !important;
    border-radius: 16px !important;
  }

  body.admin-mode #admin-access-panel .access-log-accordion .accordion-summary {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  body.admin-mode #admin-access-panel .filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid rgba(111, 129, 31, 0.18) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 223, 0.84)) !important;
  }

  body.admin-mode #admin-access-panel .filter-bar .field {
    margin: 0 !important;
  }

  body.admin-mode #admin-access-panel #admin-employee-search {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 0.92rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  body.admin-mode #admin-access-panel .filter-bar > button,
  body.admin-mode #admin-access-panel .admin-panel-card:nth-of-type(2) .button-row > button {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 16px !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode #admin-access-panel > .accordion-body > .admin-panel-stack > .admin-panel-card:nth-of-type(2) .info-list {
    display: none !important;
  }

  body.admin-mode #admin-access-panel > .accordion-body > .admin-panel-stack > .admin-panel-card:nth-of-type(2) {
    padding: 10px !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  body.admin-mode #admin-access-panel > .accordion-body > .admin-panel-stack > .admin-panel-card:nth-of-type(2) .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  body.admin-mode #admin-access-panel .filter-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-top: 9px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.admin-mode #admin-access-panel .filter-chip-row::-webkit-scrollbar {
    display: none !important;
  }

  body.admin-mode #admin-access-panel .filter-chip-row .filter-chip {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  body.admin-mode #admin-access-panel .info-list {
    margin-top: 10px !important;
  }

  body.admin-mode #admin-access-panel .info-row {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  body.admin-mode #admin-employees-list.pin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 10px !important;
    max-height: min(62dvh, 560px) !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.admin-mode #admin-employees-list .admin-card {
    padding: 12px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 225, 0.92)) !important;
  }

  body.admin-mode #admin-employees-list .admin-card > .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.admin-mode #admin-employees-list .admin-card h3 {
    margin: 0 !important;
    font-size: 1.16rem !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.admin-mode #admin-employees-list .admin-card .support-text {
    margin-top: 2px !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode #admin-employees-list .admin-card .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 8px !important;
  }

  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-role]),
  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-block]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-role])::-webkit-scrollbar,
  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-block])::-webkit-scrollbar {
    display: none !important;
  }

  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-role]) button,
  body.admin-mode #admin-employees-list .admin-card .button-row:has([data-access-block]) button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 138px !important;
    max-width: 180px !important;
    white-space: normal !important;
  }

  body.admin-mode #admin-employees-list .admin-card .button-row button {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 7px !important;
    border-radius: 15px !important;
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.admin-mode #admin-employees-list .admin-card > .inline-note {
    display: none !important;
  }

  body.admin-mode #admin-files-panel .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  body.admin-mode #admin-files-panel .button-row > button:first-child,
  body.admin-mode #admin-files-panel .button-row > button:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  body.admin-mode #admin-files-panel .mini-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body.admin-mode #admin-files-panel .admin-panel-card > .mini-list {
    max-height: min(54dvh, 480px) !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.admin-mode #admin-files-panel .mini-card {
    padding: 11px !important;
    border-radius: 17px !important;
    min-height: 0 !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 226, 0.9)) !important;
  }

  body.admin-mode #admin-files-panel .mini-card .content-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: start !important;
  }

  body.admin-mode #admin-files-panel .mini-card h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.08 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.admin-mode #admin-files-panel .mini-card .support-text,
  body.admin-mode #admin-files-panel .mini-card .inline-note {
    font-size: 0.76rem !important;
    line-height: 1.12 !important;
  }

  body.admin-mode #admin-files-panel .mini-card .inline-note {
    margin-top: 7px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  body.admin-mode #admin-files-panel .mini-card .info-list {
    display: none !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  body.admin-mode #admin-files-panel .mini-card .info-row {
    min-height: 30px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    font-size: 0.74rem !important;
    line-height: 1.08 !important;
  }

  body.admin-mode #admin-files-panel .admin-panel-card:nth-of-type(2) .mini-card .support-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.admin-mode .manual-employee-modal-card {
    width: min(92vw, 430px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 16px !important;
    border-radius: 24px !important;
    overflow-y: auto !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 222, 0.96)) !important;
  }

  body.admin-mode .manual-employee-modal-card > .button-row:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin: -6px -6px 2px 0 !important;
    padding: 0 !important;
  }

  body.admin-mode .manual-employee-modal-card #cancel-manual-employee {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  body.admin-mode .manual-employee-modal-card .eyebrow {
    margin-top: 0 !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  body.admin-mode .manual-employee-modal-card h2 {
    margin-top: 5px !important;
    font-size: 1.55rem !important;
    line-height: 1.02 !important;
  }

  body.admin-mode .manual-employee-modal-card > .support-text {
    display: none !important;
  }

  body.admin-mode .manual-employee-modal-card #manual-employee-form {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  body.admin-mode .manual-employee-modal-card .field {
    margin: 0 !important;
  }

  body.admin-mode .manual-employee-modal-card label {
    margin-bottom: 6px !important;
    font-size: 0.82rem !important;
  }

  body.admin-mode .manual-employee-modal-card input {
    min-height: 48px !important;
    border-radius: 17px !important;
    padding: 0 14px !important;
    font-size: 0.95rem !important;
  }

  body.admin-mode .manual-employee-modal-card #manual-employee-form .button-row {
    margin-top: 2px !important;
  }

  body.admin-mode .manual-employee-modal-card #manual-employee-form .primary-button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 17px !important;
  }

  body.admin-mode #admin-events-top {
    align-items: start !important;
    gap: 10px !important;
  }

  body.admin-mode #admin-events-top #create-event {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    box-shadow: 0 10px 20px rgba(111, 129, 31, 0.14) !important;
    justify-self: end !important;
  }
}


@media (max-width: 760px) {
  .legal-site-footer {
    width: calc(100% - 18px) !important;
    margin: 14px auto calc(92px + env(safe-area-inset-bottom)) !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    gap: 6px 9px !important;
    font-size: 0.72rem !important;
    text-align: center !important;
  }
}


@media (max-width: 760px) {
  .legal-contact-link {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
    text-align: center !important;
  }
}


@media (max-width: 760px) {
  .legal-document-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 22px;
    font-size: 0.82rem;
  }

  .legal-document-footer a {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(196, 213, 164, 0.52);
    border-radius: 14px;
    background: rgba(249, 252, 243, 0.74);
    text-align: center;
  }
}


/* Mobile header final polish: one-line title and readable admin menu. */
@media (max-width: 760px) {
  .topbar h1,
  #app-title {
    font-size: clamp(1rem, 5vw, 1.32rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  body:has(.login-entry-layout) #app-title {
    font-size: clamp(1rem, 5.05vw, 1.34rem) !important;
    white-space: nowrap !important;
  }

  body.admin-mode .topbar-brand,
  body.admin-mode:has(#admin-events-top) .topbar-brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding-right: 92px !important;
  }

  body.admin-mode .header-menu-toggle,
  body.admin-mode:has(#admin-events-top) .header-menu-toggle {
    width: auto !important;
    min-width: 78px !important;
    max-width: 118px !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.admin-mode .header-menu-toggle span:first-child,
  body.admin-mode:has(#admin-events-top) .header-menu-toggle span:first-child {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 0 !important;
  }

  body.admin-mode .header-menu-toggle span:first-child::before,
  body.admin-mode:has(#admin-events-top) .header-menu-toggle span:first-child::before {
    content: "\0410\0434\043c\0438\043d" !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
  }

  body.admin-mode #app-title,
  body.admin-mode:has(#admin-events-top) #app-title {
    font-size: clamp(1.12rem, 5.8vw, 1.48rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* Mobile header width fix: keep title text area wide. */
@media (max-width: 760px) {
  .topbar-brand,
  body.admin-mode .topbar-brand,
  body.admin-mode:has(#admin-events-top) .topbar-brand,
  body:has(.login-entry-layout) .topbar-brand {
    justify-items: stretch !important;
  }

  .brand-copy,
  body.admin-mode .brand-copy,
  body.admin-mode:has(#admin-events-top) .brand-copy,
  body:has(.login-entry-layout) .brand-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .brand-copy > *,
  body.admin-mode .brand-copy > *,
  body.admin-mode:has(#admin-events-top) .brand-copy > *,
  body:has(.login-entry-layout) .brand-copy > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* Mobile header no-logo layout fix. */
@media (max-width: 760px) {
  .topbar-brand:not(:has(.brand-logo)),
  body.admin-mode .topbar-brand:not(:has(.brand-logo)),
  body.admin-mode:has(#admin-events-top) .topbar-brand:not(:has(.brand-logo)),
  body:has(.login-entry-layout) .topbar-brand:not(:has(.brand-logo)) {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-right: 0 !important;
  }

  .topbar-brand:not(:has(.brand-logo)) .brand-copy,
  body.admin-mode .topbar-brand:not(:has(.brand-logo)) .brand-copy,
  body.admin-mode:has(#admin-events-top) .topbar-brand:not(:has(.brand-logo)) .brand-copy,
  body:has(.login-entry-layout) .topbar-brand:not(:has(.brand-logo)) .brand-copy {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}