/* =========================================================================
   Outlander Persona — pastel, rounded, "cute" mobile-first theme (SLDS 2
   under the hood, reskinned via its own --slds-c-* theming custom
   properties, same technique reg-plus's redesign uses). Structural markup
   comes from SLDS; this file re-themes colors/shape/typography on top of it
   plus a floating bottom-nav / icon-badge "field card" layer of our own.

   Palette: soft off-white canvas, a rotating set of pastel accent hues
   (lavender / mint / peach / sky / rose / butter) used per-category so the
   Memo grouping reads as colorful and friendly rather than a single flat
   brand color everywhere.
   ========================================================================= */

:root {
  /* ---- primary brand pastel (buttons/CTAs/focus) ---- */
  --op-primary: #8b7cf6;
  --op-primary-dark: #6f5cf0;
  --op-primary-soft: #ece7ff;
  --op-primary-on: #2c2260;

  /* ---- reserved danger (delete/errors only) ---- */
  --op-danger: #ff7a85;
  --op-danger-soft: #ffe4e6;
  --op-danger-on: #5c0f14;

  /* ---- category pastel rotation ---- */
  --op-cat-0: #8b7cf6; /* lavender */
  --op-cat-1: #34c9b3; /* mint */
  --op-cat-2: #ff8fb1; /* rose */
  --op-cat-3: #ffb15c; /* peach */
  --op-cat-4: #4fb0e6; /* sky */
  --op-cat-5: #f4cf4f; /* butter */

  --op-cat-0-soft: #ece7ff;
  --op-cat-1-soft: #dcf9f3;
  --op-cat-2-soft: #ffe4ee;
  --op-cat-3-soft: #fff0dd;
  --op-cat-4-soft: #e2f3fd;
  --op-cat-5-soft: #fdf6d9;

  /* ---- surfaces ---- */
  --op-bg: #fffaf5;
  --op-surface: #ffffff;
  --op-surface-2: #faf6ff;
  --op-surface-3: #f1ecfb;
  --op-border: rgba(60, 40, 90, .08);
  --op-border-strong: rgba(60, 40, 90, .14);

  /* ---- text ---- */
  --op-text: #2b2440;
  --op-text-weak: #766e93;
  --op-text-faint: #a49dc2;

  /* ---- shape ---- */
  --op-radius-sm: 12px;
  --op-radius-md: 16px;
  --op-radius-lg: 22px;
  --op-radius-xl: 28px;
  --op-radius-pill: 999px;

  --op-shadow: 0 16px 40px rgba(120, 90, 180, .16);
  --op-shadow-sm: 0 6px 18px rgba(120, 90, 180, .10);

  color-scheme: light;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  touch-action: manipulation;
}

body {
  font-family: "Google Sans", ui-rounded, Roboto, -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  margin: 0;
  background: var(--op-bg);
  color: var(--op-text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--op-primary);
}

::selection {
  background: var(--op-primary-soft);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--op-surface-3) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--op-surface-3);
  border-radius: 8px;
}

.op-vh-100 {
  min-height: 100vh;
}

/* Snappy press feedback everywhere tappable */
.slds-button,
.op-tile,
.op-bottom-nav__item,
.op-accordion-header {
  transition: transform .1s ease, background-color .12s ease, box-shadow .12s ease;
}
.slds-button:active {
  transform: scale(.97);
}

/* =========================================================================
   Component-token theming — SLDS2 reads these for every card/input/button/
   modal/badge/toast/checkbox, so setting them once reskins the whole bundle.
   ========================================================================= */

