/* RND.Hub — Design System (glassmorphism futuristic, cyan tint) */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --glass-bg: rgba(22, 58, 72, 0.70);
  --glass-bg-strong: rgba(20, 62, 78, 0.78);
  --glass-border: rgba(0, 210, 255, 0.16);
  --glass-border-hover: rgba(0, 210, 255, 0.38);
  --glass-glow: rgba(0, 200, 240, 0.09);
  --glass-glow-strong: rgba(0, 200, 240, 0.16);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 200, 240, 0.08);
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 12px rgba(0, 200, 240, 0.16);
  --glass-blur: blur(16px);
  --glass-radius: 10px;
  --accent-cyan: #00d4ff;
  --accent-cyan-dim: rgba(0, 212, 255, 0.5);
}

/* ── Global card override (volumetric glass panels) ────────────────────────── */
.card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-hover);
}

.card-header {
  background: rgba(0, 200, 240, 0.04) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ── Body background subtle gradient ───────────────────────────────────────── */
body {
  background: linear-gradient(160deg, #101a24 0%, #153040 40%, #122530 100%) !important;
  background-attachment: fixed !important;
}

/* ── Page header ─────────────────────────────────────────────────────────────── */

.page-header {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}

.page-header h2 {
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Kanban column ───────────────────────────────────────────────────────────── */

.kanban-col {
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: 10px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  /* top border set inline per-column to carry status colour */
}

.kanban-col-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* color set inline per-column */
}

/* ── Kanban card ─────────────────────────────────────────────────────────────── */

.kanban-card {
  cursor: grab;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.kanban-card .card {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 4px var(--glass-glow) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kanban-card:hover .card {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.kanban-dragging {
  opacity: 0.45;
}

.kanban-card.kanban-dragging .card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Tag badge — monospace, constrained to card width */
.kanban-card .badge {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Cover image */
.cover-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
  display: block;
}

/* ── Drop zone ───────────────────────────────────────────────────────────────── */

.kanban-drop-zone {
  border-radius: 4px;
  min-height: 60px;
  transition: background 0.12s;
}

.kanban-drop-zone.kanban-drop-over {
  background: rgba(0, 200, 240, 0.06);
  outline: 1px dashed rgba(0, 200, 240, 0.35);
  outline-offset: 2px;
}

/* ── Kanban lazy-load placeholder ───────────────────────────────────────────── */

.kanban-load-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  color: #6c757d;
  margin-bottom: 6px;
  animation: kanban-pulse 1.2s ease-in-out infinite;
}

@keyframes kanban-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}

/* ── Modal ───────────────────────────────────────────────────────────────────── */

.modal-body hr {
  opacity: 0.12;
  margin: 12px 0;
}

/* ── Inputs focus ────────────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-cyan-dim) !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 240, 0.15) !important;
}

/* ── dcc.Dropdown dark theme (DARKLY) ────────────────────────────────────────── */
/* Dash 4.x's dcc.Dropdown puts the className prop directly on the trigger
   <button> itself: className={`dash-dropdown ${className}`} — so
   "budget-dropdown" and "dash-dropdown" are the SAME element, not nested.
   ".budget-dropdown .dash-dropdown" (descendant combinator) therefore never
   matched the button and its background stayed at the design system's
   default white (--Dash-Fill-Inverse-Strong: #fff), which is why the
   already-light value text looked pale/unreadable instead of just invisible.
   The options popover is rendered via a React Portal into a sibling
   ".dash-dropdown-wrapper" div (not a descendant of the button), so it needs
   ":has()" to be reached from ".budget-dropdown". */

.budget-dropdown.dash-dropdown {
  background-color: #2b3035 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  color: #dee2e6 !important;
}
.budget-dropdown.dash-dropdown:hover {
  border-color: rgba(255,255,255,0.35) !important;
}
.budget-dropdown .dash-dropdown-value,
.budget-dropdown .dash-dropdown-value * {
  color: #f1f3f5 !important;
}
.budget-dropdown .dash-dropdown-placeholder {
  color: #8a9199 !important;
}
.budget-dropdown .dash-dropdown-trigger-icon {
  color: #adb5bd !important;
  fill: #adb5bd !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-content {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  z-index: 9999 !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-option {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-option:hover {
  background-color: #3a4048 !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-search-container {
  background-color: #2b3035 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-search {
  color: #f1f3f5 !important;
}
.dash-dropdown-wrapper:has(> .budget-dropdown) .dash-dropdown-clear {
  color: #adb5bd !important;
}

/* Match the other labor-row fields (position/employment/rate/share/months/
   overhead) to the same dark palette as the person dropdown above. */
#budget-labor-container .form-control,
#budget-labor-container .form-select,
#budget-labor-container .input-group-text {
  background-color: #2b3035 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f1f3f5 !important;
}
#budget-labor-container .form-control::placeholder {
  color: #8a9199 !important;
  opacity: 1 !important;
}
#budget-labor-container .form-control:disabled,
#budget-labor-container .form-select:disabled {
  background-color: #23272b !important;
  color: #8a9199 !important;
}
#budget-labor-container .form-select option {
  background-color: #2b3035 !important;
  color: #f1f3f5 !important;
}

