/* Open Time Export — inspired by modern document workspace UI */

:root {
  --page-width: 11in;
  --page-height: 17in;
  --page-margin: 0.75in;
  --preview-font-size: 12px;
  --preview-block-font-size: 12px;
  --workspace-bg: #f4f6f8;
  --app-font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

html {
  height: 100%;
  overscroll-behavior: none;
}

body {
  height: 100%;
  overscroll-behavior: none;
  font-family: var(--app-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

html:has(body.app-viewer),
body.app-viewer {
  overflow: hidden;
}

html:has(body.landing-page),
body.landing-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: auto;
  scroll-behavior: smooth;
}

body.landing-page {
  padding-top: var(--landing-header-offset, 4rem);
}

.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgb(255 255 255);
  border-bottom: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 0 rgb(241 245 249);
}

body.landing-page [id] {
  scroll-margin-top: var(--landing-header-offset, 4rem);
}

.landing-nav-link {
  color: rgb(71 85 105);
  transition: color 0.15s;
}

.landing-desktop-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.landing-nav-link:hover,
.landing-nav-link.is-active {
  color: rgb(15 23 42);
}

.landing-nav-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  padding: 0.375rem 0.75rem;
  color: rgb(51 65 85);
  transition: background 0.15s, color 0.15s;
}

.landing-nav-cta:hover {
  background: rgb(248 250 252);
}

.landing-footer-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  transition: color 0.15s;
}

.landing-footer-link:hover,
.landing-footer-link.is-active {
  color: rgb(15 23 42);
}

.landing-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  color: rgb(71 85 105);
  background: white;
  transition: background 0.15s, color 0.15s;
}

.landing-nav-toggle:hover {
  background: rgb(248 250 252);
  color: rgb(15 23 42);
}

.landing-mobile-nav {
  display: none;
  border-top: 1px solid rgb(241 245 249);
  padding: 0.75rem 1rem 1rem;
}

.landing-mobile-nav.is-open {
  display: block;
}

.landing-mobile-nav a {
  display: block;
  padding: 0.625rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
}

.landing-mobile-nav a:hover,
.landing-mobile-nav a.is-active {
  color: rgb(15 23 42);
}

.landing-mobile-nav .landing-nav-cta {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .landing-desktop-nav {
    display: flex;
  }

  .landing-nav-toggle,
  .landing-mobile-nav {
    display: none !important;
  }
}

.landing-hero {
  background:
    radial-gradient(
      ellipse 90% 60% at 50% -10%,
      rgb(219 234 254 / 0.45),
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 100% 50%,
      rgb(241 245 249 / 0.8),
      transparent
    );
}

.landing-hero-kicker {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(100 116 139);
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .landing-hero-kicker {
    padding-left: 0.875rem;
    border-left: 2px solid rgb(148 163 184);
  }
}

.landing-hero-notes {
  font-size: 0.875rem;
  color: rgb(100 116 139);
}

.landing-hero-notes li {
  position: relative;
  padding-left: 1rem;
}

.landing-hero-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 9999px;
  background: rgb(148 163 184);
}

.landing-hero-drop {
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 12px 32px rgb(15 23 42 / 0.06);
}

.landing-hero-drop:hover {
  background: rgb(255 255 255);
}

.app-workspace {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sidebar-panel,
.app-workspace > main {
  min-height: 0;
}

.hidden {
  display: none !important;
}

/* Sidebar */
.sidebar-panel {
  font-size: 0.8125rem;
}

.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(203 213 225) transparent;
  padding-bottom: 0.5rem;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.sidebar-section {
  padding: 0;
  border-bottom: 1px solid rgb(241 245 249);
}

.sidebar-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(148 163 184);
  margin-bottom: 0;
}

.sidebar-section-collapsible .sidebar-section-body {
  margin-top: 0;
  padding: 0.75rem 1rem 0.875rem;
}

