/* LittleBot Planner - App Shell (mobile-first)
   Dark UI with explicit white text on dark surfaces.
   Tabs: Today | Notes | Schedule | Files | Views
   Shared Tags UI (chips + filter modal)
   Month grid MVP + Files grid
*/

:root {
  --lbp-bg: #0b1220;
  --lbp-topbar-bg: rgba(17, 24, 39, 0.92);
  --lbp-modal-bg: rgba(17, 24, 39, 0.98);

  --lbp-surface: rgba(255, 255, 255, 0.06);
  --lbp-surface-2: rgba(255, 255, 255, 0.08);

  --lbp-border: rgba(255, 255, 255, 0.10);
  --lbp-border-2: rgba(255, 255, 255, 0.14);

  --lbp-text: #ffffff;
  --lbp-text-soft: rgba(255, 255, 255, 0.78);
  --lbp-text-dim: rgba(255, 255, 255, 0.62);

  --lbp-accent: #2563eb;
  --lbp-accent-soft: rgba(37, 99, 235, 0.18);

  --lbp-focus: rgba(37, 99, 235, 0.35);
  --lbp-danger: rgba(239, 68, 68, 0.35);

  --lbp-radius: 14px;
  --lbp-radius-lg: 16px;

  --lbp-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  --lbp-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);

  --lbp-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Mobile rhythm */
  --lbp-page-pad: 14px;
  --lbp-card-pad: 14px;
  --lbp-gap: 10px;

  /* Touch ergonomics */
  --lbp-tap: 44px;

  /* Top + bottom chrome heights */
  --lbp-bottomnav-h: 66px;
}


/* Light theme overrides (default is system + dark-friendly) */
:root[data-lbp-theme="light"]{
  --lbp-bg: #f5f7fb;
  --lbp-topbar-bg: #ffffff;
  --lbp-modal-bg: #ffffff;
  --lbp-surface: rgba(15, 23, 42, 0.04);
  --lbp-surface-2: rgba(15, 23, 42, 0.06);
  --lbp-border: rgba(15, 23, 42, 0.12);
  --lbp-border-2: rgba(15, 23, 42, 0.18);
  --lbp-text: #0f172a;
  --lbp-text-soft: rgba(15, 23, 42, 0.78);
  --lbp-text-dim: rgba(15, 23, 42, 0.62);
  --lbp-focus: rgba(37, 99, 235, 0.35);
  --lbp-danger: rgba(239, 68, 68, 0.20);
  --lbp-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
  --lbp-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

:root{
  /* Accessibility - typography prefs (A / A+ / A++) */
  --lbp-font-family-system: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --lbp-font-family-modern: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --lbp-font-family-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --lbp-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --lbp-font-family: var(--lbp-font-family-system);

  /* Font-size tokens (default A) */
  --lbp-fs-11: 11px;
  --lbp-fs-12: 12px;
  --lbp-fs-13: 13px;
  --lbp-fs-14: 14px;
  --lbp-fs-16: 16px;
  --lbp-fs-18: 18px;
  --lbp-fs-22: 22px;
}

body {
  margin: 0;
  background: var(--lbp-bg);
  color: var(--lbp-text);
}


/* Accessibility - apply typography prefs via html data attributes */
:root[data-lbp-font-size="a_plus"] {
  --lbp-fs-11: 12px;
  --lbp-fs-12: 13px;
  --lbp-fs-13: 14px;
  --lbp-fs-14: 15px;
  --lbp-fs-16: 17px;
  --lbp-fs-18: 19px;
  --lbp-fs-22: 23px;
}

:root[data-lbp-font-size="a_plusplus"] {
  --lbp-fs-11: 13px;
  --lbp-fs-12: 14px;
  --lbp-fs-13: 15px;
  --lbp-fs-14: 16px;
  --lbp-fs-16: 18px;
  --lbp-fs-18: 20px;
  --lbp-fs-22: 24px;
}

:root[data-lbp-font-family="system"] { --lbp-font-family: var(--lbp-font-family-system); }
:root[data-lbp-font-family="modern"] { --lbp-font-family: var(--lbp-font-family-modern); }
:root[data-lbp-font-family="serif"] { --lbp-font-family: var(--lbp-font-family-serif); }
:root[data-lbp-font-family="mono"] { --lbp-font-family: var(--lbp-font-family-mono); }


.lbp-app-root {
  min-height: 100vh;
  background: var(--lbp-bg);
  color: var(--lbp-text);
  font-family: var(--lbp-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lbp-app-loading {
  padding: 24px;
  opacity: 0.9;
  color: var(--lbp-text);
}

.lbp-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.lbp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--lbp-topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 16px;
  color: var(--lbp-text);
}

.lbp-topbar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}



.lbp-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.lbp-chip-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 6px 10px;
}

.lbp-chip-icon svg{
  width:16px;
  height:16px;
  display:block;
}

.lbp-settings{display:flex;flex-direction:column;gap:16px;}
.lbp-settings-section{padding:12px;border:1px solid var(--lbp-border);border-radius:16px;background:var(--lbp-surface);}
.lbp-settings-heading{font-weight:800;color:var(--lbp-text);margin-bottom:8px;}
.lbp-settings-actions{display:flex;flex-direction:column;gap:10px;margin-top:10px;}

.lbp-title {
  font-size: var(--lbp-fs-16);
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--lbp-text);
}

.lbp-subtitle {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-dim);
}

/* Content */
.lbp-content {
  flex: 1;
  padding: var(--lbp-page-pad) var(--lbp-page-pad)
    calc(var(--lbp-bottomnav-h) + 20px + var(--lbp-safe-bottom))
    var(--lbp-page-pad);
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
}

.lbp-content.lbp-wide {
  max-width: 100%;
}

/* Cards */
.lbp-card {
  background: var(--lbp-surface) !important;
  border: 1px solid var(--lbp-border);
  border-radius: var(--lbp-radius);
  padding: var(--lbp-card-pad);
  box-shadow: var(--lbp-shadow);
  margin-bottom: 12px;
  color: var(--lbp-text);
}

/* Crisp layout rhythm */
.lbp-row {
  display: grid;
  gap: var(--lbp-gap);
}

.lbp-list {
  display: grid;
  gap: var(--lbp-gap);
}


/* Notes - Phase 2 controls */
.lbp-notes-headrow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.lbp-notes-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.lbp-notes-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:12px;
}

.lbp-notes-search{
  flex: 1 1 260px;
  min-width: 180px;
}

.lbp-notes-year{
  flex: 0 0 150px;
  min-width: 140px;
}

.lbp-notes-view{
  flex: 0 0 auto;
}

.lbp-notes-tags{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex: 1 1 260px;
  min-width: 200px;
}

.lbp-notes-tags-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Segmented control */
.lbp-seg{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--lbp-border-2);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,0.18);
}

.lbp-seg-btn{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--lbp-text);
  padding: 10px 14px;
  font-weight: 950;
  font-size: var(--lbp-fs-13);
  cursor:pointer;
  min-height: 40px;
}

.lbp-seg-btn[data-on="1"]{
  background: rgba(255,255,255,0.12);
}

.lbp-seg-btn:active{
  transform: translateY(1px);
}

/* Notes grid */
.lbp-notes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--lbp-gap);
}

@media (min-width: 860px){
  .lbp-notes-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.lbp-notegrid-card .lbp-note-body{
  margin-top: 8px;
}

.lbp-notegrid-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Tag chips that are filled (colors decide text color via inline style) */
.lbp-chip-tag{
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
}


/* Typography helpers */
.lbp-fieldlabel {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-dim);
  margin-bottom: 6px;
}

.lbp-help {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
  line-height: 1.4;
}

.lbp-note-title {
  font-weight: 950;
  margin-bottom: 6px;
  font-size: var(--lbp-fs-14);
  letter-spacing: 0.15px;
  color: var(--lbp-text);
}

.lbp-note-body {
  font-size: var(--lbp-fs-13);
  color: var(--lbp-text);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Optional state label */
.lbp-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--lbp-fs-11);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.86);
}

.lbp-state-passed {
  border-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.74);
}

.lbp-passed { opacity: 0.88; }
.lbp-passed .lbp-help { color: rgba(255,255,255,0.68); }

/* Inputs */
.lbp-input {
  width: 100%;
  min-height: var(--lbp-tap);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border-2);
  background: rgba(0,0,0,0.28);
  color: var(--lbp-text);
  outline: none;

  /* iOS zoom prevention */
  font-size: var(--lbp-fs-16);
}

.lbp-input::placeholder {
  color: rgba(255,255,255,0.55);
}

.lbp-input:focus {
  border-color: var(--lbp-accent);
  box-shadow: 0 0 0 3px var(--lbp-focus);
}

textarea.lbp-input {
  resize: vertical;
}

/* Buttons */
.lbp-btn {
  appearance: none;
  min-height: var(--lbp-tap);
  border: 1px solid var(--lbp-border);
  background: var(--lbp-accent) !important;
  color: var(--lbp-accent-contrast);
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}

.lbp-btn:hover { filter: brightness(1.05); }
.lbp-btn:active { transform: translateY(1px); }

.lbp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lbp-focus);
}

.lbp-btn-secondary {
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text);
}

.lbp-btn-outline {
  background: transparent !important;
  border-color: var(--lbp-accent);
  color: var(--lbp-accent);
}

.lbp-btn-outline:hover {
  background: var(--lbp-focus) !important;
}

.lbp-btn-danger {
  background: rgba(239, 68, 68, 0.80);
  border-color: rgba(239, 68, 68, 0.55);
  color: var(--lbp-accent-contrast);
}

/* Chip buttons */
.lbp-chip {
  min-height: 34px;
  font-size: var(--lbp-fs-12);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.06);
  color: var(--lbp-accent-contrast);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.lbp-chip:hover { background: rgba(255,255,255,0.09); }
.lbp-chip:active { transform: translateY(1px); }

/* Tag picker chips (filled colors with auto-contrast text via inline styles) */
.lbp-chip-tagpick{
  border: 1px solid var(--lbp-border);
}
.lbp-chip-tagpick[data-on="1"]{
  box-shadow: 0 0 0 3px var(--lbp-focus);
}



/* Sharing member pickers */
.lbp-share-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.lbp-member-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.06);
  color: var(--lbp-accent-contrast);
  font-size: var(--lbp-fs-12);
  cursor: pointer;
  user-select: none;
}

.lbp-member-check:hover { background: rgba(255,255,255,0.09); }
.lbp-member-check input { margin: 0; }


/* Errors */
.lbp-error {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-accent-contrast);
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid var(--lbp-danger);
  padding: 10px 12px;
  border-radius: 12px;
}

/* Pressable cards */
.lbp-press {
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.lbp-press:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.075);
}

.lbp-press:active { transform: translateY(1px); }

/* Bottom navigation */
.lbp-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--lbp-topbar-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--lbp-border);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.35);

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  padding-bottom: var(--lbp-safe-bottom);
  height: calc(var(--lbp-bottomnav-h) + var(--lbp-safe-bottom));
}

.lbp-navbtn {
  position: relative;
  padding: 12px 8px;
  text-align: center;
  font-size: var(--lbp-fs-12);
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--lbp-bottomnav-h);
  font-weight: 800;
  letter-spacing: 0.1px;
}

