:root {
        --app-radius: 3px;
      }

      body {
        font-size: 14px;
      }

      .app-booting #appShell,
      .app-booting #authScreen {
        display: none !important;
      }

#appShell[hidden],
#authScreen[hidden] {
  display: none !important;
}

.help-tooltip {
  position: relative;
  display: inline-flex;
}

.help-tooltip-trigger {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.help-tooltip-trigger:hover,
.help-tooltip-trigger:focus-visible {
  color: #2563eb;
  outline: none;
}

.help-tooltip-bubble {
  position: absolute;
  z-index: 80;
  bottom: calc(100% + 0.55rem);
  left: 0;
  width: min(18rem, calc(100vw - 3rem));
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  visibility: hidden;
}

.help-tooltip:hover .help-tooltip-bubble,
.help-tooltip:focus-within .help-tooltip-bubble {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.dark .help-tooltip-bubble {
  border-color: #334155;
  background: #0f172a;
  color: #cbd5e1;
}

      [class*="rounded"],
      button,
      input,
      select,
      textarea,
      article,
      section,
      nav,
      aside {
        border-radius: var(--app-radius) !important;
      }

      .text-4xl {
        font-size: 2rem !important;
        line-height: 1.1 !important;
      }

      .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
      }

      .text-xl {
        font-size: 1rem !important;
        line-height: 1.4 !important;
      }

      .text-lg {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
      }

      .text-base {
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
      }

      #calendarGrid {
        touch-action: pan-y;
        overscroll-behavior-x: contain;
      }

      #attachmentViewer {
        overflow-x: hidden;
      }

      #attachmentViewerBody {
        overflow-x: hidden;
      }

      #attachmentViewerBody *,
      #notebookPreview * {
        max-width: 100%;
      }

      #attachmentViewerBody iframe,
      #attachmentViewerBody img,
      #attachmentViewerBody video,
      #attachmentViewerBody audio,
      #attachmentViewerBody canvas,
      #attachmentViewerBody pre,
      #attachmentViewerBody article {
        max-width: 100%;
      }

      #attachmentViewerBody pre,
      #attachmentViewerBody article,
      #notebookPreview {
        overflow-wrap: anywhere;
      }

      .selection-active {
        background: #e6e6e8 !important;
        border-color: #d2d2d5 !important;
        color: rgb(15 23 42) !important;
      }

      .theme-option-btn:hover,
      .theme-option-btn.theme-option-active {
        background: #e6e6e8 !important;
        border-color: #d2d2d5 !important;
        color: rgb(15 23 42) !important;
      }

      .theme-option-status {
        display: none;
      }

      .theme-option-btn.theme-option-active .theme-option-status {
        display: inline-flex;
      }

      .log-day-header {
        background: #f7f7f8 !important;
        color: #64748b !important;
      }

      .notebook-search-row {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
        max-width: min(100%, 860px);
      }

      .notebook-workspace {
        display: grid;
        gap: 1rem;
        min-width: 0;
      }

      .notebook-folder-panel {
        align-self: start;
        min-width: 0;
      }

      .notebook-folder-list {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
      }

      .notebook-folder-list::-webkit-scrollbar {
        display: none;
      }

      .notebook-folder-btn {
        min-width: max-content;
      }

      .notebook-list-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1rem;
        min-width: 0;
      }

      .notebook-empty-state {
        grid-column: 1 / -1;
      }

      @media (min-width: 768px) {
        .notebook-list-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 1024px) {
        .notebook-workspace {
          grid-template-columns: 240px minmax(0, 1fr);
          align-items: start;
        }

        .notebook-folder-list {
          display: block;
          overflow: visible;
          padding-bottom: 0;
        }

        .notebook-folder-btn {
          width: 100%;
          min-width: 0;
        }

        .notebook-list-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      .user-menu-chevron {
        transform: rotate(180deg);
      }

      .dark .selection-active {
        background: rgb(30 41 59) !important;
        border-color: rgb(51 65 85) !important;
        color: #ffffff !important;
      }

      .dark .theme-option-btn:hover,
      .dark .theme-option-btn.theme-option-active {
        background: rgb(30 41 59) !important;
        border-color: rgb(51 65 85) !important;
        color: #ffffff !important;
      }

      .dark .log-day-header {
        background: rgb(30 41 59) !important;
        color: rgb(226 232 240) !important;
      }

      @media (min-width: 1024px) {
        .mfa-action-row {
          align-items: flex-start !important;
          padding-top: 28px;
        }

        #appShell:not(.hidden) {
          display: block !important;
        }

        #navRail {
          position: fixed;
          inset: 0 auto 0 0;
          width: 316px;
          z-index: 30;
          overflow: visible;
          background: #f7f7f8 !important;
          transition: width 0.22s ease;
        }

        .dark #navRail {
          background: rgb(2 6 23) !important;
        }

        #brandBlock {
          position: relative;
          border-bottom-color: transparent;
          min-height: 82px;
          padding: 24px 58px 20px 24px !important;
        }

        #brandMark,
        #brandLabel {
          flex-shrink: 0;
          transition: none !important;
        }

        #brandLabel p {
          white-space: nowrap;
        }

        #brandLabel {
          opacity: 1;
          transition: opacity 0.16s ease;
        }

        #brandMark {
          width: 38px;
          height: 38px;
          flex: 0 0 38px;
        }

        #brandMark img {
          width: 30px;
          height: 30px;
        }

        #navMenu {
          padding: 14px 12px 16px !important;
        }

        #viewNav {
          gap: 4px !important;
        }

        #viewNav .view-tab {
          min-height: 46px;
          padding: 11px 12px !important;
        }

        #viewNav .view-tab svg {
          width: 22px;
          height: 22px;
          flex: 0 0 22px;
        }

        #viewNav .view-tab.menu-active,
        #userMenuPanel .view-tab.menu-active {
          background: #e6e6e8 !important;
          color: rgb(15 23 42) !important;
        }

        #viewNav .view-tab:not(.menu-active):hover,
        #userMenuPanel .view-tab:not(.menu-active):hover,
        #userMenuBtn:hover {
          background: #eeeeef !important;
          color: rgb(15 23 42) !important;
        }

        .dark #viewNav .view-tab.menu-active,
        .dark #userMenuPanel .view-tab.menu-active {
          background: rgb(30 41 59) !important;
          color: #ffffff !important;
        }

        .dark #viewNav .view-tab:not(.menu-active):hover,
        .dark #userMenuPanel .view-tab:not(.menu-active):hover,
        .dark #userMenuBtn:hover {
          background: rgb(30 41 59) !important;
          color: #ffffff !important;
        }

        #navMenu > p,
        #viewNav .view-tab span {
          transition: opacity 0.16s ease;
        }

        #appShell > main {
          margin-left: 316px;
          transition: margin-left 0.22s ease;
        }

        #navCollapseBtn {
          display: inline-flex;
          position: absolute;
          top: 50%;
          right: 20px;
          width: 32px;
          height: 32px;
          padding: 0;
          margin-top: -16px;
          flex-shrink: 0;
          border-color: transparent !important;
          border-radius: 9999px !important;
          background: transparent !important;
          transition: none !important;
        }

        #navCollapseBtn svg {
          width: 16px;
          height: 16px;
        }

        #userMenuBlock {
          border-top-color: transparent !important;
          padding: 12px 8px !important;
        }

        #userMenuBtn {
          min-height: 54px;
          background: #f7f7f7 !important;
          border-color: transparent !important;
        }

        .dark #userMenuBtn {
          background: rgb(15 23 42) !important;
        }

        .current-user-avatar {
          display: none;
        }

        #userMenuPanel {
          border-radius: 3px !important;
          box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
        }

        #userMenuPanel .current-user-avatar {
          display: inline-flex;
          width: 36px;
          height: 36px;
          align-items: center;
          justify-content: center;
          flex: 0 0 36px;
          border-radius: 9999px !important;
          background: rgb(51 65 85);
          color: #ffffff;
          font-size: 0.78rem;
          font-weight: 700;
        }

        #mobileEditorBtn {
          left: auto !important;
          right: 28px !important;
          bottom: 28px !important;
          z-index: 35;
        }

        #contentInner {
          padding-bottom: 124px !important;
        }

        #appShell.sidebar-collapsed #navRail {
          width: 64px;
        }

        #appShell.sidebar-collapsed > main {
          margin-left: 64px;
        }

        #appShell.sidebar-collapsed #brandLabel,
        #appShell.sidebar-collapsed #navMenu > p,
        #appShell.sidebar-collapsed #viewNav .view-tab span,
        #appShell.sidebar-collapsed #userMenuBtn .current-user-name,
        #appShell.sidebar-collapsed #userMenuBtn .user-menu-chevron {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }

        #appShell.sidebar-collapsed #brandBlock {
          justify-content: center;
          min-height: 72px;
          padding: 18px 8px 12px !important;
          border-bottom-color: transparent;
          cursor: pointer;
        }

        #appShell.sidebar-collapsed #navMenu {
          padding: 10px 8px 16px !important;
        }

        #appShell.sidebar-collapsed #viewNav .view-tab {
          justify-content: center;
          min-width: 0;
          padding: 12px 0 !important;
        }

        #appShell.sidebar-collapsed #brandMark {
          width: 38px;
          height: 38px;
          margin: 0 auto;
          flex-shrink: 0;
        }

        #appShell.sidebar-collapsed #viewNav .view-tab svg {
          margin: 0 auto;
        }

        #appShell.sidebar-collapsed #userMenuBlock {
          padding: 8px !important;
        }

        #appShell.sidebar-collapsed #userMenuBtn {
          width: 40px;
          height: 40px;
          min-height: 40px;
          justify-content: center;
          margin: 0 auto;
          padding: 0 !important;
          border-radius: 9999px !important;
        }

        #appShell.sidebar-collapsed #userMenuBtn .current-user-avatar {
          display: inline-flex;
          width: 32px;
          height: 32px;
          align-items: center;
          justify-content: center;
          border-radius: 9999px !important;
          background: rgb(51 65 85);
          color: #ffffff;
          font-size: 0.78rem;
          font-weight: 700;
        }

        #appShell.sidebar-collapsed #userMenuPanel {
          position: fixed;
          left: 8px;
          right: auto;
          bottom: 64px;
          width: 304px;
          margin: 0;
          padding: 12px !important;
        }

        #appShell.sidebar-collapsed #navCollapseBtn {
          opacity: 0;
          pointer-events: none;
        }

        #appShell.sidebar-collapsed #mobileEditorBtn {
          left: auto !important;
          right: 28px !important;
        }
      }

      @media (max-width: 1023px) {
        body {
          font-size: 16px;
        }

        .text-4xl {
          font-size: 1.8rem !important;
          line-height: 1.12 !important;
        }

        .text-2xl {
          font-size: 1.22rem !important;
          line-height: 1.3 !important;
        }

        .text-xl {
          font-size: 0.98rem !important;
          line-height: 1.35 !important;
        }

        .text-lg {
          font-size: 1rem !important;
          line-height: 1.35 !important;
        }

        .text-base {
          font-size: 1rem !important;
          line-height: 1.3 !important;
        }

        .text-sm {
          font-size: 0.92rem !important;
          line-height: 1.35 !important;
        }

        .text-xs {
          font-size: 0.82rem !important;
          line-height: 1.3 !important;
        }

        #contentInner {
          max-width: 430px;
          margin: 0 auto;
          padding: 16px 12px calc(172px + env(safe-area-inset-bottom, 0px));
        }

        #navRail {
          position: fixed;
          inset: auto 0 0 0;
          z-index: 40;
          min-height: 78px;
          border-top: 1px solid rgb(226 232 240);
          border-bottom: 0;
          background: rgba(244, 247, 251, 0.96);
          backdrop-filter: blur(12px);
        }

        .dark #navRail {
          border-top-color: rgb(30 41 59);
          background: rgba(2, 6, 23, 0.96);
        }

        #brandBlock,
        #navMenu > p,
        #pageSizeSelect {
          display: none !important;
        }

        #navMenu {
          overflow: visible;
          padding: 0;
        }

        #viewNav {
          margin-top: 0;
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 0;
          align-items: stretch;
        }

        #viewNav .view-tab {
          min-width: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 6px;
          padding: 10px 4px 8px;
          background: transparent !important;
          box-shadow: none !important;
          color: rgb(148 163 184);
        }

        #viewNav .view-tab svg {
          width: 20px;
          height: 20px;
        }

        #viewNav .view-tab span {
          font-size: 11px;
          line-height: 1.2;
          letter-spacing: 0;
          text-align: center;
        }

        #viewNav .view-tab.bg-brand-50,
        #viewNav .view-tab.text-brand-600,
        #viewNav .view-tab.bg-slate-100,
        #viewNav .view-tab.bg-slate-200,
        #viewNav .view-tab.text-slate-950,
        #viewNav .view-tab.selection-active,
        #viewNav .view-tab.menu-active {
          background: transparent !important;
          border-color: transparent !important;
          color: rgb(15 23 42) !important;
        }

        .dark #viewNav .view-tab.bg-brand-50,
        .dark #viewNav .view-tab.text-brand-600,
        .dark #viewNav .view-tab.bg-slate-100,
        .dark #viewNav .view-tab.bg-slate-200,
        .dark #viewNav .view-tab.text-slate-950,
        .dark #viewNav .view-tab.selection-active,
        .dark #viewNav .view-tab.menu-active {
          background: transparent !important;
          border-color: transparent !important;
          color: #ffffff !important;
        }

        header {
          margin-bottom: 14px !important;
          gap: 12px !important;
        }

        header > div:first-child h1 {
          margin: 0;
        }

        header > div:last-child {
          gap: 10px !important;
          align-items: stretch !important;
        }

        header > div:last-child > div {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          gap: 10px !important;
        }

        #importSelect,
        #exportSelect {
          min-width: 0 !important;
          width: 100%;
          padding: 11px 12px !important;
          font-size: 0.96rem !important;
        }

        #tableView {
          gap: 12px !important;
        }

        #tableView > div:first-child {
          gap: 10px !important;
        }

        #tableView > div:first-child > div:first-child {
          max-width: none;
          width: 100%;
          padding: 4px;
        }

        #tableView > div:first-child > div:last-child {
          display: grid !important;
          grid-template-columns: 1fr;
          gap: 8px !important;
          width: 100%;
        }

        #searchInput,
        #serviceFilter,
        #doctorFilter {
          display: block !important;
          width: 100%;
          min-width: 0;
          padding: 10px 12px !important;
          font-size: 0.94rem !important;
        }

        .range-tab {
          padding: 11px 10px !important;
          font-size: 0.96rem !important;
        }

        #activityLogGroups > section > div:first-child {
          padding: 8px 12px !important;
          font-size: 0.74rem !important;
        }

        #activityLogGroups article {
          padding: 11px 12px !important;
          gap: 7px !important;
          cursor: pointer;
        }

        #activityLogGroups article .text-\[1\.05rem\] {
          font-size: 1.12rem !important;
          line-height: 1.25 !important;
        }

        #activityLogGroups article .space-y-2 {
          row-gap: 0.3rem !important;
        }

        #activityLogGroups article p,
        #activityLogGroups article .text-sm,
        #activityLogGroups article span {
          line-height: 1.28 !important;
        }

        #activityLogGroups article p,
        #activityLogGroups article .text-sm {
          font-size: 0.88rem !important;
        }

        #activityLogGroups article button {
          align-self: flex-start;
          padding: 6px 10px !important;
        }

        #activityLogGroups .edit-record-btn {
          display: none !important;
        }

        #tableView > div:last-child {
          gap: 8px !important;
          padding-bottom: 4px;
        }

        #paginationSummary,
        #pageIndicator {
          display: block !important;
          font-size: 0.86rem !important;
          line-height: 1.3 !important;
        }

        #paginationControls {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 8px;
          align-items: center;
          padding: 0;
          margin: 0;
        }

        #pageNumbers {
          grid-column: 1 / -1;
          display: flex;
          flex-wrap: nowrap !important;
          justify-content: center !important;
          width: auto;
          max-width: 100%;
          margin: 0 auto;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          gap: 4px !important;
          padding: 0 0 2px 0;
        }

        #pageNumbers::-webkit-scrollbar {
          display: none;
        }

        #pageIndicator {
          grid-column: 1 / -1;
          grid-row: 2;
          min-width: 0 !important;
          text-align: center;
        }

        #firstPageBtn {
          grid-column: 1;
          grid-row: 3;
        }

        #prevPageBtn {
          grid-column: 2;
          grid-row: 3;
        }

        #nextPageBtn {
          grid-column: 3;
          grid-row: 3;
        }

        #lastPageBtn {
          grid-column: 4;
          grid-row: 3;
        }

        #firstPageBtn,
        #prevPageBtn,
        #nextPageBtn,
        #lastPageBtn {
          display: inline-flex !important;
          width: 100%;
          min-width: 0;
          padding: 9px 10px !important;
          font-size: 0.95rem !important;
          font-weight: 700 !important;
          line-height: 1 !important;
          color: rgb(15 23 42) !important;
        }

        #firstPageBtn svg,
        #prevPageBtn svg,
        #nextPageBtn svg,
        #lastPageBtn svg {
          width: 18px;
          height: 18px;
          stroke: currentColor;
          stroke-width: 2.4;
        }

        .dark #firstPageBtn,
        .dark #prevPageBtn,
        .dark #nextPageBtn,
        .dark #lastPageBtn {
          color: rgb(241 245 249) !important;
        }

        #pageNumbers .page-number-btn {
          min-width: 24px !important;
          padding: 6px 6px !important;
          flex: 0 0 auto;
          text-align: center;
        }

        #pageNumbers > span {
          flex: 0 0 auto;
          text-align: center;
        }

        #mobileEditorBtn {
          left: 18px !important;
          right: auto !important;
          bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
          width: 56px !important;
          height: 56px !important;
          font-size: 2.2rem !important;
        }

        #calendarGrid {
          min-height: auto !important;
          gap: 4px !important;
          grid-auto-rows: minmax(72px, auto);
        }

        #calendarView {
          gap: 14px !important;
        }

        #calendarView > div:first-child {
          gap: 10px !important;
        }

        #calendarView > div:last-child {
          padding: 12px !important;
          overflow: hidden;
        }

        #calendarTitle {
          margin-bottom: 10px !important;
          font-size: 1.15rem !important;
          line-height: 1.2 !important;
        }

        #calendarWeekdays {
          gap: 4px !important;
          margin-bottom: 8px !important;
          padding-bottom: 8px !important;
          font-size: 0.66rem !important;
          letter-spacing: 0.12em !important;
        }

        #calendarGrid .day-cell {
          min-height: 72px !important;
          padding: 6px 4px !important;
          gap: 3px !important;
        }

        #calendarGrid .day-cell strong {
          font-size: 0.82rem !important;
          line-height: 1 !important;
        }

        #calendarGrid .calendar-service-wrap,
        #calendarGrid .service-badge-calendar {
          min-width: 0 !important;
          max-width: 100% !important;
        }

        #calendarGrid .service-badge-calendar {
          display: block !important;
          width: 100% !important;
          overflow: hidden !important;
          padding: 2px 3px !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
          font-size: 0.56rem !important;
          line-height: 1.15 !important;
          text-align: center;
        }

        .calendar-doctor-label {
          display: none !important;
        }

        #notebookView {
          min-width: 0;
          gap: 12px !important;
        }

        .notebook-controls {
          gap: 10px !important;
        }

        .notebook-search-row,
        .notebook-controls > div:last-child {
          display: grid !important;
          grid-template-columns: 1fr;
          width: 100%;
          gap: 8px !important;
        }

        .notebook-workspace {
          grid-template-columns: minmax(0, 1fr);
          gap: 12px !important;
        }

        .notebook-folder-panel {
          padding: 12px !important;
        }

        .notebook-folder-list {
          gap: 8px !important;
        }

        #notebookSearchInput,
        #notebookTagFilter,
        #notebookViewModeToggle,
        #newNotebookNoteBtn {
          width: 100%;
          min-width: 0;
          padding: 11px 12px !important;
          font-size: 1rem !important;
        }

        #notebookViewModeToggle {
          padding: 4px !important;
        }

        .notebook-view-btn {
          flex: 1 1 0;
          justify-content: center;
        }

        #notebookList {
          width: 100%;
          min-width: 0;
          gap: 12px !important;
        }

        .notebook-note-card {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow: hidden;
          padding: 14px !important;
        }

        .notebook-note-card > div:first-child {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr);
          gap: 10px !important;
        }

        .notebook-note-card h3 {
          white-space: normal !important;
          overflow: visible !important;
          text-overflow: clip !important;
          font-size: 1.08rem !important;
          line-height: 1.25 !important;
        }

        .notebook-note-card p {
          overflow-wrap: anywhere;
          word-break: break-word;
        }

        .notebook-note-card .edit-notebook-note-btn {
          width: 40px !important;
          height: 40px !important;
          flex: 0 0 auto;
          padding: 0 !important;
        }

        .notebook-note-card .line-clamp-4 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
        }

        .notebook-toolbar {
          display: grid !important;
          grid-template-columns: 1fr;
          gap: 10px !important;
          width: 100%;
          padding: 12px 24px !important;
        }

        .notebook-markdown-tools {
          width: 100%;
          display: flex !important;
          flex-wrap: nowrap !important;
          gap: 6px !important;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 2px;
        }

        .notebook-markdown-tools::-webkit-scrollbar {
          display: none;
        }

        .notebook-markdown-tools .markdown-tool-btn {
          flex: 0 0 auto;
          height: 36px !important;
          min-width: 36px !important;
          padding: 0 9px !important;
          font-size: 0.86rem !important;
        }

        .notebook-mode-toggle {
          width: 100%;
          margin-left: 0 !important;
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          padding: 4px !important;
        }

        .notebook-mode-toggle .notebook-mode-btn {
          width: 100%;
          padding: 10px 12px !important;
          font-size: 1rem !important;
        }
      }

      @media (max-width: 1023px) and (orientation: landscape) {
        #contentInner {
          max-width: none;
          margin: 0;
          padding: 12px 16px calc(128px + env(safe-area-inset-bottom, 0px));
        }

        header {
          margin-bottom: 12px !important;
        }

        #tableView > div:first-child {
          gap: 12px !important;
        }

        #tableView > div:first-child > div:first-child {
          max-width: none;
          width: 100%;
        }

        #tableView > div:first-child > div:last-child {
          grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
          gap: 10px !important;
        }

        #searchInput,
        #serviceFilter,
        #doctorFilter {
          min-width: 0;
        }

        #calendarGrid {
          min-height: calc(100vh - 220px) !important;
        }
      }

      @media (max-width: 1023px) {
        #notebookForm[data-mode="edit"] .notebook-preview-pane,
        #notebookForm[data-mode="preview"] .notebook-editor-pane {
          display: none;
        }
      }

      @media (max-width: 1023px) {
        html,
        body {
          max-width: 100%;
          overflow-x: hidden;
        }

        #appShell,
        #appShell > main {
          width: 100%;
          min-width: 0;
          max-width: 100vw;
          overflow-x: hidden;
        }

        #navRail {
          position: fixed !important;
          inset: auto 0 0 0 !important;
          z-index: 100;
          width: 100vw !important;
          min-width: 0 !important;
          max-width: 100vw !important;
          height: calc(78px + env(safe-area-inset-bottom, 0px));
          min-height: calc(78px + env(safe-area-inset-bottom, 0px));
          padding-bottom: env(safe-area-inset-bottom, 0px);
          overflow-x: hidden !important;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }

        #navMenu,
        #viewNav {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow-x: hidden !important;
        }

        #viewNav {
          height: 78px;
        }

        #viewNav .view-tab {
          width: 100%;
          min-width: 0 !important;
          max-width: 100%;
          overflow: hidden;
        }

        #viewNav .view-tab span {
          display: block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        #editorDrawer,
        #notebookEditorDrawer,
        #exportDrawer {
          inset: 0 0 calc(78px + env(safe-area-inset-bottom, 0px)) !important;
          align-items: stretch !important;
          overflow: hidden !important;
          padding: 12px !important;
        }

        #editorDrawer > div,
        #notebookEditorDrawer > div,
        #exportDrawer > div {
          max-height: calc(100dvh - 102px - env(safe-area-inset-bottom, 0px)) !important;
        }

        #activityForm,
        #notebookForm,
        #exportForm {
          min-height: 0;
          overscroll-behavior: contain;
          padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        }

        #confirmDialog,
        #sessionExpiryDialog,
        #attachmentViewer {
          z-index: 140 !important;
        }

        #attachmentViewer {
          padding: 12px !important;
        }

        #attachmentViewer > div {
          max-height: calc(100dvh - 24px) !important;
        }
      }