.sidebar-section-toggle,
.sidebar-subsection-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.625rem 1rem;
  gap: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(148 163 184);
}

.sidebar-section-toggle:hover,
.sidebar-subsection-toggle:hover {
  color: rgb(100 116 139);
}

.sidebar-section-collapsible:not(.is-collapsed) > .sidebar-section-toggle,
.sidebar-subsection:not(.is-collapsed) > .sidebar-subsection-toggle {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  box-shadow: 0 1px 0 rgb(241 245 249);
}

.sidebar-subsection:not(.is-collapsed) > .sidebar-subsection-toggle {
  z-index: 3;
}

.sidebar-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: rgb(148 163 184);
  transition: transform 0.15s ease;
}

.sidebar-section-collapsible.is-collapsed .sidebar-chevron,
.sidebar-subsection.is-collapsed .sidebar-chevron {
  transform: rotate(-90deg);
}

.sidebar-subsection + .sidebar-subsection {
  border-top: 1px solid rgb(241 245 249);
}

.sidebar-subsection-body {
  margin-top: 0;
  padding: 0.75rem 1rem 0.875rem;
}

.sidebar-subsection.is-collapsed .sidebar-subsection-body {
  display: none;
}

#schedule-panel .sidebar-subsection:first-child {
  border-top: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  color: rgb(51 65 85);
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.btn-icon:hover {
  background: rgb(248 250 252);
}

.doc-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(148 163 184);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.doc-rename-btn:hover {
  color: rgb(51 65 85);
  background: rgb(241 245 249);
}

.doc-title-input {
  min-width: 8rem;
  max-width: 18rem;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid rgb(191 219 254);
  border-radius: 0.375rem;
  background: white;
  color: rgb(15 23 42);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
  outline: none;
}

@media (min-width: 1024px) {
  .doc-title-input {
    font-size: 1rem;
  }
}

.sidebar-section:not(.sidebar-section-collapsible) .sidebar-heading {
  margin-bottom: 0.75rem;
}

.sidebar-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(148 163 184);
  margin-bottom: 0.625rem;
}

.sidebar-group {
  padding: 0 1rem 0.875rem;
  border-top: 1px solid rgb(241 245 249);
}

.sidebar-print-section + .sidebar-print-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(241 245 249);
}

.sidebar-print-section .sidebar-group-label {
  margin-bottom: 0.375rem;
}

.sidebar-footer {
  background: rgb(255 255 255);
}

.field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(100 116 139);
  margin-bottom: 0.25rem;
}

.field-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-input:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.settings-excel-field {
  margin-bottom: 0.75rem;
}

.field-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.field-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.35rem;
  border-radius: 0.5rem;
  line-height: 1.4;
}

.field-badge-required {
  color: rgb(180 83 9);
  background: rgb(254 243 199);
}

.field-badge-optional {
  color: rgb(71 85 105);
  background: rgb(226 232 240);
}

.field-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 9999px;
  background: rgb(203 213 225);
  color: rgb(51 65 85);
  font-size: 0.5625rem;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  user-select: none;
}

.field-help-icon:hover,
.field-help-icon:focus {
  background: rgb(148 163 184);
  color: white;
  outline: none;
}

/* Custom tooltip */
.app-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  background: white;
  color: rgb(51 65 85);
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.14);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.app-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-tooltip::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 8px;
  height: 8px;
  background: white;
  border: 1px solid rgb(226 232 240);
  transform: translateX(-50%) rotate(45deg);
}

.app-tooltip[data-placement='top']::after {
  bottom: -5px;
  border-top: none;
  border-left: none;
}

.app-tooltip[data-placement='bottom']::after {
  top: -5px;
  border-bottom: none;
  border-right: none;
}

.check-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgb(71 85 105);
  cursor: pointer;
}

.native-checkbox-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-checkbox-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.custom-checkbox-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1.5px solid rgb(203 213 225);
  background: white;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.custom-checkbox-row:hover:not(.is-disabled) .custom-checkbox-box {
  border-color: rgb(148 163 184);
}

