/* 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;
  }
}