/* ── Editorial Department Page ────────────────────────────── */
/* Reuses shared tokens: --card-bg, --border-color, --text-*, --accent-color */

.editorial-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 16px;
  gap: 12px;
  background: var(--bg, transparent);
}

/* ── Subnav ─────────────────────────────────────────────── */
.editorial-subnav {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding-bottom: 0;
}

.editorial-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.editorial-tab:hover {
  color: var(--text-primary, #1e293b);
}

.editorial-tab.active {
  color: var(--accent-color, #3b82f6);
  border-bottom-color: var(--accent-color, #3b82f6);
}

/* ── Content area ───────────────────────────────────────── */
.editorial-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Content Calendars tab — 75/25 split ─────────────────── */
.editorial-cc-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 12px;
  min-height: 0;
}

.editorial-cc-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}

.editorial-cc-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.editorial-cc-col-left  { flex: 0 0 75%; max-width: 75%; }
.editorial-cc-col-right { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }

/* ── Sheet card ─────────────────────────────────────────── */
.editorial-cc-sheet {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.editorial-cc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}

.editorial-cc-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
}

/* ── Row ────────────────────────────────────────────────── */
.editorial-cc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #eef2f7);
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  transition: background 0.1s;
}

.editorial-cc-row:last-child { border-bottom: none; }
.editorial-cc-row:hover { background: rgba(128, 128, 128, 0.04); }

/* Cells */
.editorial-cc-cell {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.editorial-cc-cell-eye       { width: 32px; justify-content: center; }
.editorial-cc-cell-avatar    { width: 36px; justify-content: center; }
.editorial-cc-cell-client    {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editorial-cc-cell-deadline  {
  width: 72px;
  color: var(--text-secondary, #64748b);
  font-variant-numeric: tabular-nums;
}
.editorial-cc-cell-status    { flex-shrink: 0; }
.editorial-cc-cell-actions   {
  width: 64px;
  justify-content: flex-end;
  gap: 4px;
}

/* In the narrow right column, give the status/deadline less room */
.editorial-cc-col-right .editorial-cc-cell-deadline { width: 56px; font-size: 12px; }
.editorial-cc-col-right .editorial-cc-cell-client   { font-size: 12px; }
.editorial-cc-col-right .editorial-cc-row           { padding: 8px 10px; gap: 6px; }

/* ── Avatar ─────────────────────────────────────────────── */
.editorial-cc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-color, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}

.editorial-cc-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.editorial-cc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.editorial-cc-avatar-empty {
  background: transparent;
  color: var(--text-muted, #94a3b8);
  border: 1.5px dashed var(--border-color, #cbd5e1);
  font-size: 14px;
  font-weight: 500;
}

/* ── Icon buttons (eye, advance, back) ─────────────────── */
.editorial-cc-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}

.editorial-cc-icon-btn:hover {
  background: rgba(128, 128, 128, 0.1);
  color: var(--accent-color, #3b82f6);
}

.editorial-cc-back-btn:hover { color: #f59e0b; }
.editorial-cc-fwd-btn:hover  { color: #10b981; }

/* ── Online Articles tab — 70/30 split override ─────────── */
/* Mirrors the design-cc-split-70-30 pattern: overrides the default
   50/50 split-sheet layout and hides per-client group header rows so
   the sheets render as a flat list. */
.editorial-oa-split-70-30 .dept-dashboard-layout { gap: 12px; }
.editorial-oa-split-70-30 .dept-dashboard-half:nth-child(1) { flex: 0 0 calc(70% - 6px); max-width: calc(70% - 6px); }
.editorial-oa-split-70-30 .dept-dashboard-half:nth-child(2) { flex: 0 0 calc(30% - 6px); max-width: calc(30% - 6px); }
.editorial-oa-split-70-30 .prod-deliv-client-row { display: none; }

/* ── Ready to Upload tab ────────────────────────────────── */
.editorial-ready-upload-tab .prod-deliv-client-row { display: none; }

.editorial-upload-btn {
  padding: 6px 14px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.editorial-upload-btn:hover { filter: brightness(1.08); }

/* ── Stub cards ─────────────────────────────────────────── */
.editorial-stub-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
  font-style: italic;
  min-height: 200px;
}