/* ── DataTable cell editing (dark theme) ─────────────────────────────────────── */
/* The <input> Dash renders inside a cell while it's being edited doesn't
   inherit style_cell's color — it falls back to the browser default (near-
   black) text on the cell's dark background, making it unreadable. */

.dash-spreadsheet-container input {
  background-color: transparent !important;
  color: #f1f3f5 !important;
}

/* DataTable hardcodes row-hover background via the --hover CSS variable,
   redeclared directly on the <table> element itself (default #fdfdfd) —
   it showed as a light flash over our dark cells on mouseover. Since the
   library re-declares --hover on the <table> element, an ancestor rule
   doesn't override it; target the table element directly with higher
   specificity instead. */
#budget-equipment-table .dash-spreadsheet-inner table {
  --hover: rgba(255, 255, 255, 0.06) !important;
}

/* ── Skills matrix: override DataTable's hardcoded 500px max-height ──────────── */
#skills-matrix-table .dash-spreadsheet.dash-virtualized,
#skills-matrix-table .dash-spreadsheet.dash-freeze-top {
  max-height: none !important;
}

/* ── DataTable tooltips ───────────────────────────────────────────────────────── */

.dash-tooltip,
.dash-tooltip p,
.dash-tooltip span,
.dash-tooltip div {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #bbb !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background: rgba(16, 38, 50, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 1030;
  overflow-y: auto;
  padding: 0;
}

.sidebar-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e0e0e0;
}

.sidebar-nav {
  padding: 8px 0;
  flex: 1;
}

.sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 14px 16px 4px;
}

.sidebar-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 7px 16px !important;
  border-radius: 0 !important;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.sidebar-link.active {
  background: rgba(0, 200, 240, 0.10) !important;
  color: var(--accent-cyan) !important;
  border-left: 3px solid var(--accent-cyan);
}

.sidebar-divider {
  border-color: rgba(255, 255, 255, 0.07);
  margin: 8px 16px;
}

.sidebar-user {
  padding: 8px 16px 16px;
}

.sidebar-username {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 4px;
}

.sidebar-logout {
  font-size: 12px;
  padding: 4px 0 !important;
}

.sidebar-filters {
  padding: 0 12px 12px;
}

.sidebar-filters-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

