.summary-documents-page {
  .page-header {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #eef0f4;
  }

  .new-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border-radius: .6rem;
    font-weight: 500;
    font-size: .9rem;
    color: #fff;
    background: $primary;
    border: 1px solid $primary;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;

    &:hover {
      background: darken($primary, 8%);
      color: #fff;
      text-decoration: none;
    }

    &:active {
      transform: translateY(1px);
    }
  }

  .document-row {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #eef0f4;
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 .75rem 1.75rem rgba(16, 24, 40, .1);
      border-color: #dfe3ee;
    }

    &+.document-row {
      margin-top: .75rem;
    }
  }

  .doc-icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: .7rem;
    background: linear-gradient(135deg, rgba($primary, .12), rgba($primary, .2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: $primary;
  }

  .doc-info {
    flex: 1 1 auto;
    min-width: 0;

    .doc-name {
      font-weight: 600;
      color: $dark;
      margin-bottom: .15rem;
    }

    .doc-meta {
      font-size: .8rem;
      color: #98a2b3;
    }
  }

  .lock-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #b54708;
    background: #fffaeb;
    border: 1px solid #fedf89;
    padding: .2rem .5rem;
    border-radius: .3rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
  }

  .row-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;

    .action-btn {
      appearance: none;
      font: inherit;
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .55rem;
      border: 1px solid #e4e7ec;
      background: #fff;
      color: #667085;
      line-height: 1;
      transition: background .15s ease, color .15s ease, border-color .15s ease;

      &:hover {
        background: #f2f4f7;
        color: #344054;
        border-color: #d0d5dd;
      }

      &.action-btn-primary:hover {
        background: rgba($primary, .1);
        color: $primary;
        border-color: rgba($primary, .35);
      }
    }

    .action-btn-danger:hover {
      background: #fef3f2;
      color: #d92d20;
      border-color: #fda29b;
    }
  }

  .empty-state {
    background: #f8f9fb;
    border-radius: 1rem;
    border: 1px dashed #dfe3ee;
    color: #98a2b3;
    padding: 3rem 1rem;
    text-align: center;
  }

  // ---- Document header (show + edit pages) ----
  .doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;

    .doc-header-icon {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: .8rem;
      background: linear-gradient(135deg, rgba($primary, .12), rgba($primary, .22));
      display: flex;
      align-items: center;
      justify-content: center;
      color: $primary;
      font-size: 1.3rem;
    }

    .doc-header-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: $dark;
      margin-bottom: .2rem;
    }

    .doc-header-meta {
      font-size: .85rem;
      color: #98a2b3;
      display: flex;
      align-items: center;
      gap: .4rem;

      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #98a2b3;
        display: inline-block;

        &.saved {
          background: #12b76a;
        }

        &.editing {
          background: $primary;
          animation: pulse-dot 1.6s ease-in-out infinite;
        }
      }
    }
  }

  @keyframes pulse-dot {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: .35;
    }
  }

  // ---- Pill buttons (replace raw Bootstrap buttons on show/edit) ----
  .btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    border-radius: .65rem;
    font-weight: 500;
    font-size: .875rem;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;

    &:active {
      transform: translateY(1px);
    }

    &:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
    }

    &.btn-pill-primary {
      color: #fff;
      background: $primary;
      border-color: $primary;

      &:hover:not(:disabled) {
        background: darken($primary, 8%);
        color: #fff;
      }
    }

    &.btn-pill-light {
      color: #475467;
      background: #fff;
      border-color: #e4e7ec;

      &:hover {
        background: #f9fafb;
        color: #344054;
        border-color: #d0d5dd;
      }
    }

    &.btn-pill-warning {
      color: #b54708;
      background: #fffaeb;
      border-color: #fedf89;

      &:hover {
        background: #fef0c7;
      }
    }
  }

  // ---- Banners (replace raw Bootstrap .alert) ----
  .doc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.2rem;
    border-radius: .7rem;
    font-size: .9rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;

    &.doc-banner-warning {
      background: #fffaeb;
      border: 1px solid #fedf89;
      color: #b54708;
    }

    &.doc-banner-danger {
      background: #fef3f2;
      border: 1px solid #fda29b;
      color: #b42318;
    }
  }

  // ---- Canvas cards — full width/height, NOT constrained ----
  // Intentionally no max-width/margin:auto here. These fill whatever
  // space .col-md-9 gives them. Height fills the viewport below the
  // header via flex, not a hardcoded px/vh guess — adjust the 260px
  // offset below only if your breadcrumb/header stack height changes.
  .doc-viewer-card,
  .editor-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 260px);
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    padding: 2.5rem 3rem;

    @media (max-width: 768px) {
      padding: 1.5rem;
      min-height: calc(100vh - 320px);
    }
  }

  .editor-card {
    transition: border-color .15s ease, box-shadow .15s ease;

    &:focus-within {
      border-color: rgba($primary, .35);
      box-shadow: 0 0 0 3px rgba($primary, .08);
    }
  }

  .doc-empty-inline {
    text-align: center;
    color: #98a2b3;
    padding: 3rem 0;
    margin: auto;
  }

  // ---- Shared rich-text prose styling ----
  // Used by BOTH the show page (.doc-viewer-content, plain rendered HTML)
  // and the editor page (.summary-doc-content, live Tiptap output).
  // Kept as ONE grouped selector on purpose — these two previously drifted
  // apart and blockquote styling silently vanished from the editor because
  // of it. Do not split this into two separate rule blocks again.
  .doc-viewer-content,
  .summary-doc-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 1.05rem;
    line-height: 1.8;
    color: $dark;

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
    }

    h3 {
      font-size: 1.2rem;
      font-weight: 600;
      margin-top: 1.5rem;
    }

    p {
      margin-bottom: 1.1rem;
    }

    blockquote {
      border-left: 3px solid $secondary;
      padding-left: 1.2rem;
      color: #475467;
      font-style: italic;
      margin: 1.5rem 0;
    }

    ul,
    ol {
      padding-left: 1.4rem;
      margin-bottom: 1.1rem;
    }

    hr {
      border: none;
      border-top: 2px solid #ced4da;
      margin: 2rem 0;
    }

    code {
      background: $grey;
      color: #d92d20;
      padding: .15rem .4rem;
      border-radius: .3rem;
      font-size: .9em;
    }

    pre {
      background: $dark;
      color: #f2f4f7;
      padding: 1rem 1.25rem;
      border-radius: .6rem;
      overflow-x: auto;
      margin-bottom: 1.1rem;

      code {
        background: none;
        color: inherit;
        padding: 0;
      }
    }
  }

  // Tiptap's own contenteditable root — fills remaining .editor-card space
  .summary-doc-content .ProseMirror {
    outline: none;
    flex: 1;
    min-height: 100%;
  }

  // ---- Editing toolbar ----
  .editor-toolbar {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .1rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: .8rem;
    padding: .4rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin: 0 auto 1.25rem;
    flex-wrap: wrap;
    position: sticky;
    top: 80px; // app navbar height — update this if the navbar's height ever changes
    z-index: 10;
  }

  .toolbar-divider {
    width: 1px;
    height: 22px;
    background: #eef0f4;
    margin: 0 .25rem;
  }
}

.toolbar-btn {
  border: none;
  background: transparent;
  padding: .4rem .55rem;
  border-radius: .55rem;
  color: #667085;
  line-height: 1;
  font-size: .875rem;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;

  &:hover {
    background: $grey;
    color: $dark;
  }

  &.active {
    background: rgba($primary, .12);
    color: $primary;
  }
}

.custom-dropdown {
  position: relative;
  display: inline-flex;

  .dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
  }

  .dropdown-caret {
    font-size: .65rem;
  }

  .dropdown-panel {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .12);
    padding: .35rem;
    z-index: 20;
  }

  .dropdown-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: .45rem .6rem;
    border-radius: .45rem;
    font-size: .875rem;
    color: #344054;
    cursor: pointer;

    &:hover {
      background: $grey;
    }

    &.active {
      background: rgba($primary, .12);
      color: $primary;
      font-weight: 600;
    }
  }

  .dropdown-divider {
    height: 1px;
    background: #eef0f4;
    margin: .35rem 0;
  }
}