.auth-locked {
  overflow: hidden;
}

.app-progress,
.dashboard-progress {
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: 0;
}

.app-progress::-webkit-progress-bar,
.dashboard-progress::-webkit-progress-bar {
  background: #e2e8f0;
}

.app-progress::-webkit-progress-value,
.app-progress::-moz-progress-bar {
  background: #2563eb;
}

.dashboard-progress {
  display: block;
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px !important;
}

.dashboard-progress::-webkit-progress-value,
.dashboard-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--bar-start, #2563eb), var(--bar-end, #38bdf8));
}

.service-badge {
  border: 1px solid var(--service-border);
  border-radius: 3px;
  background: var(--service-bg);
  color: var(--service-text);
}

.service-badge-calendar {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-color-0 { --service-bg: #dbeafe; --service-text: #1d4ed8; --service-border: #2563eb; --bar-start: #2563eb; --bar-end: #1d4ed8; }
.service-color-1 { --service-bg: #fee2e2; --service-text: #b91c1c; --service-border: #dc2626; --bar-start: #ef4444; --bar-end: #dc2626; }
.service-color-2 { --service-bg: #dcfce7; --service-text: #15803d; --service-border: #16a34a; --bar-start: #22c55e; --bar-end: #16a34a; }
.service-color-3 { --service-bg: #fef3c7; --service-text: #a16207; --service-border: #d97706; --bar-start: #f59e0b; --bar-end: #d97706; }
.service-color-4 { --service-bg: #ede9fe; --service-text: #6d28d9; --service-border: #7c3aed; --bar-start: #8b5cf6; --bar-end: #7c3aed; }
.service-color-5 { --service-bg: #fce7f3; --service-text: #be185d; --service-border: #db2777; --bar-start: #ec4899; --bar-end: #db2777; }
.service-color-6 { --service-bg: #cffafe; --service-text: #0f766e; --service-border: #0d9488; --bar-start: #14b8a6; --bar-end: #0f766e; }
.service-color-7 { --service-bg: #ffedd5; --service-text: #c2410c; --service-border: #ea580c; --bar-start: #f97316; --bar-end: #ea580c; }
.service-color-8 { --service-bg: #e0f2fe; --service-text: #0369a1; --service-border: #0284c7; --bar-start: #0ea5e9; --bar-end: #0284c7; }
.service-color-9 { --service-bg: #fae8ff; --service-text: #a21caf; --service-border: #c026d3; --bar-start: #d946ef; --bar-end: #a21caf; }
.service-color-10 { --service-bg: #f3f4f6; --service-text: #111827; --service-border: #4b5563; --bar-start: #6b7280; --bar-end: #374151; }
.service-color-11 { --service-bg: #ecfccb; --service-text: #3f6212; --service-border: #65a30d; --bar-start: #84cc16; --bar-end: #65a30d; }

.toast-leaving {
  opacity: 0;
  transform: translateY(8px);
}