/**
 * URated Radar — public application styles.
 * Scoped under .ur-app so host themes are not affected.
 */

/* ---------------------------------------------------------------------------
 * Theme tokens
 * ------------------------------------------------------------------------- */
.ur-app {
	--ur-blue: #1B7FC4;
	--ur-blue-600: #166aa3;
	--ur-blue-700: #125687;
	--ur-red: #E63027;
	--ur-red-600: #c8261f;

	/* Light theme (default) */
	--ur-bg: #f4f6f9;
	--ur-surface: #ffffff;
	--ur-surface-2: #f8fafc;
	--ur-elevated: #ffffff;
	--ur-sidebar-bg: #0f1b2d;
	--ur-sidebar-fg: #cdd7e4;
	--ur-sidebar-active: #ffffff;
	--ur-text: #16202e;
	--ur-text-soft: #56657a;
	--ur-muted: #8493a6;
	--ur-border: #e2e8f0;
	--ur-border-strong: #cbd5e1;
	--ur-ring: rgba(27, 127, 196, 0.35);
	--ur-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.06);
	--ur-shadow-lg: 0 24px 60px rgba(15, 27, 45, 0.18);
	--ur-ok: #1f9d63;
	--ur-err: #d8473d;

	--ur-radius: 14px;
	--ur-radius-sm: 9px;
	--ur-gap: 22px;
	--ur-sidebar-w: 248px;

	--ur-font: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ur-font-head: "Trebuchet MS", "Segoe UI", ui-sans-serif, sans-serif;

	color: var(--ur-text);
	font-family: var(--ur-font);
	font-size: 15px;
	line-height: 1.55;
	background: var(--ur-bg);
	min-height: 100vh;
	display: flex;
	-webkit-font-smoothing: antialiased;
	position: relative;
}

/* Night theme — intentionally designed, not inverted. */
.ur-app[data-ur-appearance="night"] {
	--ur-bg: #0b1320;
	--ur-surface: #131d2e;
	--ur-surface-2: #0f1828;
	--ur-elevated: #18243a;
	--ur-sidebar-bg: #080e18;
	--ur-sidebar-fg: #9fb0c6;
	--ur-sidebar-active: #ffffff;
	--ur-text: #e8eef6;
	--ur-text-soft: #a9b8cc;
	--ur-muted: #6c7e96;
	--ur-border: #243349;
	--ur-border-strong: #31425c;
	--ur-ring: rgba(56, 162, 230, 0.5);
	--ur-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
	--ur-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
	--ur-blue: #38a2e6;
	--ur-ok: #34c285;
	--ur-err: #ef6a60;
}

/* System mode follows the OS preference. */
@media (prefers-color-scheme: dark) {
	.ur-app[data-ur-appearance="system"] {
		--ur-bg: #0b1320;
		--ur-surface: #131d2e;
		--ur-surface-2: #0f1828;
		--ur-elevated: #18243a;
		--ur-sidebar-bg: #080e18;
		--ur-sidebar-fg: #9fb0c6;
		--ur-text: #e8eef6;
		--ur-text-soft: #a9b8cc;
		--ur-muted: #6c7e96;
		--ur-border: #243349;
		--ur-border-strong: #31425c;
		--ur-ring: rgba(56, 162, 230, 0.5);
		--ur-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
		--ur-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
		--ur-blue: #38a2e6;
		--ur-ok: #34c285;
		--ur-err: #ef6a60;
	}
}

