:root {
  --bg: #0B1220;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0ea5e9;
  --primary-600: #0284c7;
  --secondary: #10b981;
  --danger: #ef4444;
  --border: #e2e8f0;
  --ring: #93c5fd;
  --shadow: rgba(0,0,0,.08);
}

/* Layout helpers */
.content-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: start; }
.list-panel, .editor-panel { min-width: 0; }
.list-header { font-weight: 700; color: #1e293b; font-size: 18px; margin-bottom: 12px; }

/* Fixed chart sizing to avoid overflow beyond viewport */
.analytics-charts-grid .chart-container { height: 360px !important; }
#impressions-trend, #surfaces-trend { height: 180px !important; }
#rank-dist { height: 200px !important; }
.analytics-section canvas { height: 100% !important; }

/* User Data grid helpers */
.grid-table { border:1px solid var(--border); border-radius:8px; overflow:auto; }
.grid-row { display:grid; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #f1f5f9; }
.grid-row.header { background:#f8fafc; font-weight:600; color:#334155; position:sticky; top:0; z-index:1; }
.grid-row:last-child { border-bottom:none; }
/* Prevent cell overflow; allow scroll on table */
.grid-row .cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.grid-row.clickable { cursor:pointer; }
.grid-row.clickable:hover { background:#f8fafc; }

/* Caption Jobs table */
#caption-jobs { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; overflow-x:auto; width:100%; box-sizing:border-box; }
#caption-jobs .table-header { display:grid; grid-template-columns: 2fr .8fr 1.6fr .8fr 1fr 1.4fr; gap:8px; padding:8px 12px; font-weight:600; color:#334155; border-bottom:1px solid var(--border); min-width: 1280px; }
#caption-jobs-list { display:block; }
#caption-jobs-list > div { display:grid; grid-template-columns: 2fr .8fr 1.6fr .8fr 1fr 1.4fr; gap:8px; padding:10px 12px; align-items:center; border-bottom:1px solid #f1f5f9; min-width: 1280px; }
#caption-jobs-list > div > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#caption-jobs-list > div:last-child { border-bottom:none; }
#caption-jobs .toolbar { margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--border); }

/* Status dot */
.status-indicator { display:inline-block; width:10px; height:10px; border-radius:50%; background:#f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.status-indicator.red { background:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.status-indicator.green { background:#10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.status-indicator.yellow { background:#f59e0b; }

/* Buttons within Actions column stay contained */
#caption-jobs-list .btn { white-space: nowrap; }
#caption-jobs-list .actions { display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
  user-select: none;
}
.btn:hover { box-shadow: 0 1px 4px var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary-600); }
.btn-primary:hover { background: var(--primary-600); }

.btn-secondary { background: var(--secondary); color: #fff; border-color: #059669; }
.btn-secondary:hover { background: #059669; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
}
.chip:hover { background: #f8fafc; }
.chip:active { transform: translateY(1px); }

.card { background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: 0 2px 10px var(--shadow); }
.card-body { padding:16px; }

.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:#fff; cursor:pointer; }
.icon-btn:hover { background:#f8fafc; }
.icon-btn:active { transform: translateY(1px); }

.skeleton { background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
.skeleton:empty { min-height: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

#toast-container { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 9999; }
.toast { background: #111827; color: #fff; padding: 10px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.toast--error { background: var(--danger); }

.skeleton.inline { display:inline-block; width: 100px; height: 12px; }

/* Make Media Organization grid full-width single column so Caption Jobs matches Publish Status width */
#media-org-panel .content-grid { grid-template-columns: 1fr; }