/* ===========================================================================
   The page header, on the fifty-three pages that have one.
   ---------------------------------------------------------------------------
   Replaces Alpino's .block-header, which was a two-column grid built to hold
   a title on the left and a search box on the right. The search box is gone
   (see PageHeader.jsx), so the grid went with it: this is a title, a trail,
   and room for the page's own buttons.
   =========================================================================== */

.apg { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.apg-main { flex: 1; min-width: 0; }

.apg-title {
  margin: 0; color: var(--label);
  font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15;
}

.apg-trail {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: 5px; color: var(--label-3); font-size: 12.5px;
}
.apg-trail a { color: var(--label-3); display: inline-flex; }
.apg-trail a:hover { color: var(--accent); }
.apg-trail i { font-size: 13px; margin: 0 5px; opacity: .6; }
.apg-trail .is-here { color: var(--label-2); }
.apg-trail span { display: inline-flex; align-items: center; }

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

/* Alpino's own header block, in case anything still renders one directly. */
.block-header { margin-bottom: 20px; }
.block-header h2 { font-size: 26px; font-weight: 700; letter-spacing: -.035em; }

@media (max-width: 560px) {
  .apg-title { font-size: 22px; }
  .apg { margin-bottom: 16px; }
}

/* ===========================================================================
   The table chrome, on the forty pages that use DataTable.
   ---------------------------------------------------------------------------
   CSS only. DataTable carries real logic - server pagination, a sort whitelist,
   column visibility, export - and none of it is touched here; these rules
   restyle the jQuery-DataTables class names it renders so the controls match
   the rest of the app instead of looking like a plugin bolted on.
   =========================================================================== */

.dataTables_wrapper > .row { align-items: center; }

/* Export / column-visibility buttons. */
.dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dt-buttons .btn,
.dt-buttons .btn.btn-secondary {
  background: var(--fill); color: var(--label-2); border: 0;
  border-radius: 8px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; box-shadow: none;
}
.dt-buttons .btn:hover { background: var(--fill-2); color: var(--label); }
.dt-buttons .btn:focus { box-shadow: 0 0 0 3px var(--accent-ring) !important; }

/* "Show N entries" and the search box. */
.dataTables_length,
.dataTables_filter { color: var(--label-2); font-size: 12.5px; }
.dataTables_length label,
.dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.dataTables_filter label { justify-content: flex-end; width: 100%; }

.dataTables_length select,
.dataTables_filter input {
  background: var(--fill); border: 0; border-radius: 8px;
  height: 32px; padding: 0 10px; color: var(--label); font-size: 13px;
  box-shadow: none;
}
/* Flexes down with its column. A fixed min-width here was wider than the
   half-row it sits in on a narrow card, so the box overflowed left and printed
   itself over the "entries" label beside it. */
.dataTables_filter input { flex: 1 1 auto; min-width: 0; max-width: 240px; }
.dataTables_length select:focus,
.dataTables_filter input:focus {
  background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring);
}

.dataTables_info { color: var(--label-3); font-size: 12.5px; padding-top: 10px; }

/* Pagination. */
.dataTables_paginate .pagination { gap: 4px; margin: 10px 0 0; }
.dataTables_paginate .page-item .page-link {
  border: 0; border-radius: 8px; min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--label-2);
  font-size: 13px; font-weight: 600; padding: 0 9px;
}
.dataTables_paginate .page-item .page-link:hover { background: var(--fill); color: var(--label); }
.dataTables_paginate .page-item.active .page-link { background: var(--accent); color: #fff; }
.dataTables_paginate .page-item.disabled .page-link { color: var(--label-3); opacity: .5; }

/* The column-visibility popover. */
.dt-button-collection-wrap .dropdown-menu {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 6px;
}

@media (max-width: 700px) {
  .dataTables_filter label { justify-content: flex-start; }
  .dataTables_filter input { max-width: none; }
}

/* ------------------------------------------------- a file you can take --- */
/* Used on a task for the documents copied off a mail. The Mail page has its
   own copy of this shape under .amail-chip; each page's stylesheet has stayed
   self-contained, and borrowing a class named for another page is the kind of
   thing that reads as a mistake six months later. */

.ffile {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 0; cursor: pointer;
  background: var(--fill); color: var(--label);
  border-radius: 8px; font-size: 12px; padding: 6px 10px;
}
.ffile:hover { background: var(--accent-tint); color: var(--accent); }
.ffile i { color: var(--label-2); font-size: 14px; }
.ffile:hover i { color: var(--accent); }
.ffile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* ------------------------------------------------------- file preview --- */

.fprev { min-height: 220px; display: flex; flex-direction: column; }
.fprev-frame { width: 100%; height: 70vh; min-height: 380px; border: 0; border-radius: 10px; background: var(--fill); }
.fprev-img { max-width: 100%; max-height: 70vh; margin: 0 auto; display: block; border-radius: 10px; }
.fprev-text {
  background: var(--fill); border-radius: 10px; padding: 14px 16px; margin: 0;
  max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 12.5px; line-height: 1.5; color: var(--label);
}
.fprev-note {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; color: var(--label-2); font-size: 13.5px; padding: 28px;
}
.fprev-note i { font-size: 38px; color: var(--separator); }
.fprev-note small { color: var(--label-3); font-size: 12px; max-width: 340px; line-height: 1.45; }
.fprev-err {
  margin: 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(255, 59, 48, .09); color: #D70015; font-size: 13px;
}

.ffile-pair { display: inline-flex; align-items: stretch; gap: 1px; max-width: 100%; }
.ffile-pair .ffile { border-radius: 8px 0 0 8px; }
.ffile-save { border-radius: 0 8px 8px 0; padding-left: 8px; padding-right: 9px; }

/* A preview can be opened from inside another dialog (assigning a mail as a
   task), so it has to outrank one. Bootstrap's .modal is 1050. */
.fprev { position: relative; z-index: 1; }
.modal:has(.fprev) { z-index: 1080; }