.ur-app *,
.ur-app *::before,
.ur-app *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------------- */
.ur-screen-reader {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.ur-skip-link {
	position: absolute;
	left: -999px;
	top: 8px;
	background: var(--ur-blue);
	color: #fff;
	padding: 8px 14px;
	border-radius: var(--ur-radius-sm);
	z-index: 100;
}
.ur-skip-link:focus { left: 8px; }

.ur-app :focus-visible {
	outline: 3px solid var(--ur-ring);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------------- */
.ur-sidebar {
	width: var(--ur-sidebar-w);
	flex: 0 0 var(--ur-sidebar-w);
	background: var(--ur-sidebar-bg);
	color: var(--ur-sidebar-fg);
	display: flex;
	flex-direction: column;
	padding: 22px 16px;
	position: sticky;
	top: 0;
	height: 100vh;
}
.ur-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px 22px;
}
.ur-logo-wrap {
	background: #fff;
	border-radius: 10px;
	padding: 7px 9px;
	display: inline-flex;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ur-logo { display: block; height: 26px; width: auto; }
.ur-sidebar__app {
	font-family: var(--ur-font-head);
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #fff;
	font-size: 15px;
}

.ur-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ur-nav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--ur-sidebar-fg);
	text-decoration: none;
	font-weight: 500;
	transition: background 0.16s ease, color 0.16s ease;
}
.ur-nav__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ur-nav__item.is-active {
	background: linear-gradient(90deg, rgba(27,127,196,0.22), rgba(27,127,196,0.05));
	color: var(--ur-sidebar-active);
	box-shadow: inset 3px 0 0 var(--ur-red);
}
.ur-nav__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor; opacity: 0.55;
	flex: 0 0 7px;
}
.ur-nav__item.is-active .ur-nav__dot { opacity: 1; background: var(--ur-red); }

.ur-sidebar__foot { margin-top: auto; padding: 14px 10px 2px; }
.ur-sidebar__tag {
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
}

/* ---------------------------------------------------------------------------
 * Frame, topbar
 * ------------------------------------------------------------------------- */
.ur-frame { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ur-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 26px;
	background: color-mix(in srgb, var(--ur-surface) 86%, transparent);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--ur-border);
}
.ur-topbar__left, .ur-topbar__right { display: flex; align-items: center; gap: 14px; }
.ur-topbar__right { flex-wrap: wrap; justify-content: flex-end; }

.ur-iconbtn {
	border: 1px solid var(--ur-border);
	background: var(--ur-surface);
	color: var(--ur-text);
	width: 38px; height: 38px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: border-color 0.15s ease, transform 0.1s ease;
}
.ur-iconbtn:hover { border-color: var(--ur-blue); }
.ur-iconbtn.is-active { border-color: var(--ur-blue); color: var(--ur-blue); }
.ur-sidebar-toggle { display: none; }

.ur-company-switch { display: flex; flex-direction: column; gap: 3px; }
.ur-company-switch__label,
.ur-field__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--ur-text-soft);
	display: inline-flex; align-items: center; gap: 6px;
}

.ur-select, .ur-input {
	border: 1px solid var(--ur-border-strong);
	background: var(--ur-surface);
	color: var(--ur-text);
	padding: 9px 12px;
	border-radius: 10px;
	font: inherit;
	min-height: 38px;
	max-width: 100%;
}
.ur-select:focus, .ur-input:focus { border-color: var(--ur-blue); outline: none; box-shadow: 0 0 0 3px var(--ur-ring); }
.ur-select--sm { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.ur-company-select { min-width: 200px; font-weight: 600; }

/* Appearance segmented control */
.ur-appearance {
	display: inline-flex;
	background: var(--ur-surface-2);
	border: 1px solid var(--ur-border);
	border-radius: 11px;
	padding: 3px;
	gap: 2px;
}
.ur-appearance__btn {
	border: 0; background: transparent; cursor: pointer;
	color: var(--ur-text-soft);
	font: inherit; font-size: 13px; font-weight: 600;
	padding: 6px 12px; border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}
.ur-appearance__btn:hover { color: var(--ur-text); }
.ur-appearance__btn.is-active {
	background: var(--ur-surface);
	color: var(--ur-blue);
	box-shadow: var(--ur-shadow);
}
.ur-appearance--inline { margin-top: 4px; }

/* Account menu */
.ur-account { position: relative; }
.ur-account__trigger {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid var(--ur-border); background: var(--ur-surface);
	border-radius: 999px; padding: 5px 14px 5px 6px; cursor: pointer;
	color: var(--ur-text); font: inherit;
}
.ur-account__trigger:hover { border-color: var(--ur-blue); }
.ur-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: linear-gradient(135deg, var(--ur-blue), var(--ur-red));
	color: #fff; font-weight: 700; font-size: 14px;
	display: inline-flex; align-items: center; justify-content: center;
}
.ur-avatar--sm { width: 26px; height: 26px; font-size: 12px; }
.ur-account__name { font-weight: 600; font-size: 14px; }
.ur-account__menu {
	position: absolute; right: 0; top: calc(100% + 8px);
	min-width: 190px; background: var(--ur-elevated);
	border: 1px solid var(--ur-border); border-radius: 12px;
	box-shadow: var(--ur-shadow-lg); padding: 6px; z-index: 40;
}
.ur-account__link {
	display: block; padding: 9px 12px; border-radius: 8px;
	color: var(--ur-text); text-decoration: none; font-size: 14px;
}
.ur-account__link:hover { background: var(--ur-surface-2); color: var(--ur-blue); }

