/* ════════════════════════════════════════════════════════════════════════
   v9.1-polish.css  ·  InteliCMS production-ready release polish
   ────────────────────────────────────────────────────────────────────────
   Single stylesheet containing all the v9.1 UI/UX adjustments so the
   diff is easy to audit and any future regression can be reverted with a
   single <link> removal.

   Sections:
     1. Toast notifications — smaller, less intrusive
     2. Admin notifications panel (new tab) — layout + items
     3. Admin notifications modal — fully responsive
     4. Generate / Review / Back buttons — mobile optimisation
     5. Misc: tab badge styling, focus rings
   ════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
   1. TOAST  — smaller, lighter, doesn't dominate the screen
   ────────────────────────────────────────────────────────────────────────
   The previous toast was 14px font, 22px horizontal padding, full-width
   on mobile. For success messages especially this felt heavy. Slim it
   down so it's clearly a confirmation, not an interruption.
   ──────────────────────────────────────────────────────────────────────── */
.toast {
	font-size: 12.5px !important;
	padding: 9px 16px !important;
	border-radius: 10px !important;
	min-height: 0 !important;
	max-width: 360px !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
	gap: 8px !important;
}
.toast i,
.toast #toastIcon {
	font-size: 13px !important;
}
.toast #toastMsg {
	font-size: 12.5px !important;
	line-height: 1.4 !important;
}

/* Success toasts get an extra trim — they appear most often and shouldn't
   feel heavy. Other types stay slightly larger so warnings/errors retain
   visual weight. */
.toast.success {
	font-size: 12px !important;
	padding: 8px 14px !important;
	max-width: 320px !important;
}
.toast.success i,
.toast.success #toastIcon {
	font-size: 12px !important;
}