:root {
  --slds-c-card-color-background: var(--op-surface);
  --slds-c-card-color-border: var(--op-border);
  --slds-c-card-text-color: var(--op-text);
  --slds-c-card-radius-border: var(--op-radius-lg);
  --slds-c-card-shadow: var(--op-shadow-sm);

  --slds-c-input-color-background: var(--op-surface-2);
  --slds-c-input-color-background-focus: var(--op-surface-2);
  --slds-c-input-color-border: var(--op-border-strong);
  --slds-c-input-color-border-focus: var(--op-primary);
  --slds-c-input-radius-border: var(--op-radius-md);
  --slds-c-input-text-color: var(--op-text);
  --slds-c-input-text-color-focus: var(--op-text);
  --slds-c-input-shadow: none;
  --slds-c-input-shadow-focus: 0 0 0 3px var(--op-primary-soft);

  --slds-c-textarea-color-background: var(--op-surface-2);
  --slds-c-textarea-color-background-focus: var(--op-surface-2);
  --slds-c-textarea-color-border: var(--op-border-strong);
  --slds-c-textarea-radius-border: var(--op-radius-md);
  --slds-c-textarea-text-color: var(--op-text);
  --slds-c-textarea-text-color-focus: var(--op-text);
  --slds-c-textarea-shadow: none;
  --slds-c-textarea-shadow-focus: 0 0 0 3px var(--op-primary-soft);

  --slds-c-select-color-background: var(--op-surface-2);
  --slds-c-select-color-background-focus: var(--op-surface-2);
  --slds-c-select-color-border: var(--op-border-strong);
  --slds-c-select-color-border-focus: var(--op-primary);
  --slds-c-select-radius-border: var(--op-radius-md);
  --slds-c-select-text-color: var(--op-text);
  --slds-c-select-text-color-focus: var(--op-text);
  --slds-c-select-shadow: none;

  --slds-c-button-radius-border: var(--op-radius-md);
  --slds-c-button-color-background: var(--op-surface-2);
  --slds-c-button-color-border: var(--op-border-strong);
  --slds-c-button-color-border-hover: var(--op-border-strong);
  --slds-c-button-text-color: var(--op-text);
  --slds-c-button-text-color-hover: var(--op-text);
  --slds-c-button-shadow: none;

  --slds-c-button-neutral-color-background: var(--op-surface-2);
  --slds-c-button-neutral-color-background-hover: var(--op-surface-3);
  --slds-c-button-neutral-color-background-active: var(--op-surface-3);
  --slds-c-button-neutral-color-border: var(--op-border-strong);
  --slds-c-button-neutral-color-border-hover: var(--op-border-strong);

  --slds-c-button-brand-color-background: var(--op-primary);
  --slds-c-button-brand-color-background-hover: var(--op-primary-dark);
  --slds-c-button-brand-color-background-active: var(--op-primary-dark);
  --slds-c-button-brand-color-border: var(--op-primary);
  --slds-c-button-brand-color-border-hover: var(--op-primary-dark);
  --slds-c-button-brand-text-color: #ffffff;
  --slds-c-button-brand-text-color-hover: #ffffff;

  --slds-c-modal-color-background: var(--op-surface);
  --slds-c-modal-color-border: var(--op-border);
  --slds-c-modal-text-color: var(--op-text);
  --slds-c-modal-content-color-background: var(--op-surface);
  --slds-c-modal-content-text-color: var(--op-text);
  --slds-c-modal-header-color-background: var(--op-surface);
  --slds-c-modal-header-text-color: var(--op-text);
  --slds-c-modal-footer-color-background: var(--op-surface);
  --slds-c-modal-footer-text-color: var(--op-text);
  --slds-c-modal-radius-border: var(--op-radius-xl);

  --slds-c-badge-color-background: var(--op-surface-3);
  --slds-c-badge-text-color: var(--op-text);
  --slds-c-badge-color-border: transparent;
  --slds-c-badge-radius-border: var(--op-radius-pill);

  --slds-c-toast-color-background: var(--op-surface-3);
  --slds-c-toast-text-color: var(--op-text);
  --slds-c-toast-radius-border: var(--op-radius-lg);
}

.slds-button_outline-brand {
  color: var(--op-primary);
  border-color: var(--op-primary);
  background: transparent;
}
.slds-button_outline-brand:hover,
.slds-button_outline-brand:focus {
  color: var(--op-primary-dark);
  border-color: var(--op-primary-dark);
  background: var(--op-primary-soft);
}

.slds-input:focus,
.slds-textarea:focus,
.slds-select:focus {
  outline: none;
}