/* ---------------------------------------------------------------------------
 * Main / pages
 * ------------------------------------------------------------------------- */
.ur-main { padding: 28px 26px 60px; flex: 1 1 auto; }
.ur-page { max-width: 1240px; margin: 0 auto; }
.ur-page__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.ur-page__title {
	font-family: var(--ur-font-head);
	font-size: 26px; font-weight: 800; letter-spacing: -0.3px;
	margin: 0; color: var(--ur-text);
}
.ur-page__sub { margin: 4px 0 0; font-size: 13px; }
.ur-muted { color: var(--ur-muted); }
.ur-page__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ur-grid { display: grid; gap: var(--ur-gap); }
.ur-grid--dashboard { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.ur-grid--account,
.ur-grid--companies { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ur-grid--agents { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.ur-btn {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid transparent; border-radius: 11px;
	padding: 10px 18px; font: inherit; font-weight: 600;
	cursor: pointer; text-decoration: none; line-height: 1.2;
	transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ur-btn:active { transform: translateY(1px); }
.ur-btn--primary { background: var(--ur-blue); color: #fff; box-shadow: 0 6px 18px rgba(27,127,196,0.28); }
.ur-btn--primary:hover { background: var(--ur-blue-600); }
.ur-btn--ghost { background: var(--ur-surface); color: var(--ur-text); border-color: var(--ur-border-strong); }
.ur-btn--ghost:hover { border-color: var(--ur-blue); color: var(--ur-blue); }
.ur-btn--danger { background: var(--ur-red); color: #fff; }
.ur-btn--danger:hover { background: var(--ur-red-600); }
.ur-btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.ur-btn[disabled], .ur-btn.is-loading { opacity: 0.7; pointer-events: none; }

.ur-link { color: var(--ur-blue); text-decoration: none; font-weight: 600; font-size: 13px; }
.ur-link:hover { text-decoration: underline; }

.ur-spinner {
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
	display: inline-block; animation: ur-spin 0.7s linear infinite;
}
/* The span carries the [hidden] attribute when idle; the rule above would
 * otherwise override the user-agent [hidden] default and spin permanently.
 * This makes the spinner appear only while loading. */
.ur-spinner[hidden], .ur-app .ur-spinner[hidden] { display: none !important; }
.ur-btn--ghost .ur-spinner { border-color: var(--ur-border-strong); border-top-color: var(--ur-blue); }
@keyframes ur-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */
.ur-card {
	background: var(--ur-surface);
	border: 1px solid var(--ur-border);
	border-radius: var(--ur-radius);
	padding: 20px;
	box-shadow: var(--ur-shadow);
}
.ur-card + .ur-card { margin-top: var(--ur-gap); }
.ur-card__title {
	font-family: var(--ur-font-head);
	font-size: 16px; font-weight: 700; margin: 0 0 14px;
	display: flex; align-items: center; gap: 8px;
}
.ur-card--note { background: var(--ur-surface-2); }

/* ---------------------------------------------------------------------------
 * Dashboard split (news + competitor)
 * ------------------------------------------------------------------------- */
.ur-dashboard-body--split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ur-dashboard-body--split .ur-col { min-width: 0; }
.ur-col__title {
	font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--ur-muted); margin: 0 2px 12px; padding-bottom: 8px;
	border-bottom: 1px solid var(--ur-border);
}
.ur-col--competitor .ur-col__title { color: var(--ur-red); border-bottom-color: color-mix(in srgb, var(--ur-red) 30%, var(--ur-border)); }
.ur-badge--competitor { background: color-mix(in srgb, var(--ur-red) 12%, transparent); color: var(--ur-red); }
.ur-story-card--competitor { border-left: 3px solid color-mix(in srgb, var(--ur-red) 55%, var(--ur-border)); }
/* Stack on narrower viewports (tablet and mobile). */
@media (max-width: 900px) {
	.ur-dashboard-body--split { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------------------
 * Story cards
 * ------------------------------------------------------------------------- */
.ur-stories { display: grid; gap: 14px; }
.ur-story-card {
	background: var(--ur-surface);
	border: 1px solid var(--ur-border);
	border-radius: var(--ur-radius);
	padding: 16px;
	box-shadow: var(--ur-shadow);
	transition: border-color 0.15s ease, transform 0.12s ease;
	display: flex;
	gap: 16px;
	align-items: stretch;
}
.ur-story-card:hover { border-color: var(--ur-border-strong); transform: translateY(-1px); }

/* Featured image / placeholder */
.ur-story-card__media {
	flex: 0 0 148px;
	width: 148px;
	align-self: stretch;
	min-height: 104px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, color-mix(in srgb, var(--ur-blue) 14%, var(--ur-surface-2)), var(--ur-surface-2));
}
.ur-story-card__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ur-story-card__play {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(15, 27, 45, 0.55);
	color: #fff;
	pointer-events: none;
}
/* Competitor media as a link, with a graceful "view original" fallback when
 * the image is blocked/expired (Instagram CDN) or absent. */
.ur-story-card__media--link { display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.ur-story-card__viewpost {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: none;               /* hidden while a real image is showing */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	text-align: center;
	color: var(--ur-blue);
	background: var(--ur-surface-2);
}
.ur-story-card__viewpost-label { font-size: 12px; font-weight: 700; line-height: 1.2; }
/* Show the fallback overlay when there is no image, or the image failed. */
.ur-story-card__media--link.is-empty .ur-story-card__viewpost,
.ur-story-card__media--link.img-failed .ur-story-card__viewpost { display: flex; }
/* When the fallback is shown, hide the generic photo placeholder + play badge. */
.ur-story-card__media--link.is-empty .ur-story-card__ph,
.ur-story-card__media--link.img-failed .ur-story-card__ph,
.ur-story-card__media--link.img-failed .ur-story-card__play { display: none; }
.ur-story-card__media--link:hover .ur-story-card__viewpost { color: var(--ur-blue-hover, #166aa3); }
.ur-story-card__ph {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--ur-blue) 55%, var(--ur-muted));
	opacity: 0.7;
}
.ur-story-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ur-story-card__headline { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.ur-story-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ur-story-card__date { font-size: 12px; color: var(--ur-muted); }
.ur-story-card__snippet { margin: 0 0 14px; color: var(--ur-text-soft); font-size: 14px; }
.ur-story-card__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.ur-stories-note { margin: 16px 2px 0; font-size: 12.5px; }

@media (max-width: 640px) {
	.ur-story-card { flex-direction: column; gap: 12px; }
	.ur-story-card__media { flex-basis: auto; width: 100%; min-height: 168px; }
}

.ur-badge {
	display: inline-flex; align-items: center;
	background: color-mix(in srgb, var(--ur-blue) 14%, transparent);
	color: var(--ur-blue);
	font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
	padding: 3px 10px; border-radius: 999px;
}
.ur-badge--soft { background: var(--ur-surface-2); color: var(--ur-text-soft); }

/* ---------------------------------------------------------------------------
 * Source health
 * ------------------------------------------------------------------------- */
.ur-health-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ur-health-list__item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ur-health-list__name { flex: 1 1 auto; text-transform: capitalize; }
.ur-health-list__count { font-variant-numeric: tabular-nums; color: var(--ur-muted); font-weight: 700; }
.ur-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ur-status-dot--ok { background: var(--ur-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ur-ok) 22%, transparent); }
.ur-status-dot--err { background: var(--ur-err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ur-err) 22%, transparent); }

/* ---------------------------------------------------------------------------
 * Tooltips
 * ------------------------------------------------------------------------- */
.ur-tooltip-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ur-tooltip-label { font-size: 13px; color: var(--ur-text-soft); }
.ur-tooltip-trigger {
	border: 1px solid var(--ur-border-strong); background: var(--ur-surface);
	color: var(--ur-text-soft); width: 17px; height: 17px; border-radius: 50%;
	font-size: 11px; font-weight: 700; line-height: 1; cursor: help;
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	flex: 0 0 auto;
}
.ur-tooltip-trigger:hover, .ur-tooltip-trigger:focus { color: var(--ur-blue); border-color: var(--ur-blue); }
.ur-tooltip-bubble {
	position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
	background: var(--ur-elevated); color: var(--ur-text);
	border: 1px solid var(--ur-border); box-shadow: var(--ur-shadow-lg);
	border-radius: 10px; padding: 9px 12px; width: max-content; max-width: 260px;
	font-size: 12.5px; line-height: 1.45; font-weight: 400; letter-spacing: 0;
	opacity: 0; visibility: hidden; transition: opacity 0.14s ease, transform 0.14s ease;
	z-index: 50; text-align: left; pointer-events: none;
}
.ur-tooltip-trigger:hover + .ur-tooltip-bubble,
.ur-tooltip-trigger:focus + .ur-tooltip-bubble,
.ur-tooltip-bubble:hover { opacity: 1; visibility: visible; pointer-events: auto; }
[dir="rtl"] .ur-tooltip-bubble { text-align: right; }

/* ---------------------------------------------------------------------------
 * Instructions panel
 * ------------------------------------------------------------------------- */
.ur-instructions {
	background: color-mix(in srgb, var(--ur-blue) 7%, var(--ur-surface));
	border: 1px solid color-mix(in srgb, var(--ur-blue) 22%, var(--ur-border));
	border-radius: var(--ur-radius); padding: 6px 18px; margin-bottom: 20px;
}
.ur-instructions > summary {
	cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none;
	display: flex; align-items: center; gap: 10px;
}
.ur-instructions > summary::-webkit-details-marker { display: none; }
.ur-instructions > summary::before { content: "💡"; }
.ur-instructions__list { margin: 0 0 14px; padding-left: 22px; color: var(--ur-text-soft); }
.ur-instructions__list li { margin-bottom: 6px; }
[dir="rtl"] .ur-instructions__list { padding-left: 0; padding-right: 22px; }

/* ---------------------------------------------------------------------------
 * Tables, pills, def lists
 * ------------------------------------------------------------------------- */
.ur-table-wrap { overflow-x: auto; }
.ur-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ur-table th, .ur-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--ur-border); }
.ur-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ur-muted); }
.ur-table__actions { text-align: right; }
[dir="rtl"] .ur-table th, [dir="rtl"] .ur-table td { text-align: right; }
[dir="rtl"] .ur-table__actions { text-align: left; }

.ur-pill {
	display: inline-flex; padding: 3px 11px; border-radius: 999px;
	font-size: 12px; font-weight: 700;
	background: var(--ur-surface-2); color: var(--ur-text-soft);
}
.ur-pill--active { background: color-mix(in srgb, var(--ur-ok) 16%, transparent); color: var(--ur-ok); }
.ur-pill--inactive { background: var(--ur-surface-2); color: var(--ur-muted); }
.ur-pill--archived { background: color-mix(in srgb, var(--ur-muted) 18%, transparent); color: var(--ur-muted); }
.ur-pill--draft { background: var(--ur-surface-2); color: var(--ur-text-soft); }
.ur-pill--approved { background: color-mix(in srgb, var(--ur-ok) 16%, transparent); color: var(--ur-ok); }
.ur-pill--posted { background: color-mix(in srgb, var(--ur-blue) 16%, transparent); color: var(--ur-blue); }
.ur-pill--rejected { background: color-mix(in srgb, var(--ur-red) 14%, transparent); color: var(--ur-red); }

.ur-deflist { margin: 0; }
.ur-deflist__row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ur-border); }
.ur-deflist__row:last-child { border-bottom: 0; }
.ur-deflist dt { font-weight: 600; color: var(--ur-text-soft); font-size: 13px; }
.ur-deflist dd { margin: 0; }