.sidebar-filter-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.sidebar-filters select,
.sidebar-filters .form-select {
  background-color: rgba(30, 30, 46, 0.9) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-filters select option {
  background-color: #1e1e2e;
  color: #e0e0e0;
}

.sidebar-filters input:not(.form-check-input),
.sidebar-filters .form-control {
  background-color: rgba(30, 30, 46, 0.9) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-filters input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.sidebar-filters .form-check-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.sidebar-filters .form-check-input:checked {
  background-color: #375a7f;
  border-color: #375a7f;
}

.main-content {
  margin-left: 240px;
  padding-top: 16px;
  min-height: 100vh;
}

/* P17.2.1: pages rendered without a sidebar (login, register, public board)
   must not reserve space for one.  Set from the callback in app.py, so the
   offset follows what is actually rendered rather than guessing from the URL
   in CSS. */
.main-content--full {
  margin-left: 0;
}

/* ── Sidebar responsive ─────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .sidebar { width: 60px; }
  .sidebar-brand,
  .sidebar-group-label,
  .sidebar-filters,
  .sidebar-username { display: none; }
  .sidebar-link { text-align: center; padding: 10px 0 !important; font-size: 16px; }
  .sidebar-link .bi { margin: 0 !important; }
  .main-content { margin-left: 60px; }
  /* This block sits below the base rule, so the modifier has to be restated
     here or the collapsed sidebar's 60px would come back on pages that have
     no sidebar at all. */
  .main-content--full { margin-left: 0; }
}

@media (max-width: 767.98px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
}

/* ── DataTable glass styling ───────────────────────────────────────────────── */

.dash-spreadsheet-container {
  background: var(--glass-bg) !important;
  border-radius: var(--glass-radius) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: rgba(0, 200, 240, 0.06) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
  border-bottom: 1px solid rgba(0, 210, 255, 0.06) !important;
}

/* ── Modal glass ───────────────────────────────────────────────────────────── */

.modal-content {
  background: rgba(18, 44, 56, 0.96) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 200, 240, 0.08);
}

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
}

/* ── Buttons — primary cyan accent ─────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, rgba(0, 160, 220, 0.8), rgba(0, 200, 240, 0.6)) !important;
  border: 1px solid rgba(0, 200, 240, 0.3) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 200, 240, 0.15);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(0, 200, 240, 0.25) !important;
  border-color: rgba(0, 200, 240, 0.5) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 240, 0.18);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 240, 0.35);
}

/* ── Embedded help (P13.1) ─────────────────────────────────────────────────── */
.help-icon-wrap {
  display: inline-flex;
  align-items: center;
}

.help-icon {
  color: var(--accent-cyan-dim);
  opacity: 0.5;
  margin-left: 0.3rem;
  cursor: help;
  font-size: 0.85em;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.help-icon:hover,
.help-icon:focus {
  color: var(--accent-cyan);
  opacity: 1;
  outline: none;
}

.help-icon:focus-visible {
  outline: 1px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

.help-label-text {
  font-weight: 500;
}

/* Tooltip + popover surfaces under the glass design language */
.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  background: var(--glass-bg-strong);
  color: #e8f6fb;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  max-width: 260px;
  font-size: 0.82rem;
  text-align: left;
}

.help-popover.popover {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  max-width: 320px;
}

.help-popover .popover-body {
  color: #e8f6fb;
  font-size: 0.85rem;
}

.help-popover .help-md :last-child {
  margin-bottom: 0;
}

/* Teaching empty state */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #9fb8c2;
}

.empty-state-icon {
  font-size: 2.4rem;
  color: var(--accent-cyan-dim);
  display: block;
  margin-bottom: 0.75rem;
}

.empty-state-title {
  color: #e8f6fb;
  margin-bottom: 0.4rem;
}

.empty-state-hint {
  font-size: 0.9rem;
  max-width: 420px;
  margin: 0 auto 1rem;
}

.empty-state-action {
  margin-top: 0.5rem;
}

/* Help page (P13.6) */
.help-page .help-search {
  max-width: 480px;
}

.help-page .help-section-title {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.25rem;
}

.help-page .help-md :last-child {
  margin-bottom: 0;
}

