/* ---- Ads > Library (creative inventory) ---- */
/* Restraint: the creatives are the colour on this screen, the chrome is not. Orange is
   reserved for the two things that mean "act": the Fatigued pill and the needs-review
   flag. Status reads through the pill, never through a coloured card. */

.adlib-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.adlib-bar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.adlib-meta { font-size:12px; color:var(--muted); }
.adlib-select { font:inherit; font-size:12.5px; color:var(--text-secondary); background:var(--card); border:1px solid var(--cream-a12); border-radius:var(--radius-8); padding:7px 10px; cursor:pointer; }
.adlib-select:hover { border-color:var(--cream-a24); }
.adlib-toggle { font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:7px 14px; border-radius:var(--radius-20); background:none; border:1px solid var(--cream-a16); color:var(--muted); white-space:nowrap; }
.adlib-toggle:hover { border-color:var(--text-secondary); color:var(--text-secondary); }
.adlib-toggle.active { background:var(--orange); border-color:var(--orange); color:var(--cream-btn-text); }
.adlib-sync { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:8px 18px; border-radius:var(--radius-20); background:var(--text); border:none; color:var(--bg); }
.adlib-sync:hover:not(:disabled) { background:var(--white); }
.adlib-sync:disabled { opacity:.55; cursor:default; }

.adlib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; align-items:start; }
.adlib-card { display:flex; flex-direction:column; text-align:left; font:inherit; cursor:pointer; padding:0; overflow:hidden; background:var(--card); border:1px solid var(--cream-a08); border-radius:var(--radius-12); transition:border-color .12s, transform .12s; }
.adlib-card:hover { border-color:var(--cream-a18); transform:translateY(-1px); }