.custom-checkbox-row.is-checked .custom-checkbox-box,
.custom-checkbox-row.is-indeterminate .custom-checkbox-box {
  background: rgb(37 99 235);
  border-color: rgb(37 99 235);
}

.custom-checkbox-box::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 2px;
  border-radius: 1px;
  background: white;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.12s, transform 0.12s;
}

.custom-checkbox-row.is-indeterminate .custom-checkbox-box::after {
  opacity: 1;
  transform: scale(1);
}

.custom-checkbox-row.is-indeterminate .custom-checkbox-icon {
  opacity: 0;
}

.custom-checkbox-row:focus-within:not(.is-disabled) .custom-checkbox-box {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.custom-checkbox-icon {
  width: 0.625rem;
  height: 0.625rem;
  color: white;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.12s, transform 0.12s;
}

.custom-checkbox-row.is-checked .custom-checkbox-icon {
  opacity: 1;
  transform: scale(1);
}

.custom-checkbox-label {
  font-size: 0.75rem;
  color: rgb(71 85 105);
  line-height: 1.25;
}

.custom-checkbox-row:hover:not(.is-disabled) .custom-checkbox-label {
  color: rgb(15 23 42);
}

label.check-row.custom-checkbox-row,
label.venue-checkbox-label.custom-checkbox-row {
  display: flex;
}

.venue-checkbox-label.custom-checkbox-row {
  padding: 0.2rem 0;
}

.venue-checkbox-label.custom-checkbox-row:hover .custom-checkbox-label {
  color: rgb(15 23 42);
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  box-sizing: border-box;
  line-height: 1.25;
  border: 1px solid transparent;
}

.btn-primary {
  border-radius: 0.5rem;
  background: rgb(37 99 235);
  color: white;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: rgb(29 78 216);
}

.btn-secondary {
  border-radius: 0.5rem;
  border-color: rgb(226 232 240);
  background: white;
  color: rgb(51 65 85);
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 0.15s;
}

.btn-secondary:hover {
  background: rgb(248 250 252);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(100 116 139);
  transition: background 0.15s, color 0.15s;
}

.footer-link:hover {
  background: rgb(248 250 252);
  color: rgb(51 65 85);
}

/* Upload drop zone */
.drop-zone {
  border: 1.5px dashed rgb(203 213 225);
  border-radius: 0.75rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  cursor: pointer;
  background: rgb(248 250 252);
  transition: border-color 0.15s, background 0.15s;
}

.drop-zone:hover {
  border-color: rgb(148 163 184);
  background: rgb(241 245 249);
}

.drop-active {
  border-color: rgb(59 130 246) !important;
  background: rgb(239 246 255) !important;
}

.header-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid transparent;
}

.header-chip-required {
  background: rgb(239 246 255);
  color: rgb(29 78 216);
  border-color: rgb(191 219 254);
}

.header-chip-optional {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  border-color: rgb(226 232 240);
}

.venue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.venue-select-all .custom-checkbox-label {
  font-weight: 600;
  color: rgb(51 65 85);
}

.venue-count {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(100 116 139);
  background: rgb(241 245 249);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}

.list-search-wrap {
  position: relative;
  margin-bottom: 0.4rem;
}

.list-search {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.35rem 1.75rem 0.35rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.list-search-clear {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgb(226 232 240);
  color: rgb(71 85 105);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.list-search-clear[hidden] {
  display: none;
}

.list-search-clear:hover {
  background: rgb(203 213 225);
  color: rgb(15 23 42);
}

.list-search-clear svg {
  width: 0.7rem;
  height: 0.7rem;
}

.list-search::placeholder {
  color: rgb(148 163 184);
}

.list-search:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.venue-checkbox-label.is-hidden-by-search {
  display: none !important;
}

.venue-list-panel.no-search-results::after {
  content: "No matching venues";
  display: block;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: rgb(148 163 184);
  text-align: center;
}

#title-list.no-search-results::after {
  content: "No matching titles";
}

.venue-list-panel {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  padding: 0.25rem;
  background: rgb(248 250 252);
}

.venue-list-panel:empty::after {
  content: "No venues found";
  display: block;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: rgb(148 163 184);
  text-align: center;
}

#title-list:empty::after {
  content: "No titles found";
}