.lbp-navbadge{
  position: absolute;
  top: 8px;
  right: 26px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lbp-accent);
  color: var(--lbp-accent-contrast);
  font-size: var(--lbp-fs-12);
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

.lbp-navbadge--dot{
  min-width: 10px;
  height: 10px;
  padding: 0;
  right: 34px;
  top: 10px;
  border-radius: 999px;
}

.lbp-navbtn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--lbp-focus);
  border-radius: 12px;
}

.lbp-navbtn[data-active="1"] {
  color: var(--lbp-accent-contrast);
  font-weight: 950;
}

/* Active indicator (subtle, feels "app-like") */
.lbp-navbtn[data-active="1"]::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 8px;
  height: 3px;
  border-radius: 99px;
  background: var(--lbp-accent);
}

/* Tag chips + filter chips */
.lbp-tagchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}

.lbp-tagchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  font-size: var(--lbp-fs-12);
  font-weight: 900;
  background: rgba(0,0,0,0.20);
  color: var(--lbp-accent-contrast);
}

.lbp-tagpicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lbp-filterchips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lbp-filterchip {
  appearance: none;
  min-height: 40px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.03);
  color: var(--lbp-accent-contrast);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: var(--lbp-fs-13);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lbp-filterchip:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}

.lbp-filterchip:active { transform: translateY(1px); }

.lbp-filterchip[data-on="1"] {
  background: var(--lbp-accent-soft);
  border-color: var(--lbp-accent);
  box-shadow: 0 0 0 3px var(--lbp-focus);
}

/* Attachments thumbnails */
.lbp-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lbp-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  object-fit: cover;
  background: rgba(0,0,0,0.25);
}

/* Files hub grid */
.lbp-filegrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lbp-file {
  background: var(--lbp-surface);
  border: 1px solid var(--lbp-border);
  border-radius: var(--lbp-radius);
  box-shadow: var(--lbp-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  color: var(--lbp-text);
}

.lbp-file:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.16);
}

.lbp-file:active { transform: translateY(1px); }

.lbp-file-thumbwrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <img> thumbs */
.lbp-file-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Non-image placeholder thumbs (if your JS uses a div) */
.lbp-file-thumbwrap > div {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.75);
  font-weight: 900;
  letter-spacing: 0.2px;
}

.lbp-file-meta {
  padding: 10px 12px 12px 12px;
}

.lbp-file-name {
  font-weight: 950;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-accent-contrast);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Month calendar MVP */
.lbp-month { padding: 0; }

.lbp-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.lbp-month-dowrow { margin-bottom: 10px; }

.lbp-month-dow {
  font-size: var(--lbp-fs-11);
  font-weight: 950;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 2px;
}

.lbp-month-cell {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  padding: 10px;
  min-height: 92px;
  color: var(--lbp-accent-contrast);
}

.lbp-month-pad {
  background: transparent;
  border-color: transparent;
}

.lbp-month-day {
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lbp-month-day:hover {
  background: var(--lbp-surface-2);
  border-color: var(--lbp-border-2);
}

.lbp-month-day:active { transform: translateY(1px); }

.lbp-month-daynum {
  font-size: var(--lbp-fs-12);
  font-weight: 950;
  color: var(--lbp-text);
  margin-bottom: 6px;
}

.lbp-month-count {
  font-size: var(--lbp-fs-11);
  color: rgba(255,255,255,0.72);
  margin-bottom: 8px;
}

.lbp-month-item {
  font-size: var(--lbp-fs-11);
  color: var(--lbp-text);
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbp-month-today {
  border-color: var(--lbp-accent);
  box-shadow: 0 0 0 2px var(--lbp-accent-soft);
}

/* Modal - bottom sheet feel */
.lbp-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overscroll-behavior: contain;
}

.lbp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.lbp-modal {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 760px;
  margin: 0 auto;
  background: var(--lbp-modal-bg);
  border: 1px solid var(--lbp-border);
  border-radius: var(--lbp-radius-lg);
  box-shadow: var(--lbp-shadow-lg);
  overflow: hidden;
  color: var(--lbp-text);

  /* Mobile-native bottom sheet sizing */
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
}

/* Sticky header inside modal for long content */
.lbp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--lbp-border);
  background: var(--lbp-modal-bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.lbp-modal-title {
  font-weight: 950;
  letter-spacing: 0.2px;
  color: var(--lbp-text);
}
.lbp-modal-body {
  padding: 14px;
  color: var(--lbp-text);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}



/* Schedule view controls (Phase 3) */
.lbp-schedule-subbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.lbp-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.06);
}

.lbp-seg-btn {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.88;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--lbp-fs-12);
  font-weight: 950;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.lbp-seg-btn[aria-selected="true"] {
  background: rgba(255,255,255,0.12);
  opacity: 1;
}

.lbp-seg-btn:active { transform: scale(0.98); }

.lbp-seg-btn:focus-visible {
  outline: 2px solid rgba(168,85,247,0.65);
  outline-offset: 2px;
}

.lbp-schedule-range {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lbp-cal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--lbp-fs-11);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.1;
  border: 1px solid rgba(0,0,0,0.10);
}

.lbp-month-items {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lbp-month-pill {
  display: block;
  width: 100%;
  font-size: var(--lbp-fs-11);
  font-weight: 950;
  padding: 4px 6px;
  border-radius: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.lbp-month-more {
  font-size: var(--lbp-fs-11);
  font-weight: 900;
  opacity: 0.78;
  margin-top: 2px;
}

.lbp-month-dots {
  display: none;
  margin-top: 8px;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}


/* Desktop-only multi-day continuation bars */
.lbp-month-bars {
  margin-top: 6px;
  display: none;
  flex-direction: column;
  gap: 3px;
}

.lbp-month-bar {
  height: 6px;
  width: 100%;
  opacity: 0.85;
  border-radius: 999px;
}

.lbp-month-bar.lbp-bar-mid {
  border-radius: 0;
}

.lbp-month-bar.lbp-bar-start {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.lbp-month-bar.lbp-bar-end {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.lbp-month-bar.lbp-bar-start.lbp-bar-end {
  border-radius: 999px;
}

@media (min-width: 901px) {
  .lbp-month-bars { display: flex; }
}

.lbp-month-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.lbp-month-dot-more {
  font-size: var(--lbp-fs-11);
  font-weight: 900;
  opacity: 0.8;
  margin-left: 2px;
}

@media (max-width: 1200px) {
  .lbp-month-items { display: none; }
  .lbp-month-dots { display: flex; }
  .lbp-month-cell { min-height: 64px; }
}

/* Action buttons inside modals - epic on mobile
   Use .lbp-actions wrapper around buttons/links
*/
.lbp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.lbp-actions > * {
  width: 100%;
}

/* If you have a single primary action, make it full width */
.lbp-actions[data-cols="1"] {
  grid-template-columns: 1fr;
}

/* Desktop tuning */
@media (min-width: 900px) {
  :root {
    --lbp-page-pad: 18px;
    --lbp-card-pad: 14px;
  }

  .lbp-content {
    padding: var(--lbp-page-pad) var(--lbp-page-pad)
      calc(var(--lbp-bottomnav-h) + 20px + var(--lbp-safe-bottom))
      var(--lbp-page-pad);
  }

  .lbp-topbar { padding: 16px 18px; }
  .lbp-title { font-size: var(--lbp-fs-18); }

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

  .lbp-month-cell { min-height: 110px; }

  /* On desktop, actions can flow naturally */
  .lbp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .lbp-actions > * {
    width: auto;
    flex: 0 0 auto;
  }
}

/* Slightly wider phones */
@media (min-width: 520px) {
  .lbp-filegrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* On wider phones, allow 3 columns for actions if you want */
  .lbp-actions[data-cols="3"] {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .lbp-btn,
  .lbp-chip,
  .lbp-press,
  .lbp-file,
  .lbp-filterchip,
  .lbp-month-day {
    transition: none !important;
  }

  .lbp-btn:active,
  .lbp-chip:active,
  .lbp-press:active,
  .lbp-file:active,
  .lbp-filterchip:active,
  .lbp-month-day:active {
    transform: none !important;
  }
}

/* ==========================================================
   Attachments (Planner-like: camera + upload + drag/drop)
   ========================================================== */

.lbp-attach-block {
  margin-top: 12px;
}

.lbp-attach-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  position: relative;
  align-items: flex-start;
}

.lbp-dropzone {
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Upload modal dropzone needs to behave like a container (button + list)
   while still acting as a drag target. */
.lbp-upload-dropzone{
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.lbp-dropzone[data-drag="1"],
.lbp-dropzone.is-dragover {
  border-color: rgba(141, 199, 255, 0.75);
  background: rgba(141, 199, 255, 0.08);
}

.lbp-attach-queue {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .lbp-attach-queue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lbp-attach-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px;
}

.lbp-attach-preview,
.lbp-attach-fileicon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.15);
  object-fit: cover;
  flex: 0 0 auto;
}

.lbp-attach-fileicon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lbp-fs-11);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.lbp-attach-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.lbp-attach-name {
  font-weight: 700;
  font-size: var(--lbp-fs-14);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbp-attach-size,
.lbp-attach-sub {
  font-size: var(--lbp-fs-12);
  opacity: 0.75;
  margin-top: 2px;
}


/* Note detail attachments: larger thumbs + clear actions */
.lbp-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .lbp-attachments {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

.lbp-att-tile {
  width: 100%;
}

.lbp-att-thumbwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.lbp-att-thumbwrap .lbp-thumb {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid var(--lbp-border);
  object-fit: cover;
  background: rgba(0,0,0,0.25);
  display: block;
}

.lbp-att-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}


.lbp-att-manage {
  appearance: none;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.04);
  color: var(--lbp-text);
  font-weight: 950;
  font-size: var(--lbp-fs-12);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lbp-att-manage:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.lbp-att-manage:active { transform: translateY(1px); }

.lbp-att-label {
  width: 100%;
  margin-top: 6px;
  font-size: var(--lbp-fs-11);
  line-height: 1.2;
  color: var(--lbp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Upload modal dropzone needs vertical layout (button + list) */
.lbp-upload-dropzone{
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
}

.lbp-upload-dropzone .lbp-help{margin:0;}


.lbp-att-remove:active {
  transform: scale(0.98);
}


/* Attach menu (mobile chooser) */
.lbp-attach-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lbp-attach-menu{display:flex;gap:8px;flex-wrap:wrap;position:absolute;left:0;top:44px;z-index:999;background:#fff;border:1px solid rgba(0,0,0,0.12);padding:10px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,0.12)}
.lbp-modal-wrap.lbp-mobile .lbp-dropzone{display:none}
.lbp-modal-wrap.lbp-mobile #lbp-upload-dropzone{display:flex !important}
.lbp-modal-wrap.lbp-mobile .lbp-dropzone + .lbp-attach-queue{margin-top:0}

/* -----------------------------
   Calendar Phase 2 - Calendar filter side panel
------------------------------ */
.lbp-sidepanel-wrap{position:fixed;inset:0;z-index:99999;}
.lbp-sidepanel-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.lbp-sidepanel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(380px, 92vw);
  background: var(--lbp-modal-bg);
  border-left:1px solid var(--lbp-border);
  transform: translateX(102%);
  transition: transform 160ms ease;
  display:flex;
  flex-direction:column;
}

.lbp-sidepanel-wrap[data-open="1"] .lbp-sidepanel{transform: translateX(0);}
.lbp-sidepanel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--lbp-border);
  background: var(--lbp-modal-bg);
}
.lbp-sidepanel-title{font-weight:700;color: var(--lbp-text);}
.lbp-sidepanel-body{padding:14px;overflow:auto;}

.lbp-cal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}

.lbp-cal-list{display:flex;flex-direction:column;gap:10px;}
.lbp-cal-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--lbp-border);
  background: var(--lbp-surface-2);
}

.lbp-cal-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;}
.lbp-cal-name{flex:1 1 auto;color: var(--lbp-text);font-weight:600;}
.lbp-cal-toggle{width:20px;height:20px;}



/* -----------------------------
   Calendar Phase 4 - Calendar Manager
------------------------------ */

.lbp-cal-manage{margin-top:12px;display:flex;justify-content:flex-start;}

.lbp-cal-mgr{width:min(720px, 96vw);}
.lbp-cal-mgr-actions{display:flex;justify-content:flex-end;margin:10px 0;}
.lbp-cal-mgr-list{display:flex;flex-direction:column;gap:10px;}

.lbp-cal-mgr-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--lbp-border);
  background:rgba(0,0,0,0.25);
}

.lbp-cal-mgr-row-main{display:flex;gap:10px;align-items:flex-start;flex:1 1 auto;min-width:0;}
.lbp-cal-mgr-row-text{min-width:0;flex:1 1 auto;}
.lbp-cal-mgr-row-title{font-weight:700;color:rgba(255,255,255,0.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lbp-cal-mgr-row-sub{margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.lbp-kind{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.88);
  font-size: var(--lbp-fs-12);
  font-weight:600;
}

.lbp-cal-status{
  margin-top:6px;
  color:rgba(255,255,255,0.75);
  font-size: var(--lbp-fs-12);
}

.lbp-cal-status-error{color:rgba(248,113,113,0.95);}

.lbp-cal-mgr-row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto;}

.lbp-cal-form{width:min(720px, 96vw);}
.lbp-cal-form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:10px;}
.lbp-cal-error{color:rgba(248,113,113,0.95);}

.lbp-color-row{display:flex;gap:10px;align-items:center;}
.lbp-color{width:56px;min-width:56px;padding:6px;}

.lbp-swatch-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.lbp-swatch{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:#93c5fd;
  cursor:pointer;
  position:relative;
}
.lbp-swatch[data-on="1"]{outline:2px solid rgba(255,255,255,0.85);outline-offset:2px;}

.lbp-btn-danger{
  border:1px solid rgba(248,113,113,0.55);
  background:rgba(248,113,113,0.16);
  color:rgba(255,255,255,0.95);
}

/* =========================
   Patch 8.1 - Files UX reset
   ========================= */

.lbp-tags-grid,
.lbp-filterrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lbp-filterbar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.lbp-files-filters {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.lbp-files-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 6px;
}

@media (min-width: 640px) {
  .lbp-files-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .lbp-files-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lbp-file-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
}

.lbp-file-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.lbp-file-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lbp-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lbp-file-thumb img.lbp-thumb-icon {
  object-fit: contain;
  padding: 14px;
  background: rgba(0,0,0,0.02);
}

.lbp-wrap.dark .lbp-file-thumb img.lbp-thumb-icon {
  background: rgba(255,255,255,0.04);
}

.lbp-file-meta {
  margin-top: 10px;
}

.lbp-file-title {
  font-weight: 650;
  font-size: var(--lbp-fs-14);
  line-height: 1.2;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbp-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  font-size: var(--lbp-fs-11);
  color: rgba(255, 255, 255, 0.90);
}

.lbp-file-preview {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}

.lbp-file-preview-img {
  width: 100%;
  max-height: 45vh;
  object-fit: contain;
  display: block;
  background: rgba(0, 0, 0, 0.25);
}

.lbp-file-preview-frame {
  width: 100%;
  height: 60vh;
  border: 0;
}

.lbp-file-preview-audio {
  width: 100%;
}

.lbp-file-preview-video {
  width: 100%;
  max-height: 60vh;
  background: rgba(0, 0, 0, 0.35);
}

.lbp-file-preview-fallback {
  padding: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.lbp-file-preview-iconwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lbp-file-preview-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.95;
}


/* Settings panel */
.lbp-settings{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lbp-acc{
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  border-radius: var(--lbp-radius);
  overflow:hidden;
}

.lbp-acc[open]{
  background: var(--lbp-surface-2);
}

.lbp-acc-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  cursor:pointer;
  user-select:none;
  font-weight: 950;
  color: var(--lbp-text);
}

.lbp-acc-summary::-webkit-details-marker{ display:none; }

.lbp-acc-meta{
  font-size: var(--lbp-fs-12);
  font-weight: 900;
  color: var(--lbp-text-dim);
}

.lbp-acc-body{
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--lbp-border);
}

.lbp-settings .lbp-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 12px;
}

.lbp-settings .lbp-row-inline{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.lbp-set-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}

.lbp-set-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border: 1px solid var(--lbp-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
}

:root[data-lbp-theme="light"] .lbp-set-item{
  background: rgba(255,255,255,0.65);
}

.lbp-set-item-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.lbp-set-item-title{
  font-weight: 950;
  color: var(--lbp-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lbp-set-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.lbp-set-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: var(--lbp-fs-12);
  border: 1px solid var(--lbp-border);
}

:root[data-lbp-theme="light"] .lbp-set-pill{
  border-color: rgba(15,23,42,0.14);
}

.lbp-badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.18);
  color: var(--lbp-text);
  font-weight: 900;
  font-size: var(--lbp-fs-12);
}

:root[data-lbp-theme="light"] .lbp-badge{
  background: rgba(255,255,255,0.75);
}

.lbp-badge.is-good{
  border-color: rgba(34,197,94,0.35);
}

.lbp-badge.is-warn{
  border-color: rgba(245,158,11,0.35);
}

.lbp-badge.is-bad{
  border-color: rgba(239,68,68,0.35);
}

.lbp-set-status{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: 12px;
}

.lbp-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color: var(--lbp-text-soft);
  font-weight: 900;
}



/* =========================================================
   Phase 5.3 - Settings UX + Theme Override Hardening
   - Tabbed settings UI
   - Mobile wrap (no horizontal scroll)
   - Color pickers
   - Stronger app-scoped button/background overrides (kills theme purple)
========================================================= */

.lbp-sidepanel {
  width: min(560px, 96vw);
  max-width: 560px;
}

@media (max-width: 640px) {
  .lbp-sidepanel {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
}

.lbp-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 12px 0;
}

.lbp-settab {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  color: var(--lbp-text);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 650;
  font-size: var(--lbp-fs-13);
  line-height: 1;
  cursor: pointer;
}

.lbp-settab[data-active="1"] {
  border-color: color-mix(in srgb, var(--lbp-accent) 55%, var(--lbp-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbp-accent) 18%, transparent);
  background: var(--lbp-accent) !important;
  color: var(--lbp-accent-contrast) !important;
}


.lbp-settings-card {
  margin: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
}

.lbp-settings-heading {
  font-weight: 800;
  color: var(--lbp-text);
  margin-bottom: 12px;
}

.lbp-setting {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 0;
}

.lbp-setting + .lbp-setting {
  border-top: 1px solid var(--lbp-border);
}

.lbp-setting-label {
  color: var(--lbp-text);
  font-weight: 700;
  font-size: var(--lbp-fs-13);
}

.lbp-setting-control .lbp-help,
.lbp-help {
  color: var(--lbp-text-soft);
  opacity: 1;
}

.lbp-readonly {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  color: var(--lbp-text);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.lbp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

.lbp-row + .lbp-row {
  border-top: 1px solid var(--lbp-border);
}

.lbp-row-left {
  min-width: 0;
}

.lbp-row-title {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lbp-row-sub {
  margin-top: 6px;
  color: var(--lbp-text-soft);
  font-size: var(--lbp-fs-12);
}

.lbp-row-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lbp-mini {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  color: var(--lbp-text);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--lbp-fs-12);
  cursor: pointer;
}

.lbp-mini:hover { filter: brightness(1.03); }
.lbp-mini-danger { border-color: color-mix(in srgb, #ef4444 60%, var(--lbp-border)); }

.lbp-chip-mini {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  font-weight: 700;
  font-size: var(--lbp-fs-12);
}

.lbp-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--lbp-border) 60%, transparent);
}
.lbp-dot-muted { background: var(--lbp-border); }

.lbp-pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--lbp-fs-12);
}

.lbp-divider {
  height: 1px;
  background: var(--lbp-border);
  margin: 14px 0;
}

.lbp-colorpick {
  width: 44px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  background: transparent;
  cursor: pointer;
}

.lbp-colorpick::-webkit-color-swatch-wrapper { padding: 0; }
.lbp-colorpick::-webkit-color-swatch {
  border: none;
  border-radius: 11px;
}

.lbp-inline-tight {
  gap: 10px;
}

@media (max-width: 640px) {
  .lbp-setting {
    grid-template-columns: 1fr;
  }
  .lbp-settings-tabs {
    padding: 12px;
  }
  .lbp-settings-card {
    margin: 12px;
  }
}

/* Make shared 2-col grids actually behave on phones */
@media (max-width: 560px) {
  .lbp-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Hard override theme "purple button" defaults */
.lbp-wrap button,
.lbp-wrap input,
.lbp-wrap select,
.lbp-wrap textarea {
  font: inherit;
}

.lbp-bottomnav {
  background: var(--lbp-topbar-bg) !important;
  border-top: 1px solid var(--lbp-border) !important;
}

.lbp-navbtn {
  background: transparent !important;
  color: var(--lbp-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.lbp-navbtn[data-active="1"] {
  color: var(--lbp-text) !important;
}

.lbp-navbtn[data-active="1"]::after {
  background: var(--lbp-accent) !important;
}

/* Calendar day tiles / buttons */
.lbp-month-cell,
.lbp-month-day,
.lbp-daycell,
.lbp-daybtn,
.lbp-cal-day {
  background: var(--lbp-surface) !important;
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
  box-shadow: none !important;
}

.lbp-month-cell:hover,
.lbp-month-day:hover,
.lbp-daycell:hover,
.lbp-daybtn:hover {
  filter: brightness(1.02);
}

/* Accent swatches */
.lbp-swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}

.lbp-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--lbp-border) 60%, transparent);
}

.lbp-swatch-on {
  border-color: var(--lbp-accent);
}

/* Improve readability of "dim" helper text in Light mode */
:root[data-lbp-theme="light"] .lbp-help {
  color: color-mix(in srgb, var(--lbp-text) 70%, var(--lbp-text-soft));
}


/* ---------- Light mode readability overrides (Phase 5.3.x hotfix) ---------- */
[data-lbp-theme="light"] .lbp-chip,
[data-lbp-theme="light"] .lbp-member-check,
[data-lbp-theme="light"] .lbp-settab,
[data-lbp-theme="light"] .lbp-segbtn,
[data-lbp-theme="light"] .lbp-modal-body,
[data-lbp-theme="light"] .lbp-file-title,
[data-lbp-theme="light"] .lbp-navbtn[data-active="1"],
[data-lbp-theme="light"] .lbp-error {
  color: var(--lbp-text) !important;
}

[data-lbp-theme="light"] .lbp-chip,
[data-lbp-theme="light"] .lbp-member-check {
  border-color: var(--lbp-border) !important;
  background: rgba(0,0,0,0.03) !important;
}

[data-lbp-theme="light"] .lbp-chip:hover,
[data-lbp-theme="light"] .lbp-member-check:hover {
  background: rgba(0,0,0,0.06) !important;
}

[data-lbp-theme="light"] .lbp-modal {
  background: rgba(0,0,0,0.35) !important;
}

[data-lbp-theme="light"] .lbp-modal-card,
[data-lbp-theme="light"] .lbp-settings-card {
  background: var(--lbp-surface) !important;
  border-color: var(--lbp-border) !important;
}

[data-lbp-theme="light"] .lbp-help {
  color: rgba(15, 23, 42, 0.70) !important;
}

[data-lbp-theme="light"] input.lbp-input,
[data-lbp-theme="light"] textarea.lbp-input,
[data-lbp-theme="light"] select.lbp-input {
  background: #ffffff !important;
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
}

[data-lbp-theme="light"] input.lbp-input::placeholder,
[data-lbp-theme="light"] textarea.lbp-input::placeholder {
  color: rgba(15, 23, 42, 0.45) !important;
}

/* ============================================================
   Phase 5.4 - UX/Mobile Stabilization (Clean, Bright)
   - Light mode readability and consistent surfaces
   - 10px radius preference for controls
   - Modal/layout fixes: stack on small screens, no horizontal scroll
   - Segmented controls: remove heavy borders, standardize styles
   ============================================================ */

:root{
  --lbp-radius: 10px;
  --lbp-radius-lg: 14px;
  --lbp-accent-contrast: #ffffff;
}

/* Stronger, cleaner light mode tokens */
:root[data-lbp-theme="light"]{
  --lbp-bg: #f6f8fc;
  --lbp-surface: #ffffff;
  --lbp-surface-2: #f1f4fa;
  --lbp-soft: rgba(11,18,32,0.04);
  --lbp-border: rgba(11,18,32,0.12);
  --lbp-text: #0b1220;
  --lbp-text-soft: rgba(11,18,32,0.72);
  --lbp-muted: rgba(11,18,32,0.50);
  --lbp-shadow: 0 10px 28px rgba(11,18,32,0.10);
  --lbp-modal-bg: #ffffff;
  --lbp-topbar-bg: rgba(255,255,255,0.92);
}

/* Buttons: less round, consistent borders in both themes */
.lbp-btn,
.lbp-btn-secondary,
.lbp-btn-danger{
  border-radius: var(--lbp-radius);
  border-color: var(--lbp-border);
}

.lbp-btn{
  padding: 10px 14px;
  color: var(--lbp-accent-contrast);
}

.lbp-btn-secondary{
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text);
}

/* Light mode: ensure scan/action buttons have strong contrast */
:root[data-lbp-theme="light"] .lbp-btn-secondary{
  background: rgba(15, 23, 42, 0.10) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
}

.lbp-btn:focus-visible{
  outline-color: rgba(34, 197, 94, 0.0);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}

/* Modal: ensure it looks like the theme, not "dark by accident" */
.lbp-modal{
  background: var(--lbp-modal-bg);
  border-color: var(--lbp-border);
  border-radius: var(--lbp-radius-lg);
}

.lbp-modal-header{
  border-bottom-color: var(--lbp-border);
}

.lbp-modal-body{
  padding: 14px;
}

/* IMPORTANT: Forms and detail views inside modals must stack vertically */
.lbp-modal-body .lbp-row{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  border-top: 0 !important;
}

.lbp-modal-body .lbp-row > *{
  min-width: 0;
}

/* Inputs should never force horizontal scrolling */
.lbp-input,
.lbp-dropzone,
.lbp-card{
  max-width: 100%;
}

.lbp-dropzone{
  overflow: hidden;
  border-color: var(--lbp-border);
  background: var(--lbp-soft);
}

.lbp-dropzone *{
  max-width: 100%;
}

/* Attachment list items should wrap cleanly */
.lbp-attach-item{
  flex-wrap: wrap;
  gap: 10px;
}

.lbp-attach-name{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Segmented controls (Month/List, List/Grid): match Notes style, slimmer */
.lbp-seg{
  border: 0;
  background: var(--lbp-soft);
  border-radius: var(--lbp-radius);
  padding: 4px;
  gap: 6px;
}

.lbp-segbtn,
.lbp-seg-btn{
  border: 0 !important;
  border-radius: calc(var(--lbp-radius) - 2px);
  padding: 8px 12px;
  min-height: 36px;
  color: var(--lbp-text-soft);
  background: transparent;
}

.lbp-segbtn[data-on="1"],
.lbp-segbtn[data-active="1"],
.lbp-seg-btn[data-on="1"],
.lbp-seg-btn[data-active="1"]{
  background: var(--lbp-accent);
  color: var(--lbp-accent-contrast);
}

/* Settings tabs: less round, easier to scan on mobile */
.lbp-settabs{
  gap: 8px;
  flex-wrap: wrap;
}

.lbp-settab{
  border-radius: var(--lbp-radius);
  padding: 8px 12px;
  min-height: 38px;
  border-color: var(--lbp-border);
}

.lbp-settings-card{
  border-color: var(--lbp-border);
}

/* Login: stack fields vertically on mobile */
.lbp-auth-row{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}

@media (min-width: 720px){
  .lbp-auth-row{
    grid-template-columns: 110px 1fr 110px auto !important;
    align-items: end !important;
  }
}

/* Attachment viewer: more usable preview sizing */
.lbp-file-preview-img{
  max-height: 70vh;
}

:root[data-lbp-theme="light"] .lbp-chip{
  border-color: var(--lbp-border);
}

/* Reduce "fat" feeling in filter areas */
.lbp-filter-card{
  padding: 12px;
  border-color: var(--lbp-border);
}




/* =============================
   Phase 5.4.1 - Light mode + theme override hardening
   Fix: sidepanel + settings/modals inheriting dark colors and theme purple bleed
============================= */

:root[data-lbp-theme="light"] .lbp-sidepanel-backdrop{
  background: rgba(11,18,32,0.22);
}

:root[data-lbp-theme="light"] .lbp-modal-backdrop{
  background: rgba(11,18,32,0.22);
}

/* ============================================================
   Phase 7.1.6 - Light mode modal hardening
   Fix: an older light-mode hotfix set the modal background to a
   translucent black. That made the *modal content* look greyed out.
   Backdrop should dim; the modal surface should remain solid.
   ============================================================ */

:root[data-lbp-theme="light"] .lbp-modal{
  background: var(--lbp-modal-bg) !important;
  color: var(--lbp-text) !important;
}

:root[data-lbp-theme="light"] .lbp-modal-header{
  background: var(--lbp-modal-bg) !important;
}

:root[data-lbp-theme="light"] .lbp-modal-title{
  color: var(--lbp-text) !important;
}

/* React Notes island - responsive control layout (2-col on desktop, stacked on mobile) */
.lbp-react-notes-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.lbp-react-notes-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.lbp-react-notes-controls{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  align-items:center;
}

@media (min-width: 720px){
  .lbp-react-notes-controls{
    grid-template-columns: 1fr 160px auto auto;
  }
}

.lbp-react-notes-tags{
  margin-top:10px;
}

/* Prevent host theme button styles (purple, etc.) from bleeding in */
.lbp-wrap .lbp-settab{
  background: var(--lbp-surface) !important;
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-wrap .lbp-settab[data-active="1"]{
  background: var(--lbp-accent) !important;
  color: var(--lbp-accent-contrast) !important;
  border-color: var(--lbp-accent) !important;
}

.lbp-wrap .lbp-chip{
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-wrap .lbp-seg-btn,
.lbp-wrap .lbp-segbtn{
  background: transparent !important;
  color: var(--lbp-text-soft) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-wrap .lbp-seg-btn[data-on="1"],
.lbp-wrap .lbp-seg-btn[data-active="1"],
.lbp-wrap .lbp-segbtn[data-on="1"],
.lbp-wrap .lbp-segbtn[data-active="1"]{
  background: var(--lbp-accent) !important;
  color: var(--lbp-accent-contrast) !important;
  border-color: var(--lbp-accent) !important;
}

.lbp-wrap .lbp-btn-secondary{
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
}

/* Sidepanel rows should read well in light mode */
:root[data-lbp-theme="light"] .lbp-cal-row{
  background: var(--lbp-surface);
}


/* =========================
   Phase 6.2.1 - Offline panel UX cleanup
   ========================= */

.lbp-muted{
  color: var(--lbp-muted);
  font-size: var(--lbp-fs-13);
}

/* Lightweight mention styling for comments (e.g., @Shelly) */
.lbp-mention{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--lbp-accent-soft);
  border: 1px solid color-mix(in srgb, var(--lbp-accent) 55%, var(--lbp-border));
  color: var(--lbp-text);
  font-weight: 600;
  line-height: 1.2;
}

.lbp-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  color: var(--lbp-text);
  font-weight: 750;
  font-size: var(--lbp-fs-12);
  line-height: 1;
  gap: 6px;
}

.lbp-badge-good{
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.35);
}

.lbp-badge-warn{
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.35);
}

.lbp-badge-bad{
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
}

.lbp-badge-slate{
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
}

