/*
 * WDS brand and layout overrides.
 *
 * Bootstrap 5.3 exposes its theme through CSS custom properties, so brand colours
 * are applied by overriding variables here rather than recompiling Sass. That is
 * what keeps the no-build-step promise (PLAN.md 6a).
 *
 * Colours from assets/brand/README.md. The logo navy is the anchor: it comes from
 * the mark itself, whereas #00679e is only what the conference chose for their
 * Nextcloud theme.
 */

:root,
[data-bs-theme="light"] {
  --wds-navy: #083050;
  --wds-navy-dark: #062440;
  --wds-navy-light: #0f4a78;
  --wds-gray: #d6d6d6;

  --bs-primary: #083050;
  --bs-primary-rgb: 8, 48, 80;
  --bs-link-color: #083050;
  --bs-link-color-rgb: 8, 48, 80;
  --bs-link-hover-color: #0f4a78;
  --bs-link-hover-color-rgb: 15, 74, 120;
}

/* Bootstrap generates .btn-primary and friends from static Sass, not from the
   variables above, so the handful of components that matter are restated here. */
.btn-primary {
  --bs-btn-bg: var(--wds-navy);
  --bs-btn-border-color: var(--wds-navy);
  --bs-btn-hover-bg: var(--wds-navy-light);
  --bs-btn-hover-border-color: var(--wds-navy-light);
  --bs-btn-active-bg: var(--wds-navy-dark);
  --bs-btn-active-border-color: var(--wds-navy-dark);
  --bs-btn-disabled-bg: var(--wds-navy);
  --bs-btn-disabled-border-color: var(--wds-navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--wds-navy);
  --bs-btn-border-color: var(--wds-navy);
  --bs-btn-hover-bg: var(--wds-navy);
  --bs-btn-hover-border-color: var(--wds-navy);
  --bs-btn-active-bg: var(--wds-navy);
  --bs-btn-active-border-color: var(--wds-navy);
}

.text-bg-primary { background-color: var(--wds-navy) !important; color: #fff !important; }
.bg-primary { background-color: var(--wds-navy) !important; }
.border-primary { border-color: var(--wds-navy) !important; }
.text-primary { color: var(--wds-navy) !important; }
.form-check-input:checked { background-color: var(--wds-navy); border-color: var(--wds-navy); }
.form-control:focus, .form-select:focus {
  border-color: var(--wds-navy-light);
  box-shadow: 0 0 0 0.2rem rgba(8, 48, 80, 0.15);
}

/* ------------------------------------------------------------------ sidebar */

.app-sidebar { --lte-sidebar-bg: var(--wds-navy); background-color: var(--wds-navy) !important; }
.app-sidebar .sidebar-brand { background-color: var(--wds-navy-dark); }
.app-sidebar .nav-link.active { background-color: rgba(255, 255, 255, 0.14); color: #fff; }
.app-sidebar .nav-header {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.brand-image { height: 2rem; width: auto; }

/* ------------------------------------------------------------------- tables */

/* Priority columns stay; the rest collapse on a phone. Paired with .cell-label
   in the markup, which supplies the header text once a row becomes a card. */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem 0.5rem;
    background: var(--bs-body-bg);
  }
  .table-stack td {
    border: 0;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .table-stack td.cell-primary {
    font-weight: 600;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    display: block;
  }
  /* The heading each cell needs once the row becomes a card. Skips .cell-primary,
     which is the card's own title and would otherwise read "Project Miller residence". */
  .table-stack td[data-label]:not(.cell-primary)::before {
    content: attr(data-label);
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    flex: 0 0 auto;
    padding-right: 0.75rem;
  }
  /* Long values (a full location, a group name) wrap rather than running to the edge. */
  .table-stack td[data-label]:not(.cell-primary) {
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-stack td.cell-hide-sm { display: none; }
  .table-stack td.cell-actions { justify-content: flex-end; padding-top: 0.5rem; }
}

/* ------------------------------------------------------------------ mobile */

/* 44px is the smallest touch target that reliably works with a thumb. */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-close),
  .form-control, .form-select, .ts-control {
    min-height: 44px;
  }
  .app-content { padding-bottom: 5.5rem; }
}

/* Long forms put submit a scroll away on a phone; pin it instead. */
.form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .form-actions.form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 0;
    margin: 0 -0.75rem;
    padding-inline: 0.75rem;
  }
  .form-actions.form-actions-sticky .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------- calendar */

#calendar { --fc-border-color: var(--bs-border-color); }
.fc .fc-toolbar-title { font-size: 1.15rem; }
.fc .fc-button {
  background-color: var(--wds-navy);
  border-color: var(--wds-navy);
  text-transform: capitalize;
}
.fc .fc-button:hover, .fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--wds-navy-light);
  border-color: var(--wds-navy-light);
}
.fc-event { cursor: pointer; }
.fc .fc-list-event-title a { text-decoration: none; }
@media (max-width: 767.98px) {
  .fc .fc-toolbar { flex-direction: column; gap: 0.5rem; }
  .fc .fc-toolbar-title { font-size: 1rem; }
}

/* ------------------------------------------------------------------ misc */

.stat-tile { border-left: 4px solid var(--bs-secondary-bg); }
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.stat-tile .stat-label { font-size: 0.8rem; color: var(--bs-secondary-color); }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state .bi { font-size: 2.5rem; opacity: 0.35; display: block; margin-bottom: 0.5rem; }

/* Marks the blocks of a form that hold homeowner details. */
.private-field-group {
  border-left: 3px solid var(--bs-warning-border-subtle);
  padding-left: 0.85rem;
}

.timeline-item { border-left: 2px solid var(--bs-border-color); padding-left: 1rem; }

/* Skip link — keyboard users shouldn't tab the whole sidebar to reach content. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--wds-navy);
  color: #fff;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }