/* SKEJL workspace palette. Layout and semantic status labels stay unchanged.
   Loaded after the base/component CSS and before the authentication theme. */
:root {
  --ink: #202020;
  --muted: #6b6b6b;
  --faint: #858585;
  --bg: #fafafa;
  --paper: #fff;
  --line: #e6e6e6;
  --accent: #e90030;
  --accent-hover: #c90029;
  --accent-soft: #fff1f4;
  --accent-line: #f2c5ce;
  /* Compatibility aliases for the existing components. */
  --lime: #e90030;
  --lime-bright: #e90030;
  --green: #333;
  --orange: #67545a;
  --red: #b80027;
}
body {
  background: var(--bg);
}
::selection {
  background: #ffd6df;
  color: #202020;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
input,
select,
textarea {
  border-color: #dcdcdc;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #e9003014;
}
input::placeholder,
textarea::placeholder {
  color: #888;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}
input[type="file"] {
  background: #fafafa;
}
.form-field label {
  color: #444;
}
.form-field input:disabled {
  background: #f4f4f4;
  color: #777;
}
.form-error {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: #a50022;
}
.form-info {
  background: #f7f7f7;
  border-color: var(--line);
  color: #555;
}
.spinner {
  border-color: #e0e0e0;
  border-top-color: var(--accent);
}

/* White navigation with a restrained red active state. */
.sidebar {
  background: #fff;
  color: #555;
  border-right: 1px solid var(--line);
}
.sidebar .workspace-logo {
  display: block;
  position: relative;
  width: 158px;
  height: 44px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
}
.workspace-logo img {
  position: absolute;
  width: 150%;
  max-width: none;
  height: auto;
  left: -25%;
  top: 50%;
  transform: translateY(-50%);
}
.workspace-label {
  color: #656565;
  border-color: var(--line);
  background: #fafafa;
}
.workspace-label:hover {
  background: #f5f5f5;
  border-color: #d5d5d5;
}
.workspace-mark {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-label {
  color: #858585;
}
.nav-item:hover {
  background: #f6f6f6;
  color: #202020;
}
.nav-item.active {
  background: var(--accent-soft);
  color: #c90029;
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item .nav-count {
  background: #f0f0f0;
  color: #555;
}
.nav-item.active .nav-count {
  background: #ffdce4;
  color: #b80027;
}
.nav-separator {
  background: var(--line);
}
.sidebar-note {
  background: #fafafa;
  border-color: var(--line);
  color: #707070;
}
.sidebar-note b {
  color: #202020;
}
.sidebar-note svg {
  color: var(--accent);
}
.account {
  border-color: var(--line);
}
.account-name {
  color: #202020;
}
.account-role {
  color: #737373;
}
.avatar,
.client-avatar {
  background: #f1f1f1;
  color: #555;
}
.avatar.dark {
  background: #222;
  color: #fff;
}
.account .icon-button {
  color: #666;
}
.topbar {
  background: #fff;
}
.breadcrumbs span:last-child {
  color: #333;
}
.notification-dot {
  background: var(--accent);
}
.icon-button:hover,
.btn:hover {
  background: #f5f5f5;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn.dark {
  background: #222;
  border-color: #222;
  color: #fff;
}
.btn.dark:hover {
  background: #393939;
  border-color: #393939;
}
.btn.danger {
  color: #b80027;
  border-color: var(--accent-line);
}
.btn.danger:hover {
  background: var(--accent-soft);
}
.text-link {
  color: #c90029;
}
.text-link:hover {
  color: #98001f;
}
.footer-note {
  color: #777;
}

/* Dashboard, tables, finance and status chips. */
.stat-top,
.stat-bottom,
.legend,
.chart-labels,
.chart-months,
.chart-empty span {
  color: #737373;
}
.stat-icon {
  color: #656565;
  background: #f7f7f7;
  border-color: var(--line);
}
.stat.highlight {
  background: #fff;
  border-color: var(--line);
  border-top: 3px solid var(--accent);
}
.stat.highlight .stat-icon {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: #c90029;
}
.section-title .icon {
  color: var(--accent);
}
.onboarding {
  background: #fff;
  border-color: var(--line);
}
.step-row {
  border-color: var(--line);
}
.step-number {
  border-color: #dadada;
  color: #444;
}
.step-row small,
.step-row .icon:last-child {
  color: #777;
}
.empty-icon {
  background: #f7f7f7;
  border-color: var(--line);
  color: #777;
}
.chart-grid span {
  background: #ededed;
}
.legend i {
  background: var(--accent);
}
.legend span:last-child i {
  background: #555;
}
.badge {
  background: #f3f3f3;
  color: #666;
}
.badge.active,
.badge.approved,
.badge.paid,
.badge.done,
.badge.completed {
  background: #ececec;
  color: #282828;
}
.badge.pending,
.badge.waiting,
.badge.potential {
  background: #fff4f6;
  color: #8d3547;
}
.badge.changes,
.badge.unpaid,
.badge.overdue {
  background: #ffe8ee;
  color: #b00024;
}
.badge.doing {
  background: #fff0f3;
  color: #b80027;
}
.badge.internal {
  background: #333;
  color: #fff;
}
.badge.draft,
.badge.closed,
.badge.todo {
  background: #f1f1f1;
  color: #666;
}
.role-chip,
.role-chip.crew {
  background: #f0f0f0;
  color: #444;
}
.role-chip.admin {
  background: var(--accent-soft);
  color: #b80027;
}
.search-field .icon {
  color: #777;
}
.data-table th {
  background: #f8f8f8;
  color: #707070;
}
.data-table td {
  border-color: #ededed;
}
.data-table tbody tr:hover {
  background: #fafafa;
}
.money-summary {
  background: #f7f7f7;
  border-color: var(--line);
}
.money-summary span {
  color: #666;
}
.money-summary b {
  color: #202020;
}
.audit-item details {
  color: #555;
}
.audit-item pre {
  background: #f6f6f6;
}
.progress-track {
  background: #eee;
}
.progress-track span {
  background: var(--accent);
}
.upload-progress p {
  color: #666;
}
.tab.active {
  border-color: var(--accent);
  color: #c90029;
}

/* Tasks and the per-client calendar. */
.kanban-column {
  background: #f5f5f5;
  border-color: var(--line);
}
.kanban-heading span {
  background: #e9e9e9;
  color: #555;
}
.task-card {
  border-color: #e2e2e2;
}
.task-card select {
  background: #fafafa;
}
.task-card:has(select:focus) {
  border-color: var(--accent);
}
.task-meta {
  color: #737373;
}
.task-card.priority-high {
  border-top-color: var(--accent);
}
.task-card-tags span {
  background: #f1f1f1;
  color: #555;
}
.priority-high .task-card-tags span:first-child {
  background: var(--accent-soft);
  color: #b80027;
}
.kanban-column.drag-over {
  outline-color: var(--accent);
  background: var(--accent-soft);
}
.overdue-label {
  color: #b80027;
}
.calendar-weekday {
  background: #f7f7f7;
}
.calendar-day.outside {
  background: #fafafa;
  color: #888;
}
.calendar-day.selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar-today {
  background: #222;
  color: #fff;
}

/* Messages, review screens and files. */
.conversation-item {
  border-color: #ededed;
}
.conversation-item:hover {
  background: #fafafa;
}
.conversation-item.active {
  background: var(--accent-soft);
}
.channel-toggle {
  background: #f2f2f2;
}
.channel-toggle button {
  color: #666;
}
.channel-toggle button.active {
  background: #fff;
  color: #b80027;
}
.message-stream {
  background: #fff;
}
.message-author,
.message-author b {
  color: #666;
}
.message-bubble {
  background: #f5f5f5;
  border-color: #e9e9e9;
}
.message.mine .message-bubble,
.message.own .message-bubble {
  background: var(--accent-soft);
  border-color: #f3d4dc;
}
.message-file {
  background: #ffffffb3;
  border-color: #dedede;
}
.internal-channel {
  background: #f6f6f6;
}
.internal-banner {
  background: #eee;
  color: #444;
}
.video-card:hover {
  border-color: #ccc;
}
a.project-card:hover,
.video-tile:hover {
  box-shadow: 0 12px 30px #0000000a;
  border-color: #d2d2d2;
}
.video-cover {
  background:
    radial-gradient(ellipse at 80% 10%, #5c1b29 0, transparent 60%),
    linear-gradient(145deg, #282828, #171717);
}
.video-cover:after {
  border-color: #ff667d60;
}
.video-play {
  color: #fff;
  border-color: #ffffff60;
}
.video-version {
  color: #ccc;
}
.video-open {
  color: #666;
}
.video-thumbnail {
  background: linear-gradient(135deg, #f6f6f6, #e8e8e8);
}
.video-thumbnail:before,
.video-thumbnail:after {
  border-color: #ccc;
}
.play-circle {
  background: #ffffff80;
  border-color: #ccc;
  color: #b80027;
}
.video-player,
.review-player {
  background: #171717;
}
.star,
.rating-stars span:not(.sr-only) {
  color: #ccc;
}
.star.selected,
.rating-stars label:hover span:not(.sr-only),
.rating-stars input:checked + span {
  color: var(--accent);
}
.rating-stars input:focus-visible + span {
  outline-color: var(--accent);
}
.rating-value {
  color: #b80027;
}
.comment-item b {
  color: #444;
}
.timestamp {
  background: var(--accent-soft);
  color: #b80027;
  border-color: var(--accent-line);
}
.approval-stamp {
  color: #333;
  background: #f1f1f1;
}

/* Overlays and feedback. Keep status text, not just color, as the signal. */
.notification-panel {
  box-shadow: 0 10px 50px #00000014;
}
.notification-item:hover {
  background: #f8f8f8;
}
.notification-item.unread {
  background: var(--accent-soft);
}
.notification-item .icon {
  color: var(--accent);
}
.search-result:hover {
  background: #f6f6f6;
}
.modal-overlay {
  background: #00000066;
}
.modal {
  border-color: var(--line);
  box-shadow: 0 25px 80px #00000022;
}
.toast {
  border-color: #dedede;
  box-shadow: 0 7px 35px #00000014;
}
.toast .icon {
  color: #333;
}
.toast.error {
  border-color: var(--accent-line);
}
.toast.error .icon {
  color: #b80027;
}
@media (max-width: 720px) {
  .sidebar.open {
    box-shadow: 10px 0 50px #00000022;
  }
  .sidebar.open:after {
    background: #00000055;
  }
}