/* ======== OUTLINED ======== */
/* Font: Inter — neutral, precise, maximally legible. Reinforces the structured border language. */
/*
  Deliberate 2px borders, left accent bar on event cards (using the navbar
  theme colour), slightly tinted card headers, normal spacing, no shadows.
  Feels structured and precise — like a well-designed list/database app.
*/
[data-pg-style="outlined"] {

  /* Font: Inter — set on html so Bootstrap's body var inherits it */
  --bs-body-font-family: "Inter", system-ui, sans-serif;

  & .poppins,
  & .poppins-500,
  & .poppins-600,
  & .poppins-700 {
    font-family: "Inter", system-ui, sans-serif;
  }

  /* Cards — stronger border, square-ish, no shadow */
  & .card {
    border-radius: 4px;
    border: 2px solid var(--bs-border-color);
    box-shadow: none;
  }

  & .card-header {
    border-radius: 2px 2px 0 0 !important;
    border-bottom: 2px solid var(--bs-border-color);
    background-color: color-mix(in srgb, var(--pg-accent) 8%, var(--bs-secondary-bg));
  }

  & .card-footer {
    border-radius: 0 0 2px 2px !important;
    border-top: 2px solid var(--bs-border-color);
  }

  /* Event cards — left accent stripe using the navbar/theme colour */
  & .eventcard>.card {
    border-left: 4px solid var(--pg-accent);
    border-radius: 0 4px 4px 0;
  }

  & .eventcard__header {
    background-color: color-mix(in srgb, var(--pg-accent) 8%, var(--bs-secondary-bg));
  }

  /* Continuation bars — left accent too */
  & .continuation-bar {
    border-radius: 0 4px 4px 0;
    border: 2px solid var(--bs-border-color);
    border-left: 4px solid var(--pg-accent);
    box-shadow: none;
  }

  & .continuation-bar__accent {
    display: none;
  }

  /* Item grid tiles — strong border, tinted header */
  & .item-grid-single-item-container {
    border-radius: 4px;
    border: 2px solid var(--bs-border-color);
    box-shadow: none;
    background: none;
  }

  & .item-grid-item-header {
    border-radius: 2px 2px 0 0;
    border-bottom: 2px solid var(--bs-border-color);
    background-color: color-mix(in srgb, var(--pg-accent) 12%, var(--bs-secondary-bg));
  }

  & .item-grid-item-footer-item-actions {
    border-top: 2px solid var(--bs-border-color);
    background-color: color-mix(in srgb, var(--pg-accent) 6%, var(--bs-secondary-bg));
  }

  /* Buttons — square-ish */
  & .btn {
    border-radius: 3px;
    border-width: 2px;
  }

  & .btn-sm {
    border-radius: 3px;
    border-width: 1px;
  }

  /* Navbar — stronger bottom border to match the card language */
  & .primary-navigation-bar-container {
    box-shadow: none;
    border-bottom: 3px solid color-mix(in srgb, var(--pg-accent) 60%, #000);
  }

  /* Inputs */
  & .form-control,
  & .form-select {
    border-radius: 3px;
    border-width: 2px;
  }

  /* Dropdowns */
  & .pg-menu {
    border-radius: 4px;
    border: 2px solid var(--bs-border-color);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
  }

  /* Badges */
  & .badge {
    border-radius: 3px;
  }

  /* Notes containers */
  & .item-grid-notes-container,
  & .eventcard__notes {
    border-radius: 3px;
    border-width: 2px;
  }
}

/* --- Outlined style --- */
/* Rule-style divider: coloured bar beneath the date text, no icon box */
[data-pg-style="outlined"] {

  & .event-date-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-bottom: 0.1rem;
  }

  & .event-date-header__icon {
    display: none;
  }

  & .event-date-header__title {
    margin-inline-start: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-left: 0.75rem;
    border-left: 4px solid var(--pg-accent, #f5a623);
    width: 100%;

    &::after {
      content: "";
      display: block;
      flex-grow: 1;
      margin-inline-start: 1rem;
      height: 2px;
      background-color: color-mix(in srgb, var(--pg-accent, #f5a623) 30%, transparent);
    }
  }
}