@media print {
  .sidebar,
  #sidebar-container,
  .help-search,
  #help-print,
  .help-panel,
  .dash-debug-menu,
  .dash-debug-menu__outer {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .help-page .accordion-collapse {
    display: block !important;   /* expand all entries for print */
  }
}

/* Onboarding checklist (P13.5) */
.onboarding-card {
  border: 1px solid var(--glass-border) !important;
  background: rgba(0, 200, 240, 0.05) !important;
}

.onboarding-card .card-header {
  background: rgba(0, 200, 240, 0.08) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.onb-step-link {
  color: var(--accent-cyan) !important;
  text-decoration: none;
}

.onb-step-link:hover {
  text-decoration: underline;
}

.onb-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.onb-dismiss {
  color: #9fb8c2 !important;
  text-decoration: none !important;
}

.onb-dismiss:hover {
  color: var(--accent-cyan) !important;
}

.onb-restore {
  color: var(--accent-cyan-dim) !important;
  text-decoration: none !important;
}

.onb-restore:hover {
  color: var(--accent-cyan) !important;
}

/* Page help panel (P13.3) */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-help-btn {
  color: var(--accent-cyan-dim) !important;
  padding: 0 0.35rem !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.sidebar-help-btn:hover,
.sidebar-help-btn:focus {
  color: var(--accent-cyan) !important;
}

.help-panel.offcanvas {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border) !important;
}

.help-panel .offcanvas-title {
  color: var(--accent-cyan);
}

.help-panel-md {
  color: #e8f6fb;
  font-size: 0.9rem;
}

.help-panel-md h1,
.help-panel-md h2,
.help-panel-md h3 {
  color: var(--accent-cyan);
  font-size: 1rem;
  margin-top: 1.1rem;
}

.help-panel-md h1:first-child,
.help-panel-md h2:first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .help-icon,
  .tooltip,
  .tooltip.fade,
  .help-popover,
  .popover.fade,
  .help-panel.offcanvas {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Public showcase (P19) ─────────────────────────────────────────────────────
   The public page has a different reader from the rest of the system — someone
   choosing a topic, not operating a tool.  It keeps the dark identity but trades
   the working density for air: larger radii, generous padding, tinted shadows
   instead of hard borders.  Tokens are reused; no new palette. */

.public-page {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.public-cover {
  padding: 48px 40px 40px;
  margin-bottom: 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 200, 240, 0.16), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 40px rgba(0, 200, 240, 0.07);
}

.public-cover-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: #eaf7fb;
}

.public-cover-lead {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(234, 247, 251, 0.66);
  margin-bottom: 28px;
}

.public-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.public-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-cyan);
  line-height: 1;
}

.public-stat-caption {
  font-size: 13px;
  color: rgba(234, 247, 251, 0.55);
  margin-top: 6px;
}

.public-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.public-filter-label {
  font-size: 13px;
  color: rgba(234, 247, 251, 0.55);
}

/* Groups stack in priority order — new topics first, then work in progress,
   then the portfolio.  Side-by-side columns split the monitor into two narrow
   strips and put «В работе» level with «Новые темы», which is not the order a
   visitor reads in. */
.public-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.public-group {
  padding: 20px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--accent-cyan);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 28px rgba(0, 200, 240, 0.06);
}

.public-group-head {
  margin-bottom: 16px;
}

.public-group-title {
  font-size: 17px;
  font-weight: 700;
  color: #eaf7fb;
}

.public-group-count {
  margin-left: 8px;
  font-size: 13px;
  color: rgba(234, 247, 251, 0.5);
}

.public-group-hint {
  font-size: 12px;
  color: rgba(234, 247, 251, 0.45);
  margin-top: 2px;
}

/* Cards fill the width of a full-width block: three across on a monitor, one
   on a phone, without a breakpoint per size. */
.public-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Cards carry their own surface here — .kanban-card is only kept so the
   existing click handler finds them. */
.public-card {
  border-radius: 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.public-card:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 16px var(--glass-glow-strong);
}

/* One height for every card: a grid of ragged tiles reads as broken layout
   rather than as varying content.  The cap is the tallest a card needs when
   its title runs to three lines with a row of skills under it; longer titles
   are clipped and read in full in the dialog. */
.public-card-body {
  padding: 16px 18px;
  height: 186px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.public-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.public-card-direction {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.public-card-type {
  font-size: 11px;
  color: rgba(234, 247, 251, 0.45);
}

.public-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #eaf7fb;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.public-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 26px;      /* one row; the rest are visible in the dialog */
  overflow: hidden;
}

.public-skill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  color: rgba(0, 212, 255, 0.85);
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid rgba(0, 212, 255, 0.18);
}

.public-card-tag {
  font-size: 11px;
  color: rgba(234, 247, 251, 0.35);
  letter-spacing: 0.04em;
  margin-top: auto;      /* pinned to the bottom, so tags line up across cards */
}

.public-empty,
.public-footer {
  padding: 28px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: rgba(234, 247, 251, 0.6);
  text-align: center;
}

.public-footer {
  margin-top: 28px;
  font-size: 14px;
}

@media (max-width: 991.98px) {
  .public-cover { padding: 32px 24px; }
  .public-cover-title { font-size: 32px; }
  .public-stats { gap: 24px; }
}