.venue-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: rgb(71 85 105);
}

.venue-checkbox-label:hover {
  color: rgb(15 23 42);
  background: rgb(226 232 240 / 0.6);
}

/* Toolbar */
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: rgb(100 116 139);
  transition: background 0.15s, color 0.15s;
}

.toolbar-btn:hover {
  background: rgb(241 245 249);
  color: rgb(51 65 85);
}

.toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  background: rgb(226 232 240);
  margin: 0 0.25rem;
}

/* Workspace */
.workspace-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 5rem;
}

.empty-doc-card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.06);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 22rem;
}

#preview-wrapper {
  --page-width: 11in;
  --page-height: 17in;
  --preview-zoom: 1;
}

.export-scratch-host {
  position: fixed;
  left: -10000px;
  top: 0;
  pointer-events: none;
  z-index: -1;
}

#print-export-root {
  display: none;
}

.preview-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  padding: 2rem 1.5rem 2rem;
  background: var(--workspace-bg);
  min-height: 0;
  position: relative;
}

.preview-page-shell {
  width: min(100%, var(--page-width));
  max-width: 100%;
  margin: 0 auto;
  zoom: var(--preview-zoom, 1);
}

.page-header-inline,
.page-footer-inline {
  font-size: calc(0.65rem * var(--preview-text-scale));
  color: rgb(148 163 184);
  left: var(--page-margin);
  right: var(--page-margin);
  padding: 0.2rem 0;
  pointer-events: none;
  position: absolute;
}

.schedule-grid-page > .page-header-inline,
.schedule-grid-page > .page-footer-inline {
  position: static;
  left: auto;
  right: auto;
  padding: 0;
}

.schedule-grid-page > .page-header-inline {
  margin-bottom: 0.25rem;
}

.schedule-grid-page > .page-footer-inline {
  margin-top: 0.35rem;
  padding-top: 0.15rem;
}

.page-footer-inline {
  bottom: calc(var(--page-margin) * 0.5);
}

.page-header-inline {
  top: calc(var(--page-margin) * 0.35);
  margin-bottom: 0;
}

.page-header-inline.is-hidden,
.page-footer-inline.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.schedule-grid-page > .page-header-inline.is-hidden,
.schedule-grid-page > .page-footer-inline.is-hidden {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
}

.grid-pages {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.preview-page.schedule-grid-page {
  overflow: hidden;
  contain: none;
}

.preview-page {
  width: min(100%, var(--page-width));
  min-height: var(--page-height);
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 40px rgb(15 23 42 / 0.08);
  border: 1px solid rgb(226 232 240);
  padding: var(--page-margin);
  box-sizing: border-box;
  font-size: var(--preview-font-size);
  --preview-text-scale: calc(var(--preview-font-size) / 12px);
  --preview-block-text-scale: calc(var(--preview-block-font-size) / 12px);
  position: relative;
  overflow-x: hidden;
  contain: layout paint;
}

/* Schedule grid */
.schedule-grid-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: var(--page-height);
  min-height: var(--page-height);
  max-height: var(--page-height);
  min-width: 0;
  max-width: 100%;
}

.schedule-grid-page > .page-header-inline {
  grid-row: 1;
}

.schedule-page-body {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}

.schedule-grid-page > .page-footer-inline {
  grid-row: 3;
}