/* ---------------------------------------------------------------------------
 * Fields, switches
 * ------------------------------------------------------------------------- */
.ur-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ur-field--inline { flex-direction: column; margin-bottom: 0; }

.ur-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ur-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ur-switch__track {
	width: 44px; height: 26px; border-radius: 999px; background: var(--ur-border-strong);
	position: relative; transition: background 0.18s ease; flex: 0 0 44px;
}
.ur-switch__thumb {
	position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.18s ease;
}
.ur-switch input:checked + .ur-switch__track { background: var(--ur-blue); }
.ur-switch input:checked + .ur-switch__track .ur-switch__thumb { transform: translateX(18px); }
.ur-switch input:focus-visible + .ur-switch__track { box-shadow: 0 0 0 3px var(--ur-ring); }
[dir="rtl"] .ur-switch__thumb { left: auto; right: 3px; }
[dir="rtl"] .ur-switch input:checked + .ur-switch__track .ur-switch__thumb { transform: translateX(-18px); }

/* ---------------------------------------------------------------------------
 * Filters + saved posts
 * ------------------------------------------------------------------------- */
.ur-filters {
	background: var(--ur-surface); border: 1px solid var(--ur-border);
	border-radius: var(--ur-radius); padding: 16px 18px; margin-bottom: 22px; box-shadow: var(--ur-shadow);
}
.ur-filters__row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