.lbp-offline-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 780px){
  .lbp-offline-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lbp-offline-metric{
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  border-radius: 14px;
  padding: 10px;
}

.lbp-offline-label{
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  font-weight: 650;
}

.lbp-offline-value{
  margin-top: 8px;
  font-weight: 800;
  color: var(--lbp-text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  word-break: break-word;
}

.lbp-offline-summary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lbp-offline-card{
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  border-radius: 16px;
  padding: 12px;
}

.lbp-offline-card-label{
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  font-weight: 650;
}

.lbp-offline-card-value{
  margin-top: 6px;
  font-size: var(--lbp-fs-22);
  font-weight: 900;
  color: var(--lbp-text);
  line-height: 1.1;
}

.lbp-action-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lbp-offline-advanced{
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  border-radius: 16px;
  padding: 10px 12px;
}

.lbp-offline-advanced > summary{
  cursor: pointer;
  font-weight: 850;
  color: var(--lbp-text);
  list-style: none;
}

.lbp-offline-advanced > summary::-webkit-details-marker{
  display: none;
}

.lbp-offline-advanced > summary:before{
  content: "+";
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  color: var(--lbp-muted);
}

.lbp-offline-advanced[open] > summary:before{
  content: "-";
}

.lbp-offline-details > summary{
  cursor: pointer;
  font-weight: 850;
  color: var(--lbp-text);
  list-style: none;
  padding: 10px 12px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-soft);
  border-radius: 16px;
}

.lbp-offline-details > summary::-webkit-details-marker{
  display: none;
}

.lbp-offline-details[open] > summary{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.lbp-offline-list{
  margin-top: 10px;
}

.lbp-queue-list{
  display: grid;
  gap: 10px;
}

.lbp-queue-item{
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  border-radius: 16px;
  padding: 12px;
}

.lbp-queue-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lbp-queue-meta{
  margin-left: auto;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  font-weight: 650;
}

.lbp-queue-title{
  margin-top: 8px;
  font-weight: 850;
  color: var(--lbp-text);
  word-break: break-word;
}

.lbp-queue-sub{
  margin-top: 6px;
  color: var(--lbp-muted);
  font-size: var(--lbp-fs-13);
  word-break: break-word;
}


/* =============================================================
   Phase 6.2.2 - Pending uploads inline UI (Notes + Files)
   ============================================================= */

.lbp-pending-inline {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.lbp-files-pending {
  margin-top: 12px;
}

.lbp-files-grid-pending {
  margin-top: 10px;
}

.lbp-file-card-pending {
  opacity: 0.88;
  border-style: dashed;
}

.lbp-pending-preview {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}


/* Phase 7.0 React island (no-build) */
.lbp-offline-react { margin-top: 10px; }
.lbp-offline-legacy-details > summary { cursor: pointer; }

.lbp-offline-row {
  padding: 10px;
  border: 1px solid var(--lbp-border, rgba(255,255,255,0.10));
  border-radius: 10px;
  margin-bottom: 10px;
}

.lbp-offline-row-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lbp-offline-row-label { margin-top: 6px; font-size: var(--lbp-fs-13); }

.lbp-offline-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border, rgba(255,255,255,0.12));
  font-size: var(--lbp-fs-12);
  line-height: 1.2;
  color: var(--lbp-text, #fff);
  background: rgba(255,255,255,0.04);
}

.lbp-offline-pill-action { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.25); }



/* Phase 7.1.5 - React Notes parity helpers */
.lbp-seg-btn.is-on{
  background: rgba(255,255,255,0.12);
}

.lbp-chip-tag.is-on{
  background: rgba(255,255,255,0.10);
}

.lbp-note-att-strip{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
}

.lbp-note-att-thumb{
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.08);
}

.lbp-note-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--lbp-gap);
  margin-top: 12px;
}

@media (min-width: 640px){
  .lbp-note-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .lbp-note-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.lbp-note-gridcard{
  padding: 0;
  overflow:hidden;
  text-align:left;
}

.lbp-note-grid-hero{
  width: 100%;
  height: 120px;
  object-fit: cover;
  display:block;
  background: var(--lbp-elev);
  border-bottom: 1px solid var(--lbp-border);
}
.lbp-note-grid-hero-empty{
  display:block;
}

.lbp-note-grid-body{
  padding: 12px;
}


/* ============================================================
   Phase 7.3 - Shared React UI primitives
   Tags: unify vanilla + React chip visuals and selected state.
   ============================================================ */

.lbp-tagchip,
.lbp-chip-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  font-size: var(--lbp-fs-12);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.lbp-tagchip.is-on,
.lbp-chip-tag.is-on,
.lbp-chip-tagpick[data-on="1"],
.lbp-filterchip[data-on="1"] {
  box-shadow: 0 0 0 3px var(--lbp-focus);
}

.lbp-tagchip:active,
.lbp-chip-tag:active {
  transform: translateY(1px);
}

/* Minimal React modal shell (optional, used by islands when needed) */
.lbp-react-modal {
  border-radius: var(--lbp-radius-lg);
  border: 1px solid var(--lbp-border);
  box-shadow: var(--lbp-shadow-lg);
  background: var(--lbp-modal-bg);
  color: var(--lbp-text);
  overflow: hidden;
}

.lbp-react-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--lbp-border);
}

.lbp-react-modal-body {
  padding: 14px 14px;
}

.lbp-react-modal-foot {
  padding: 14px 14px;
  border-top: 1px solid var(--lbp-border);
}


/* Phase 7.4 - Files React island helpers (list view rows) */
.lbp-file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  cursor: pointer;
}

.lbp-file-row:focus {
  outline: 2px solid rgba(99, 102, 241, 0.45);
  outline-offset: 2px;
}

.lbp-file-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

.lbp-file-row-title {
  font-weight: 650;
  font-size: var(--lbp-fs-14);
  color: var(--lbp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbp-file-row-meta {
  margin-top: 2px;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbp-file-row-action {
  flex: 0 0 auto;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
}


/* =============================================================
   Today dashboard (Phase 7.6)
   - Mobile-first agenda + status + recent notes
   ============================================================= */

.lbp-today-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.lbp-today-head-left { flex: 1; }

.lbp-today-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lbp-today-controls {
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.lbp-dashboard { display: block; }

.lbp-dashboard-grid {
  display: grid;
  gap: var(--lbp-gap);
}

.lbp-dashboard-main { min-width: 0; display: grid; gap: var(--lbp-gap); }
.lbp-dashboard-side { min-width: 0; display: grid; gap: var(--lbp-gap); }

@media (min-width: 980px) {
  .lbp-dashboard-grid {
    grid-template-columns: 1.45fr 0.55fr;
    align-items: start;
  }
}

.lbp-agenda-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lbp-border);
}

.lbp-agenda-section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 10px;
}

.lbp-agenda-section-title {
  font-size: var(--lbp-fs-13);
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--lbp-text);
}

.lbp-agenda-list { display: flex; flex-direction: column; gap: 10px; }

.lbp-agenda-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
}

.lbp-agenda-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lbp-agenda-left { min-width: 0; flex: 1 1 220px; }
.lbp-agenda-right { flex: 0 0 auto; margin-left: auto; }

.lbp-agenda-title {
  font-size: var(--lbp-fs-15);
  font-weight: 900;
  line-height: 1.2;
  color: var(--lbp-text);
}

.lbp-agenda-meta {
  margin-top: 6px;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
  font-weight: 700;
}

.lbp-agenda-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lbp-agenda-day-title {
  margin: 10px 0 8px;
  font-size: var(--lbp-fs-12);
  font-weight: 900;
  color: var(--lbp-text-soft);
}

.lbp-today-metrics {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lbp-today-metric {
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  border-radius: 12px;
  padding: 10px;
}

.lbp-today-metric-value {
  font-weight: 900;
  font-size: var(--lbp-fs-22);
  margin-top: 4px;
}

.lbp-note-toprow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.lbp-note-meta {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
  font-weight: 800;
}

.lbp-status-row { margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.lbp-status-actions { margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.lbp-status-help { margin-top: 10px; }

/* Today modules (Saved searches surfaced as cards) */
.lbp-today-modules {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lbp-today-module .lbp-search-section {
  margin-top: 10px;
}

.lbp-today-module .lbp-search-section:first-child {
  margin-top: 0;
}

.lbp-today-module-body .lbp-search-section-body {
  margin-top: 8px;
}

.lbp-chip.lbp-chip-today {
  border-color: var(--lbp-accent);
  background: var(--lbp-accent-soft);
}

/* Shortcuts manager */
.lbp-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.lbp-shortcut-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--lbp-border);
  border-radius: var(--lbp-radius);
  background: rgba(255, 255, 255, 0.03);
}

.lbp-shortcut-row-main {
  min-width: 0;
}

.lbp-shortcut-row-name {
  font-weight: 700;
  font-size: 14px;
}

.lbp-shortcut-row-q {
  margin-top: 2px;
  font-size: 12px;
  color: var(--lbp-muted);
  word-break: break-word;
}

.lbp-shortcut-row-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--lbp-muted);
}

.lbp-shortcut-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lbp-shortcut-row-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--lbp-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

.lbp-checkbox {
  accent-color: var(--lbp-accent);
}

@media (min-width: 820px) {
  .lbp-shortcut-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .lbp-shortcut-row-actions {
    justify-content: flex-end;
  }
}


/* =========================
   Phase 7.7 - Comments UI
   ========================= */

.lbp-comment-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lbp-comment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--lbp-border);
  border-radius: 14px;
  background: var(--lbp-surface);
}

.lbp-comment-item {
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface-2);
  border-radius: 14px;
  padding: 10px;
}

.lbp-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}

.lbp-comment-author {
  font-weight: 900;
  font-size: var(--lbp-fs-13);
  color: var(--lbp-text);
}

.lbp-comment-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
  font-weight: 800;
}

.lbp-comment-del {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  color: var(--lbp-text-soft);
}

.lbp-comment-del:hover {
  background: var(--lbp-surface);
}