.schedule-week-header {
  text-align: right;
  font-weight: 700;
  font-size: calc(1rem * var(--preview-text-scale));
  margin-bottom: 0.35rem;
  padding-right: 0;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.schedule-time-col {
  position: relative;
  border-right: 1px solid rgb(148 163 184);
  border-top: 1px solid transparent;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.schedule-time-col-header {
  flex-shrink: 0;
  visibility: hidden;
  pointer-events: none;
}

.schedule-time-labels {
  position: relative;
  flex: 1;
  min-height: 0;
}

.schedule-time-label {
  position: absolute;
  right: 3px;
  font-size: calc(0.55rem * var(--preview-text-scale));
  font-weight: 700;
  transform: translateY(-50%);
  top: calc(var(--slot-index) / var(--grid-slots, 114) * 100%);
  white-space: nowrap;
}

.schedule-time-label.hour-mark {
  font-size: calc(0.62rem * var(--preview-text-scale));
}

.schedule-days-wrap {
  display: grid;
  grid-template-columns: repeat(var(--day-count, 7), minmax(0, 1fr));
  min-height: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgb(203 213 225);
  border-left: none;
}

.schedule-day-col {
  border-right: 1px solid rgb(148 163 184);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}

.schedule-day-col:last-child {
  border-right: none;
}

.schedule-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.05rem;
  padding: 0.15rem 0.1rem;
  font-weight: 700;
  font-size: calc(0.65rem * var(--preview-text-scale));
  border-bottom: 1px solid rgb(203 213 225);
  min-height: 1.35rem;
  flex-shrink: 0;
  line-height: 1.2;
  min-width: 0;
  box-sizing: border-box;
}

.schedule-day-header .day-name {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-day-header .day-date {
  font-size: calc(0.6rem * var(--preview-text-scale));
  font-weight: 500;
  color: rgb(100 116 139);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-venue-headers {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: calc(0.5rem * var(--preview-text-scale) * 1.2 + 0.2rem);
  min-height: calc(0.5rem * var(--preview-text-scale) * 1.2 + 0.2rem);
  min-width: 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(226 232 240);
}

.schedule-venue-headers:empty::before {
  content: '\00a0';
  display: block;
  flex: 1;
  font-size: calc(0.5rem * var(--preview-text-scale));
  font-weight: 700;
  line-height: 1.2;
  padding: 0.1rem 0.15rem;
  box-sizing: border-box;
  visibility: hidden;
}

.schedule-venue-label {
  position: relative;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  font-size: calc(0.5rem * var(--preview-text-scale));
  font-weight: 700;
  padding: 0.1rem 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.schedule-venue-label:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.5px;
  width: 1px;
  background: rgb(226 232 240);
  pointer-events: none;
}

.schedule-day-grid {
  position: relative;
  flex: 1;
  min-height: 0;
}

.schedule-v-guides {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--sub-total, 1), minmax(0, 1fr));
  pointer-events: none;
}

.schedule-v-guide {
  min-width: 0;
}

.schedule-v-guide:not(:last-child) {
  border-right: 1px solid rgb(226 232 240);
}

.schedule-h-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--slot-index) / var(--grid-slots, 114) * 100%);
  border-top: 1px solid rgb(203 213 225);
  pointer-events: none;
}

.schedule-h-line.major {
  border-top-color: rgb(148 163 184);
  border-top-width: 1.5px;
}