.ur-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ur-post-card {
	background: var(--ur-surface); border: 1px solid var(--ur-border);
	border-radius: var(--ur-radius); padding: 18px; box-shadow: var(--ur-shadow);
	display: flex; flex-direction: column; gap: 10px;
}
.ur-post-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ur-post-card__headline { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ur-post-card__snippet { margin: 0; color: var(--ur-text-soft); font-size: 14px; }
.ur-post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ur-tag { font-size: 12px; color: var(--ur-blue); font-weight: 600; }
.ur-post-card__image { font-size: 13px; margin: 0; }
.ur-post-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ur-border); font-size: 12px; }
.ur-inline-status { display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------------------
 * Agent list
 * ------------------------------------------------------------------------- */
.ur-agent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ur-agent-list__item { display: flex; align-items: center; gap: 10px; }
.ur-agent-list__name { font-weight: 600; }
.ur-agent-list__email { font-size: 12px; margin-left: auto; }
[dir="rtl"] .ur-agent-list__email { margin-left: 0; margin-right: auto; }

/* ---------------------------------------------------------------------------
 * Empty states + notices
 * ------------------------------------------------------------------------- */
.ur-empty {
	text-align: center; color: var(--ur-muted);
	padding: 40px 20px; border: 1px dashed var(--ur-border-strong);
	border-radius: var(--ur-radius); background: var(--ur-surface-2);
}
.ur-empty--page { padding: 80px 24px; }
.ur-empty--page h2 { color: var(--ur-text); font-family: var(--ur-font-head); }
.ur-notice {
	margin: 24px auto; max-width: 520px; padding: 24px; text-align: center;
	background: var(--ur-surface); border: 1px solid var(--ur-border);
	border-radius: var(--ur-radius); box-shadow: var(--ur-shadow);
}
.ur-notice--error { border-color: color-mix(in srgb, var(--ur-red) 40%, var(--ur-border)); }

.ur-toast {
	position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
	background: var(--ur-text); color: var(--ur-bg);
	padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px;
	box-shadow: var(--ur-shadow-lg); opacity: 0; pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease; z-index: 200;
}
.ur-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ur-toast--error { background: var(--ur-red); color: #fff; }

/* ---------------------------------------------------------------------------
 * Modal
 * ------------------------------------------------------------------------- */
.ur-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ur-modal[hidden] { display: none; }
.ur-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 13, 23, 0.6); backdrop-filter: blur(2px); }
.ur-modal__panel {
	position: relative; background: var(--ur-surface);
	border: 1px solid var(--ur-border); border-radius: 18px;
	box-shadow: var(--ur-shadow-lg); width: min(720px, 100%);
	max-height: 88vh; overflow-y: auto; padding: 28px;
	animation: ur-pop 0.18s ease;
}
@keyframes ur-pop { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.ur-modal__close {
	position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
	border: 1px solid var(--ur-border); background: var(--ur-surface);
	border-radius: 9px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ur-text-soft);
}
.ur-modal__close:hover { color: var(--ur-red); border-color: var(--ur-red); }
[dir="rtl"] .ur-modal__close { right: auto; left: 16px; }