select.slds-select {
  width: 100%;
  box-sizing: border-box;
}
.slds-select_container {
  display: block;
  width: 100%;
}

/* Bigger, tappable form controls */
.slds-input,
.slds-textarea,
.slds-select,
.slds-button {
  min-height: 50px;
  font-size: 1rem;
}
.slds-textarea {
  min-height: 96px;
  padding-top: 12px;
}
.slds-button {
  font-weight: 700;
  padding-left: 20px;
  padding-right: 20px;
}
.slds-button_icon,
.slds-button_icon-border,
.slds-button_icon-border-filled {
  min-height: 44px;
  min-width: 44px;
}
.slds-button_icon-border,
.slds-button_icon-border-filled,
.slds-modal__close,
.slds-modal__close .slds-button__icon {
  color: var(--op-text);
  fill: var(--op-text);
}

h1, h2, h3 {
  color: var(--op-text);
  font-weight: 800;
}
.slds-text-heading_medium,
.slds-text-heading_small {
  color: var(--op-text);
  font-weight: 800;
}
.slds-text-body_small {
  color: var(--op-text);
}
.slds-text-color_weak {
  color: var(--op-text-weak) !important;
}
.slds-text-color_error {
  color: var(--op-danger) !important;
}
.slds-form-element__label {
  color: var(--op-text-weak);
  font-weight: 700;
  font-size: .85rem;
}
.slds-required {
  color: var(--op-danger);
}
.slds-border_bottom {
  border-bottom: 1px solid var(--op-border) !important;
}

/* ---------- Login ---------- */

.op-login-bg {
  background: radial-gradient(circle at 25% -10%, var(--op-primary-soft), transparent 45%),
              linear-gradient(160deg, #fff5fb 0%, #f5f2ff 45%, #eefaf7 100%);
  padding: 24px;
}

.op-card {
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-xl);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.op-logo-badge {
  width: 64px;
  height: 64px;
  border-radius: var(--op-radius-lg);
  background: linear-gradient(135deg, var(--op-primary) 0%, #ff8fb1 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Top navbar (brand / build version / account menu) ---------- */

.op-navbar {
  background: var(--op-surface);
  border-bottom: 1px solid var(--op-border);
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.op-navbar .op-brand {
  color: var(--op-text);
}

.op-navbar .slds-button_icon-border-filled {
  background: var(--op-surface-2);
  border-color: var(--op-border-strong);
  border-radius: var(--op-radius-pill);
  color: var(--op-text);
}

.op-build-version {
  color: var(--op-text-faint);
  font-weight: 400;
  font-size: .68rem;
  margin-left: 6px;
}

.op-side-menu {
  position: absolute;
  width: 200px;
  z-index: 1000;
  top: 68px;
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow);
  overflow: hidden;
  padding: 6px;
}
.op-side-menu .slds-dropdown__list {
  background: transparent;
}
.op-side-menu .slds-dropdown__item > a {
  justify-content: flex-start;
  gap: 0.6rem;
  color: var(--op-text);
  border-radius: var(--op-radius-md);
  padding: 12px;
  min-height: 48px;
}
.op-side-menu .slds-dropdown__item > a:hover {
  background: var(--op-surface-2);
}

/* ---------- Bottom navigation (fixed, floating pastel pill) ---------- */

.op-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-xl);
  box-shadow: var(--op-shadow);
  padding: 6px;
}

.op-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  border-radius: var(--op-radius-lg);
  color: var(--op-text-faint);
  padding: 10px 4px 8px;
  cursor: pointer;
  min-height: 56px;
  font-family: inherit;
}
.op-nav-item:active {
  background: var(--op-surface-2);
}
.op-nav-item svg {
  width: 24px;
  height: 24px;
}
.op-nav-item span:last-child {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.op-nav-item_active {
  background: var(--op-primary-soft);
  color: var(--op-primary-dark);
}

/* Reserve room above the floating nav so content never sits under it */
.op-view-page {
  position: relative;
  min-height: calc(100vh - 64px);
  padding-bottom: 104px;
  box-sizing: border-box;
}

/* ---------- Memo overview: search + accordion ---------- */

.op-search-wrap .slds-input {
  border-radius: var(--op-radius-pill);
}

.op-search-group {
  border-radius: var(--op-radius-pill);
  background: var(--op-surface-2);
  border: 1px solid var(--op-border-strong);
  padding: 4px;
  box-shadow: var(--op-shadow-sm);
  /* Without this, the icon-input wrapper's own square corners peek out past
     the pill's rounded edge, showing as a stray light sliver against the
     page's colored background. */
  overflow: hidden;
}
.op-search-group .slds-form-element__control,
.op-search-group .slds-input {
  background: transparent;
  border: none;
  box-shadow: none;
}

.op-accordion {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--op-border);
  border-left: 5px solid var(--op-cat-color, var(--op-primary));
}