.lbp-comment-body {
  font-size: var(--lbp-fs-14);
  color: var(--lbp-text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.lbp-comment-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbp-comment-input {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  color: var(--lbp-text);
  font-size: var(--lbp-fs-14);
  outline: none;
}

.lbp-comment-input:focus {
  border-color: var(--lbp-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.lbp-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.lbp-comment-help {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
  font-weight: 800;
}


/* =========================
   Onboarding
   ========================= */

.lbp-onboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lbp-onboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lbp-onboard-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.lbp-onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--lbp-border, #e5e7eb);
  opacity: 0.7;
}

.lbp-onboard-dot.is-active {
  opacity: 1;
  background: var(--lbp-accent, #4f46e5);
}

.lbp-onboard-back.is-hidden {
  visibility: hidden;
}

.lbp-onboard-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 820px) {
  .lbp-onboard-body {
    grid-template-columns: 1fr;
  }
}

.lbp-onboard-kicker {
  font-size: 12px;
  color: var(--lbp-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lbp-onboard-title {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.lbp-onboard-subtitle {
  margin: 10px 0 0;
  color: var(--lbp-muted, #6b7280);
}

.lbp-onboard-options {
  display: grid;
  gap: 10px;
}


.lbp-onboard-form { display: grid; gap: 8px; }
.lbp-onboard-label { font-size: 13px; opacity: 0.95; }
.lbp-onboard-input { width: 100%; }
.lbp-onboard-help { font-size: 12px; opacity: 0.85; }


.lbp-onboard-option {
  position: relative;
  text-align: left;
  padding: 14px 46px 14px 14px;
  border: 1px solid var(--lbp-border, #e5e7eb);
  border-radius: 10px;
  background: var(--lbp-elev);
  color: var(--lbp-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lbp-onboard-option::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--lbp-border, #e5e7eb);
  background: transparent;
  box-sizing: border-box;
}

.lbp-onboard-option:hover {
  border-color: var(--lbp-accent, #4f46e5);
}

.lbp-onboard-option.is-selected {
  border-color: var(--lbp-accent, #4f46e5);
  background: var(--lbp-accent-soft, rgba(79, 70, 229, 0.18));
  box-shadow: 0 0 0 2px var(--lbp-accent-soft, rgba(79, 70, 229, 0.18));
}

.lbp-onboard-option.is-selected::after {
  border-color: var(--lbp-accent, #4f46e5);
  background: var(--lbp-accent, #4f46e5);
  box-shadow: 0 0 0 3px var(--lbp-accent-soft, rgba(79, 70, 229, 0.18));
}

.lbp-onboard-option.is-selected .lbp-onboard-option-desc {
  color: var(--lbp-text);
  opacity: 0.88;
}

.lbp-onboard-option-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.lbp-onboard-option-desc {
  font-size: 13px;
  color: var(--lbp-muted, #6b7280);
}

.lbp-onboard-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}

.lbp-onboard-spacer {
  flex: 1;
}

.lbp-onboard-summary {
  display: grid;
  gap: 10px;
}

.lbp-onboard-summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--lbp-border, #e5e7eb);
  border-radius: 10px;
  background: var(--lbp-elev);
  color: var(--lbp-text);
}

.lbp-onboard-summary-item span {
  color: var(--lbp-muted, #6b7280);
  font-size: 13px;
}

.lbp-onboard-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}



/* =============================
   Phase 7.15 - UX Smoothing pack
   - Tag chips density + consistency
   - Attachment modal + viewer polish
============================= */

:root{
  --lbp-radius: 10px;
  --lbp-radius-lg: 14px;
}

.lbp-btn,
.lbp-card,
.lbp-error{
  border-radius: var(--lbp-radius);
}

/* Tag picker chips container (React UI uses .lbp-tags-chips) */
.lbp-tagpicker{ display:block; }
.lbp-tags-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 520px){
  .lbp-tags-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling: touch;
  }
  .lbp-tags-chips::-webkit-scrollbar{ display:none; }
}

/* Make selected tags unmissable */
.lbp-chip-tagpick[data-on="1"]{
  border-color: rgba(255,255,255,0.68);
  box-shadow: 0 0 0 3px var(--lbp-focus), 0 0 0 1px rgba(255,255,255,0.45) inset;
  filter: brightness(1.06);
}

:root[data-lbp-theme="light"] .lbp-chip-tagpick[data-on="1"]{
  border-color: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25), 0 0 0 1px rgba(0,0,0,0.14) inset;
}

/* Attachment add modal: avoid horizontal squeeze on mobile */
.lbp-attach-toolbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

@media (min-width: 640px){
  .lbp-attach-toolbar{
    flex-direction:row;
    align-items:center;
  }
}

.lbp-attach-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.lbp-modal-body{
  overflow-x:hidden;
}

/* Viewer polish */
.lbp-fileviewer-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.lbp-fileviewer-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.lbp-fileviewer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.lbp-file-preview-img{
  max-width:100%;
  height:auto;
  max-height:72vh;
  border-radius: var(--lbp-radius);
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.18);
}

.lbp-file-preview-frame{
  width:100%;
  height:72vh;
  border-radius: var(--lbp-radius);
  border: 1px solid var(--lbp-border);
  background: rgba(0,0,0,0.18);
}

/* =========================
   Phase 7.15.2 - UX Smoothing II
   - Segmented toggle clarity (React islands)
   - Light-mode polish (no white-on-white)
   - Mobile control ergonomics
   ========================= */

/* Segmented controls: remove heavy borders (container) */
.lbp-seg{
  border: 0;
  background: var(--lbp-surface-2);
}

:root[data-lbp-theme="light"] .lbp-seg{
  background: var(--lbp-surface);
}

/* React islands use .lbp-seg-btn.is-on (no data-on); ensure selected is obvious */
.lbp-wrap .lbp-seg-btn.is-on,
.lbp-wrap .lbp-segbtn.is-on{
  background: var(--lbp-accent) !important;
  color: var(--lbp-accent-contrast) !important;
  border-color: var(--lbp-accent) !important;
  opacity: 1 !important;
}

/* Light-mode selected states (fallback for any non-wrapped contexts) */
:root[data-lbp-theme="light"] .lbp-seg-btn[aria-selected="true"],
:root[data-lbp-theme="light"] .lbp-seg-btn.is-on,
:root[data-lbp-theme="light"] .lbp-segbtn[data-on="1"],
:root[data-lbp-theme="light"] .lbp-segbtn[data-active="1"]{
  background: var(--lbp-surface-2);
  color: var(--lbp-text);
}

/* Mobile: keep file viewer controls usable without horizontal scroll */
@media (max-width: 520px){
  .lbp-fileviewer-actions{
    gap: 8px;
  }
  .lbp-fileviewer-actions .lbp-btn{
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =============================
   Phase 7.18 - Planner-feel polish pack
   - Skeleton loaders (Today + Schedule)
   - Subtle view transitions on tab changes
   - Strong focus-visible + keyboard affordances
============================= */

.lbp-view-fadein{
  animation: lbpFadeIn 140ms ease-out;
}

@keyframes lbpFadeIn{
  from{ opacity: 0.0; transform: translateY(2px); }
  to{ opacity: 1.0; transform: translateY(0px); }
}

@media (prefers-reduced-motion: reduce){
  .lbp-view-fadein{ animation: none; }
}

/* Skeleton cards */
.lbp-skel-card{
  position: relative;
  overflow: hidden;
}

.lbp-skel-line{
  height: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}

:root[data-lbp-theme="light"] .lbp-skel-line{
  background: rgba(15, 23, 42, 0.08);
}

.lbp-skel-line.lbp-skel-lg{ height: 18px; }
.lbp-skel-line + .lbp-skel-line{ margin-top: 10px; }

.lbp-skel-card::after{
  content: "";
  position: absolute;
  inset: -40% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: translateX(-40%);
  animation: lbpShimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}

:root[data-lbp-theme="light"] .lbp-skel-card::after{
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.10), transparent);
}

@keyframes lbpShimmer{
  from{ transform: translateX(-40%); }
  to{ transform: translateX(40%); }
}

@media (prefers-reduced-motion: reduce){
  .lbp-skel-card::after{ animation: none; }
}

/* =============================
   Phase 8.5 - Notes Power UX
   - Pinned notes (per member)
   - List density toggle (comfortable/compact)
============================= */

.lbp-seg.lbp-seg-small{
  padding: 2px;
}

.lbp-seg.lbp-seg-small .lbp-seg-btn,
.lbp-seg.lbp-seg-small .lbp-segbtn{
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.lbp-pinbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.06);
  color: var(--lbp-text);
  cursor: pointer;
}

:root[data-lbp-theme="light"] .lbp-pinbtn{
  background: rgba(15,23,42,0.04);
}

.lbp-pinbtn:hover{
  border-color: var(--lbp-accent);
}

.lbp-pinbtn-on{
  background: var(--lbp-accent);
  border-color: var(--lbp-accent);
  color: var(--lbp-accent-contrast);
}

.lbp-notes-section{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbp-notes-section + .lbp-notes-section{
  margin-top: 14px;
}

.lbp-notes-section-label{
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--lbp-muted);
  text-transform: uppercase;
}

.lbp-notes-section-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbp-notes-density-compact .lbp-note-card{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.lbp-notes-density-compact .lbp-note-title{
  font-size: 14px;
}

.lbp-notes-density-compact .lbp-help{
  font-size: 12px;
}

.lbp-notes-density-compact .lbp-note-grid-hero{
  height: 120px;
}


/* Focus-visible consistency */
.lbp-chip:focus-visible,
.lbp-filterchip:focus-visible,
.lbp-seg-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--lbp-focus);
}

/* Bottom nav micro-feedback */
.lbp-navbtn{
  transition: color 120ms ease, transform 120ms ease;
}
.lbp-navbtn:active{
  transform: translateY(1px);
}


/* =========================
   Global Search (Phase 8.0.1)
   ========================= */
.lbp-input--wide { width: 100%; }

.lbp-searchbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.lbp-search-toggles {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lbp-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  user-select: none;
}

.lbp-search-toggle input { margin: 0; }

.lbp-search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lbp-search-section-title {
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
  margin: 6px 2px;
}

.lbp-search-row {
  width: 100%;
  text-align: left;
  border: 1px solid var(--lbp-border);
  background: rgba(255,255,255,0.06);
  color: var(--lbp-text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.lbp-search-row:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.075);
}

.lbp-search-row:active { transform: translateY(1px); }

.lbp-search-row-title {
  font-size: var(--lbp-fs-14);
  font-weight: 600;
}

.lbp-search-row-meta {
  margin-top: 4px;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-muted);
}

.lbp-search-empty .lbp-note-meta { margin-top: 6px; }



/* Phase 8.1 - Global Search polish */
.lbp-mark {
  background: var(--lbp-surface-2);
  border: 1px solid var(--lbp-border);
  color: inherit;
  border-radius: 6px;
  padding: 0 2px;
}

.lbp-search-row--clear .lbp-search-row-title {
  opacity: 0.9;
}


/* Member Shortcuts (Pinned tags + Saved searches) */
.lbp-search-shortcuts {
  margin-top: 10px;
}

.lbp-search-shortcuts-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.lbp-search-shortcuts-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 6px 0;
}

.lbp-chiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.lbp-tagchip-btn {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
}

.lbp-tagchip-btn:hover {
  border-color: rgba(0,0,0,0.22);
}

.lbp-pins-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.lbp-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: rgba(0,0,0,0.015);
}

.lbp-pin-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Today Shortcuts card */
.lbp-shortcuts-section {
  margin-top: 10px;
}

/* ============================================================
   Phase 8.2.9 - Theme System v1 (Light/Dark)
   Patch focus:
   - Fix top offenders causing Light mode to look "dark-ish" (hard-coded rgba whites)
   - Keep System theme trustworthy (JS sets data-lbp-theme to light/dark)
   - Ensure interactive states use accent variables (no random greens)
   ============================================================ */

:root{
  /* Theme-safe soft surfaces used across chips, badges, cards, and hover states */
  --lbp-soft: rgba(255,255,255,0.06);
  --lbp-soft-2: rgba(255,255,255,0.09);

  /* Media surfaces (file thumbs, previews) */
  --lbp-media-bg: rgba(0,0,0,0.25);

  /* Backdrops (modals/sidepanels) */
  --lbp-overlay: rgba(0,0,0,0.55);
}

:root[data-lbp-theme="light"]{
  --lbp-soft: rgba(11,18,32,0.04);
  --lbp-soft-2: rgba(11,18,32,0.07);
  --lbp-media-bg: rgba(11,18,32,0.06);
  --lbp-overlay: rgba(2,6,23,0.35);
}

/* Backdrops: theme-safe */
.lbp-modal-backdrop,
.lbp-sidepanel-backdrop{
  background: var(--lbp-overlay) !important;
}

/* Topbar: correct divider tone in both themes */
.lbp-topbar{
  border-bottom-color: var(--lbp-border) !important;
}

/* Bottom nav: inactive uses soft text; active uses accent (not white-on-white) */
.lbp-navbtn{
  color: var(--lbp-text-soft) !important;
}

.lbp-navbtn[data-active="1"]{
  color: var(--lbp-accent) !important;
}

.lbp-navbtn[data-active="1"]::before,
.lbp-navbtn[data-active="1"]::after{
  background: var(--lbp-accent) !important;
}

/* Focus rings: always derived from accent */
.lbp-btn:focus-visible,
.lbp-btn-secondary:focus-visible,
.lbp-btn-danger:focus-visible,
.lbp-btn-outline:focus-visible,
.lbp-navbtn:focus-visible,
.lbp-chip:focus-visible,
.lbp-member-check:focus-visible,
.lbp-settab:focus-visible,
.lbp-segbtn:focus-visible,
.lbp-tagchip-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--lbp-focus) !important;
}

/* Chips, tabs, and pill controls: theme-safe surfaces + readable text */
.lbp-chip,
.lbp-member-check,
.lbp-settab,
.lbp-tagchip,
.lbp-filterchip{
  background: var(--lbp-soft) !important;
  color: var(--lbp-text) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-chip:hover,
.lbp-member-check:hover,
.lbp-filterchip:hover{
  background: var(--lbp-soft-2) !important;
}

/* Segmented control selected state remains accent; ensure unselected stays readable */
.lbp-segbtn,
.lbp-seg-btn{
  color: var(--lbp-text-soft) !important;
}

/* Share-member wrapper: remove hard-coded rgba whites */
.lbp-share-members{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-soft) !important;
}

/* Badges and small metadata pills */
.lbp-badge{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-soft) !important;
  color: var(--lbp-text-soft) !important;
}