.ur-detail__media { border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: var(--ur-surface-2); max-height: 260px; }
.ur-detail__media img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.ur-detail__source { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ur-detail__headline { font-family: var(--ur-font-head); font-size: 21px; font-weight: 800; margin: 4px 0 12px; line-height: 1.3; }
.ur-detail__meta { font-size: 13px; color: var(--ur-muted); margin-bottom: 14px; }
.ur-detail__snippet { color: var(--ur-text-soft); margin-bottom: 18px; }
.ur-detail__divider { height: 1px; background: var(--ur-border); margin: 18px 0; }

.ur-gen { margin-top: 6px; }
.ur-gen__field { margin-bottom: 16px; }
.ur-gen__label {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
	color: var(--ur-muted); margin-bottom: 6px;
}
.ur-gen__value { width: 100%; }
textarea.ur-gen__value, .ur-textarea {
	width: 100%; min-height: 70px; resize: vertical;
	border: 1px solid var(--ur-border-strong); background: var(--ur-surface-2);
	color: var(--ur-text); border-radius: 10px; padding: 10px 12px; font: inherit;
}
textarea.ur-gen__value:focus, .ur-textarea:focus { outline: none; border-color: var(--ur-blue); box-shadow: 0 0 0 3px var(--ur-ring); }
.ur-gen__charcount { font-size: 11px; color: var(--ur-muted); font-variant-numeric: tabular-nums; }
.ur-gen__charcount.is-over { color: var(--ur-red); }
.ur-gen__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ur-warning {
	background: color-mix(in srgb, var(--ur-red) 10%, var(--ur-surface));
	border: 1px solid color-mix(in srgb, var(--ur-red) 30%, var(--ur-border));
	color: var(--ur-text); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.ur-reminder { font-size: 12px; color: var(--ur-muted); margin-top: 10px; }

/* Headline options (choose one of three) */
.ur-gen__hint { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ur-muted); }
.ur-headline-options { display: flex; flex-direction: column; gap: 8px; }
.ur-headline-option {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--ur-border-strong); background: var(--ur-surface-2);
	border-radius: 10px; padding: 8px 10px; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ur-headline-option.is-selected {
	border-color: var(--ur-blue);
	background: color-mix(in srgb, var(--ur-blue) 8%, var(--ur-surface));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ur-blue) 22%, transparent);
}
.ur-headline-radio { flex: 0 0 auto; accent-color: var(--ur-blue); width: 16px; height: 16px; margin: 0; }
.ur-headline-option__num {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; color: var(--ur-blue);
	background: color-mix(in srgb, var(--ur-blue) 14%, transparent);
}
.ur-headline-option__text {
	flex: 1 1 auto; min-width: 0; border: none; background: transparent;
	color: var(--ur-text); font: inherit; font-weight: 600; padding: 4px 2px;
}
.ur-headline-option__text:focus { outline: none; }
.ur-headline-option__count { flex: 0 0 auto; font-size: 11px; color: var(--ur-muted); font-variant-numeric: tabular-nums; }
.ur-headline-option__count.is-over { color: var(--ur-red); }