.op-accordion.op-cat-color-0 { --op-cat-color: var(--op-cat-0); --op-cat-color-soft: var(--op-cat-0-soft); }
.op-accordion.op-cat-color-1 { --op-cat-color: var(--op-cat-1); --op-cat-color-soft: var(--op-cat-1-soft); }
.op-accordion.op-cat-color-2 { --op-cat-color: var(--op-cat-2); --op-cat-color-soft: var(--op-cat-2-soft); }
.op-accordion.op-cat-color-3 { --op-cat-color: var(--op-cat-3); --op-cat-color-soft: var(--op-cat-3-soft); }
.op-accordion.op-cat-color-4 { --op-cat-color: var(--op-cat-4); --op-cat-color-soft: var(--op-cat-4-soft); }
.op-accordion.op-cat-color-5 { --op-cat-color: var(--op-cat-5); --op-cat-color-soft: var(--op-cat-5-soft); }

.op-accordion-header {
  width: 100%;
  border: none;
  background: none;
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
}

.op-accordion-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--op-cat-color, var(--op-primary));
  margin-right: 10px;
  flex: none;
}

.op-accordion-title {
  font-weight: 800;
  margin-right: 8px;
  color: var(--op-text);
}

.op-accordion-count {
  background: var(--op-cat-color-soft, var(--op-primary-soft));
  color: var(--op-cat-color, var(--op-primary-dark));
  font-weight: 800;
}

.op-accordion-chevron {
  transition: transform 0.15s ease;
  color: var(--op-text-faint);
}
.op-accordion-chevron svg {
  width: 18px;
  height: 18px;
}
.op-accordion-chevron_open {
  transform: rotate(180deg);
}

.op-accordion-body {
  padding: 0 10px 10px;
}

.op-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--op-radius-md);
  border: 1px solid var(--op-border);
  cursor: pointer;
  margin-bottom: 8px;
}
.op-tile:last-child {
  margin-bottom: 0;
}
.op-tile:hover {
  background: var(--op-cat-color-soft, var(--op-surface-2));
}
.op-tile:active {
  transform: scale(.99);
}

.op-tile-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--op-radius-md);
  object-fit: cover;
  flex: none;
  background: var(--op-cat-color-soft, var(--op-primary-soft));
}
.op-tile-thumb_placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op-cat-color, var(--op-primary));
}
.op-tile-thumb_placeholder svg {
  width: 22px;
  height: 22px;
}

.op-tile-body {
  min-width: 0;
}
.op-tile-title {
  font-weight: 800;
  color: var(--op-text);
}
.op-tile-preview {
  font-size: 12px;
  color: var(--op-text-weak);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-fab {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--op-primary) 0%, #ff8fb1 100%);
  color: #fff;
  box-shadow: var(--op-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 400;
}
.op-fab svg {
  width: 26px;
  height: 26px;
}

/* ---------- Detail / form shared ---------- */

.op-subnavbar {
  background: var(--op-surface);
  border-bottom: 1px solid var(--op-border);
  min-height: 64px;
}

.op-form-col {
  max-width: 480px;
  width: 100%;
}

.op-detail-image {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
  object-fit: cover;
  border-radius: var(--op-radius-lg);
  cursor: zoom-in;
}

/* ---------- Image viewer (tap detail image to zoom full-screen) ---------- */

.op-image-viewer-modal .slds-modal__container {
  max-width: none;
  width: auto;
  max-height: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-image-viewer-modal__container {
  position: relative;
}
.op-image-viewer-modal__img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: var(--op-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  display: block;
}
.op-image-viewer-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255, 255, 255, .9) !important;
}
@media (max-width: 480px) {
  .op-image-viewer-modal__close {
    top: 8px;
    right: 8px;
  }
}

