:root {
  --lotus-bg: #d8d8d8;
  --lotus-line: #b1b1b1;
  --lotus-ink: #101010;

  --lotus-c-blue: #102fc7;
  --lotus-c-black: #030303;
  --lotus-c-lime: #cae7b6;
  --lotus-c-green: #00d700;
  --lotus-c-violet: #bf91dd;
  --lotus-c-red: #c90000;
  --lotus-c-yellow: #f4ef00;
  --lotus-c-cyan: #86e5ea;
  --lotus-c-pink: #efa0a0;
  --lotus-c-grey: #d6d6d6;
  --lotus-c-orange: #e0b07a;

  --ion-font-family: Tahoma, Verdana, Arial, sans-serif;
  --ion-background-color: var(--lotus-bg);
  --ion-text-color: var(--lotus-ink);
  --ion-toolbar-background: #d8d8d8;
  --ion-toolbar-color: var(--lotus-ink);
  --ion-tab-bar-background: #d8d8d8;
  --ion-tab-bar-border-color: #9e9e9e;
  --ion-border-color: #a8a8a8;
  --ion-color-primary: #102fc7;
  --ion-color-primary-rgb: 16, 47, 199;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-shade: #0f2baa;
  --ion-color-primary-tint: #2a45cd;
}

* {
  box-sizing: border-box;
}

html,
body,
ion-app,
ion-content {
  background: var(--lotus-bg);
}

body {
  margin: 0;
  color: var(--lotus-ink);
  overscroll-behavior-y: contain;
}

.app-header ion-toolbar,
.app-footer ion-toolbar {
  border-bottom: 1px solid var(--lotus-line);
}

.app-footer ion-toolbar {
  border-top: 1px solid var(--lotus-line);
  border-bottom: none;
}

.sub-toolbar {
  --min-height: 40px;
}

.sub-header-text {
  display: block;
  font-size: 12px;
  padding-left: 12px;
}

.search-controls {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 8px 8px 10px;
  background: rgba(216, 216, 216, 0.98);
  border-bottom: 1px solid var(--lotus-line);
  backdrop-filter: blur(8px);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.navigator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.filter-item {
  --background: #efefef;
  --border-color: #b7b7b7;
  border: 1px solid #b7b7b7;
  border-radius: 8px;
}

.tab-panel {
  padding: 10px 8px calc(90px + env(safe-area-inset-bottom));
  min-height: calc(100vh - 240px);
}

.records-panel {
  padding-top: 8px;
}

.section-accordion {
  border: 1px solid #aeaeae;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #d8d8d8;
}

.section-accordion ion-item[slot='header'] {
  --background: #c9c9c9;
  --min-height: 48px;
  font-weight: 700;
  border-bottom: 1px solid #ababab;
}

.section-body {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.lotus-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.lotus-field {
  border: 1px solid #9f9f9f;
  border-radius: 8px;
  overflow: hidden;
}

.lotus-field ion-item {
  --background: transparent;
  --padding-start: 10px;
  --padding-end: 10px;
  --inner-padding-end: 0;
  --min-height: 52px;
  color: inherit;
}

.lotus-field ion-label {
  font-style: italic;
  font-size: 13px;
  color: inherit;
  white-space: normal;
}

.lotus-field ion-input,
.lotus-field ion-select,
.lotus-field ion-textarea {
  color: inherit;
}

.lotus-field ion-input::part(native),
.lotus-field ion-textarea::part(native),
.lotus-field ion-select::part(text) {
  min-height: 44px;
  font-size: 14px;
}

.lotus-field ion-checkbox,
.lotus-field ion-toggle {
  min-height: 44px;
}

.lotus-field .native-date {
  width: 100%;
  min-height: 44px;
  border: 1px solid #979797;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--lotus-ink);
}

.color-c-blue {
  background: var(--lotus-c-blue);
  color: #fff;
}

.color-c-black {
  background: var(--lotus-c-black);
  color: #fff;
}

.color-c-lime {
  background: var(--lotus-c-lime);
  color: var(--lotus-ink);
}

.color-c-green {
  background: var(--lotus-c-green);
  color: #002400;
}

.color-c-violet {
  background: var(--lotus-c-violet);
  color: var(--lotus-ink);
}

.color-c-red {
  background: var(--lotus-c-red);
  color: #fff;
}

.color-c-yellow {
  background: var(--lotus-c-yellow);
  color: var(--lotus-ink);
}

.color-c-cyan {
  background: var(--lotus-c-cyan);
  color: var(--lotus-ink);
}

.color-c-pink {
  background: var(--lotus-c-pink);
  color: var(--lotus-ink);
}

.color-c-grey {
  background: var(--lotus-c-grey);
  color: var(--lotus-ink);
}

.color-c-orange {
  background: var(--lotus-c-orange);
  color: var(--lotus-ink);
}

.distance-segment {
  border: 1px solid #9f9f9f;
  border-radius: 8px;
  overflow: hidden;
  background: #ececec;
}

.distance-segment ion-item {
  --background: transparent;
  --min-height: 50px;
}

.records-list {
  border: 1px solid #9f9f9f;
  border-radius: 8px;
  overflow: hidden;
}

.records-list ion-item {
  --min-height: 52px;
  --background: #efefef;
  border-bottom: 1px solid #d5d5d5;
}

.records-list ion-item:last-child {
  border-bottom: none;
}

.records-list ion-item.selected {
  --background: #c9d8ff;
  border-left: 4px solid #102fc7;
}

.record-meta {
  font-size: 12px;
  opacity: 0.86;
}

.empty-state {
  border: 1px dashed #9f9f9f;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  background: #efefef;
}

.save-state {
  display: block;
  padding-left: 12px;
  font-size: 13px;
}

.boot-skeleton {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.skeleton-block {
  border-radius: 8px;
  background: linear-gradient(90deg, #d0d0d0, #eeeeee, #d0d0d0);
  background-size: 240px 100%;
  animation: pulse 1.2s linear infinite;
}

.skeleton-block.title {
  height: 46px;
}

.skeleton-block.line {
  height: 24px;
}

.skeleton-block.card {
  height: 120px;
}

@keyframes pulse {
  0% {
    background-position: -240px 0;
  }
  100% {
    background-position: 240px 0;
  }
}

@media (min-width: 760px) {
  .lotus-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

.mobile-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 12;
  border-top: 1px solid #9e9e9e;
  background: #d8d8d8;
}

.tab-panel {
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

/* self-anneal: mdb-skeleton-hidden */
.boot-skeleton[hidden] {
  display: none !important;
}

/* self-anneal: mdb-touch-targets */
#reloadRecordBtn,
#saveBtn,
#prevBtn,
#nextBtn {
  --min-height: 42px;
  min-height: 42px;
  height: 42px;
}

#reloadRecordBtn::part(native),
#saveBtn::part(native),
#prevBtn::part(native),
#nextBtn::part(native) {
  min-height: 42px;
  height: 42px;
}

.search-controls ion-searchbar {
  --min-height: 42px;
}

.search-controls ion-searchbar .searchbar-input,
.search-controls input.searchbar-input {
  min-height: 42px !important;
  height: 42px !important;
}