/* Inputs: placeholders should follow theme tokens */
.lbp-input::placeholder{
  color: var(--lbp-text-dim) !important;
}

/* Files: remove white-only typography and hover shells */
.lbp-file:hover{
  background: var(--lbp-surface-2) !important;
  border-color: var(--lbp-border-2) !important;
}

.lbp-file-thumbwrap{
  background: var(--lbp-media-bg) !important;
  border-bottom-color: var(--lbp-border) !important;
}

.lbp-file-thumbwrap > div{
  color: var(--lbp-text-soft) !important;
}

.lbp-file-name,
.lbp-file-title{
  color: var(--lbp-text) !important;
}

/* Alternate file cards (detail modal + older styles) */
.lbp-file-card{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-soft) !important;
}

.lbp-file-card:hover{
  background: var(--lbp-soft-2) !important;
}

.lbp-file-thumb{
  background: var(--lbp-media-bg) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-file-preview,
.lbp-file-preview-img,
.lbp-file-preview-video{
  background: var(--lbp-media-bg) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-file-preview-fallback{
  color: var(--lbp-text-soft) !important;
}

/* Calendar month: ensure muted labels render correctly in light mode */
.lbp-month-dow,
.lbp-month-count{
  color: var(--lbp-text-dim) !important;
}

.lbp-month-item{
  background: var(--lbp-soft) !important;
  border-color: var(--lbp-border) !important;
  color: var(--lbp-text) !important;
}

/* Tag chips in settings (pins/shortcuts): keep theme-safe */
.lbp-tagchip-btn{
  background: var(--lbp-surface) !important;
  border-color: var(--lbp-border) !important;
  color: var(--lbp-text) !important;
}

.lbp-tagchip-btn:hover{
  border-color: var(--lbp-border-2) !important;
}

.lbp-pin-row{
  background: var(--lbp-soft) !important;
  border-color: var(--lbp-border) !important;
}


/* ============================================================
   Phase 8.2.10 - Theme System v1 (Patch 2)
   Focus:
   - Calendar Manager + file filter separators readable in Light mode
   - Dropzones stop assuming dark-only colors
   - Fill missing text token (--lbp-muted) for consistency
   ============================================================ */

/* Ensure muted token exists in all themes (some older blocks relied on it). */
:root{
  --lbp-muted: var(--lbp-text-dim);
}

:root[data-lbp-theme="light"]{
  --lbp-muted: rgba(11,18,32,0.55);
}

/* Generic pressable cards: stop hard-coded rgba whites from driving light mode. */
.lbp-press:hover,
.lbp-file:hover{
  background: var(--lbp-soft-2) !important;
  border-color: var(--lbp-border-2) !important;
}

/* Files: filter separators should use the theme border token. */
.lbp-filterbar,
.lbp-files-filters{
  border-top-color: var(--lbp-border) !important;
}

/* Attachments: dropzones should read cleanly in light mode as well. */
.lbp-dropzone{
  border-color: var(--lbp-border-2) !important;
  background: var(--lbp-soft) !important;
  color: var(--lbp-text-soft) !important;
}

/* Calendar Manager rows: remove dark-only backgrounds and white-only text. */
.lbp-cal-mgr-row{
  background: var(--lbp-soft) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-cal-mgr-row-title{
  color: var(--lbp-text) !important;
}

.lbp-kind{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-soft-2) !important;
  color: var(--lbp-text-soft) !important;
}

.lbp-cal-status{
  color: var(--lbp-muted) !important;
}

.lbp-cal-error,
.lbp-cal-status-error{
  color: rgba(239, 68, 68, 0.90) !important;
}

/* Swatch selected state: use accent, not white. */
.lbp-swatch[data-on="1"]{
  outline: 2px solid var(--lbp-accent) !important;
  outline-offset: 2px !important;
}



/* =============================
   Phase 8.2.2 - Theme + Accent Consistency Sweep (Patch 3)
   Outcome: remaining light-only styling removed; interactive borders/focus honor accent.
============================= */

:root{
  /* Ensure we always have a stable "muted" token (used by search, calendar status, etc.) */
  --lbp-muted: var(--lbp-text-dim);
  --lbp-divider: var(--lbp-border);
}

/* Dividers should follow theme tokens (not hard-coded rgba) */
.lbp-topbar{
  border-bottom-color: var(--lbp-divider) !important;
}

.lbp-filterbar,
.lbp-files-filters{
  border-top-color: var(--lbp-divider) !important;
}

/* Accent-driven focus: no random green rings */
.lbp-btn:focus-visible,
.lbp-btn-secondary:focus-visible,
.lbp-chip:focus-visible,
.lbp-filterchip:focus-visible,
.lbp-tagchip-btn:focus-visible,
.lbp-search-row:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--lbp-focus) !important;
}

/* Secondary buttons: keep neutral surface, but let accent guide the border */
.lbp-btn-secondary{
  border-color: var(--lbp-accent) !important;
  border-color: color-mix(in srgb, var(--lbp-accent) 35%, var(--lbp-border)) !important;
}

.lbp-btn-secondary:hover{
  border-color: var(--lbp-accent) !important;
  border-color: color-mix(in srgb, var(--lbp-accent) 55%, var(--lbp-border)) !important;
}

/* Search results + shortcuts: fully theme-aware (no #fff / black-only borders) */
.lbp-search-row{
  background: var(--lbp-surface) !important;
  border-color: var(--lbp-border) !important;
}

.lbp-search-row:hover{
  background: var(--lbp-soft) !important;
  border-color: var(--lbp-accent) !important;
  border-color: color-mix(in srgb, var(--lbp-accent) 35%, var(--lbp-border)) !important;
}

.lbp-search-shortcuts-card{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-surface) !important;
  color: var(--lbp-text) !important;
}

.lbp-tagchip-btn{
  background: var(--lbp-surface-2) !important;
  border-color: var(--lbp-border) !important;
  color: var(--lbp-text) !important;
}

.lbp-tagchip-btn:hover{
  background: var(--lbp-soft) !important;
  border-color: var(--lbp-accent) !important;
  border-color: color-mix(in srgb, var(--lbp-accent) 35%, var(--lbp-border)) !important;
}

.lbp-pin-row{
  border-color: var(--lbp-border) !important;
  background: var(--lbp-soft) !important;
  color: var(--lbp-text) !important;
}

.lbp-pin-row:hover{
  border-color: var(--lbp-accent) !important;
  border-color: color-mix(in srgb, var(--lbp-accent) 35%, var(--lbp-border)) !important;
}

/* Skeletons: follow theme tokens (avoid light-only / dark-only RGBA) */
.lbp-skel-line{
  background: var(--lbp-soft) !important;
}

/* ============================================================
   Phase 8.2 - Theme System v1 (Patch 4)
   - System theme fallback (prefers-color-scheme) when no explicit theme is set
   - Accent-tinted dividers using the current accent color (subtle)
   ============================================================ */

/* If the app hasn't set an explicit theme yet, follow the device preference. */
@media (prefers-color-scheme: light) {
  html:not([data-lbp-theme="light"]):not([data-lbp-theme="dark"]),
  html[data-lbp-theme="system"] {
    --lbp-bg: #f5f7fb;
    --lbp-topbar-bg: #ffffff;
    --lbp-modal-bg: #ffffff;
    --lbp-surface: rgba(15, 23, 42, 0.04);
    --lbp-surface-2: rgba(15, 23, 42, 0.06);
    --lbp-border: rgba(15, 23, 42, 0.12);
    --lbp-border-2: rgba(15, 23, 42, 0.18);
    --lbp-text: #0f172a;
    --lbp-text-soft: rgba(15, 23, 42, 0.78);
    --lbp-text-dim: rgba(15, 23, 42, 0.62);
    --lbp-focus: rgba(37, 99, 235, 0.35);
    --lbp-danger: rgba(239, 68, 68, 0.20);
    --lbp-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
    --lbp-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
  }
}

/* Dividers & rules: keep them theme-accurate but slightly “accent aware”. */
:root{
  --lbp-divider: var(--lbp-border);
}

@supports (color: color-mix(in srgb, #000, #fff)) {
  :root{
    --lbp-divider: color-mix(in srgb, var(--lbp-accent) 18%, var(--lbp-border));
  }
}

/* Ensure common rule elements actually use the divider token. */
.lbp-divider{ background: var(--lbp-divider) !important; }
hr{ border-color: var(--lbp-divider) !important; }


/* Phase 8.3 - Search v3: scope chips */
.lbp-search-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lbp-scopecheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lbp-scopechip {
  border: 1px solid var(--lbp-border);
  background: var(--lbp-surface);
  color: var(--lbp-text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lbp-scopechip::before {
  content: "✓";
  width: 1.05em;
  display: inline-block;
  font-weight: 900;
  opacity: 0;
}

.lbp-scopechip.is-on::before {
  opacity: 1;
}


.lbp-scopechip.is-on {
  border-color: var(--lbp-accent);
  background: var(--lbp-accent);
  color: var(--lbp-accent-contrast);
  box-shadow: none;
}


.lbp-scopechip:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 0 1px var(--lbp-accent) inset;
}

[data-theme="dark"] .lbp-scopechip:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 0 0 1px var(--lbp-accent) inset;
}

/* =========================================================
   Phase 8.3 - Search v3
   Patch 2 - Modal styling hardening + 'Show all' controls
   Goal: prevent host theme bleed (purple buttons), make scopes readable,
   and keep results skimmable.
   ========================================================= */

/* Layout: input + save on one row (desktop), scopes below */
.lbp-searchbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbp-searchbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lbp-searchbar-row .lbp-input--wide {
  flex: 1;
}

@media (max-width: 520px) {
  .lbp-searchbar-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Chips: protect from host theme button styles */
.lbp-wrap .lbp-chip,
.lbp-wrap .lbp-scopechip,
.lbp-wrap .lbp-tagchip-btn,
.lbp-wrap .lbp-search-more {
  width: auto !important;
  max-width: 100% !important;
  text-transform: none !important;
}

.lbp-wrap .lbp-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text) !important;
  cursor: pointer;
}

.lbp-wrap .lbp-chip:hover {
  background: var(--lbp-surface-3) !important;
}

.lbp-wrap .lbp-chip:focus-visible {
  outline: 2px solid var(--lbp-accent) !important;
  outline-offset: 2px;
}

.lbp-wrap .lbp-chip-muted {
  background: var(--lbp-surface) !important;
  border-color: var(--lbp-border) !important;
  color: var(--lbp-text) !important;
}

/* Scope chips */
.lbp-wrap .lbp-search-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lbp-wrap .lbp-scopechip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface) !important;
  color: var(--lbp-text-muted) !important;
  cursor: pointer;
}