.op-detail-text {
  white-space: pre-wrap;
}

.op-image-preview {
  max-width: 160px;
  border-radius: var(--op-radius-md);
  border: 1px solid var(--op-border);
}

.op-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-detail-list li {
  min-height: 52px;
}
.op-detail-list li:last-child {
  border-bottom: none;
}

/* ---------- Add/edit form: pastel icon-badge "field cards" ----------
   Each field is its own soft-tinted card (icon badge + eyebrow chip +
   title header) — reads as a friendly checklist instead of one long form. */

#memo-form-view {
  padding-bottom: 200px;
}

.op-field-card {
  background: var(--op-cat-color-soft, var(--op-surface-2));
  border-radius: var(--op-radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--op-border);
}

.op-field-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.op-field-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--op-radius-pill);
  background: #fff;
  color: var(--op-cat-color, var(--op-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-shadow-sm);
}
.op-field-card__icon svg {
  width: 20px;
  height: 20px;
}

.op-field-card__eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--op-radius-pill);
  margin-bottom: 6px;
  background: var(--op-primary);
  color: #fff;
}
.op-field-card__eyebrow_optional {
  background: #fff;
  color: var(--op-text-weak);
}

.op-field-card__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--op-text);
}

.op-field-card .slds-form-element__control,
.op-field-card .slds-input,
.op-field-card .slds-textarea {
  background: #fff;
}

/* Category picker chips inside the category field card */
.op-category-chip {
  border-radius: var(--op-radius-pill) !important;
  font-weight: 700;
}

/* ---------- Custom "Add image" control ----------
   Native <input type=file> renders the browser's plain OS button — hidden
   here in favor of a dashed-border upload tile (its <label for> keeps it
   fully accessible/clickable without any JS wiring). */
.op-image-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.op-image-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border: 2px dashed var(--op-border-strong);
  border-radius: var(--op-radius-lg);
  color: var(--op-primary);
  font-weight: 700;
  cursor: pointer;
  background: #fff;
}
.op-image-upload:hover {
  background: var(--op-primary-soft);
  border-color: var(--op-primary);
}
.op-image-upload svg {
  width: 20px;
  height: 20px;
}

/* ---------- Rich text Detail editor ---------- */

.op-rt-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.op-rt-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--op-border-strong);
  border-radius: var(--op-radius-sm);
  background: #fff;
  color: var(--op-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.op-rt-btn:hover {
  background: var(--op-primary-soft);
  border-color: var(--op-primary);
}
.op-rt-btn svg {
  width: 18px;
  height: 18px;
}

.op-rt-editor {
  min-height: 120px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--op-border-strong);
  border-radius: var(--op-radius-md);
  overflow-wrap: anywhere;
}
.op-rt-editor:focus {
  outline: none;
  border-color: var(--op-primary);
  box-shadow: 0 0 0 3px var(--op-primary-soft);
}
.op-rt-editor table.op-rt-table,
.op-detail-text table.op-rt-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
.op-rt-editor table.op-rt-table td,
.op-detail-text table.op-rt-table td {
  border: 1px solid var(--op-border-strong);
  padding: 6px 8px;
  min-width: 40px;
}

.op-form-actions {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 10px 16px;
  background: var(--op-bg);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow);
  z-index: 400;
}

/* ---------- Modals as bottom sheets ---------- */