.open-slot-block {
  position: absolute;
  background: rgb(187 247 208);
  border: 0.5px solid rgb(15 23 42);
  box-sizing: border-box;
  padding: 1px 2px;
  overflow: hidden;
  font-size: calc(0.45rem * var(--preview-block-text-scale));
  line-height: 1.2;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.open-slot-block strong {
  font-weight: 700;
}

.open-slot-block-line {
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

/* Venue schedule event blocks */
.event-block {
  position: absolute;
  border: 0.5px solid rgb(15 23 42);
  box-sizing: border-box;
  padding: 1px 1px 1px 1px;
  overflow: hidden;
  font-size: calc(0.45rem * var(--preview-block-text-scale));
  line-height: 1.25;
  z-index: 2;
  color: rgb(15 23 42);
  min-width: 0;
}

.event-block-line {
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.event-block strong {
  font-weight: 700;
}

.allday-banners {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.15rem 0.2rem;
  min-height: 0.75rem;
}

.allday-banner {
  font-size: calc(0.5rem * var(--preview-text-scale));
  font-weight: 700;
  color: rgb(15 23 42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.2rem;
  background: rgb(241 245 249);
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
}

.view-mode-btn {
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(100 116 139);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.view-mode-btn:hover {
  color: rgb(51 65 85);
}

.view-mode-btn.active {
  background: white;
  color: rgb(15 23 42);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

.color-legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
}

.color-legend-label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}

.color-legend-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-width: 0;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: rgb(71 85 105);
  margin-bottom: 0;
}

.sidebar-color-legend.hidden {
  display: none !important;
}

.preview-nav-panel {
  flex-shrink: 0;
  border-top: 1px solid rgb(226 232 240);
  background: white;
}

.schedule-preview-bar {
  display: flex;
  align-items: center;
  padding: 0.1875rem 0.75rem;
  background: rgb(248 250 252);
  min-height: 0;
}

.schedule-preview-bar .color-legend.hidden {
  display: none;
}

.schedule-preview-bar .color-legend {
  flex: 1;
  min-width: 0;
  gap: 0.375rem;
}

.schedule-preview-bar .color-legend-label {
  display: none;
}

.schedule-preview-bar .color-legend-items {
  gap: 0.125rem 0.4375rem;
}

.schedule-preview-bar .legend-row {
  font-size: 0.5625rem;
  gap: 0.1875rem;
}

.schedule-preview-bar .legend-swatch {
  width: 0.5rem;
  height: 0.5rem;
}

.legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  border: 0.5px solid rgb(148 163 184);
  flex-shrink: 0;
}

.empty-grid-msg {
  padding: 2rem;
  text-align: center;
  color: rgb(100 116 139);
}

.text-preview-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
}

.docx-preview-content {
  font-family: Georgia, 'Times New Roman', serif;
}

.docx-preview-content p {
  margin-bottom: 0.75em;
}

.pdf-preview-page {
  padding: 0;
  display: flex;
  justify-content: center;
  box-shadow: none;
  border: none;
}

.pdf-preview-page canvas {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.08);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 10px 40px rgb(15 23 42 / 0.18);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100;
  max-width: 20rem;
}

.toast-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  background: rgb(22 163 74);
  color: white;
}

.toast-error {
  background: rgb(220 38 38);
  color: white;
}

