body.portal-layout {
  background: radial-gradient(circle at 15% 20%, rgba(90, 196, 255, 0.12), transparent 40%),
              radial-gradient(circle at 75% 0%, rgba(69, 103, 255, 0.15), transparent 40%),
              var(--cd-colour-bg);
  color: var(--cd-colour-text);
}

body.portal-layout .site-main {
  padding: 0;
  background: transparent;
}

.portal .portal-surface {
  max-width: 1400px;
  margin: 18px auto 48px;
  padding: 28px clamp(18px, 3vw, 32px) 48px;
  background: color-mix(in srgb, var(--cd-colour-surface) 94%, transparent);
  border-radius: 22px;
  border: 1px solid var(--cd-colour-border-soft);
  box-shadow: var(--cd-shadow-soft);
}

.portal .content {
  padding: 12px 0 0;
  color: var(--cd-colour-text);
}

.portal .card,
.portal .card-header,
.portal .card-footer,
.portal .bg-white {
  background-color: var(--cd-colour-surface) !important;
  color: var(--cd-colour-text);
  border-color: var(--cd-colour-border-soft) !important;
}

.portal .card.shadow-sm,
.portal .card.border-0.shadow-sm,
.portal .card.shadow-sm.mb-3,
.portal .card.shadow-sm.h-100,
.portal .card.border-0.shadow-sm.h-100 {
  box-shadow: var(--cd-shadow-soft);
}

.portal .text-muted,
.portal .text-secondary {
  color: var(--cd-colour-muted) !important;
}

.portal .jsonbox {
  background: color-mix(in srgb, var(--cd-colour-surface) 90%, transparent);
  color: var(--cd-colour-text);
  border-radius: 8px;
  border: 1px solid var(--cd-colour-border-soft);
  box-shadow: var(--cd-shadow-soft);
}

.file-module .drag-target {
  border: 2px dashed var(--cd-colour-border-soft);
  background: color-mix(in srgb, var(--cd-colour-surface) 90%, transparent);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.file-module .drag-target.border-primary {
  background-color: color-mix(in srgb, var(--cd-colour-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--cd-colour-primary) 50%, transparent) !important;
}

.file-module .list-group-item {
  background: color-mix(in srgb, var(--cd-colour-surface) 92%, transparent);
  color: var(--cd-colour-text);
  border-color: var(--cd-colour-border-soft);
}

.file-module .list-group-item + .list-group-item {
  border-top-color: var(--cd-colour-border-soft);
}

.file-module .list-group-item:hover,
.file-module .list-group-item:focus {
  background: color-mix(in srgb, var(--cd-colour-primary) 8%, var(--cd-colour-surface));
  color: var(--cd-colour-text);
}

.file-module .list-group-item.active {
  background: color-mix(in srgb, var(--cd-colour-primary) 18%, var(--cd-colour-surface));
  border-color: color-mix(in srgb, var(--cd-colour-primary) 40%, var(--cd-colour-border-soft));
  color: var(--cd-colour-text);
}

.file-module .files-toolbar {
  background: color-mix(in srgb, var(--cd-colour-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--cd-colour-border-soft);
}

.file-module .table thead {
  background: color-mix(in srgb, var(--cd-colour-surface) 96%, transparent);
  color: var(--cd-colour-text);
}

.file-module .table thead th,
.file-module .table tbody td {
  border-color: var(--cd-colour-border-soft);
}

.file-module .table thead.table-light th,
.file-module .table thead tr th {
  background: color-mix(in srgb, var(--cd-colour-surface) 96%, transparent) !important;
  color: var(--cd-colour-text);
}

.file-module .table tbody tr {
  background: color-mix(in srgb, var(--cd-colour-surface) 94%, transparent);
  color: var(--cd-colour-text);
}

.file-module .table tbody tr a,
.file-module .file-card a {
  color: var(--cd-colour-text);
}

.file-module .table tbody tr a:hover,
.file-module .file-card a:hover {
  color: var(--cd-colour-text);
  text-decoration: underline;
}

.file-module .table tbody tr:hover {
  background: color-mix(in srgb, var(--cd-colour-primary) 10%, var(--cd-colour-surface));
}

.file-module .table tbody tr.table-warning {
  background: color-mix(in srgb, #f1c40f 18%, var(--cd-colour-surface));
  color: var(--cd-colour-text);
}

.file-module .table > :not(caption) > * > * {
  border-color: var(--cd-colour-border-soft);
}

.file-module .file-card {
  background: color-mix(in srgb, var(--cd-colour-surface) 95%, transparent);
  border-color: var(--cd-colour-border-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.file-module .file-card:hover {
  box-shadow: var(--cd-shadow-soft);
  transform: translateY(-1px);
}

.file-module .files-breadcrumb {
  background: color-mix(in srgb, var(--cd-colour-surface) 88%, transparent);
  color: var(--cd-colour-text);
  border: 1px solid var(--cd-colour-border-soft);
}

.file-module .file-favourite-btn {
  border-radius: 0 !important;
}

.file-module .file-delete-btn {
  border-radius: 0 var(--bs-border-radius-sm, 0.25rem) var(--bs-border-radius-sm, 0.25rem) 0 !important;
}

.portal .btn-primary {
  background: color-mix(in srgb, var(--cd-colour-primary-soft) 75%, var(--cd-colour-surface));
  border-color: color-mix(in srgb, var(--cd-colour-primary-soft) 70%, var(--cd-colour-border-soft));
  color: var(--cd-colour-text);
}

.portal .btn-primary:hover,
.portal .btn-primary:focus {
  background: color-mix(in srgb, var(--cd-colour-primary-soft) 85%, var(--cd-colour-surface));
  border-color: color-mix(in srgb, var(--cd-colour-primary-soft) 80%, var(--cd-colour-border-soft));
}

.portal .btn-outline-primary {
  color: color-mix(in srgb, var(--cd-colour-primary) 70%, #ffffff);
  border-color: color-mix(in srgb, var(--cd-colour-primary) 65%, var(--cd-colour-border-soft));
  background: color-mix(in srgb, var(--cd-colour-surface) 96%, transparent);
}

.portal .btn-outline-primary:hover,
.portal .btn-outline-primary:focus {
  background: color-mix(in srgb, var(--cd-colour-primary) 10%, var(--cd-colour-surface));
  border-color: color-mix(in srgb, var(--cd-colour-primary) 80%, var(--cd-colour-border-soft));
  color: var(--cd-colour-text);
}