.slds-modal__container {
  border-radius: var(--op-radius-xl);
  overflow: hidden;
  border: 1px solid var(--op-border);
}
.slds-modal__header {
  border-bottom: 1px solid var(--op-border);
}
.slds-modal__footer {
  border-top: 1px solid var(--op-border);
  display: flex;
  gap: 10px;
}
.slds-modal__footer .slds-button {
  flex: 1 1 0;
}
.slds-backdrop,
.slds-backdrop.slds-backdrop_open {
  background: rgba(43, 36, 64, .45);
}

/* ---------- Loading overlay (add/update/delete in flight) ---------- */

.op-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 36, 64, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

.op-loading-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .5);
  border-top-color: var(--op-primary);
  animation: op-spin .7s linear infinite;
}

@keyframes op-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .op-loading-spinner {
    animation-duration: 1.4s;
  }
}

/* ---------- Toast ---------- */

.op-toast-container {
  position: fixed;
  top: auto;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  width: 90%;
  max-width: 420px;
  pointer-events: none;
}
.op-toast-container .slds-notify {
  pointer-events: auto;
  border-radius: var(--op-radius-lg);
}
.slds-notify_toast.slds-theme_success {
  background: var(--op-surface-3);
  border: 1px solid var(--op-border);
}
.slds-notify_toast .slds-icon-text-default,
.slds-notify_toast svg {
  color: var(--op-primary);
}

/* ---------- Timeline ---------- */

:root {
  --op-tl-hour-height: 80px;
}

.op-timeline-pill-dock {
  position: sticky;
  top: 64px; /* sits right under the sticky top navbar */
  z-index: 200;
  padding: 12px 16px 8px;
  background: var(--op-bg);
}

.op-timeline-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow);
  padding: 10px 12px;
  touch-action: none;
}

.op-timeline-pill.op-timeline-pill_dragging {
  opacity: 0.85;
  box-shadow: var(--op-shadow);
}

.op-timeline-pill.op-timeline-pill_docked {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 300;
  border-color: var(--op-primary);
}

.op-timeline-pill__handle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--op-radius-sm);
  background: var(--op-primary-soft);
  color: var(--op-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.op-timeline-pill__handle svg {
  width: 18px;
  height: 18px;
}

.op-timeline-pill__title {
  flex: 1 1 120px;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--op-text);
  padding: 6px 4px;
}
.op-timeline-pill__title:focus {
  outline: none;
}

.op-timeline-pill__duration {
  flex: 0 0 auto;
  border: 1px solid var(--op-border-strong);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface-2);
  color: var(--op-text);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 8px;
  min-height: auto;
}

.op-timeline-pill__actions {
  flex: 1 0 100%;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.op-timeline-pill__actions .slds-button {
  flex: 1 1 0;
  min-height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

.op-timeline-grid-wrap {
  padding-bottom: 40px;
}

.op-timeline-grid {
  position: relative;
  border-radius: var(--op-radius-lg);
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  overflow: hidden;
}

.op-timeline-hour {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--op-tl-hour-height);
  border-top: 1px solid var(--op-border);
  padding: 4px 10px;
  box-sizing: border-box;
}
.op-timeline-hour:first-child {
  border-top: none;
}
.op-timeline-hour__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--op-text-faint);
}
.op-timeline-hour__half {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(var(--op-tl-hour-height) / 2);
  border-top: 1px dashed var(--op-border-strong);
}

.op-timeline-entry {
  position: absolute;
  left: 64px;
  right: 8px;
  border-radius: var(--op-radius-md);
  background: var(--op-cat-0-soft);
  border: 1px solid var(--op-primary);
  color: var(--op-primary-on);
  padding: 6px 10px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}
.op-timeline-entry__title {
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-timeline-entry__time {
  font-size: 0.7rem;
  color: var(--op-primary-dark);
}

/* Mobile landscape: keep the essentials above the fold */
@media (max-height: 420px) and (orientation: landscape) {
  .op-bottom-nav {
    display: none;
  }
  .op-view-page {
    padding-bottom: 24px;
  }
  #memo-form-view {
    padding-bottom: 96px;
  }
  .op-form-actions {
    bottom: 12px;
  }
  .op-toast-container {
    bottom: 12px;
  }
}