/**
 * Consent Log dashboard — "Our Products / The Platform" visual for Consent Manager.
 *
 * A fully self-contained, animated consent-log table used as the product visual
 * on the homepage. Every rule is scoped under `.dpdp-clog` so it cannot leak into
 * — or be overridden by — the rest of the theme. The mockup is authored at a fixed
 * design width (1360px) and scaled to fit its column by assets/js/consent-log.js.
 * Intentionally has no page-editor / ACF controls (mirrors the hero dashboard).
 */

.dpdp-clog {
	/* Scoped design tokens — never touch the theme's :root vars. */
	--cl-blue: #2f6bff; --cl-blue-deep: #1d3faf;
	--cl-ink: #1e293b; --cl-ink-2: #334155; --cl-muted: #94a3b8; --cl-muted-2: #64748b;
	--cl-line: #eceef4; --cl-line-2: #f1f2f7;
	--cl-card: #fff; --cl-filter-bg: #e9f0ff;
	--cl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Inter", sans-serif;

	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	aspect-ratio: 1360 / 1080; /* reserves space before JS sets the exact height */
	color: var(--cl-ink);
	font-family: var(--cl-font);
	text-align: left;
}
.dpdp-clog * { box-sizing: border-box; margin: 0; padding: 0; }

/* Fixed-width design stage, scaled to the container by JS. */
.dpdp-clog-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 1360px;
	transform-origin: top left;
	will-change: transform;
}

.dpdp-clog .card {
	width: 100%;
	background: var(--cl-card);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.05);
}