/* Mobile — keep toast small but still legible */
@media (max-width: 540px) {
	.toast {
		font-size: 12px !important;
		padding: 8px 14px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: 18px !important;
		max-width: calc(100vw - 32px) !important;
	}
	.toast.show {
		/* counteract any framework that resets transform on .show */
		transform: translateX(-50%) translateY(0) !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   2. ADMIN NOTIFICATIONS PANEL  (new dedicated tab)
   ────────────────────────────────────────────────────────────────────────
   Two-column layout on desktop (compose | recent), single column on
   mobile. Items are styled like cards with type-coloured pills.
   ──────────────────────────────────────────────────────────────────────── */
.adm-notif-grid {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr);
	gap: 24px;
	align-items: flex-start;
}

.adm-notif-compose,
.adm-notif-list {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.adm-notif-compose h3,
.adm-notif-list h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 8px;
}
.adm-notif-compose h3 i { color: #d4a35a; }
.adm-notif-list    h3 i { color: #6366f1; }

.adm-notif-audience-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.adm-notif-radio {
	flex: 1;
	min-width: 130px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fafbfc;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.adm-notif-radio:hover { border-color: #cbd5e1; background: #f1f5f9; }
.adm-notif-radio input[type="radio"] {
	margin: 0;
	accent-color: #d4a35a;
}
.adm-notif-radio:has(input:checked) {
	border-color: #d4a35a;
	background: #fffbeb;
	color: #0f172a;
}
.adm-notif-radio span i { color: #946b29; margin-right: 2px; }

/* Compose form fields */
.adm-notif-compose .mfield { margin-bottom: 12px; }
.adm-notif-compose .mfield label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.adm-notif-compose .mfield input,
.adm-notif-compose .mfield select,
.adm-notif-compose .mfield textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #d8dfee;
	border-radius: 7px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	outline: none;
	transition: border-color 0.18s;
	color: #0f172a;
}
.adm-notif-compose .mfield input:focus,
.adm-notif-compose .mfield select:focus,
.adm-notif-compose .mfield textarea:focus {
	border-color: #d4a35a;
	box-shadow: 0 0 0 3px rgba(212, 163, 90, 0.12);
}

/* Notifications list items */
.adm-notif-item {
	padding: 12px 14px;
	border-bottom: 1px solid #e8edf5;
	background: #fff;
	transition: background 0.15s;
}
.adm-notif-item:last-child { border-bottom: 0; }
.adm-notif-item:hover      { background: #fafbfc; }

.adm-notif-item-row1 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}
.adm-notif-item-type {
	flex-shrink: 0;
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.6;
}
.adm-notif-item-title {
	flex: 1;
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}
.adm-notif-item-del {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 6px;
	background: transparent;
	color: #94a3b8;
	border: 0;
	cursor: pointer;
	font-size: 11px;
	transition: background 0.15s, color 0.15s;
}
.adm-notif-item-del:hover {
	background: #fee2e2;
	color: #dc2626;
}
.adm-notif-item-body {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.5;
	margin: 4px 0 8px;
	word-wrap: break-word;
}
.adm-notif-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}
.adm-notif-item-meta i { margin-right: 3px; }

/* Tab badge for the new Notifications tab */
.adm-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	margin-left: 4px;
}

/* Mobile — stack to single column */
@media (max-width: 900px) {
	.adm-notif-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.adm-notif-compose,
	.adm-notif-list {
		padding: 14px 16px;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   3. NOTIFICATIONS MODAL (user-facing bell dropdown)
   ────────────────────────────────────────────────────────────────────────
   The user notifications panel (#icmsNotifPanel from icms-app-extras.js)
   was clipped on small screens. Make it fully responsive: full-width on
   phones, retain pop-out positioning on desktop.
   ──────────────────────────────────────────────────────────────────────── */
.icms-notif-panel {
	max-width: min(380px, calc(100vw - 16px)) !important;
	max-height: min(560px, calc(100vh - 100px)) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}
.icms-notif-panel-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Mobile — full width, anchored top */
@media (max-width: 540px) {
	.icms-notif-panel {
		position: fixed !important;
		top: 56px !important;
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 64px) !important;
		border-radius: 12px !important;
		/* allow JS-set top/left to be overridden — repositioning is no
		   longer needed on mobile because we anchor by inset */
	}
}


/* ────────────────────────────────────────────────────────────────────────
   4. UPLOAD-MODAL CTA BUTTONS  — Review / Generate / Back on mobile
   ────────────────────────────────────────────────────────────────────────
   On phones the .icms-app-cta-card-btn buttons (Generate, Buy credits)
   and the Review/Back row at the bottom of step 2 became cramped:
   labels overflowed, icons clipped, and on very narrow screens the
   buttons broke out of the panel. Fix with responsive sizing + label
   truncation guard.
   ──────────────────────────────────────────────────────────────────────── */

/* Generate / Buy-credits CTA cards: stack content vertically on narrow
   screens so the icon doesn't squash the text. */
@media (max-width: 540px) {
	.icms-app-cta-card {
		padding: 14px 14px !important;
	}
	.icms-app-cta-card-body {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 8px !important;
		margin-bottom: 10px !important;
	}
	.icms-app-cta-card-text h4 {
		font-size: 15px !important;
	}
	.icms-app-cta-card-text p {
		font-size: 12px !important;
		line-height: 1.45 !important;
	}
	.icms-app-cta-card-btn {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		min-height: 44px !important; /* iOS recommended tap target */
	}
}

/* The "Review & generate" + "Back" split row at the bottom of step 2.
   On phones, stack vertically so each button gets the full row width
   (44px+ tall, easier to tap). */
.icms-app-step-actions--split {
	display: flex !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}
.icms-app-step-actions--split > .btn {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

@media (max-width: 540px) {
	.icms-app-step-actions--split {
		flex-direction: column !important;
		gap: 8px !important;
	}
	.icms-app-step-actions--split > .btn {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
		min-height: 44px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	/* Primary "Review & generate" goes first visually even though it's
	   second in the DOM (the back button is more familiar at top on mobile,
	   but the primary CTA should be right under the outcomes preview where
	   the user's eye lands). */
	.icms-app-step-actions--split > .btn-primary {
		order: -1;
	}
}

/* The "Back to upload" button on step 3 — same treatment for consistency */
@media (max-width: 540px) {
	.icms-app-step-actions .btn {
		min-height: 44px !important;
		padding: 11px 14px !important;
		font-size: 13.5px !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   5. MISC POLISH
   ──────────────────────────────────────────────────────────────────────── */

/* Generic focus ring for keyboard users — ensures notif tab + buttons
   have visible focus when navigating with Tab. */
.adm-tab:focus-visible,
.adm-notif-radio:focus-visible,
.adm-notif-item-del:focus-visible {
	outline: 2px solid #d4a35a;
	outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════
   v9.2  ·  Hero / landing page mobile responsiveness
   ────────────────────────────────────────────────────────────────────────
   The landing-page hero (`.icms-hero`) ships with a 4-column price grid,
   3-column features grid, 220px-min-width CTA buttons, and `min-height:
   100vh` — all set inline in partials/landing.html. On phones (≤ 540px)
   that produces:
     • A vertical strip of cramped price cards that overflow horizontally
     • Three CTA buttons stacked too tall, dwarfing the headline
     • Headline + subline buried below an excessive viewport-tall hero
   The rules below override the inline styles ONLY at narrow widths,
   keeping desktop unchanged.
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet — start tightening, drop hero from 4 → 2 col price cards */
@media (max-width: 900px) {
	.icms-hero {
		min-height: auto !important;
		padding: 24px 0 32px !important;
	}
	.icms-hero-pricecards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.icms-hero-features {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}

/* Phone — single-column everything, large tap targets */
@media (max-width: 540px) {
	.icms-hero {
		padding: 20px 0 28px !important;
		min-height: auto !important;
	}
	.icms-hero .icms-container {
		padding: 0 14px !important;
		gap: 18px !important;
	}

	/* CTA row — full-width buttons, no min-width floor */
	.icms-hero-top-actions {
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
	}
	.icms-hero-top-actions .icms-hero-action {
		width: 100% !important;
		min-width: 0 !important;
		padding: 13px 18px !important;
		font-size: 14px !important;
		min-height: 48px !important;
	}

	/* Headline sized for phones — avoid clipping with a clear floor */
	.icms-hero-headline {
		font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
		line-height: 1.15 !important;
		margin-bottom: 10px !important;
	}
	.icms-hero-subline {
		font-size: 14.5px !important;
		line-height: 1.5 !important;
	}

	/* Price cards — 2 columns at this width still fits and looks healthy
	   on phones; full single-column was too tall (4 stacked cards = lots
	   of scrolling before the user gets to the rest of the hero). */
	.icms-hero-pricecards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		max-width: 100% !important;
	}
	.icms-hero-pricecard {
		padding: 14px 10px !important;
	}
	.icms-hero-pricecard-name {
		font-size: 9px !important;
		letter-spacing: 0.14em !important;
	}
	.icms-hero-pricecard-amount {
		font-size: 1.35rem !important;
	}
	.icms-hero-pricecard-meta {
		font-size: 10px !important;
	}
	.icms-hero-pricecard-badge {
		font-size: 8px !important;
		padding: 2px 8px !important;
	}

	/* Features grid — single column on phones (icon + text reads better
	   stacked rather than crammed into a 2-col grid at this width) */
	.icms-hero-features {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin-top: 6px !important;
	}
}

/* Very narrow (≤ 380px, e.g. older / smaller phones) — go single-col on
   the price cards too, so they aren't squashed below readability. */
@media (max-width: 380px) {
	.icms-hero-pricecards {
		grid-template-columns: 1fr !important;
	}
	.icms-hero-pricecard {
		padding: 12px 14px !important;
	}
}