/* 4:5 media box. Drive's /preview iframe has its own dark chrome, so it sits flush. */
.adlib-media { position:relative; width:100%; aspect-ratio:4/5; background:var(--sidebar); overflow:hidden; }
.adlib-media iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.adlib-media--empty { display:flex; align-items:center; justify-content:center; }
.adlib-media--empty span { font-family:'Poppins',sans-serif; font-size:20px; font-weight:600; color:#3a3733; letter-spacing:.04em; }

.adlib-body { display:flex; flex-direction:column; gap:8px; padding:13px 14px 15px; }
.adlib-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.adlib-code { display:inline-flex; align-items:center; gap:6px; font-family:'Poppins',sans-serif; font-size:14px; font-weight:600; color:var(--text); }
.adlib-flag { width:7px; height:7px; border-radius:var(--radius-circle); background:var(--orange); flex:none; }

.adlib-chips { display:flex; gap:5px; flex-wrap:wrap; }
.adlib-chip { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border:1px solid var(--cream-a12); border-radius:var(--radius-4); padding:2px 6px; }
.adlib-chip--src { color:var(--text-secondary); border-color:var(--cream-a24); }

.adlib-desc { font-size:12px; color:var(--text-secondary); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.adlib-dec { font-size:11px; color:var(--dim); }
.adlib-live { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--good); }
.adlib-live-dot { width:6px; height:6px; border-radius:var(--radius-circle); background:var(--good); flex:none; }

/* Status pill, playbook §15 vocabulary. Grey = not started, blue/amber = in flight,
   greens = it works, orange/red = it stopped working, grey again = shelved. */
.adlib-pill { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:var(--radius-20); white-space:nowrap; }
.adlib-pill--draft { background:rgba(156,163,175,0.16); color:#9CA3AF; }
.adlib-pill--queued { background:rgba(125,167,217,0.16); color:#7DA7D9; }
.adlib-pill--testing { background:rgba(229,184,75,0.16); color:#E5B84B; }
.adlib-pill--validated { background:rgba(107,191,115,0.16); color:#6BBF73; }
.adlib-pill--scaled { background:#2E7D46; color:var(--text); }
.adlib-pill--fatigued { background:var(--orange-a18); color:var(--orange-soft-text); }
.adlib-pill--paused { background:rgba(240,168,104,0.16); color:#F0A868; }
.adlib-pill--killed { background:rgba(194,69,61,0.18); color:#D97a72; }
.adlib-pill--archive { background:rgba(107,107,107,0.2); color:var(--muted); }

/* ---- card modal ---- */
.adlib-modal { display:none; position:fixed; inset:0; z-index:120; background:rgba(10,9,7,0.72); backdrop-filter:blur(2px); padding:40px 16px; overflow-y:auto; }
.adlib-modal.visible { display:block; }
.adlib-modal-panel { position:relative; max-width:900px; margin:0 auto; background:var(--surface-sunken); border:1px solid var(--line); border-radius:var(--radius-14); padding:24px 26px; }
.adlib-modal-close { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; }
.adlib-modal-close:hover { color:var(--text); }
.adlib-modal-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-right:28px; }
.adlib-modal-head h3 { font-family:'Poppins',sans-serif; font-size:20px; font-weight:600; color:var(--text); }
.adlib-modal-grid { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:22px; align-items:start; }
.adlib-modal-media { display:flex; flex-direction:column; gap:9px; }
.adlib-modal-media iframe { width:100%; aspect-ratio:4/5; border:0; border-radius:var(--radius-10); background:var(--sidebar); }
.adlib-modal-file { font-size:11px; color:var(--dim); word-break:break-all; }
.adlib-modal-live { font-size:12px; color:var(--good); line-height:1.5; }
.adlib-modal-live b { color:var(--text); font-weight:700; }
.adlib-link { font-size:12px; font-weight:600; color:var(--text-secondary); text-decoration:none; border-bottom:1px solid var(--cream-a20); align-self:flex-start; }
.adlib-link:hover { color:var(--text); }

.adlib-modal-form { display:flex; flex-direction:column; gap:12px; }
.adlib-row { display:flex; gap:10px; flex-wrap:wrap; }
.adlib-row .adlib-field { flex:1 1 140px; }
.adlib-field { display:flex; flex-direction:column; gap:5px; }
.adlib-field > span { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.adlib-field input, .adlib-field textarea, .adlib-field select { font:inherit; font-size:13px; color:var(--text); background:var(--card); border:1px solid var(--cream-a12); border-radius:var(--radius-8); padding:8px 10px; width:100%; resize:vertical; }
.adlib-field input:focus, .adlib-field textarea:focus, .adlib-field select:focus { outline:none; border-color:var(--muted); }

.adlib-sec-label { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:6px; }
.adlib-copy { border:1px solid var(--cream-a08); border-radius:var(--radius-9); padding:9px 11px; }
.adlib-copy summary { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--text-secondary); cursor:pointer; }
.adlib-copy[open] summary { margin-bottom:9px; }
.adlib-copy .adlib-field + .adlib-field { margin-top:8px; }

.adlib-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.adlib-save { font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:8px 22px; border-radius:var(--radius-20); background:var(--orange); border:none; color:var(--cream-btn-text); }
.adlib-save:hover { background:var(--orange-hover); }
.adlib-save-msg { font-size:11.5px; color:var(--muted); }

.adlib-legacy { font-size:12px; color:var(--muted); line-height:1.55; white-space:pre-wrap; background:var(--card); border-radius:var(--radius-9); padding:10px 12px; }
.adlib-empty { font-size:12px; color:var(--dim); }
.adlib-timeline { list-style:none; display:flex; flex-direction:column; gap:10px; }
.adlib-timeline li { border-left:2px solid var(--line); padding-left:11px; }
.adlib-tl-head { display:flex; gap:8px; align-items:baseline; font-size:12.5px; color:var(--text); }
.adlib-tl-head span { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.adlib-tl-sub { font-size:11.5px; color:var(--muted); line-height:1.5; }

@media (max-width: 720px) {
  .adlib-modal-grid { grid-template-columns:minmax(0,1fr); }
  .adlib-modal-panel { padding:20px 16px; }
}

/* ---- Library list (table, 2026-08-20) ----
   Reuses .ads-table from ads.css so the Library reads like the Ad Overview table one
   sub-tab over. The card grid above is kept only for the modal's media block. */
.adlib-card-wrap { padding: 14px 16px; }
.adlib-tr { cursor: pointer; }
.adlib-table tbody td { vertical-align: middle; }
.adlib-table tbody td:first-child { min-width: 260px; }
.adlib-table .ads-row-thumb { cursor: pointer; }
.adlib-table .ads-row-adset {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adlib-table .adlib-pill { display: inline-block; }
.adlib-cell-main { font-size: 12px; color: var(--text); }
.adlib-cell-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.adlib-table .adlib-flag { display: inline-block; margin-left: 6px; vertical-align: middle; }
/* Creatives are 9:16 or 4:5, so the row still is portrait and a touch larger than the
   Ad Overview's 40px square - at 40px a vertical video reads as a dark smear. */
.adlib-table .ads-row-thumb { width: 46px; height: 60px; border-radius: var(--radius-5); }
.adlib-table .ads-row-creative { gap: 12px; }

/* ---- New creative (2026-08-20) ---- */
.adlib-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.adlib-new-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--cream-a22);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.adlib-new-btn:hover { border-color: var(--cream-a45); background: var(--cream-a05); }
.adlib-modal-panel--narrow { max-width: 460px; }
.adlib-new { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 2px; }
.adlib-new-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ---- copy columns (2026-08-20) ----
   The table carries the text the ad ships with, so the copy cells wrap to two lines and
   truncate; the full string is in the title attribute and in the modal. */
.adlib-table tbody td { white-space: normal; }
.adlib-copy-cell {
  font-size: 11.5px;
  line-height: 1.35;
  color: #C9C3BA;
  text-align: left;
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adlib-chip--cta { color: #E5B84B; border-color: rgba(229,184,75,0.35); white-space: nowrap; }
.adlib-copy--single { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
/* Ten columns do not fit 1000px, and squeezing the copy to ~90px defeats the point of
   showing it - so the table keeps a real minimum width and scrolls sideways instead. */
.adlib-table { min-width: 1320px; }
/* Columns: 1 Creative, 2 Status, 3 Type, 4 Formats, 5 Primary text, 6 Headline,
   7 Description, 8 CTA, 9 Last decision, 10 Live CPA, 11 Spend. The copy columns are the
   ones that need room; Formats is a fixed 72px so the leftover width stops pooling there
   and leaving a gap before the copy. */
.adlib-table th:nth-child(5), .adlib-table th:nth-child(6), .adlib-table th:nth-child(7),
.adlib-table td:nth-child(5), .adlib-table td:nth-child(6), .adlib-table td:nth-child(7) {
  min-width: 190px;
  text-align: left;
}
.adlib-copy-cell { max-width: 240px; }

/* ---- format matrix (2026-08-20) ----
   Rows EN/DE/FR, columns vertical/square/horizontal. Filled dot = that export exists in
   Drive, hollow = a gap to fill before the ad can go up in all markets. */
.adlib-fm { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.adlib-fm-row { display: flex; gap: 3px; }
.adlib-fm-dot {
  width: 7px; height: 7px; border-radius: var(--radius-2);
  border: 1px solid var(--cream-a22);
  background: transparent;
}
.adlib-fm-dot.is-on { background: var(--good); border-color: var(--good); }
.adlib-fm-count { font-size: 10px; color: var(--muted); margin-top: 3px; }
.adlib-table th:nth-child(4), .adlib-table td:nth-child(4) {
  width: 72px;
  min-width: 72px;
  text-align: left;
}
/* Creative cell is code + still now, so it no longer needs room for a sentence. */
.adlib-table tbody td:first-child { min-width: 150px; width: 150px; }

.adlib-fm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 4px; }
.adlib-fm-table th {
  color: var(--muted); font-weight: 600; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 6px; text-align: left;
}
.adlib-fm-table td { padding: 4px 6px; border-top: 1px solid var(--cream-a06); vertical-align: top; }
.adlib-fm-table td a { display: block; color: #C9C3BA; text-decoration: none; border-bottom: 1px solid transparent; }
.adlib-fm-table td a:hover { color: var(--text); border-bottom-color: var(--cream-a40); }
.adlib-fm-miss { color: #4a4640; }
.adlib-fm-rest { margin: 6px 0 2px; font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.adlib-fm-rest a { color: #C9C3BA; text-decoration: none; }
.adlib-fm-rest a:hover { color: var(--text); }
.adlib-fm-plain { font-size: 11px; color: var(--muted); }

/* Type chips, one colour each (2026-08-20) */
.adlib-chip--video { color: #7DA7D9; border-color: rgba(125,167,217,0.4); }
.adlib-chip--static { color: var(--good); border-color: var(--good-a40); }
.adlib-chip--carousel { color: #C89BE0; border-color: rgba(200,155,224,0.4); }
.adlib-chip--unknown { color: var(--muted); border-color: var(--cream-a16); }

/* Status pills for the five-state vocabulary (2026-08-20). Live is the loud one: it is
   the only state that is currently spending money. */
.adlib-pill--ready { background: rgba(125,167,217,0.16); color: #7DA7D9; }
.adlib-pill--live { background: #2E7D46; color: var(--text); }
.adlib-pill--retired { background: rgba(107,107,107,0.2); color: var(--muted); }

/* Organic lane on the creative card (2026-08-25) - the Ads Library <-> IG scheduler
   bridge. Deliberately quiet: this is a side door, not the card's main job. */
.adlib-organic { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); background:var(--card); border-radius:var(--radius-9); padding:10px 12px; }
.adlib-organic--live { color:var(--good); }
.adlib-organic--from { color:var(--muted); }
.adlib-organic a { color:inherit; text-decoration:underline; }
.adlib-organic-note { font-size:11px; color:var(--muted); }
.adlib-organic-note.err { color:var(--bad); }
.adlib-organic-go { margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-6); padding:5px 12px; font-size:11px; font-family:inherit; cursor:pointer; transition:background 0.15s, color 0.15s; }
.adlib-organic-go:hover:not(:disabled) { background:var(--cream-a05); color:var(--text-secondary); }
.adlib-organic-go:disabled { opacity:0.5; cursor:not-allowed; }