/* =========================================================
   Marby Calendar - Public Styles
   Organized by layout + feature sections
   Prefix convention: mc- = Marby Calendar
   ========================================================= */

/* =========================================================
   1) Base + Layout
   ========================================================= */

#marbyCalendarRoot {
	font-family: var(--marby-font-body, system-ui, sans-serif);
}

.mc-calendar {
	width: min(100%, var(--marby-page-width, 1280px));
	margin: 0 auto;
}

.mc-section {
	margin: 20px 0 0 0;
}

.mc-section-title {
	margin: 0 0 10px 0;
	font-weight: 700;
}

.mc-empty,
.mc-cal-empty {
	padding: 18px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
}

/* =========================================================
   2) Buttons + Shared Controls
   ========================================================= */

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--marby-color-black, #000000);
	border-radius: var(--marby-radius-xs, 4px);
	background: var(--marby-color-white, #ffffff);
	color: var(--marby-color-black, #000000) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition:
		background var(--marby-transition-fast, 0.15s ease),
		border-color var(--marby-transition-fast, 0.15s ease),
		color var(--marby-transition-fast, 0.15s ease);
}

.mc-btn:hover,
.mc-btn:focus {
	background: var(--marby-color-black, #000000);
	border-color: var(--marby-color-black, #000000);
	color: var(--marby-color-white, #ffffff) !important;
	text-decoration: none !important;
}

.mc-btn:focus-visible {
	outline: 2px solid var(--marby-color-black, #000000);
	outline-offset: 2px;
}

.mc-btn.is-active,
.mc-btn.active,
.mc-btn[aria-pressed="true"],
.mc-btn[aria-selected="true"] {
	background: var(--marby-color-black, #000000) !important;
	background-color: var(--marby-color-black, #000000) !important;
	border-color: var(--marby-color-black, #000000) !important;
	color: var(--marby-color-white, #ffffff) !important;
}

.mc-btn-primary,
.mc-btn.primary {
	font-size: 14px;
	font-weight: 700;
	padding: 10px 15px;
}

.mc-btn-secondary {
	font-size: 12px;
	font-weight: 400;
	padding: 8px 12px;
}

.mc-btn-rev {
	background: var(--marby-color-black, #000000) !important;
	background-color: var(--marby-color-black, #000000) !important;
	border-color: var(--marby-color-black, #000000) !important;
	color: var(--marby-color-white, #ffffff) !important;
}

.mc-btn-rev:hover,
.mc-btn-rev:focus {
	background: var(--marby-color-white, #ffffff) !important;
	background-color: var(--marby-color-white, #ffffff) !important;
	border-color: var(--marby-color-black, #000000) !important;
	color: var(--marby-color-black, #000000) !important;
}

.mc-btn:disabled,
.mc-btn.is-disabled {
	background: var(--marby-color-white, #ffffff) !important;
	background-color: var(--marby-color-white, #ffffff) !important;
	border-color: var(--marby-color-disabled-border, #666666) !important;
	color: var(--marby-color-disabled-text, #9ca3af) !important;
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

.mc-link {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.mc-generation-notice {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 24, 39, 0.32);
	box-sizing: border-box;
}

.mc-generation-notice[hidden] {
	display: none;
}

.mc-generation-notice-card {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	width: min(100%, 420px);
	padding: 18px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
	box-shadow: var(--marby-shadow-modal, 0 20px 44px rgba(0, 0, 0, 0.18));
	animation: mc-pop-in 0.18s ease;
}

.mc-generation-notice-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--marby-color-border-light, #e5e7eb);
	border-top-color: var(--marby-color-ink, #111827);
	border-radius: 999px;
	animation: mc-spin 0.8s linear infinite;
}

.mc-generation-notice-title {
	margin: 0 0 4px 0;
	color: var(--marby-color-ink, #111827);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.mc-generation-notice-body {
	color: #374151;
	font-size: 14px;
	line-height: 1.45;
}

.mc-generation-notice-time {
	display: block;
	margin-top: 8px;
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 14px;
	font-weight: var(--marby-font-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

@keyframes mc-spin {
	to {
		transform: rotate(360deg);
	}
}

.mc-loading-status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 13px 15px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
	background: #f8fafc;
	color: var(--marby-color-ink, #111827);
}

.mc-loading-spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 3px solid #dbe5ee;
	border-top-color: var(--marby-color-marby-blue, #8fb1ce);
	border-radius: 999px;
	animation: mc-spin 0.8s linear infinite;
}

.mc-loading-status-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mc-loading-title {
	font-size: 14px;
	line-height: 1.25;
}

.mc-loading-subtitle {
	color: #64748b;
	font-size: 12px;
	line-height: 1.35;
}

.mc-skeleton-cell,
.mc-skeleton-list-card {
	position: relative;
	overflow: hidden;
	background: #f8fafc;
}

.mc-skeleton-cell::after,
.mc-skeleton-list-card::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.88) 48%, transparent 76%);
	transform: translateX(-100%);
	animation: mc-skeleton-shimmer 1.35s ease-in-out infinite;
	content: '';
}

.mc-skeleton-line {
	display: block;
	border-radius: 999px;
	background: #e5eaf0;
}

.mc-skeleton-date {
	width: 24px;
	height: 10px;
	margin-bottom: 18px;
}

.mc-skeleton-event {
	width: 78%;
	height: 22px;
}

.mc-skeleton-list {
	display: grid;
	gap: 10px;
}

.mc-skeleton-list-card {
	display: grid;
	grid-template-columns: 90px minmax(130px, 0.7fr) minmax(180px, 1fr);
	align-items: center;
	gap: 18px;
	min-height: 78px;
	padding: 16px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
}

.mc-skeleton-list-date {
	width: 72px;
	height: 12px;
}

.mc-skeleton-list-title {
	width: 82%;
	height: 14px;
}

.mc-skeleton-list-copy {
	width: 92%;
	height: 10px;
}

@keyframes mc-skeleton-shimmer {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-loading-spinner,
	.mc-skeleton-cell::after,
	.mc-skeleton-list-card::after {
		animation: none;
	}
}

@media (max-width: 720px) {
	.mc-loading-status {
		align-items: flex-start;
	}

	.mc-skeleton-list-card {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* =========================================================
   3) Page Header
   ========================================================= */

.mc-page-head {
	width: min(100%, var(--marby-page-width, 1280px));
	box-sizing: border-box;
	text-align: center;
	margin: 0 auto 30px;
	padding: 30px;
	background: var(--marby-color-black, #000000);
	color: var(--marby-color-white, #ffffff);
	border-radius: var(--marby-radius-xl, 15px);
}

.mc-page-head h1 {
	margin: 0 0 10px 0;
	font-size: 2.5rem;
	font-weight: 700;
	color: #ffffff;
}

.mc-page-head p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

.marby-membership-usage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 12px;
}

.marby-membership-usage__label {
	font-weight: 700;
	color: #ffffff;
}

.marby-membership-usage__item {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	background: #ffffff;
	color: #1f2937;
}

.marby-membership-usage__item.is-limit-reached,
.marby-membership-usage__inactive {
	border-color: #fca5a5;
	color: #8a1f11;
	font-weight: 700;
}

/* =========================================================
   4) Calendar Header + Month Controls
   ========================================================= */

.mc-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.mc-cal-head-left,
.mc-cal-head-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mc-cal-title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
}

.mc-cal-month-nav {
	min-width: 70px;
}

.mc-cal-month-nav.is-planning-limit,
.mc-cal-month-nav[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.mc-cal-view-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* =========================================================
   5) Calendar Grid + Weekday Header
   ========================================================= */

.mc-cal-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mc-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 2px;
}

.mc-cal-weekday {
	text-align: center;
	border: none;
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	padding: 8px 0;
}

.mc-cal-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

/* =========================================================
   6) Calendar Cells
   ========================================================= */

.mc-cell {
	position: relative;
	min-height: 112px;
	padding: 8px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
	background: var(--marby-color-white, #ffffff);
	color: var(--marby-color-ink, #111827);
	overflow: hidden;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.mc-cell:hover {
	background: #fafafa;
	border-color: var(--marby-color-border-strong, #c9c9c9);
}

.mc-cell-addable {
	cursor: pointer;
}

.mc-cell-addable:focus-visible {
	outline: 3px solid var(--marby-color-black, #000000);
	outline-offset: -3px;
}

.mc-cell-other {
	background: #f9fafb;
	color: #9ca3af;
}

.mc-cell-today {
	outline: 3px solid var(--marby-color-marby-blue, #8fb1ce);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 1px var(--marby-color-border-strong, #c9c9c9);
}

.mc-cell-past {
	background: #f3f4f6;
	color: #9ca3af;
}

.mc-cell-planning-blocked {
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

.mc-cell-planning-blocked:hover {
	background: #f3f4f6;
	border-color: var(--marby-color-border-light, #e5e7eb);
}

.mc-cell-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.mc-cell-date {
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.mc-cell-add {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	opacity: 0;
	padding: 2px 4px;
	border: 0;
	background: transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	color: #111827;
	transition:
		opacity 0.15s ease,
		background 0.15s ease;
}

.mc-cell:hover .mc-cell-add,
.mc-cell:focus-within .mc-cell-add {
	opacity: 1;
}

.mc-cell-addable:hover .mc-cell-add,
.mc-cell-addable:focus-visible .mc-cell-add {
	opacity: 1;
}

.mc-cell-add:hover,
.mc-cell-add:focus-visible {
	background: rgba(17, 24, 39, 0.06);
	border-radius: 5px;
}

.mc-cell-add-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
	border-radius: 4px;
	line-height: 1;
}

.mc-cell-add-text {
	white-space: nowrap;
}

.mc-cell-past .mc-cell-add {
	display: none;
}

/* =========================================================
   7) Event Chips
   ========================================================= */

.mc-events {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mc-event {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 4px 6px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-sm, 6px);
	background: var(--marby-color-white, #ffffff);
	font-size: 12px;
	line-height: 1.25;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mc-cell-past .mc-event {
	opacity: 0.85;
}

.mc-event-link {
	color: #111827;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-event-marby {
	background: #f8fffb;
	border-color: #d3f4e1;
}

.mc-event-fsp {
	background: #f9fbff;
	border-color: #dbe6ff;
}

.mc-platforms {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
}

/* =========================================================
   8) Social Platform Dots
   ========================================================= */

.mc-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.mc-dot-instagram {
	background: #e1306c;
}

.mc-dot-facebook {
	background: #1877f2;
}

.mc-dot-x {
	background: #000000;
}

.mc-dot-linkedin {
	background: #0a66c2;
}

/* =========================================================
   9) Calendar Plan Cards
   ========================================================= */

.mc-plan-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--marby-color-border, #dddddd);
	border-left-width: 4px;
	border-left-style: solid;
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
	cursor: pointer;
	overflow: hidden;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.mc-plan-card:hover,
.mc-plan-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--marby-shadow-soft, 0 8px 20px rgba(0, 0, 0, 0.08));
	border-color: var(--marby-color-border-strong, #c9c9c9);
}

.mc-plan-card.is-active {
	border-color: #1f2937;
	background: #f9fafb;
	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.18),
		inset 0 0 0 1px rgba(31, 41, 55, 0.15);
	transform: translateY(-2px);
}

.mc-plan-card-status-draft,
.mc-plan-card.status-draft {
	border-left-color: #c7cbd1;
}

.mc-plan-card.status-approved {
	border-left-color: var(--marby-color-marby-blue, #70aadd);
}

.mc-plan-card-status-scheduled,
.mc-plan-card.status-scheduled {
	border-left-color: #047857;
}

.mc-plan-card-status-shared,
.mc-plan-card.status-shared,
.mc-plan-card.status-published {
	border-left-color: #047857;
}

.mc-plan-card-status-failed,
.mc-plan-card.status-failed {
	border-left-color: #f87171;
}

.mc-plan-status {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mc-plan-card-status-draft .mc-plan-status,
.mc-plan-card.status-draft .mc-plan-status {
	color: #6b7280;
}

.mc-plan-card.status-approved .mc-plan-status {
	color: var(--marby-color-black, #000000);
}

.mc-plan-card-status-scheduled .mc-plan-status,
.mc-plan-card.status-scheduled .mc-plan-status {
	color: #047857;
}

.mc-plan-card-status-shared .mc-plan-status,
.mc-plan-card.status-shared .mc-plan-status,
.mc-plan-card.status-published .mc-plan-status {
	color: #047857;
}

.mc-plan-card-status-failed .mc-plan-status,
.mc-plan-card.status-failed .mc-plan-status {
	color: #b91c1c;
}

.mc-plan-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	background: #f4f4f4;
	overflow: hidden;
}

.mc-plan-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.mc-plan-card:hover .mc-plan-thumb {
	transform: scale(1.03);
}

.mc-plan-title-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 8px;
	background: #f4f4f4;
	color: #333333;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* =========================================================
   10) Tooltip
   ========================================================= */

.mc-tooltip {
	position: absolute;
	z-index: 9999;
	display: none;
	pointer-events: none;
}

.mc-tt-card {
	display: block;
	max-width: 320px;
	padding: 10px;
	background: #dddddd;
	color: #000000;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	font-size: 13px;
	line-height: 1.35;
}

.mc-tt-card-stacked {
	display: block;
}

.mc-tt-media {
	margin: 0 0 8px 0;
}

.mc-tt-media img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 160px;
	object-fit: contain;
	border-radius: 4px;
}

.mc-tt-title {
	margin-bottom: 4px;
	font-weight: 700;
}

.mc-tt-time {
	opacity: 0.85;
}

.mc-tt-status {
	margin-bottom: 4px;
	font-weight: 700;
}

/* =========================================================
   11) Popout
   ========================================================= */

.mc-popout {
	position: absolute;
	z-index: 99999;
	width: 520px;
	max-width: calc(100vw - 240px);
	max-height: calc(100vh - 24px);
	overflow-y: auto;
}

.mc-popout-card {
	position: relative;
	background: var(--marby-color-white, #ffffff);
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-lg, 10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	animation: mc-pop-in 0.18s ease;
}

@keyframes mc-pop-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.mc-popout-layout {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 16px;
	align-items: start;
	padding: 16px;
}

.mc-popout-media {
	border-radius: 14px;
	background: #f4f4f4;
	overflow: hidden;
}

.mc-popout-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-popout-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 160px;
	padding: 16px;
	box-sizing: border-box;
	background: #f1f1f1;
	border-radius: 8px;
	color: #666666;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
}

.mc-popout-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.mc-popout-date {
	font-size: 12px;
	color: #666666;
}

.mc-popout-title {
	color: #111827;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.mc-popout-desc {
	color: #374151;
	font-size: 13.5px;
	line-height: 1.55;
}

.mc-popout-channels {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 6px;
	border-top: 1px solid #f0f0f0;
	font-size: 13px;
}

.mc-popout-channel-label {
	padding-left: 10px;
	font-size: 14px;
}

.mc-popout-channel-time {
	padding-left: 5px;
	font-size: 14px;
	font-weight: 500;
}

.mc-popout-status {
	display: inline-block;
	width: fit-content;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.mc-popout-status-draft {
	background: #f3f4f6;
	color: #6b7280;
}

.mc-popout-status-approved {
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-black, #000000);
}

.mc-popout-status-scheduled {
	background: #e0edff;
	color: #1d4ed8;
}

.mc-popout-status-shared,
.mc-popout-status-published {
	background: #dcfce7;
	color: #047857;
}

.mc-popout-status-failed {
	background: #fee2e2;
	color: #b91c1c;
}

.mc-popout-actions-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mc-popout-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
}

.mc-popout-action:hover {
	background: rgba(0, 0, 0, 0.06);
}

.mc-popout-action[aria-disabled="true"],
.mc-popout-action[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.mc-popout-action.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.mc-popout-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mc-modal-form {
	display: grid;
	gap: 14px;
	min-width: min(100%, 520px);
}

.mc-modal-field {
	display: grid;
	gap: 6px;
	color: var(--marby-color-ink, #111827);
	font-size: 13px;
	font-weight: 700;
}

.mc-modal-instruction {
	margin: 0;
	color: var(--marby-color-text, #333333);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.mc-modal-field input,
.mc-modal-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid var(--marby-color-border-strong, #c9c9c9) !important;
	border-radius: var(--marby-radius-sm, 6px);
	background: var(--marby-color-white, #ffffff) !important;
	color: var(--marby-color-marby-blue, #8fb1ce);
	font: inherit;
	font-weight: 400;
}

.mc-modal-field .mc-quick-title,
.mc-modal-field .mc-quick-cta,
.mc-modal-field .mc-quick-hashtags {
	color: var(--marby-color-marby-blue, #8fb1ce) !important;
}

.mc-modal-field input:focus,
.mc-modal-field textarea:focus {
	border-color: var(--marby-color-black, #000000) !important;
	box-shadow: 0 0 0 1px var(--marby-color-black, #000000) !important;
	outline: none;
}

.mc-modal-field textarea {
	resize: vertical;
}

.mp-modal.mc-marketplan-quick-edit-modal {
	width: min(1080px, calc(100vw - 48px));
	max-width: 1080px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.mc-marketplan-quick-edit-grid {
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	align-items: start;
	gap: 24px;
	min-width: 0;
}

.mc-marketplan-quick-edit-column {
	display: grid;
	gap: 14px;
	min-width: 0;
}

.mc-marketplan-quick-edit-copy h4 {
	margin: 0;
}

.mc-marketplan-quick-edit-copy .mc-quick-caption {
	min-height: 360px;
	max-height: 52vh;
}

.mc-marketplan-quick-edit-settings .mc-modal-channels {
	grid-template-columns: 1fr;
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
}

.mc-marketplan-quick-edit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mc-marketplan-quick-edit-save-state {
	min-height: 18px;
	color: var(--marby-color-muted, #6b7280);
	font-size: 12px;
}

.mp-modal.mc-marketplan-quick-edit-modal > .mp-modal-actions {
	display: none;
}

.mc-marketplan-quick-edit-settings .mc-modal-channel {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	padding: 8px 10px;
	border: 0;
	border-bottom: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: 0;
}

.mc-marketplan-quick-edit-settings .mc-modal-channel:last-child {
	border-bottom: 0;
}

.mc-marketplan-quick-edit-settings .mc-modal-check {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mc-marketplan-quick-edit-settings .mc-modal-check input[type="checkbox"] {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.mc-marketplan-quick-edit-settings .mc-modal-channel-label {
	display: inline-block;
	min-width: 0;
}

.mc-marketplan-quick-edit-settings .mc-modal-time {
	display: block;
}

.mc-marketplan-quick-edit-settings .mc-modal-time input {
	width: 112px;
	min-height: 38px;
	padding: 7px 8px;
}

@media (max-width: 860px) {
	.mp-modal.mc-marketplan-quick-edit-modal {
		width: min(680px, calc(100vw - 28px));
		max-height: calc(100vh - 28px);
	}

	.mc-marketplan-quick-edit-grid {
		grid-template-columns: 1fr;
	}

	.mc-marketplan-quick-edit-copy .mc-quick-caption {
		min-height: 220px;
		max-height: 38vh;
	}
}

@media (max-width: 520px) {
	.mp-modal.mc-marketplan-quick-edit-modal {
		width: 100%;
		max-height: calc(100vh - 20px);
	}

	.mc-marketplan-quick-edit-settings .mc-modal-time input {
		width: 106px;
	}
}

.mc-modal-channels {
	display: grid;
	gap: 8px;
}

.mc-modal-channel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(118px, 136px);
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
}

.mc-modal-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	min-width: 0;
	margin: 0;
}

.mc-modal-check input {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	accent-color: var(--marby-color-marby-blue, #8fb1ce);
}

.mc-modal-channel-label {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.mc-modal-channel-name {
	overflow-wrap: anywhere;
	color: #111827;
	line-height: 1.25;
}

.mc-modal-channel-platform {
	color: #6b7280;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: capitalize;
}

.mc-modal-time {
	display: grid;
	gap: 4px;
	margin: 0;
	color: #6b7280;
	font-size: 12px;
	font-weight: 700;
}

.mc-modal-time input {
	min-width: 0;
}

.mc-modal-empty {
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f9fafb;
	color: #6b7280;
	font-size: 13px;
	font-weight: 400;
}

/* =========================================================
   12) List View
   ========================================================= */

.mc-list-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
}

.mc-list-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #111827;
	font-size: 14px;
	font-weight: 700;
}

.mc-list-filter-toggle input {
	width: auto;
	margin: 0;
	accent-color: var(--marby-color-marby-blue, #8fb1ce);
}

.mc-list-filter-summary {
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
	text-align: right;
}

.mc-list-empty-panel {
	padding: 20px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
	color: #111827;
}

.mc-list-empty-title {
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.mc-list-empty-text {
	margin: 0 0 14px;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.5;
}

.mc-list-empty-action {
	display: inline-flex;
}

.mc-list-card {
	box-sizing: border-box;
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--marby-color-border-light, #e5e7eb);
	border-radius: var(--marby-radius-md, 8px);
	background: var(--marby-color-white, #ffffff);
}

.mc-list-card-layout {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.mc-list-card-media {
	width: 200px;
	min-width: 200px;
}

.mc-list-card-image,
.mc-list-card-noimage {
	display: block;
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	border-radius: 8px;
}

.mc-list-card-image {
	object-fit: cover;
}

.mc-list-card-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #f1f1f1;
	color: #666666;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
}

.mc-list-card-body {
	flex: 1;
	min-width: 0;
}

.mc-list-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.mc-list-card-date {
	color: #444444;
	font-size: 14px;
	font-weight: 700;
}

.mc-list-card-title {
	margin-bottom: 10px;
	color: #222222;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.mc-list-card-desc {
	margin-bottom: 16px;
	color: #555555;
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.mc-list-card-actions {
	margin-top: auto;
}

.mc-list-actions-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mc-list-card-status {
	display: inline-flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.mc-list-card-status-draft {
	background: #f3f3f3;
	color: #555555;
}

.mc-list-card-status-approved {
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-black, #000000);
}

.mc-list-card-status-scheduled {
	background: #edf8ef;
	color: #2f6b3b;
}

.mc-list-card-status-shared,
.mc-list-card-status-published {
	background: #edf8ef;
	color: #2f6b3b;
}

.mc-list-card-status-failed {
	background: #fee2e2;
	color: #b91c1c;
}

.mc-list-bottom-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--marby-color-border-light, #e5e7eb);
}

/* =========================================================
   13) Mobile
   ========================================================= */

@media (max-width: 900px) {
	.mc-calendar {
		width: 100%;
		padding: 0 14px;
	}

	.mc-cal-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.mc-cal-head-left,
	.mc-cal-head-right {
		width: 100%;
		flex-wrap: wrap;
	}

	.mc-cal-head-right {
		justify-content: flex-start;
	}

	.mc-list-controls {
		align-items: flex-start;
		flex-direction: column;
	}

	.mc-list-filter-summary {
		text-align: left;
	}

	.mc-list-card-layout {
		display: grid;
		grid-template-columns: 1fr;
	}

	.mc-list-card-media,
	.mc-list-card-image,
	.mc-list-card-noimage {
		width: 100%;
		min-width: 0;
	}

	.mc-list-card-image,
	.mc-list-card-noimage {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.mc-popout {
		left: 14px !important;
		right: 14px !important;
		width: auto;
		max-width: none;
	}
}

@media (max-width: 640px) {
	.mc-page-head {
		padding: 22px 16px;
	}

	.mc-page-head h1 {
		font-size: 1.8rem;
	}

	.mc-cal-title {
		order: -1;
		width: 100%;
		font-size: 26px;
	}

	.mc-cal-head-left {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.mc-cal-title {
		grid-column: 1 / -1;
	}

	.mc-cal-head-right,
	.mc-cal-view-toggle {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.mc-btn,
	.mc-cal-view-toggle .mc-btn {
		width: 100%;
	}

	.mc-cal-grid {
		overflow-x: auto;
		padding-bottom: 8px;
	}

	.mc-cal-weekdays,
	.mc-cal-row {
		min-width: 760px;
	}

	.mc-cell {
		min-height: 120px;
	}

	.mc-popout-layout {
		grid-template-columns: 1fr;
	}

	.mc-popout-media {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.mc-modal-channel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.mc-calendar {
		padding: 0 10px;
	}

	.mc-page-head h1 {
		font-size: 1.55rem;
	}

	.mc-cal-title {
		font-size: 24px;
	}
}

/* =========================================================
   14) Kim Calendar Redesign
   Prefix convention: cal- = Calendar presentation layer
   ========================================================= */

.cal-page {
	color: var(--marby-color-black, #000000);
}

.cal-page-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 28px;
	margin-bottom: 28px;
}

.cal-page-heading h1 {
	margin: 18px 0 10px;
	color: var(--marby-color-black, #000000);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: -0.035em;
	line-height: 1;
}

.cal-page-heading p {
	margin: 0;
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: var(--marby-font-weight-light, 300);
	line-height: 1.2;
}

.cal-page-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

.cal-page-actions .marby-btn,
.cal-page-actions .marby-btn-primary {
	min-height: 46px;
	margin: 0;
	padding: 12px 20px;
}

body .cal-page-actions .cal-view-toggle {
	border-color: var(--marby-color-marby-blue, #70aadd) !important;
	background: var(--marby-color-marby-blue, #70aadd) !important;
	color: var(--marby-color-white, #ffffff) !important;
	font-size: 16px;
	font-weight: var(--marby-font-weight-regular, 400);
}

body .cal-page-actions .cal-view-toggle:hover,
body .cal-page-actions .cal-view-toggle:focus {
	border-color: var(--marby-color-black, #000000) !important;
	background: var(--marby-color-black, #000000) !important;
	color: var(--marby-color-white, #ffffff) !important;
}

#marbyCalendarRoot {
	width: 100%;
}

#marbyCalendarRoot .mc-calendar-shell {
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	background: var(--marby-color-white, #ffffff);
	box-shadow: var(--marby-shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.05));
	overflow: hidden;
}

#marbyCalendarRoot .mc-calendar-content {
	padding: 0;
}

#marbyCalendarRoot .mc-cal-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 20px 22px;
	border-bottom: 1px solid var(--marby-color-border-light, #e6e2dd);
}

#marbyCalendarRoot .mc-cal-head-left {
	display: contents;
}

#marbyCalendarRoot .mc-cal-head-right,
#marbyCalendarRoot .mc-cal-view-toggle {
	display: none;
}

#marbyCalendarRoot .mc-cal-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	color: var(--marby-color-black, #000000);
	font-size: 26px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: center;
}

#marbyCalendarRoot .mc-cal-month-nav {
	min-width: 0;
	min-height: 38px;
	margin: 0;
	padding: 8px 4px;
	border: 0 !important;
	background: transparent !important;
	color: var(--marby-color-marby-blue, #70aadd) !important;
	font-size: 14px;
	font-weight: var(--marby-font-weight-medium, 500);
}

#marbyCalendarRoot .mc-cal-month-nav:first-child {
	grid-column: 1;
}

#marbyCalendarRoot .mc-cal-month-nav:last-child {
	grid-column: 3;
}

#marbyCalendarRoot .mc-cal-month-nav:hover,
#marbyCalendarRoot .mc-cal-month-nav:focus {
	background: transparent !important;
	color: var(--marby-color-black, #000000) !important;
}

#marbyCalendarRoot .mc-loading-status {
	margin: 20px 22px;
	border-radius: 0;
}

#marbyCalendarRoot .mc-cal-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-x: auto;
}

#marbyCalendarRoot .mc-cal-weekdays,
#marbyCalendarRoot .mc-cal-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
	min-width: 980px;
}

#marbyCalendarRoot .mc-cal-weekday {
	padding: 12px 14px;
	border-right: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-bottom: 1px solid var(--marby-color-border-light, #e6e2dd);
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 11px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#marbyCalendarRoot .mc-cal-weekday:last-child {
	border-right: 0;
}

#marbyCalendarRoot .mc-cell {
	min-height: 176px;
	padding: 11px;
	border: 0;
	border-right: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-bottom: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-radius: 0;
	background: var(--marby-color-white, #ffffff);
	overflow: visible;
}

#marbyCalendarRoot .mc-cal-row .mc-cell:last-child {
	border-right: 0;
}

#marbyCalendarRoot .mc-cell-other {
	background: #fbfaf8;
	color: #b4aea7;
}

#marbyCalendarRoot .mc-cell-past {
	background: #fbfaf8;
	color: #9f9992;
}

#marbyCalendarRoot .mc-cell-today {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--marby-color-marby-blue, #70aadd);
}

#marbyCalendarRoot .mc-cell-top {
	min-height: 27px;
	margin-bottom: 10px;
}

#marbyCalendarRoot .mc-cell-date {
	display: inline-grid;
	place-items: center;
	width: 27px;
	height: 27px;
	color: inherit;
	font-size: 13px;
	font-weight: var(--marby-font-weight-medium, 500);
}

#marbyCalendarRoot .mc-cell-today .mc-cell-date {
	border-radius: 50%;
	background: var(--marby-color-marby-blue, #70aadd);
	color: var(--marby-color-white, #ffffff);
	font-weight: var(--marby-font-weight-bold, 700);
}

#marbyCalendarRoot .mc-cell-add {
	opacity: 1;
	padding: 4px 6px;
	color: var(--marby-color-muted, #696969);
	font-size: 11px;
	font-weight: var(--marby-font-weight-medium, 500);
}

#marbyCalendarRoot .mc-cell-add:hover,
#marbyCalendarRoot .mc-cell-add:focus-visible {
	border-radius: var(--marby-radius-xs, 4px);
	background: var(--marby-color-marby-blue, #70aadd);
	color: var(--marby-color-white, #ffffff);
}

#marbyCalendarRoot .mc-cell-add-symbol {
	border-radius: 50%;
}

#marbyCalendarRoot .mc-events {
	gap: 8px;
}

#marbyCalendarRoot .mc-plan-card {
	gap: 7px;
	padding: 9px;
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-left-width: 4px;
	border-radius: 0;
	background: var(--marby-color-soft-blue, #eef6fc);
}

#marbyCalendarRoot .mc-plan-card:hover,
#marbyCalendarRoot .mc-plan-card:focus-visible {
	border-color: var(--marby-color-marby-blue, #70aadd);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
	transform: translateY(-1px);
}

#marbyCalendarRoot .mc-plan-card.status-draft {
	border-left-color: #c7cbd1;
}

#marbyCalendarRoot .mc-plan-card.status-approved {
	border-left-color: var(--marby-color-marby-blue, #70aadd);
}

#marbyCalendarRoot .mc-plan-card.status-scheduled,
#marbyCalendarRoot .mc-plan-card.status-shared,
#marbyCalendarRoot .mc-plan-card.status-published {
	border-left-color: #047857;
}

#marbyCalendarRoot .mc-plan-card.status-failed {
	border-left-color: #f87171;
}

.cal-plan-behaviour,
.cal-list-card-behaviour {
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 10px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
}

#marbyCalendarRoot .mc-plan-media {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	background: var(--marby-color-white, #ffffff);
}

#marbyCalendarRoot .mc-plan-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cal-plan-no-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	height: 100%;
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 10px;
	font-weight: var(--marby-font-weight-medium, 500);
}

.cal-plan-no-photo svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.cal-plan-title {
	color: var(--marby-color-black, #000000);
	font-size: 13px;
	font-weight: var(--marby-font-weight-bold, 700);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

#marbyCalendarRoot .mc-plan-card .mc-plan-status {
	text-transform: none;
}

#marbyCalendarRoot .mc-list-view {
	padding: 22px;
}

#marbyCalendarRoot .mc-list-controls {
	margin-bottom: 18px;
}

#marbyCalendarRoot .mc-list-card {
	border-radius: 0;
	box-shadow: none;
}

#marbyCalendarRoot .mc-list-card-noimage {
	border-radius: 0;
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-marby-blue, #70aadd);
}

.cal-list-card-behaviour {
	text-align: right;
}

@media (max-width: 860px) {
	.cal-page-header {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.cal-page-actions {
		justify-content: flex-start;
	}

	#marbyCalendarRoot .mc-cal-title {
		text-align: left;
	}
}

@media (max-width: 640px) {
	.cal-page-heading h1 {
		font-size: clamp(38px, 13vw, 52px);
	}

	.cal-page-actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.cal-page-actions .marby-btn,
	.cal-page-actions .marby-btn-primary {
		width: 100%;
	}

	#marbyCalendarRoot .mc-cal-head {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	#marbyCalendarRoot .mc-cal-title {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 8px;
		font-size: 24px;
	}

	#marbyCalendarRoot .mc-cal-month-nav:first-child {
		grid-column: 1;
		grid-row: 2;
		justify-content: flex-start;
	}

	#marbyCalendarRoot .mc-cal-month-nav:last-child {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-end;
	}

	#marbyCalendarRoot .mc-list-view {
		padding: 16px;
	}

	#marbyCalendarRoot .mc-list-card-layout {
		gap: 14px;
	}

	#marbyCalendarRoot .mc-list-card-top {
		align-items: flex-start;
		flex-direction: column;
	}

	.cal-list-card-behaviour {
		text-align: left;
	}
}

/* =========================================================
   15) Plan Item Detail Modal
   ========================================================= */

.mp-modal.cal-post-modal {
	width: min(980px, calc(100vw - 48px));
	max-width: 980px;
	max-height: calc(100vh - 48px);
	padding: 0;
	border-radius: 0;
	overflow-y: auto;
}

.mp-modal.cal-post-modal .mp-modal-content {
	margin: 0;
}

.mp-modal.cal-post-modal > .mp-modal-actions {
	display: none;
}

.cal-post-modal-shell {
	position: relative;
}

.cal-post-modal-close {
	position: absolute;
	top: 18px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-radius: 50%;
	background: var(--marby-color-white, #ffffff);
	color: var(--marby-color-black, #000000);
	font-size: 18px;
	font-weight: var(--marby-font-weight-medium, 500);
	line-height: 1;
	cursor: pointer;
}

.cal-post-modal-close:hover,
.cal-post-modal-close:focus-visible {
	border-color: var(--marby-color-marby-blue, #70aadd);
	color: var(--marby-color-marby-blue, #70aadd);
	outline: none;
}

.cal-post-modal-grid {
	display: grid;
	grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
	min-height: 580px;
}

.cal-post-modal-media {
	padding: 28px;
	border-right: 1px solid var(--marby-color-border-light, #e6e2dd);
	background: var(--marby-color-soft-blue, #eef6fc);
}

.cal-post-modal-image-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-radius: 12px;
	background: var(--marby-color-white, #ffffff);
	overflow: hidden;
}

.cal-post-modal-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cal-post-modal-image[hidden],
.cal-post-modal-noimage[hidden] {
	display: none;
}

.cal-post-modal-noimage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 18px;
	font-weight: var(--marby-font-weight-medium, 500);
}

.cal-post-modal-image-label {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 10px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cal-post-modal-upload {
	display: grid;
	gap: 8px;
	margin-top: 20px;
	padding: 22px;
	border: 2px dashed #d5cec6;
	border-radius: 8px;
	background: var(--marby-color-white, #ffffff);
	text-align: center;
}

.cal-post-modal-upload h3,
.cal-post-modal-section h3 {
	margin: 0;
	color: var(--marby-color-black, #000000);
	font-size: 17px;
	font-weight: var(--marby-font-weight-bold, 700);
}

.cal-post-modal-upload p {
	margin: 0;
	color: var(--marby-color-muted, #696969);
	font-size: 13px;
	line-height: 1.5;
}

.cal-post-modal-upload-button {
	justify-self: center;
	margin-top: 4px;
}

.cal-post-modal-upload small {
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cal-post-modal-upload-status {
	min-height: 20px;
	color: var(--marby-color-muted, #696969);
	font-size: 12px;
	line-height: 1.4;
}

.cal-post-modal-upload-status.is-success {
	color: var(--marby-color-marby-blue, #70aadd);
}

.cal-post-modal-upload-status.is-error {
	color: #b42318;
}

.cal-post-modal-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 54px 38px 32px;
}

.cal-post-modal-date,
.cal-post-modal-behaviour,
.cal-post-modal-status-label {
	color: var(--marby-color-marby-blue, #70aadd);
	font-size: 11px;
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cal-post-modal-date {
	color: var(--marby-color-muted, #696969);
	font-size: 20px;
	font-weight: var(--marby-font-weight-regular, 400);
	letter-spacing: 0;
	text-transform: none;
}

.cal-post-modal-behaviour {
	margin-top: 8px;
	color: var(--marby-color-marby-blue, #70aadd);
}

.cal-post-modal-content h2 {
	margin: 12px 50px 10px 0;
	color: var(--marby-color-black, #000000);
	font-size: clamp(28px, 3.1vw, 42px);
	font-weight: var(--marby-font-weight-bold, 700);
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.cal-post-modal-description {
	margin: 0;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--marby-color-border-light, #e6e2dd);
	color: var(--marby-color-text, #333333);
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.5;
}

.cal-post-modal-section {
	margin-top: 20px;
}

.cal-post-modal-channels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.cal-post-modal-channel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-black, #000000);
	font-size: 13px;
}

.cal-post-modal-channel span,
.cal-post-modal-channel.is-empty {
	color: var(--marby-color-muted, #696969);
}

.cal-post-modal-channel.is-empty {
	grid-column: 1 / -1;
}

.cal-post-modal-status-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.cal-post-modal .mc-popout-status {
	padding: 6px 12px;
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-marby-blue, #70aadd);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cal-post-modal .mc-popout-status.status-scheduled,
.cal-post-modal .mc-popout-status.status-shared,
.cal-post-modal .mc-popout-status.status-published {
	background: var(--marby-color-soft-blue, #eef6fc);
	color: var(--marby-color-marby-blue, #70aadd);
}

.cal-post-modal .mc-popout-actions {
	margin-top: auto;
	padding-top: 28px;
}

.cal-post-modal .mc-popout-actions-row {
	padding-top: 20px;
	border-top: 1px solid var(--marby-color-border-light, #e6e2dd);
}

.cal-post-modal .mc-popout-action {
	width: 42px;
	height: 42px;
	border: 1px solid var(--marby-color-border-light, #e6e2dd);
	border-radius: 0;
	background: var(--marby-color-white, #ffffff);
	color: var(--marby-color-marby-blue, #70aadd);
}

.cal-post-modal .mc-popout-action:hover,
.cal-post-modal .mc-popout-action:focus-visible {
	border-color: var(--marby-color-marby-blue, #70aadd);
	background: var(--marby-color-marby-blue, #70aadd);
	color: var(--marby-color-white, #ffffff);
	outline: none;
}

@media (max-width: 800px) {
	.mp-modal.cal-post-modal {
		width: min(680px, calc(100vw - 28px));
		max-height: calc(100vh - 28px);
	}

	.cal-post-modal-grid {
		grid-template-columns: 1fr;
	}

	.cal-post-modal-media {
		border-right: 0;
		border-bottom: 1px solid var(--marby-color-border-light, #e6e2dd);
	}

	.cal-post-modal-image-frame {
		max-width: 420px;
		margin: 0 auto;
	}

	.cal-post-modal-content {
		padding: 32px 24px;
	}
}

@media (max-width: 520px) {
	.mp-modal-overlay {
		padding: 10px;
	}

	.mp-modal.cal-post-modal {
		width: 100%;
		max-height: calc(100vh - 20px);
	}

	.cal-post-modal-media {
		padding: 20px;
	}

	.cal-post-modal-content {
		padding: 28px 20px;
	}

	.cal-post-modal-channels {
		grid-template-columns: 1fr;
	}

	.cal-post-modal-content h2 {
		font-size: 30px;
	}
}