/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.ur-grid--dashboard { grid-template-columns: minmax(0, 1fr); }
	.ur-grid--account, .ur-grid--companies { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.ur-sidebar {
		position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
		transition: transform 0.22s ease;
	}
	.ur-app.ur-nav-open .ur-sidebar { transform: translateX(0); }
	.ur-app.ur-nav-open::after {
		content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55;
	}
	[dir="rtl"] .ur-sidebar { left: auto; right: 0; transform: translateX(100%); }
	[dir="rtl"] .ur-app.ur-nav-open .ur-sidebar { transform: translateX(0); }
	.ur-sidebar-toggle { display: inline-flex; }
	.ur-account__name { display: none; }
	.ur-company-select { min-width: 150px; }
}
@media (max-width: 540px) {
	.ur-main { padding: 18px 14px 50px; }
	.ur-topbar { padding: 12px 14px; }
	.ur-appearance__btn { padding: 6px 9px; }
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ur-app *, .ur-app *::before, .ur-app *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * Defensive control overrides
 *
 * Some host themes ship a reset (e.g. reset.css) that styles generic
 * button / [type="button"] / select / input with their own border, colour and
 * radius (often a brand colour). An attribute selector like [type="button"]
 * has the SAME specificity as the app's component classes, so whichever
 * stylesheet loads last wins — which lets a theme reset override the app's
 * controls (seen as stray coloured borders on buttons, the "?" help icons,
 * selects and the company badge). Re-declaring these styles scoped under
 * .ur-app raises their specificity so the application always wins, regardless
 * of any theme reset that happens to load on the page.
 * ------------------------------------------------------------------------- */
.ur-app .ur-btn { border: 1px solid transparent; border-radius: 11px; }
.ur-app .ur-btn--primary { border-color: var(--ur-blue); background: var(--ur-blue); color: #fff; }
.ur-app .ur-btn--ghost { border-color: var(--ur-border-strong); background: var(--ur-surface); color: var(--ur-text); }
.ur-app .ur-btn--danger { border-color: var(--ur-red); background: var(--ur-red); color: #fff; }
.ur-app .ur-iconbtn { border: 1px solid var(--ur-border); border-radius: 10px; color: var(--ur-text); background: var(--ur-surface); }
.ur-app .ur-tooltip-trigger { border: 1px solid var(--ur-border-strong); border-radius: 50%; color: var(--ur-text-soft); background: var(--ur-surface); }
.ur-app .ur-tooltip-trigger:hover, .ur-app .ur-tooltip-trigger:focus { border-color: var(--ur-blue); color: var(--ur-blue); }
.ur-app .ur-appearance { border: 1px solid var(--ur-border); border-radius: 11px; }
.ur-app .ur-appearance__btn { border: 0; border-radius: 8px; color: var(--ur-text-soft); background: transparent; }
.ur-app .ur-appearance__btn.is-active { color: var(--ur-blue); background: var(--ur-surface); }
.ur-app .ur-select,
.ur-app .ur-input,
.ur-app .ur-company-select,
.ur-app select,
.ur-app input[type="text"],
.ur-app input[type="search"],
.ur-app input[type="email"],
.ur-app input[type="url"],
.ur-app textarea { border: 1px solid var(--ur-border-strong); border-radius: 10px; color: var(--ur-text); background: var(--ur-surface); }
.ur-app .ur-account__trigger { border: 1px solid var(--ur-border); border-radius: 999px; color: var(--ur-text); background: var(--ur-surface); }
.ur-app .ur-modal__close { border: 1px solid var(--ur-border); border-radius: 8px; color: var(--ur-text-soft); background: var(--ur-surface); }

/* External-link icon in .ur-link, and a safety net so WordPress emoji images
   never render at full size if a setup strips the core emoji CSS. */
.ur-app .ur-extlink { display: inline-block; vertical-align: -1px; margin-left: 3px; color: currentColor; }
.ur-app img.emoji,
.ur-app img.wp-smiley {
	display: inline-block; height: 1em; width: 1em; margin: 0 .07em;
	vertical-align: -0.1em; border: 0; box-shadow: none; background: none; padding: 0;
}

/* ---------------------------------------------------------------------------
 * Generation progress panel (shown while the AI writes a post)
 * ------------------------------------------------------------------------- */
.ur-app .ur-gen-loading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 16px;
	padding: 18px 18px 16px;
	border: 1px solid var(--ur-border);
	border-radius: 14px;
	background: var(--ur-surface-2);
	position: relative;
	overflow: hidden;
	animation: ur-gen-fade 0.25s ease both;
}
@keyframes ur-gen-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ur-app .ur-gen-loading__spinner {
	flex: 0 0 auto;
	width: 26px; height: 26px; margin-top: 2px;
	border-radius: 50%;
	border: 3px solid var(--ur-border-strong);
	border-top-color: var(--ur-blue);
	animation: ur-spin 0.7s linear infinite;
}
.ur-app .ur-gen-loading__text { flex: 1 1 auto; min-width: 0; }
.ur-app .ur-gen-loading__title {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ur-text);
	line-height: 1.3;
}
.ur-app .ur-gen-loading__sub {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--ur-text-soft);
	line-height: 1.45;
}
.ur-app .ur-gen-loading__step {
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ur-blue);
	min-height: 1.2em;
	transition: opacity 0.2s ease;
}
.ur-app .ur-gen-loading__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: color-mix(in srgb, var(--ur-blue) 18%, transparent);
	overflow: hidden;
}
.ur-app .ur-gen-loading__bar span {
	position: absolute;
	left: -40%;
	width: 40%;
	height: 100%;
	background: var(--ur-blue);
	border-radius: 3px;
	animation: ur-gen-slide 1.3s ease-in-out infinite;
}
@keyframes ur-gen-slide {
	0%   { left: -40%; }
	60%  { left: 100%; }
	100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ur-app .ur-gen-loading__spinner { animation-duration: 1.6s; }
	.ur-app .ur-gen-loading__bar span { animation-duration: 2.6s; }
}