.modal-panel {
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Settings modal */
.settings-modal-panel {
  min-height: 0;
}

.modal-field {
  margin-bottom: 1.5rem;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.settings-footer {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.settings-tabs {
  overflow-x: auto;
}

.settings-tab {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(100 116 139);
  border-radius: 0.375rem 0.375rem 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.settings-tab:hover {
  color: rgb(51 65 85);
  background: rgb(248 250 252);
}

.settings-tab.active {
  color: rgb(37 99 235);
  background: white;
  border-color: rgb(226 232 240);
}

.settings-body {
  min-height: 12rem;
}

.settings-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.settings-subsection {
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem 1rem;
}

.settings-subsection-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgb(15 23 42);
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}

.settings-venues-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 20rem;
  overflow-y: auto;
}

.settings-venue-row {
  padding: 0.75rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  background: rgb(248 250 252);
}

.settings-venue-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.settings-venue-row .check-row {
  margin-top: 0.75rem;
}

.settings-drag-handle {
  cursor: pointer;
  color: rgb(148 163 184);
  font-size: 1rem;
  user-select: none;
}

.settings-drag-handle:hover {
  color: rgb(71 85 105);
}

.settings-remove-btn {
  font-size: 0.75rem;
  color: rgb(220 38 38);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.settings-remove-btn:hover {
  background: rgb(254 226 226);
}

.settings-color-row,
.settings-page-size-row,
.settings-margin-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-color-row .field-input {
  flex: 1;
}

.settings-page-size-row .field-label,
.settings-margin-row .field-label {
  min-width: 4rem;
  margin: 0;
}

.settings-page-size-row .cfg-ps-w,
.settings-page-size-row .cfg-ps-h {
  max-width: 5rem;
}

.cfg-color-picker {
  width: 2.5rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.25rem;
  cursor: pointer;
}

@media print {
  html.print-exporting body > *:not(#print-export-root) {
    display: none !important;
  }

  html.print-exporting #print-export-root {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  html.print-exporting .print-export-page {
    break-after: page;
    page-break-after: always;
  }

  html.print-exporting .print-export-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  html.print-exporting .preview-page {
    width: var(--page-width) !important;
    min-height: var(--page-height) !important;
    height: var(--page-height) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: var(--page-margin) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    contain: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html.print-exporting .event-block,
  html.print-exporting .open-slot-block,
  html.print-exporting .allday-banner,
  html.print-exporting .legend-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 640px) {
  .settings-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .preview-page {
    width: 100%;
    min-height: auto;
  }

  .schedule-grid {
    min-height: 60vh;
  }

  .preview-scroll {
    padding-bottom: 5rem;
  }
}

/* Date picker */
.date-picker {
  position: relative;
}

.date-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.date-picker-trigger:hover {
  background: white;
}

.date-picker-trigger:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.date-picker-value.is-placeholder {
  color: rgb(148 163 184);
}

.date-picker-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(100 116 139);
  flex-shrink: 0;
}

.date-picker-popover {
  position: fixed;
  z-index: 50;
  width: 16.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.12);
  padding: 0.75rem;
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.date-picker-month-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(30 41 59);
}

.date-picker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  color: rgb(51 65 85);
  font-size: 1rem;
  line-height: 1;
}

.date-picker-nav:hover {
  background: rgb(248 250 252);
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
  margin-bottom: 0.25rem;
}

.date-picker-weekdays span {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgb(148 163 184);
  padding: 0.125rem 0;
}

.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}

.date-picker-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.75rem;
  color: rgb(51 65 85);
  cursor: pointer;
}

.date-picker-day:hover:not(:disabled) {
  background: rgb(241 245 249);
}

.date-picker-day.is-outside {
  color: rgb(203 213 225);
}

.date-picker-day.is-today {
  font-weight: 700;
  color: rgb(37 99 235);
}

.date-picker-day.is-selected {
  background: rgb(37 99 235);
  color: white;
  font-weight: 600;
}

.date-picker-day.is-selected.is-today {
  color: white;
}

.date-picker-day.is-disabled,
.date-picker-day:disabled {
  color: rgb(226 232 240);
  cursor: not-allowed;
}

.date-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgb(241 245 249);
}

.date-picker-action {
  border: none;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(37 99 235);
  cursor: pointer;
  padding: 0.125rem 0.25rem;
}

.date-picker-action:hover {
  color: rgb(29 78 216);
}

/* Time picker */
.time-picker {
  position: relative;
}

.time-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.time-picker-trigger:hover {
  background: white;
}

.time-picker-trigger:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.time-picker-value.is-placeholder {
  color: rgb(148 163 184);
}

.time-picker-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(100 116 139);
  flex-shrink: 0;
}

.time-picker-popover {
  position: fixed;
  z-index: 60;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.12);
  padding: 0.625rem;
}

.time-picker-columns {
  display: flex;
  gap: 0.375rem;
}

.time-picker-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.time-picker-column.is-disabled {
  opacity: 0.7;
}

.time-picker-column-label {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}

.time-picker-options {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 11.5rem;
  overflow-y: auto;
  padding: 0.125rem;
  border-radius: 0.5rem;
  background: rgb(248 250 252);
}

