/* Small additive layer for accessibility and state handling.
   Keep the existing style.css in place to preserve the current visual design. */

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel-strong, #fff);
  color: var(--navy, #0a254f);
  font-weight: 900;
  box-shadow: var(--shadow, 0 16px 36px rgba(0, 0, 0, 0.18));
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

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

:focus-visible {
  outline: 3px solid var(--blue, #4d8dff);
  outline-offset: 4px;
}

.search-overlay[aria-hidden="true"] {
  pointer-events: none;
}

.split-mode-panel[hidden] {
  display: none !important;
}

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

/* Split can grow vertically when AI-ERP rows are added.
   The original tool card uses a fixed viewport-based height, which is great for
   compact pages but causes long receipt tables to spill past the card/footer. */
.tool-panel.split-tool {
  height: auto;
  min-height: min(610px, calc(100vh - 275px));
  align-items: start;
}

.split-tool .tool-copy {
  align-self: center;
}

.split-tool .split-mode-card,
.split-tool .split-mode-panel,
.split-tool .ai-erp-table-wrap {
  min-width: 0;
}

.split-tool .split-mode-card {
  align-self: start;
}

.split-tool .ai-erp-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.split-tool .ai-erp-table {
  margin: 0;
}

.split-frame {
  min-height: 100vh;
  padding-bottom: clamp(32px, 8vh, 96px);
}

@media (max-width: 960px) {
  .split-tool .tool-copy {
    align-self: start;
  }
}


/* Long split pages need to use regular document scrolling.
   style.css intentionally locks most pages to a single viewport. AI-ERP can
   create unlimited rows, so this page opts out of that viewport lock. */
html.split-page-html,
html.split-page-html body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

html.split-page-html .app-frame.split-frame {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

html.split-page-html .split-frame .tool-panel.split-tool {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  margin-bottom: clamp(22px, 5vh, 60px);
  overflow: visible;
}

html.split-page-html .split-frame .split-mode-card,
html.split-page-html .split-frame .split-mode-panel,
html.split-page-html .split-frame .ai-erp-table-wrap {
  max-width: 100%;
}

html.split-page-html .split-frame .ai-erp-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

html.split-page-html .split-frame .wave-footer {
  position: static;
  flex: 0 0 auto;
  height: 74px;
  margin: auto 0 12px;
}

html.split-page-html .split-frame .wave-footer img {
  width: 58px;
  height: 58px;
}

@media (max-width: 900px) {
  html.split-page-html .split-frame .tool-panel.split-tool {
    grid-template-columns: 1fr;
  }
}

/* Split page should have exactly one useful vertical scrollbar: the page.
   The table wrapper may scroll horizontally on small screens, but it should not
   create a nested vertical scrollbar when AI-ERP rows are added. */
html.split-page-html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

html.split-page-html body.split-page-body {
  height: auto;
  min-height: 100%;
  overflow: visible !important;
}

html.split-page-html .app-frame.split-frame {
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible !important;
}

html.split-page-html .split-frame .split-mode-card,
html.split-page-html .split-frame .split-mode-panel {
  height: auto;
  max-height: none;
  overflow: visible !important;
}

html.split-page-html .split-frame .ai-erp-table-wrap {
  height: auto;
  max-height: none;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Calendar uses the same single-scrollbar layout as split.
   The app shell can scroll as a normal document, so a taller calendar will not
   get trapped behind the footer or create a second inner scrollbar. */
html.calendar-page-html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

html.calendar-page-html body.calendar-page-body {
  height: auto;
  min-height: 100%;
  overflow: visible !important;
}

html.calendar-page-html .app-frame.calendar-frame {
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(32px, 8vh, 96px);
}

html.calendar-page-html .calendar-frame .tool-panel.calendar-tool {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  margin-bottom: clamp(22px, 5vh, 60px);
  overflow: visible;
}

html.calendar-page-html .calendar-frame .calendar-card {
  overflow: visible !important;
}

html.calendar-page-html .calendar-frame .calendar-grid {
  overflow: visible !important;
}

html.calendar-page-html .calendar-frame .calendar-day {
  height: clamp(58px, 8.4vh, 88px);
  padding: 8px;
}

html.calendar-page-html .calendar-frame .calendar-holiday {
  font-size: clamp(0.56rem, 0.78vw, 0.74rem);
}

html.calendar-page-html .calendar-frame .wave-footer {
  position: static;
  flex: 0 0 auto;
  height: 74px;
  margin: auto 0 12px;
}

html.calendar-page-html .calendar-frame .wave-footer img {
  width: 58px;
  height: 58px;
}

@media (min-width: 901px) {
  html.calendar-page-html .calendar-frame .tool-panel.calendar-tool {
    width: min(84vw, 1120px);
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  html.calendar-page-html .calendar-frame .calendar-day {
    height: clamp(54px, 7.8vh, 78px);
  }
}

@media (max-width: 900px) {
  html.calendar-page-html .calendar-frame .calendar-day {
    height: clamp(46px, 8.2vw, 66px);
  }
}

@media (max-width: 620px) {
  html.calendar-page-html .calendar-frame .calendar-day {
    height: 42px;
    padding: 5px;
  }
}

/* Dark mode contrast fixes for compact tool buttons.
   Calendar arrows and AI-ERP's + row button were too subtle against the
   dark-mode cards, so these two controls get the same bright treatment as the
   active split mode tab. */
.deep-theme .calendar-top .mini-tool-button,
.deep-theme .ai-erp-actions .mini-tool-button {
  color: #06172d;
  background: linear-gradient(135deg, #9ee7ff, #91c8ff);
  border: 1px solid rgba(167, 224, 255, 0.44);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.deep-theme .calendar-top .mini-tool-button:hover,
.deep-theme .ai-erp-actions .mini-tool-button:hover,
.deep-theme .calendar-top .mini-tool-button:focus-visible,
.deep-theme .ai-erp-actions .mini-tool-button:focus-visible {
  color: #06172d;
  background: linear-gradient(135deg, #b8f0ff, #a7d5ff);
  transform: translateY(-1px);
}

/* AI-ERP Canada tax facts. The widget only becomes visible when the ai-erp
   tab is active, and the bubble overlays the UI instead of shifting the table. */
.split-mode-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.split-mode-header .split-mode-toggle {
  margin-bottom: 0;
}

.tax-fact-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 25;
}

.tax-fact-button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 12px 26px rgba(36, 60, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.tax-fact-button:hover,
.tax-fact-button:focus-visible,
.tax-fact-button[aria-expanded="true"] {
  transform: translateY(-1px) rotate(-2deg);
  border-color: rgba(101, 174, 255, 0.82);
  box-shadow:
    0 16px 32px rgba(36, 60, 90, 0.24),
    0 0 0 5px rgba(128, 203, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.tax-fact-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tax-fact-bubble {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: min(285px, 42vw);
  padding: 13px 15px 12px;
  border: 1px solid rgba(126, 173, 224, 0.34);
  border-radius: 18px 18px 18px 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy, #0a254f);
  box-shadow: 0 18px 38px rgba(36, 60, 90, 0.22);
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.tax-fact-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(126, 173, 224, 0.34);
  border-bottom: 1px solid rgba(126, 173, 224, 0.34);
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.tax-fact-bubble p {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.32;
}

.deep-theme .tax-fact-button {
  border-color: rgba(158, 231, 255, 0.42);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.deep-theme .tax-fact-button:hover,
.deep-theme .tax-fact-button:focus-visible,
.deep-theme .tax-fact-button[aria-expanded="true"] {
  border-color: rgba(158, 231, 255, 0.82);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 0 5px rgba(158, 231, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.deep-theme .tax-fact-bubble {
  border-color: rgba(158, 231, 255, 0.24);
  background: rgba(13, 28, 54, 0.94);
  color: #eef8ff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}


@media (max-width: 780px) {
  .tax-fact-widget {
    position: relative;
  }

  .tax-fact-bubble {
    left: auto;
    right: 0;
    top: calc(100% + 10px);
    width: min(300px, 82vw);
    margin-top: 0;
    transform: none;
  }

  .tax-fact-bubble::before {
    display: none;
  }
}

/* Footer icon layered into the visual footer.
   The site footer is mostly created by the page background/wave at the very
   bottom. Keep the mascot as an overlay in the lower-middle of that bottom
   footer band, rather than letting it reserve its own stacked space above the
   water. */
.wave-footer {
  z-index: 8 !important;
  height: clamp(104px, 13vh, 144px) !important;
  min-height: 104px !important;
  bottom: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  pointer-events: none;
  isolation: isolate;
}

.wave-footer > img {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 3;
  width: clamp(58px, 6.4vh, 68px);
  height: clamp(58px, 6.4vh, 68px);
  margin: 0 !important;
  transform: translateY(clamp(26px, 4vh, 46px)) !important;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(36, 60, 90, 0.20));
}

/* Long document pages still need the footer in normal flow, but the mascot
   should be centered inside the bottom footer band. Removing bottom padding is
   what stops the icon from sitting in the white area above the footer. */
html.split-page-html .app-frame.split-frame,
html.calendar-page-html .app-frame.calendar-frame {
  padding-bottom: 0 !important;
}

html.split-page-html .split-frame .wave-footer,
html.calendar-page-html .calendar-frame .wave-footer {
  position: relative !important;
  flex: 0 0 auto;
  height: clamp(118px, 14vh, 152px) !important;
  min-height: 118px !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
}

html.split-page-html .split-frame .wave-footer > img,
html.calendar-page-html .calendar-frame .wave-footer > img {
  width: 64px;
  height: 64px;
}

.deep-theme .wave-footer > img {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32));
}

/* Standard page footer visibility.
   These rules used to live inline in base.html; keeping them here makes the
   shared template markup cleaner while preserving the same footer position. */
html:not(.split-page-html):not(.calendar-page-html) .app-frame::after {
  bottom: 0 !important;
  height: clamp(104px, 13vh, 144px) !important;
}

html:not(.split-page-html):not(.calendar-page-html) .wave-footer {
  bottom: 0 !important;
  height: clamp(104px, 13vh, 144px) !important;
  min-height: 104px !important;
}

html:not(.split-page-html):not(.calendar-page-html) .wave-footer > img {
  transform: translateY(clamp(10px, 2.2vh, 22px)) !important;
}

/* Split page final layout refinements.
   These rules used to be inline in split.html. They are kept at the end of the
   additive stylesheet so they still win over the older base AI-ERP rules. */
.split-mode-header,
.tax-fact-widget {
  overflow: visible !important;
}

.tax-fact-widget {
  position: relative !important;
  z-index: 20;
}

.tax-fact-bubble {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  left: calc(100% + 0.75rem) !important;
  transform: translateY(-50%) !important;
  border-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
  max-width: min(280px, calc(100vw - 6rem)) !important;
  margin: 0 !important;
}

.tax-fact-bubble::before,
.tax-fact-bubble::after {
  left: -0.42rem !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.ai-erp-table-wrap {
  overflow-x: auto !important;
}

.ai-erp-table {
  table-layout: fixed !important;
  width: max(780px, 100%) !important;
  min-width: max(780px, 100%) !important;
}

.ai-erp-table col[data-ai-col="name"] { width: 12%; }
.ai-erp-table col[data-ai-col="cost"] { width: 12%; }
.ai-erp-table col[data-ai-col="gst"] { width: 13%; }
.ai-erp-table col[data-ai-col="pst"] { width: 13%; }
.ai-erp-table col[data-ai-col="other"] { width: 15%; }
.ai-erp-table col[data-ai-col="tip"] { width: 13%; }
.ai-erp-table col[data-ai-col="total"] { width: 14%; }
.ai-erp-table col.ai-action-col { width: 8%; }

.ai-erp-table th,
.ai-erp-table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.ai-erp-table thead th {
  height: auto !important;
  padding: 0.9rem 0.55rem !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.ai-erp-table thead tr {
  height: auto !important;
}

.ai-erp-table tfoot td {
  vertical-align: middle !important;
}

.split-tool input[type="number"]::-webkit-outer-spin-button,
.split-tool input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.split-tool input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ai-erp-column-controls {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(92px, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1rem !important;
}

.ai-col-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  min-height: 4.6rem !important;
  padding: 0.65rem 0.7rem !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 24px rgba(54, 130, 255, 0.08) !important;
  box-sizing: border-box !important;
}

.ai-col-control-label,
.ai-rate-control,
.ai-fixed-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
}

.ai-col-control-label {
  width: 100% !important;
  min-height: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

.ai-col-control-label input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  accent-color: #77a8ff !important;
}

.ai-rate-control,
.ai-fixed-chip {
  margin: 0 !important;
  min-width: 4.85rem !important;
  height: 2.1rem !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(222, 242, 255, 0.86)) !important;
  border: 1px solid rgba(174, 215, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(52, 121, 255, 0.10) !important;
  color: #052f6f !important;
  box-sizing: border-box !important;
}

.ai-rate-control:focus-within {
  border-color: rgba(87, 143, 255, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(102, 170, 255, 0.18), 0 10px 18px rgba(52, 121, 255, 0.12) !important;
}

.ai-rate-control input {
  flex: 0 0 2.9rem !important;
  width: 2.9rem !important;
  min-width: 2.9rem !important;
  max-width: 2.9rem !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  font: inherit !important;
  font-weight: 950 !important;
  color: #05306f !important;
  box-sizing: border-box !important;
}

.ai-rate-control span,
.ai-fixed-chip {
  font-weight: 900 !important;
  font-size: 0.86rem !important;
}

.ai-fixed-chip {
  opacity: 0.72 !important;
}

.ai-erp-table .ai-name,
.ai-erp-table .ai-cost {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.ai-erp-table .ai-row-remove {
  margin-inline: auto !important;
}

.ai-erp-table [hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  .ai-erp-column-controls {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}