.lbp-wrap .lbp-scopechip.is-on {
  border-color: var(--lbp-accent) !important;
  background: var(--lbp-accent-soft) !important;
  color: var(--lbp-accent) !important;
}

.lbp-wrap .lbp-scopechip:focus-visible {
  outline: 2px solid var(--lbp-accent) !important;
  outline-offset: 2px;
}

/* Hide the backing checkboxes for scope state (always) */
.lbp-wrap .lbp-scopecheck {
  display: none !important;
}

/* Section headers */
.lbp-wrap .lbp-search-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lbp-wrap .lbp-search-section-titletext {
  font-weight: 700;
  color: var(--lbp-text);
}

/* 'Show all'/'Show less' link-button */
.lbp-wrap .lbp-search-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--lbp-accent) !important;
  cursor: pointer;
  font-size: 12px;
}

.lbp-wrap .lbp-search-more:hover {
  background: var(--lbp-accent-soft) !important;
  border-color: var(--lbp-border) !important;
}

/* Results: protect from host theme purple buttons */
.lbp-wrap .lbp-search-row {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text) !important;
}

.lbp-wrap .lbp-search-row:hover {
  background: var(--lbp-surface-3) !important;
  transform: translateY(-1px);
}

.lbp-wrap .lbp-search-row-title {
  color: var(--lbp-text) !important;
}

.lbp-wrap .lbp-search-row-meta {
  color: var(--lbp-text-muted) !important;
}

/* Shortcuts card: swap hard-coded colors for tokens */
.lbp-wrap .lbp-search-shortcuts-card {
  background: var(--lbp-surface) !important;
  border: 1px solid var(--lbp-border) !important;
  box-shadow: var(--lbp-shadow-sm);
}

.lbp-wrap .lbp-search-shortcuts-title,
.lbp-wrap .lbp-search-shortcuts-subtitle {
  color: var(--lbp-text) !important;
}

.lbp-wrap .lbp-tagchip-btn {
  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text) !important;
}

.lbp-wrap .lbp-tagchip-btn:hover {
  background: var(--lbp-surface-3) !important;
}

/* Make sure highlights are readable on both themes */
.lbp-wrap .lbp-mark {
  background: var(--lbp-accent-soft) !important;
  color: var(--lbp-text) !important;
}


/* =========================================================
   Phase 8.3 - Search v3 (Patch 3)
   - Fix modal styling bleed from host themes (buttons, rows, chips)
   - Scope overrides to the Search modal only (lbp-search-modal)
   ========================================================= */

:root{
  /* Backfill tokens referenced by older rules (safe aliases) */
  --lbp-surface-3: var(--lbp-soft-2);
  --lbp-text-muted: var(--lbp-text-soft);
  --lbp-shadow-sm: var(--lbp-shadow);
}

/* Search modal wrapper (added in JS) */
.lbp-modal-wrap .lbp-search-modal{
  color: var(--lbp-text);
}

/* Search bar layout */
.lbp-modal-wrap .lbp-search-modal .lbp-searchbar-row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Ensure Save stays a button, not a theme-styled block */
.lbp-modal-wrap .lbp-search-modal #lbp-global-search-save{
  width: auto !important;
  min-width: 96px;
  justify-content: center !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Hide internal checkbox toggles (chips control these) */
.lbp-modal-wrap .lbp-search-modal .lbp-scopecheck{
  display: none !important;
}

/* Inputs: prevent theme form styles from bleeding in */
.lbp-modal-wrap .lbp-search-modal #lbp-global-search-input{
  background: var(--lbp-input-bg) !important;
  color: var(--lbp-text) !important;
  border: 1px solid var(--lbp-border) !important;
  border-radius: 999px !important;
  padding: 12px 14px !important;
  outline: none !important;
  box-shadow: none !important;
}
.lbp-modal-wrap .lbp-search-modal #lbp-global-search-input:focus{
  border-color: var(--lbp-accent) !important;
  box-shadow: 0 0 0 2px var(--lbp-accent-soft) !important;
}

/* Chips/buttons: harden against theme button styles */
.lbp-modal-wrap .lbp-search-modal .lbp-chip,
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip,
.lbp-modal-wrap .lbp-search-modal .lbp-search-more,
.lbp-modal-wrap .lbp-search-modal .lbp-tagchip-btn{
  appearance: none !important;
  background-image: none !important;
  text-decoration: none !important;
  box-shadow: none !important;

  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface-2) !important;
  color: var(--lbp-text) !important;

  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  line-height: 1.1;
  cursor: pointer !important;
}

/* Muted chip variant */
.lbp-modal-wrap .lbp-search-modal .lbp-chip-muted{
  background: var(--lbp-surface) !important;
}

/* Scope chips: compact */
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip{
  padding: 6px 10px !important;
  font-size: var(--lbp-fs-12) !important;
  opacity: 0.85;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
}
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip::before{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--lbp-border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip.is-on{
  border-color: var(--lbp-accent) !important;
  background: var(--lbp-accent-soft) !important;
  color: var(--lbp-accent) !important;
  opacity: 1;
}
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip.is-on::before{
  content: "✓";
  border-color: var(--lbp-accent) !important;
  background: var(--lbp-accent-soft) !important;
  color: var(--lbp-accent) !important;
}
.lbp-modal-wrap .lbp-search-modal .lbp-scopechip:hover,
.lbp-modal-wrap .lbp-search-modal .lbp-chip:hover,
.lbp-modal-wrap .lbp-search-modal .lbp-search-more:hover,
.lbp-modal-wrap .lbp-search-modal .lbp-tagchip-btn:hover{
  background: var(--lbp-surface-3) !important;
}

/* Results rows: force Planner styling (no purple theme takeover) */
.lbp-modal-wrap .lbp-search-modal .lbp-search-row{
  width: 100% !important;
  text-align: left !important;
  border: 1px solid var(--lbp-border) !important;
  background: var(--lbp-surface) !important;
  border-radius: var(--lbp-radius-md) !important;
  padding: 12px 12px !important;
  margin: 0 0 10px 0 !important;
  display: block !important;

  appearance: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.lbp-modal-wrap .lbp-search-modal .lbp-search-row:hover{
  border-color: var(--lbp-accent) !important;
  background: var(--lbp-surface-2) !important;
}
.lbp-modal-wrap .lbp-search-modal .lbp-search-row-title{
  color: var(--lbp-text) !important;
  font-weight: 950 !important;
}
.lbp-modal-wrap .lbp-search-modal .lbp-search-row-meta{
  color: var(--lbp-text-soft) !important;
}

/* Highlight mark inside results (normalize to existing lbp-mark class) */
.lbp-modal-wrap .lbp-search-modal mark.lbp-mark,
.lbp-modal-wrap .lbp-search-modal mark.lbp-hl{
  background: var(--lbp-accent-soft) !important;
  color: var(--lbp-text) !important;
  border-radius: 6px !important;
  padding: 1px 4px !important;
}

/* Mobile: stack input + save button cleanly */
@media (max-width: 520px){
  .lbp-modal-wrap .lbp-search-modal .lbp-searchbar-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .lbp-modal-wrap .lbp-search-modal #lbp-global-search-save{
    width: 100% !important;
  }
  .lbp-modal-wrap .lbp-search-modal .lbp-search-scopes{
    justify-content: flex-start !important;
  }
}


/* Light mode polish for new shortcuts UI */
[data-lbp-theme="light"] .lbp-shortcut-row {
  background: rgba(0, 0, 0, 0.02);
}

[data-lbp-theme="light"] .lbp-shortcut-row-check {
  background: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   Schedule - Day/Timeline view (Phase 8.6)
   ========================================================= */

.lbp-timeline-scroll {
  overflow: auto;
  border: 1px solid var(--lbp-border);
  border-radius: var(--lbp-radius);
  background: var(--lbp-surface);
  max-height: 70vh;
}


/* Mobile: avoid nested scroll in Day timeline (let the page scroll) */
@media (max-width: 980px) {
  .lbp-timeline-scroll {
    overflow: visible;
    max-height: none;
    border: none;
    background: transparent;
  }
}

.lbp-timeline {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.lbp-timeline-hours {
  flex: 0 0 68px;
}

.lbp-timeline-hour-label {
  height: var(--lbp-hour-h, 48px);
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-dim);
  display: flex;
  justify-content: flex-end;
  padding-top: 3px;
  padding-right: 8px;
  box-sizing: border-box;
  user-select: none;
}

.lbp-timeline-grid {
  position: relative;
  flex: 1;
  border-left: 1px solid var(--lbp-border);
  min-width: 0;
}

.lbp-timeline-hour-row {
  height: var(--lbp-hour-h, 48px);
  border-bottom: 1px solid var(--lbp-border);
  box-sizing: border-box;
  pointer-events: none;
}

.lbp-timeline-events {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lbp-timeline-event {
  position: absolute;
  border: 1px solid var(--lbp-border);
  border-left: 4px solid var(--lbp-accent);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: var(--lbp-shadow);
  background: var(--lbp-accent-soft);
  overflow: hidden;
  pointer-events: auto;
}

.lbp-timeline-event-title {
  font-weight: 800;
  font-size: var(--lbp-fs-13);
  line-height: 1.2;
}

.lbp-timeline-event-meta {
  margin-top: 4px;
  font-size: var(--lbp-fs-11);
  color: var(--lbp-text-soft);
}

.lbp-sched-allday {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.lbp-sched-allday .lbp-chip {
  cursor: pointer;
}


/* =========================================================
   Schedule - Day split layout
   ========================================================= */

.lbp-day-split {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.lbp-day-rail {
  flex: 0 0 320px;
  min-width: 260px;
}

.lbp-day-main {
  flex: 1;
  min-width: 0;
}

.lbp-day-rail-card {
  height: 100%;
}

.lbp-rail-title {
  font-weight: 700;
  font-size: var(--lbp-fs-12);
  color: var(--lbp-text-soft);
}

.lbp-rail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.lbp-rail-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--lbp-border);
  border-radius: 14px;
  background: var(--lbp-surface-2);
}

.lbp-rail-item:hover {
  border-color: var(--lbp-border-2);
}

.lbp-rail-item-title {
  font-weight: 650;
}

.lbp-rail-item-meta {
  margin-top: 4px;
  font-size: var(--lbp-fs-11);
  color: var(--lbp-text-dim);
}

@media (max-width: 980px) {
  .lbp-day-split {
    flex-direction: column;
  }
  .lbp-day-rail {
    flex: 1 1 auto;
    width: 100%;
  }
}

.lbp-timeline-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lbp-accent);
  z-index: 4;
}

.lbp-timeline-now:before {
  content: "";
  position: absolute;
  left: -6px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lbp-accent);
}


/* Attachment drawer: keep it readable on small screens */
@media (max-width: 520px){
  .lbp-attach-menu{right:0;left:auto;max-width:calc(100vw - 40px)}
}

/* Scan modal + light theme: improve button contrast (gray-on-white was too low). */
:root[data-lbp-theme="light"] .lbp-modal .lbp-btn-secondary{
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}
:root[data-lbp-theme="light"] .lbp-modal .lbp-btn-secondary:hover{
  background: rgba(15, 23, 42, 0.10) !important;
}