.time-picker-option {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.35rem 0.25rem;
  font-size: 0.8125rem;
  color: rgb(51 65 85);
  text-align: center;
  cursor: pointer;
}

.time-picker-option:hover {
  background: white;
}

.time-picker-option:disabled {
  cursor: default;
}

.time-picker-column.is-disabled .time-picker-option:hover {
  background: transparent;
}

.time-picker-option.is-selected {
  background: rgb(59 130 246);
  color: white;
  font-weight: 600;
}

.settings-panel .time-picker-trigger {
  font-size: 0.8125rem;
}

/* Page navigation */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: white;
  flex-shrink: 0;
}

.page-nav-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.page-nav-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

.page-nav-field {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.page-nav-field-label {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(148 163 184);
}

.page-nav-field .date-picker {
  width: auto;
  min-width: 6.75rem;
  max-width: 9.5rem;
}

#page-jump-dropdown .custom-dropdown {
  width: auto;
  min-width: 12rem;
  max-width: 15rem;
}

.page-nav-field .date-picker-trigger,
.page-nav-field .custom-dropdown-trigger {
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
}

#page-jump-dropdown .custom-dropdown-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-nav-indicator {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgb(100 116 139);
  white-space: nowrap;
}

.page-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  color: rgb(51 65 85);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, opacity 0.15s;
}

.page-nav-btn-text {
  min-width: 4.25rem;
}

.page-nav-btn:hover:not(:disabled) {
  background: rgb(248 250 252);
}

.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-nav-zoom {
  margin-left: 0.25rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgb(226 232 240);
}

.page-nav-zoom-value {
  min-width: 3.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(100 116 139);
}

/* Custom dropdown */
.custom-select-mount {
  position: relative;
}

.native-select-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-dropdown {
  position: relative;
}

#export-week-range .custom-dropdown-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.custom-dropdown-trigger:hover {
  background: white;
}

.custom-dropdown-trigger:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.custom-dropdown-label.is-placeholder {
  color: rgb(148 163 184);
}

.custom-dropdown-chevron {
  width: 1rem;
  height: 1rem;
  color: rgb(100 116 139);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.custom-dropdown.is-open .custom-dropdown-chevron {
  transform: rotate(180deg);
}

.custom-dropdown.opens-up .custom-dropdown-chevron {
  transform: rotate(180deg);
}

.custom-dropdown.opens-up.is-open .custom-dropdown-chevron {
  transform: rotate(0deg);
}

.custom-dropdown-menu {
  position: fixed;
  z-index: 55;
  max-height: 15rem;
  overflow-y: auto;
  border-radius: 0.625rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.12);
  padding: 0.25rem;
}

.custom-dropdown-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(51 65 85);
  cursor: pointer;
}

.custom-dropdown-option:hover {
  background: rgb(241 245 249);
}

.custom-dropdown-option.is-selected {
  background: rgb(239 246 255);
  color: rgb(29 78 216);
  font-weight: 600;
}

.custom-dropdown-search-wrap {
  position: sticky;
  top: -0.25rem;
  z-index: 1;
  background: white;
  padding: 0.25rem 0.25rem 0.35rem;
  margin: -0.25rem -0.25rem 0.2rem;
  border-bottom: 1px solid rgb(241 245 249);
}

.custom-dropdown-search {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: rgb(30 41 59);
}

.custom-dropdown-search:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.12);
  background: white;
}

.custom-dropdown-empty {
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  color: rgb(148 163 184);
  text-align: center;
}

.field-label.text-center {
  text-align: center;
}

.shortcuts-table {
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  overflow: hidden;
}

.shortcuts-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgb(241 245 249);
}

.shortcuts-row:last-child {
  border-bottom: none;
}

.shortcuts-row:nth-child(even) {
  background: rgb(248 250 252);
}

.shortcuts-keys {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(51 65 85);
}

.shortcuts-action {
  color: rgb(71 85 105);
}