/* ---------- Browser chrome ---------- */
.dpdp-clog .chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f2f3f5; border-bottom: 1px solid #e6e8eb; }
.dpdp-clog .dots { display: flex; gap: 8px; }
.dpdp-clog .dots span { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dpdp-clog .dots .r { background: #ff5f57; } .dpdp-clog .dots .y { background: #febc2e; } .dpdp-clog .dots .g { background: #28c840; }
.dpdp-clog .nav-arrows { display: flex; gap: 16px; color: #b3b8bd; } .dpdp-clog .nav-arrows svg { width: 16px; height: 16px; }
.dpdp-clog .urlbar {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: 8px;
	padding: 7px 14px; color: #3c4043; font-size: 13px; box-shadow: inset 0 0 0 1px #e6e8eb; max-width: 560px; margin: 0 auto;
}
.dpdp-clog .urlbar svg { width: 13px; height: 13px; color: #9aa0a6; }
.dpdp-clog .urlbar b { font-weight: 400; color: #202124; } .dpdp-clog .urlbar .path { color: #5f6368; }
.dpdp-clog .chrome-ico { display: flex; gap: 14px; color: #9aa0a6; } .dpdp-clog .chrome-ico svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
.dpdp-clog .header { display: flex; align-items: center; gap: 0; padding: 0 30px 0 0; border-bottom: 1px solid var(--cl-line); }
.dpdp-clog .brand { display: flex; align-items: center; gap: 13px; padding: 22px 30px; border-right: 1px solid var(--cl-line); min-width: 270px; }
.dpdp-clog .brand .site-logo { display: block; width: auto; height: auto; max-width: 158px; max-height: 44px; object-fit: contain; object-position: left center; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; clip-path: none; mask-image: none; overflow: visible; }
.dpdp-clog .brand .logo { height: 44px; width: 44px; flex-shrink: 0; }
.dpdp-clog .brand .logo svg { width: 100%; height: 100%; }
.dpdp-clog .brand .txt h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.dpdp-clog .brand .txt h1 .ai { color: var(--cl-blue); }
.dpdp-clog .brand .txt span { font-size: 14px; color: var(--cl-ink-2); font-weight: 500; }
.dpdp-clog .head-main { flex: 1; padding: 16px 0 16px 30px; }
.dpdp-clog .head-main h2 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: #0b1220; }
.dpdp-clog .crumbs { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 14.5px; }
.dpdp-clog .crumbs a { color: var(--cl-muted); text-decoration: none; font-weight: 500; }
.dpdp-clog .crumbs a.cur { color: var(--cl-ink-2); }
.dpdp-clog .crumbs svg { width: 15px; height: 15px; color: #c3c9d4; }
.dpdp-clog .head-right { display: flex; align-items: center; gap: 22px; padding-right: 30px; }
.dpdp-clog .icon-btn { position: relative; color: #334155; cursor: pointer; display: flex; }
.dpdp-clog .icon-btn svg { width: 24px; height: 24px; }
.dpdp-clog .icon-btn .dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; background: var(--cl-blue); border-radius: 50%; border: 2px solid #fff; }
.dpdp-clog .acct { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.dpdp-clog .acct .av { width: 46px; height: 46px; border-radius: 50%; background: var(--cl-blue-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.dpdp-clog .acct b { font-size: 15.5px; font-weight: 700; color: var(--cl-ink); }
.dpdp-clog .acct svg { width: 18px; height: 18px; color: var(--cl-muted-2); }

/* ---------- Filter bar ---------- */
.dpdp-clog .filters { display: flex; align-items: center; gap: 16px; background: var(--cl-filter-bg); padding: 17px 30px; }
.dpdp-clog .filters .lbl { font-size: 16px; font-weight: 700; color: var(--cl-blue); white-space: nowrap; }
.dpdp-clog .chip {
	display: inline-flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #cdddff; border-radius: 30px;
	padding: 11px 18px; font-size: 15px; color: var(--cl-blue); font-weight: 600; box-shadow: 0 1px 2px rgba(20,30,70,.05);
}
.dpdp-clog .chip .x { color: #9aa6bd; cursor: pointer; display: flex; }
.dpdp-clog .chip .x svg { width: 16px; height: 16px; }
.dpdp-clog .edit-filters {
	margin-left: auto; display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #d7deea;
	border-radius: 30px; padding: 12px 22px; font-size: 15px; font-weight: 600; color: var(--cl-ink-2); cursor: pointer; transition: .15s;
	font-family: var(--cl-font);
}
.dpdp-clog .edit-filters:hover { background: #f7f9fd; border-color: #c3ccdb; }
.dpdp-clog .edit-filters svg { width: 18px; height: 18px; color: var(--cl-blue); }

/* ---------- Table ---------- */
.dpdp-clog .tbl-wrap { padding: 26px 30px 8px; }
.dpdp-clog table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid var(--cl-line); border-radius: 14px; overflow: hidden; }
.dpdp-clog colgroup .c1 { width: 27%; } .dpdp-clog .c2 { width: 18%; } .dpdp-clog .c3 { width: 18%; } .dpdp-clog .c4 { width: 26%; } .dpdp-clog .c5 { width: 11%; }
.dpdp-clog thead th {
	background: #f7f8fb; text-align: left; padding: 20px 24px; font-size: 16px; font-weight: 700; color: #1e2a44;
	border-right: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line);
}
.dpdp-clog thead th:last-child { border-right: none; text-align: left; }
.dpdp-clog .th-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dpdp-clog .th-in svg { width: 17px; height: 17px; color: #94a0b4; }
.dpdp-clog tbody td {
	padding: 0 24px; height: 97px; border-right: 1px solid var(--cl-line-2); border-bottom: 1px solid var(--cl-line);
	font-size: 15.5px; color: var(--cl-ink-2); vertical-align: middle;
}
.dpdp-clog tbody td:last-child { border-right: none; }
.dpdp-clog tbody tr:last-child td { border-bottom: none; }
.dpdp-clog .proc { display: flex; align-items: center; gap: 15px; }
.dpdp-clog .proc .pic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpdp-clog .proc .pic svg { width: 22px; height: 22px; color: #fff; }
.dpdp-clog .proc .nm { font-size: 15.5px; font-weight: 600; color: #1e293b; }
.dpdp-clog .pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 22px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.dpdp-clog .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dpdp-clog .p-green { background: #e9f7ee; color: #1a9e54; border: 1px solid #cfeeda; }
.dpdp-clog .p-red { background: #fdeded; color: #e5484d; border: 1px solid #f7d7d7; }
.dpdp-clog .p-blue { background: #e9f1ff; color: #2f6bff; border: 1px solid #d4e2ff; }
.dpdp-clog .date { color: #334155; }
.dpdp-clog .action { color: #9aa6bd; font-size: 26px; letter-spacing: 2px; line-height: 1; cursor: pointer; user-select: none; }
.dpdp-clog tr.new-row td { animation: dpdpclog-rowIn .8s ease; }
@keyframes dpdpclog-rowIn { 0% { background: #eef4ff; } 100% { background: transparent; } }

/* skeleton (empty rows) */
.dpdp-clog .sk {
	background: linear-gradient(90deg, #eef0f5 25%, #f6f7fb 50%, #eef0f5 75%); background-size: 400% 100%;
	animation: dpdpclog-shimmer 1.3s ease infinite; border-radius: 8px; height: 16px;
}
.dpdp-clog .sk.circle { width: 42px; height: 42px; border-radius: 50%; }
.dpdp-clog .sk.pill { width: 120px; height: 34px; border-radius: 22px; }
.dpdp-clog .sk.bar { width: 70%; }
@keyframes dpdpclog-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dpdp-clog .sk-proc { display: flex; align-items: center; gap: 15px; }

/* ---------- Pagination ---------- */
.dpdp-clog .pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 30px; }
.dpdp-clog .pg-btn {
	min-width: 52px; height: 52px; border-radius: 12px; border: 1px solid #e2e6ef; background: #fff; color: #475569;
	display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; cursor: pointer; transition: .15s; font-family: var(--cl-font);
}
.dpdp-clog .pg-btn:hover { background: #f5f7fb; }
.dpdp-clog .pg-btn svg { width: 20px; height: 20px; }
.dpdp-clog .pg-num {
	width: 52px; height: 52px; border-radius: 12px; background: transparent; border: none; color: #64748b;
	font-size: 17px; font-weight: 600; cursor: pointer; transition: .18s; font-family: var(--cl-font);
}
.dpdp-clog .pg-num:hover { background: #f0f3fa; border-radius: 12px; }
.dpdp-clog .pg-num.active { background: var(--cl-blue-deep); color: #fff; box-shadow: 0 6px 16px -6px rgba(29,63,175,.6); }
.dpdp-clog .pg-dots { color: #94a3b8; font-weight: 700; padding: 0 4px; letter-spacing: 2px; }