/** ================================================================
 * rcult.css – Design system for the rcult SPA
 * Brand colors: #E56A54 (coral), #081F2C (dark navy), #0E2C32 (dark teal)
 * Themes: default | promotoracultural
 * ================================================================ */

/** ----------------------------------------------------------------
 * CSS Custom Properties (Design Tokens)
 * ---------------------------------------------------------------- */
:root {
	/* --color-primary:        #E56A54; */
	--color-primary:        #929BC7;
	--color-primary-dark:   #c7553f;
	--color-primary-light:  #f0927e;
	--color-primary-faint:  rgba(229,106,84,0.08);
	--color-dark:           #081F2C;
	--color-dark2:          #0E2C32;
	--color-dark3:          #102a36;
	--color-surface:        #ffffff;
	--color-surface-2:      #f4f6f8;
	--color-surface-3:      #eaecef;
	--color-border:         #d8dce2;
	/* --color-text:           #1a2533; */
	--color-text:           #33727A;
	--color-text-muted:     #6b7a8d;
	--color-text-light:     #ffffff;
	--color-success:        #27ae60;
	--color-warning:        #f0a500;
	--color-error:          #e74c3c;
	--color-info:           #2980b9;
	--color-awarded:        #27ae60;
	--color-rejected:       #e74c3c;
	--color-draft:          #95a5a6;
	--color-submitted:      #2980b9;
	--color-review:         #f0a500;

	--font-base:            'Inter', system-ui, -apple-system, sans-serif;
	--font-size-xs:         0.72rem;
	--font-size-sm:         0.85rem;
	--font-size-base:       1rem;
	--font-size-md:         1.1rem;
	--font-size-lg:         1.3rem;
	--font-size-xl:         1.6rem;
	--font-size-2xl:        2rem;

	--radius-sm:            6px;
	--radius-md:            12px;
	--radius-lg:            18px;
	--radius-full:          999px;

	--shadow-sm:            0 2px 8px rgba(8,31,44,0.07);
	--shadow-md:            0 4px 20px rgba(8,31,44,0.12);
	--shadow-lg:            0 8px 40px rgba(8,31,44,0.18);
	--shadow-glow:          0 0 20px rgba(229,106,84,0.25);

	--transition:           0.22s cubic-bezier(.4,0,.2,1);
	--sidebar-w:            260px;
	--header-h:             64px;
}

/** ----------------------------------------------------------------
 * Reset & Base
 * ---------------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family:    var(--font-base);
	font-size:      var(--font-size-base);
	color:          var(--color-text);
	background:     var(--color-surface-2);
	line-height:    1.6;
	min-height:     100vh;
	overflow-x:     hidden;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);

	&:hover { color: var(--color-primary-dark); }
}

img { max-width: 100%; display: block; }

/** ----------------------------------------------------------------
 * Utility classes
 * ---------------------------------------------------------------- */
.d-none     { display: none !important; }
.d-flex     { display: flex; }
.d-grid     { display: grid; }
.d-block    { display: block; }
.d-inline   { display: inline; }
.gap-1      { gap: 8px; }
.gap-2      { gap: 16px; }
.gap-3      { gap: 24px; }
.align-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap  { flex-wrap: wrap; }
.fw-bold    { font-weight: 700; }
.fw-medium  { font-weight: 500; }
.text-muted { color: var(--color-text-muted); }
.text-sm    { font-size: var(--font-size-sm); }
.text-xs    { font-size: var(--font-size-xs); }
.text-lg    { font-size: var(--font-size-lg); }
.text-xl    { font-size: var(--font-size-xl); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.p-1  { padding: 8px; }
.p-2  { padding: 16px; }
.p-3  { padding: 24px; }
.w-full { width: 100%; }
.rounded { border-radius: var(--radius-md); }
.scroll-y { overflow-y: auto; }

/** ----------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------- */
.btn {
	display:        inline-flex;
	align-items:    center;
	gap:            8px;
	padding:        0.55rem 1.2rem;
	border-radius:  var(--radius-full);
	border:         2px solid transparent;
	font-family:    var(--font-base);
	font-size:      var(--font-size-sm);
	font-weight:    600;
	cursor:         pointer;
	transition:     background var(--transition), color var(--transition),
	                border-color var(--transition), box-shadow var(--transition),
	                transform var(--transition);
	white-space:    nowrap;
	outline:        none;
	text-decoration: none;

	&:hover { transform: translateY(-1px); }
	&:active { transform: translateY(0); }
}

.btn-primary {
	background:     var(--color-primary);
	color:          var(--color-text-light);
	border-color:   var(--color-primary);

	&:hover {
		background:     var(--color-primary-dark);
		border-color:   var(--color-primary-dark);
		box-shadow:     var(--shadow-glow);
		color:          #fff;
	}
}

.btn-secondary {
	background:     transparent;
	color:          var(--color-primary);
	border-color:   var(--color-primary);

	&.disabled{
		color: #ddd;
		border-color:   #ddd;
		/* background: var(--color-primary); */
	}

	&:hover {
		background:     var(--color-primary-faint);
	}
}

.btn-dark {
	background:     var(--color-dark);
	color:          var(--color-text-light);
	border-color:   var(--color-dark);

	&:hover {
		background:     var(--color-dark2);
	}
}

.btn-ghost {
	background:     transparent;
	color:          var(--color-text-muted);
	border-color:   var(--color-border);

	&:hover {
		background:     var(--color-surface-3);
		color:          var(--color-text);
	}
}

.btn-danger {
	background:     var(--color-error);
	color:          #fff;
	border-color:   var(--color-error);

	&:hover {
		background:     #c0392b;
		border-color:   #c0392b;
	}
}

.btn-sm {
	padding:        0.3rem 0.8rem;
	font-size:      var(--font-size-xs);
}

.btn-lg {
	padding:        0.75rem 1.8rem;
	font-size:      var(--font-size-md);
}

.btn-icon {
	width:          40px;
	height:         40px;
	padding:        0;
	justify-content: center;
	border-radius:  50%;
}

/** ----------------------------------------------------------------
 * Form elements
 * ---------------------------------------------------------------- */
.form-group {
	margin-bottom:  20px;

	label {
		display:        block;
		font-size:      var(--font-size-sm);
		font-weight:    600;
		color:          var(--color-dark);
		margin-bottom:  6px;

		.required {
			color: var(--color-primary);
			margin-left: 3px;
		}
	}
}

.form-control {
	width:          100%;
	padding:        0.6rem 0.9rem;
	border:         2px solid var(--color-border);
	border-radius:  var(--radius-sm);
	font-family:    var(--font-base);
	font-size:      var(--font-size-base);
	color:          var(--color-text);
	background:     var(--color-surface);
	transition:     border-color var(--transition), box-shadow var(--transition);
	outline:        none;

	&:focus {
		border-color:   var(--color-primary);
		box-shadow:     0 0 0 3px rgba(229,106,84,0.15);
	}

	&:disabled {
		background:     var(--color-surface-2);
		cursor:         not-allowed;
		color:          var(--color-text-muted);
	}
}

textarea.form-control {
	min-height:     110px;
	resize:         vertical;
}

select.form-control {
	cursor:         pointer;
}

.form-hint {
	font-size:      var(--font-size-xs);
	color:          var(--color-text-muted);
	margin-top:     4px;
}

.form-error {
	font-size:      var(--font-size-xs);
	color:          var(--color-error);
	margin-top:     4px;
}

.form-success {
	font-size:      var(--font-size-xs);
	color:          #2e7d32;
	margin-top:     4px;
}

/** Radio / Checkbox groups */
.radio-group,
.checkbox-group {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     6px;
}

.radio-option,
.checkbox-option {
	display:        flex;
	align-items:    flex-start;
	gap:            10px;
	cursor:         pointer;
	padding:        10px 14px;
	border:         2px solid var(--color-border);
	border-radius:  var(--radius-sm);
	transition:     border-color var(--transition), background var(--transition);

	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}

	input {
		margin-top:     3px;
		accent-color:   var(--color-primary);
		flex-shrink:    0;
	}

	&.selected {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}

	label {
		font-size:      var(--font-size-sm);
		font-weight:    400;
		color:          var(--color-text);
		cursor:         pointer;
		margin:         0;
	}
}

/** File upload */
/* Visually hidden but still interactable (so the browser fires
 * change events). Used for file inputs inside <label for="">. */
.sr-only-file {
	position:  absolute;
	width:     1px;
	height:    1px;
	padding:   0;
	margin:    -1px;
	overflow:  hidden;
	clip:      rect(0,0,0,0);
	border:    0;
	opacity:   0;
}

.file-upload-area {
	display:        block;
	position:       relative;
	border:         2px dashed var(--color-border);
	border-radius:  var(--radius-md);
	padding:        28px;
	text-align:     center;
	cursor:         pointer;
	transition:     border-color var(--transition), background var(--transition);
	background:     var(--color-surface);

	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}

	i {
		font-size:      2rem;
		color:          var(--color-primary);
		margin-bottom:  8px;
	}

	p {
		font-size:      var(--font-size-sm);
		color:          var(--color-text-muted);
	}
}

.file-name-display {
	margin-top:     8px;
	font-size:      var(--font-size-sm);
	color:          var(--color-text);
	font-weight:    500;
}

/** ----------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------- */
.card {
	background:     var(--color-surface);
	border-radius:  var(--radius-lg);
	box-shadow:     var(--shadow-sm);
	overflow:       hidden;
	transition:     box-shadow var(--transition), transform var(--transition);
	border:         1px solid var(--color-border);

	&:hover {
		box-shadow:     var(--shadow-md);
		transform:      translateY(-3px);
	}
}

.card-header {
	padding:        18px 20px 0;
}

.card-body {
	padding:        18px 20px;
}

.card-footer {
	padding:        12px 20px 18px;
	border-top:     1px solid var(--color-border);
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	flex-wrap:      wrap;
	gap:            8px;
}

.card-accent {
	height:         5px;
	background:     linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	transform-origin: center;
}

/** Grant call card */
.grant-card {
	cursor:         pointer;

	&:hover > .card-accent {
		animation: rcult-accent-breath 1.4s ease-in-out infinite;
	}

	.card-title {
		font-size:      var(--font-size-md);
		font-weight:    700;
		color:          var(--color-dark);
		margin-bottom:  8px;
		line-height:    1.3;
	}

	.card-meta {
		display:        flex;
		flex-wrap:      wrap;
		gap:            12px;
		font-size:      var(--font-size-xs);
		color:          var(--color-text-muted);
		margin-bottom:  10px;

		i {
			margin-right:   4px;
		}
	}
}

/* Match the accent color to the status badge.
 * The grant-card-<badge> class is rendered alongside .grant-card. */
.grant-card-badge-open        > .card-accent { background: linear-gradient(90deg, var(--color-success), #6fdc8c); }
.grant-card-badge-opens-soon  > .card-accent { background: linear-gradient(90deg, #0b6aa7, #5ea9e0); }
.grant-card-badge-closed      > .card-accent { background: linear-gradient(90deg, var(--color-rejected), #f5a3a0); }
.grant-card-badge-evaluation  > .card-accent { background: linear-gradient(90deg, #856404, #f0c14b); }
.grant-card-badge-awards      > .card-accent { background: linear-gradient(90deg, #6f42c1, #b388e0); }

/* Pulse-breath animation on hover */
@keyframes rcult-accent-breath {
	0%   { transform: scaleY(1);   filter: brightness(1)   saturate(1);   opacity: 1;   }
	50%  { transform: scaleY(1.7); filter: brightness(1.2) saturate(1.4); opacity: .9; }
	100% { transform: scaleY(1);   filter: brightness(1)   saturate(1);   opacity: 1;   }
}

/** Status Indicator Dot in Cards */
.status-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid rgba(255,255,255,0.2);
}
.status-active   { background-color: var(--color-success); box-shadow: 0 0 6px rgba(39,174,96,0.4); }
.status-inactive { background-color: var(--color-draft); }
.status-deleted  { background-color: var(--color-error); }

/** Logo wrapper for cards */
.org-logo-wrapper {
	width: 48px;
	height: 48px;
	background: var(--color-surface-2);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--color-border);
}

/** Org card (dashboard) */
.org-card-link {
	cursor:         pointer;
	transition:     box-shadow var(--transition), transform var(--transition), background var(--transition);

	&:hover {
		background:     var(--color-primary-faint);
		border-color:   var(--color-primary-light);
	}
}

/** ----------------------------------------------------------------
 * Badges / Status
 * ---------------------------------------------------------------- */
.badge {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	padding:        3px 10px;
	border-radius:  var(--radius-full);
	font-size:      var(--font-size-xs);
	font-weight:    600;
	letter-spacing: 0.02em;
}

.badge-draft     { background: #ecf0f1; color: var(--color-draft); }
.badge-submitted { background: #d6eaf8; color: var(--color-submitted); }
.badge-review    { background: #fef9e7; color: var(--color-review); }
.badge-awarded   { background: #d5f5e3; color: var(--color-awarded); }
.badge-rejected  { background: #fadbd8; color: var(--color-rejected); }
.badge-open        { background: #d5f5e3; color: var(--color-success); }
.badge-opens-soon  { background: #d6ebf9; color: #0b6aa7; }
.badge-closed      { background: #fdecea; color: var(--color-rejected); }
.badge-evaluation  { background: #fff3cd; color: #856404; }
.badge-awards      { background: #e8d5f5; color: #6f42c1; }

/** ----------------------------------------------------------------
 * Welcome Page
 * ---------------------------------------------------------------- */
#rcult-welcome {
	min-height:     100vh;
	display:        flex;
	flex-direction: column;
	background:     var(--color-dark);
}

.welcome-header {
	display:        flex;
	align-items:    center;
	gap:            14px;
	padding:        20px 40px;
	background:     rgba(8,31,44,0.95);
	backdrop-filter: blur(12px);
	border-bottom:  1px solid rgba(255,255,255,0.07);
	position:       sticky;
	top:            0;
	z-index:        100;

	img {
		height:         40px;
		width:          auto;
	}

	.app-title {
		font-size:      var(--font-size-lg);
		font-weight:    700;
		color:          #fff;
		letter-spacing: -0.02em;

		span {
			color:          var(--color-primary);
		}
	}
}

.welcome-body {
	flex:           1;
	display:        grid;
	grid-template-columns: 1fr 420px;
	min-height:     calc(100vh - 70px);
}

.welcome-hero {
	position:       relative;
	overflow:       hidden;
	background:     linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark2) 100%);
}

.welcome-hero-bg {
	position:       absolute;
	inset:          0;
	background-image: url('res/hero_bg.webp');
	background-size:  cover;
	background-position: center;
	opacity:        0.35;
}

.welcome-hero-overlay {
	position:       absolute;
	inset:          0;
	background:     linear-gradient(135deg, rgba(8,31,44,0.85) 0%, rgba(229,106,84,0.2) 100%);
}

.welcome-hero-content {
	position:       relative;
	z-index:        2;
	padding:        60px 50px;
	color:          #fff;
	display:        flex;
	flex-direction: column;
	justify-content: flex-start;
	height:         100%;

	.hero-label {
		font-size:      var(--font-size-xs);
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		color:          var(--color-primary-light);
		margin-bottom:  16px;
	}

	h1 {
		font-size:      clamp(1.8rem, 3vw, 2.8rem);
		font-weight:    800;
		line-height:    1.15;
		margin-bottom:  20px;
		letter-spacing: -0.02em;
	}

	p {
		font-size:      var(--font-size-md);
		color:          rgba(255,255,255,0.75);
		line-height:    1.7;
		max-width:      480px;
	}
}

.welcome-hero-stats {
	display:        flex;
	gap:            32px;
	margin-top:     40px;
}

/* Hero headline row: headline on the left, small per-orgclu logo on
   the right. On narrow viewports the row stacks with the logo back on
   top (matching the pre-refactor order). */
.hero-headline-row {
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	justify-content: space-between;
	gap:             20px;
	margin-bottom:   12px;

	& .hero-title {
		flex:   1 1 auto;
		margin: 0;
	}

	& .hero-logo {
		flex:            0 0 auto;
		height:          60px;
		max-width:       200px;
		display:         block;
		object-fit:      contain;
		filter:          brightness(1);
	}
}

@media (max-width: 768px) {
	.hero-headline-row {
		flex-direction:  column-reverse;
		align-items:     flex-start;
	}
	.hero-headline-row .hero-logo {
		margin-bottom: 16px;
	}
}

/* Founders & partners: auto-scrolling single-row carousel.
   The inner .fap-track holds the cells; rcult.js::show_welcome clones
   them once so the track is exactly 2x wide and translateX(-50%)
   produces a seamless infinite loop. */
.founders-and-partners {
	overflow:    hidden;
	width:       100%;
	margin-top:  100px;
	padding:     10px 0;

	& .fap-track {
		display:     flex;
		width:       max-content;
		align-items: center;
		animation:   fap-scroll 45s linear infinite;
	}

	& .fap-cell {
		flex:             0 0 auto;
		width:            80px;
		height:           50px;
		display:          flex;
		align-items:      center;
		justify-content:  center;
		margin-right:     20px;
	}

	& .fap-cell img {
		max-width:   80px;
		max-height:  80px;
		width:       auto;
		height:      auto;
		display:     block;
		object-fit:  contain;
	}
}

@keyframes fap-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.stat-item {
	display:        flex;
	flex-direction: column;
}

.stat-value {
	font-size:      1.8rem;
	font-weight:    800;
	color:          var(--color-primary);
	line-height:    1;
}

.stat-label {
	font-size:      var(--font-size-xs);
	color:          rgba(255,255,255,0.6);
	margin-top:     4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.welcome-panel {
	background:     var(--color-surface);
	display:        flex;
	flex-direction: column;
	justify-content: center;
	padding:        48px 40px;
	overflow-y:     auto;
}

.auth-tabs {
	display:        flex;
	gap:            4px;
	background:     var(--color-surface-2);
	border-radius:  var(--radius-full);
	padding:        4px;
	margin-bottom:  30px;
}

.auth-tab {
	flex:           1;
	padding:        10px;
	text-align:     center;
	border-radius:  var(--radius-full);
	cursor:         pointer;
	font-size:      var(--font-size-sm);
	font-weight:    600;
	color:          var(--color-text-muted);
	transition:     all var(--transition);
	border:         none;
	background:     transparent;

	&.active {
		background:     var(--color-surface);
		color:          var(--color-primary);
		box-shadow:     var(--shadow-sm);
	}
}

.auth-panel {
	display:        none;

	&.active {
		display:        block;
	}
}

.social-login {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-bottom:  22px;
}

.btn-social {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        11px 16px;
	border:         2px solid var(--color-border);
	border-radius:  var(--radius-sm);
	background:     var(--color-surface);
	cursor:         pointer;
	font-size:      var(--font-size-sm);
	font-weight:    500;
	color:          var(--color-text);
	transition:     border-color var(--transition), background var(--transition);
	width:          100%;

	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}
}

.or-divider {
	display:        flex;
	align-items:    center;
	gap:            12px;
	margin-bottom:  20px;
	color:          var(--color-text-muted);
	font-size:      var(--font-size-xs);

	&::before,
	&::after {
		content:        '';
		flex:           1;
		height:         1px;
		background:     var(--color-border);
	}
}

.welcome-footer {
	background:     var(--color-dark2);
	padding:        24px 40px;
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	flex-wrap:      wrap;
	gap:            16px;
}

.footer-brand img {
	height:         32px;
	filter:         brightness(0) invert(1);
	opacity:        0.8;
}

.footer-info {
	display:        flex;
	gap:            24px;
	flex-wrap:      wrap;
}

.footer-info-item {
	display:        flex;
	align-items:    center;
	gap:            8px;
	font-size:      var(--font-size-xs);
	color:          rgba(255,255,255,0.6);

	i {
		color:          var(--color-primary);
	}
}

/** ----------------------------------------------------------------
 * Main App Layout
 * ---------------------------------------------------------------- */
#rcult-app {
	display:        none;
	min-height:     100vh;
	background:     var(--color-surface-2);

	&.active {
		display:        flex;
	}
}

/** Sidebar */
.app-sidebar {
	width:          var(--sidebar-w);
	min-height:     100vh;
	background:     var(--color-dark);
	display:        flex;
	flex-direction: column;
	position:       sticky;
	top:            0;
	height:         100vh;
	overflow-y:     auto;
	flex-shrink:    0;
	transition:     width var(--transition), transform var(--transition);
	z-index:        200;
}

.sidebar-logo {
	display:        flex;
	align-items:    center;
	justify-content: center;
	gap:            12px;
	padding:        22px 20px;
	border-bottom:  1px solid rgba(255,255,255,0.07);

	img {
		height:         36px;
		width:          auto;
	}

	.brand-name {
		font-size:      var(--font-size-md);
		font-weight:    800;
		color:          #fff;
		letter-spacing: -0.02em;

		span {
			color:          var(--color-primary);
		}
	}
}

.sidebar-user {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        18px 20px;
	border-bottom:  1px solid rgba(255,255,255,0.07);
}

.sidebar-avatar {
	width:          42px;
	height:         42px;
	border-radius:  50%;
	border:         2px solid var(--color-primary);
	background:     var(--color-dark2);
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	color:          var(--color-primary);
	font-weight:    700;
	font-size:      var(--font-size-sm);
	flex-shrink:    0;
	overflow:       hidden;

	img {
		width: 100%; height: 100%; object-fit: cover; display: block;
	}
}

.topbar-avatar {
	width:          34px;
	height:         34px;
	border-radius:  50%;
	background:     #081F2C;
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	color:          #E56A54;
	font-weight:    700;
	font-size:      0.8rem;
	border:         2px solid #E56A54;
	overflow:       hidden;
	flex-shrink:    0;

	img {
		width: 100%; height: 100%; object-fit: cover; display: block;
	}
}

.topbar-user-name {
	color: #6b7a8d;
}

.sidebar-user-info {
	overflow:       hidden;
}

.sidebar-user-name {
	font-size:      var(--font-size-sm);
	font-weight:    600;
	color:          #fff;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
	max-width:      160px;
}

.sidebar-user-role {
	font-size:      var(--font-size-xs);
	color:          rgba(255,255,255,0.45);
}

.sidebar-nav {
	flex:           1;
	padding:        16px 0;
}

.nav-section-label {
	font-size:      var(--font-size-xs);
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          rgba(255,255,255,0.3);
	padding:        8px 20px;
	margin-top:     8px;
}

.nav-item {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        12px 20px;
	cursor:         pointer;
	transition:     background var(--transition), color var(--transition);
	border-radius:  0;
	color:          rgba(255,255,255,0.65);
	font-size:      var(--font-size-sm);
	font-weight:    500;
	position:       relative;
	border:         none;
	background:     transparent;
	width:          100%;
	text-align:     left;

	&:hover {
		background:     rgba(255,255,255,0.06);
		color:          #fff;
	}

	&.active {
		background:     rgba(229,106,84,0.12);
		/* color:          var(--color-primary); */
		color:          #FFFFFF;

		&::before {
			content:        '';
			position:       absolute;
			left:           0;
			top:            0;
			bottom:         0;
			width:          3px;
			background:     var(--color-primary);
			border-radius:  0 3px 3px 0;
		}
	}

	i {
		width:          20px;
		text-align:     center;
		font-size:      1rem;
		flex-shrink:    0;
	}
}

.sidebar-footer {
	padding:        16px 0;
	border-top:     1px solid rgba(255,255,255,0.07);
}

/** Main content */
.app-main {
	flex:           1;
	display:        flex;
	flex-direction: column;
	min-width:      0;
	min-height:     100vh;
}

.main-topbar {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	padding:        0 28px;
	height:         var(--header-h);
	background:     var(--color-surface);
	border-bottom:  1px solid var(--color-border);
	position:       sticky;
	top:            0;
	z-index:        100;
	gap:            16px;
}

.topbar-breadcrumb {
	display:        flex;
	align-items:    center;
	gap:            8px;
	font-size:      var(--font-size-sm);
	color:          var(--color-text-muted);

	.crumb-active {
		color:          var(--color-text);
		font-weight:    600;
	}
}

.topbar-actions {
	display:        flex;
	align-items:    center;
	gap:            10px;
}

.main-content {
	flex:           1;
	padding:        28px;
}

/** ----------------------------------------------------------------
 * Sections / Page headers
 * ---------------------------------------------------------------- */
.page-header {
	margin-bottom:  28px;

	h2 {
		font-size:      var(--font-size-xl);
		font-weight:    800;
		color:          var(--color-dark);
		letter-spacing: -0.02em;
	}

	p {
		font-size:      var(--font-size-sm);
		color:          var(--color-text-muted);
		margin-top:     4px;
	}
}

.section-toolbar {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	flex-wrap:      wrap;
	gap:            12px;
	margin-bottom:  20px;
}

.section-title {
	font-size:      var(--font-size-lg);
	font-weight:    700;
	color:          var(--color-dark);
	display:        flex;
	align-items:    center;
	gap:            10px;

	i {
		color:          var(--color-primary);
	}
}

/** ----------------------------------------------------------------
 * Cards Grid
 * ---------------------------------------------------------------- */
.cards-grid {
	display:        grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap:            20px;
}

.cards-grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/** ----------------------------------------------------------------
 * Dashboard user header strip
 * ---------------------------------------------------------------- */
.dashboard-header-strip {
	background:     linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark2) 100%);
	border-radius:  var(--radius-lg);
	padding:        28px 32px;
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	flex-wrap:      wrap;
	gap:            20px;
	margin-bottom:  32px;
	box-shadow:     var(--shadow-md);
	position:       relative;
	overflow:       hidden;

	&::before {
		content:        '';
		position:       absolute;
		top:            -40px;
		right:          -40px;
		width:          200px;
		height:         200px;
		background:     radial-gradient(circle, rgba(229,106,84,0.3) 0%, transparent 70%);
		border-radius:  50%;
		pointer-events: none; /* decorative – must not intercept social-btn clicks */
	}

	& > * { position: relative; z-index: 1; }
}

.dashboard-user {
	display:        flex;
	align-items:    center;
	gap:            16px;
}

.dashboard-avatar {
	width:          60px;
	height:         60px;
	border-radius:  50%;
	border:         3px solid var(--color-primary);
	background:     var(--color-dark2);
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	font-size:      1.5rem;
	color:          var(--color-primary);
	font-weight:    700;
	flex-shrink:    0;
	overflow:       hidden;

	img {
		width:          100%;
		height:         100%;
		object-fit:     cover;
		display:        block;
	}
}

.dashboard-user-name {
	font-size:      var(--font-size-xl);
	font-weight:    800;
	color:          #fff;
	letter-spacing: -0.02em;
}

.dashboard-user-sub {
	font-size:      var(--font-size-sm);
	color:          rgba(255,255,255,0.55);
	margin-top:     2px;
}

.dashboard-social {
	display:        flex;
	gap:            10px;
}

.social-btn {
	width:          36px;
	height:         36px;
	border-radius:  50%;
	background:     rgba(255,255,255,0.1);
	display:        flex;
	align-items:    center;
	justify-content: center;
	color:          rgba(255,255,255,0.7);
	font-size:      0.9rem;
	cursor:         pointer;
	transition:     background var(--transition), color var(--transition);
	text-decoration: none;

	&:hover {
		background:     var(--color-primary);
		color:          #fff;
	}
}

/** ----------------------------------------------------------------
 * List (orgs / applications)
 * ---------------------------------------------------------------- */
.list-toolbar {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  20px;
	flex-wrap:      wrap;
}

.list-table {
	width:          100%;
	border-collapse: separate;
	border-spacing: 0;

	th {
		text-align:     left;
		padding:        12px 16px;
		font-size:      var(--font-size-xs);
		font-weight:    700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color:          var(--color-text-muted);
		background:     var(--color-surface-2);
		border-bottom:  2px solid var(--color-border);
	}

	td {
		padding:        14px 16px;
		font-size:      var(--font-size-sm);
		border-bottom:  1px solid var(--color-border);
		background:     var(--color-surface);
		vertical-align: middle;
	}

	tr:last-child td {
		border-bottom:  none;
	}

	tr:hover td {
		background:     var(--color-primary-faint);
		cursor:         pointer;
	}

	td:first-child,
	th:first-child {
		border-radius:  0;
	}
}

.list-wrapper {
	background:     var(--color-surface);
	border-radius:  var(--radius-md);
	box-shadow:     var(--shadow-sm);
	overflow:       hidden;
	border:         1px solid var(--color-border);
}

.org-icon {
	width:          38px;
	height:         38px;
	border-radius:  var(--radius-sm);
	background:     var(--color-primary-faint);
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	color:          var(--color-primary);
	font-size:      1rem;
	flex-shrink:    0;
}

.org-icon-manager {
	background:     #fff5f1;
	color:          #E56A54;
}

.org-icon-member {
	background:     #eef1f4;
	color:          #6b7a8d;
}

/** ----------------------------------------------------------------
 * Search inline widget
 * ---------------------------------------------------------------- */
.search-panel {
	background:     var(--color-surface);
	border:         2px solid var(--color-border);
	border-radius:  var(--radius-md);
	padding:        20px;
	margin-bottom:  20px;
	display:        none;

	&.active {
		display:        block;
	}
}

.search-input-wrap {
	display:        flex;
	gap:            10px;
	margin-bottom:  16px;
}

.search-results {
	display:        none;

	&.active {
		display:        block;
	}
}

.search-result-item {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        12px 14px;
	border:         1px solid var(--color-border);
	border-radius:  var(--radius-sm);
	margin-bottom:  8px;
	cursor:         pointer;
	transition:     border-color var(--transition), background var(--transition);

	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}
}

.search-result-option{
	cursor : pointer;
	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}
}

/** ----------------------------------------------------------------
 * Forms (detail: org/appl)
 * ---------------------------------------------------------------- */
.form-section {
	background:     var(--color-surface);
	border-radius:  var(--radius-md);
	box-shadow:     var(--shadow-sm);
	border:         1px solid var(--color-border);
	margin-bottom:  24px;
	overflow:       hidden;
}

.form-section-header {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        18px 24px;
	background:     var(--color-surface-2);
	border-bottom:  1px solid var(--color-border);

	h3 {
		font-size:      var(--font-size-md);
		font-weight:    700;
		color:          var(--color-dark);
	}

	i {
		color:          var(--color-primary);
	}
}

.form-section-body {
	padding:        24px;
}

.form-row {
	display:        grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap:            16px;
}

.form-actions {
	display:        flex;
	align-items:    center;
	gap:            12px;
	justify-content: flex-end;
	padding:        20px 24px;
	background:     var(--color-surface);
	border-top:     1px solid var(--color-border);
	border-radius:  0 0 var(--radius-md) var(--radius-md);
	flex-wrap:      wrap;
}

/** Photo upload preview */
.photo-upload-preview {
	display:        flex;
	align-items:    flex-start;
	gap:            20px;
	flex-wrap:      wrap;
}

.photo-preview-circle {
	width:          100px;
	height:         100px;
	border-radius:  50%;
	background:     var(--color-surface-2);
	border:         3px dashed var(--color-border);
	display:        flex;
	align-items:    center;
	justify-content: center;
	overflow:       hidden;
	flex-shrink:    0;

	img {
		width:          100%;
		height:         100%;
		object-fit:     cover;
	}

	i {
		font-size:      2rem;
		color:          var(--color-border);
	}
}

.photo-preview-rect {
	width:          120px;
	height:         80px;
	border-radius:  var(--radius-sm);
	background:     var(--color-surface-2);
	border:         3px dashed var(--color-border);
	display:        flex;
	align-items:    center;
	justify-content: center;
	overflow:       hidden;
}

/** Map placeholder */
.map-placeholder {
	width:          100%;
	height:         200px;
	background:     linear-gradient(135deg, var(--color-surface-2) 0%, #e8ebef 100%);
	border-radius:  var(--radius-md);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            10px;
	border:         2px dashed var(--color-border);
	color:          var(--color-text-muted);
	font-size:      var(--font-size-sm);

	i {
		font-size:      2.5rem;
		color:          var(--color-primary);
		opacity:        0.6;
	}
}

/** Evaluation section */
.eval-section {
	background:     linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark2) 100%);
	border-radius:  var(--radius-md);
	padding:        24px;
	color:          #fff;
	margin-bottom:  24px;
}

.eval-title {
	font-size:      var(--font-size-md);
	font-weight:    700;
	margin-bottom:  18px;
	display:        flex;
	align-items:    center;
	gap:            8px;
}

.eval-aspects {
	display:        grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap:            12px;
	margin-bottom:  20px;
}

.eval-aspect {
	background:     rgba(255,255,255,0.07);
	border-radius:  var(--radius-sm);
	padding:        14px;
}

.eval-aspect-label {
	font-size:      var(--font-size-xs);
	color:          rgba(255,255,255,0.55);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  6px;
}

.eval-aspect-score {
	font-size:      var(--font-size-xl);
	font-weight:    800;
	color:          var(--color-primary);
}

.eval-total {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	padding:        14px 18px;
	background:     rgba(229,106,84,0.15);
	border-radius:  var(--radius-sm);
	margin-bottom:  16px;
}

.eval-feedback {
	background:     rgba(255,255,255,0.06);
	border-radius:  var(--radius-sm);
	padding:        14px;
	font-size:      var(--font-size-sm);
	color:          rgba(255,255,255,0.75);
	line-height:    1.6;
}

.eval-verdict {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        18px;
	border-radius:  var(--radius-md);
	margin-bottom:  16px;
	font-weight:    700;
	font-size:      var(--font-size-md);

	&.awarded {
		background:     rgba(39,174,96,0.2);
		color:          #2ecc71;
	}

	&.rejected {
		background:     rgba(231,76,60,0.2);
		color:          #e74c3c;
	}
}

/** ----------------------------------------------------------------
 * Alerts / Notifications
 * ---------------------------------------------------------------- */
.alert {
	display:        flex;
	align-items:    flex-start;
	gap:            12px;
	padding:        14px 18px;
	border-radius:  var(--radius-sm);
	font-size:      var(--font-size-sm);
	margin-bottom:  16px;

	i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
}

.alert-info    { background: #d6eaf8; color: var(--color-info); }
.alert-success { background: #d5f5e3; color: var(--color-success); }
.alert-warning { background: #fef9e7; color: #b7770d; }
.alert-error   { background: #fadbd8; color: var(--color-error); }

/** ----------------------------------------------------------------
 * Spinner / Loading
 * ---------------------------------------------------------------- */
.spinner {
	width:          36px;
	height:         36px;
	border:         3px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius:  50%;
	animation:      spin 0.7s linear infinite;
}

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

.loading-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(8,31,44,0.5);
	display:        flex;
	align-items:    center;
	justify-content: center;
	z-index:        9990;
	backdrop-filter: blur(4px);
}

/** ----------------------------------------------------------------
 * Empty states
 * ---------------------------------------------------------------- */
.empty-state {
	text-align:     center;
	padding:        60px 20px;
	color:          var(--color-text-muted);

	i {
		font-size:      3.5rem;
		color:          var(--color-border);
		margin-bottom:  16px;
		display:        block;
	}

	h3 {
		font-size:      var(--font-size-md);
		font-weight:    600;
		color:          var(--color-text);
		margin-bottom:  8px;
	}

	p {
		font-size:      var(--font-size-sm);
	}
}

/** ----------------------------------------------------------------
 * ui_modal overrides (for rcult style)
 * ---------------------------------------------------------------- */
.ui-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(8,31,44,0.6);
	z-index:        9000;
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        16px;
	backdrop-filter: blur(4px);
	animation:      fadeIn 0.18s ease;

	&.ui-fadeout {
		animation: fadeOut 0.18s ease forwards;
	}
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.ui-modal {
	width:          100%;
	max-width:      540px;
}

.ui-dialog {
	background:     var(--color-surface);
	border-radius:  var(--radius-lg);
	box-shadow:     var(--shadow-lg);
	overflow:       hidden;
	animation:      slideUp 0.22s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUp {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.ui-header {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	padding:        18px 22px;
	background:     var(--color-surface);
	border-bottom:  1px solid var(--color-border);
}

.ui-title {
	font-size:      var(--font-size-md);
	font-weight:    700;
	color:          var(--color-dark);
}

.ui-close {
	width:          32px;
	height:         32px;
	border-radius:  50%;
	border:         none;
	background:     var(--color-surface-2);
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	font-size:      1.2rem;
	color:          var(--color-text-muted);
	transition:     background var(--transition), color var(--transition);

	&:hover {
		background:     var(--color-primary);
		color:          #fff;
	}
}

.ui-body {
	padding:        22px;
}

.ui-footer {
	display:        flex;
	justify-content: flex-end;
	gap:            10px;
	padding:        14px 22px;
	border-top:     1px solid var(--color-border);
	background:     var(--color-surface-2);
}

.ui-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	padding:        9px 18px;
	border-radius:  var(--radius-full);
	border:         2px solid var(--color-border);
	background:     var(--color-surface);
	font-family:    var(--font-base);
	font-size:      var(--font-size-sm);
	font-weight:    600;
	cursor:         pointer;
	transition:     all var(--transition);
	color:          var(--color-text);

	&:hover {
		border-color:   var(--color-text-muted);
	}
}

.ui-btn-primary {
	background:     var(--color-primary);
	border-color:   var(--color-primary);
	color:          #fff;

	&:hover {
		background:     var(--color-primary-dark);
		border-color:   var(--color-primary-dark);
	}
}

.ui-btn-danger {
	background:     var(--color-error);
	border-color:   var(--color-error);
	color:          #fff;

	&:hover {
		background:     #c0392b;
		border-color:   #c0392b;
	}
}

.ui-lock-scroll { overflow: hidden; }

/** ----------------------------------------------------------------
 * Checkbox multi-select for orgs in appl form
 * ---------------------------------------------------------------- */
.org-select-list {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	max-height:     240px;
	overflow-y:     auto;
}

.org-select-item {
	display:        flex;
	align-items:    center;
	gap:            12px;
	padding:        12px 14px;
	border:         2px solid var(--color-border);
	border-radius:  var(--radius-sm);
	cursor:         pointer;
	transition:     border-color var(--transition), background var(--transition);

	&:hover {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}

	&.selected {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);
	}

	input[type=checkbox] {
		accent-color:   var(--color-primary);
		width:          16px;
		height:         16px;
	}

	&.is-lead {
		border-color:   var(--color-primary);
		background:     var(--color-primary-faint);

		.btn-set-lead {
			display:        none !important;
		}
	}

	&.is-disabled {
		opacity:        0.55;
		background:     #f7f8fa;
		cursor:         not-allowed;

		.text-warning {
			color: #b07a00;
		}
	}
}

.btn-set-lead {
	margin-left:    auto;
	padding:        3px 8px;
	font-size:      0.72rem;
	color:          var(--color-text-muted);
	border:         1px solid var(--color-border);
	border-radius:  4px;
	background:     transparent;
	cursor:         pointer;
	white-space:    nowrap;
	flex-shrink:    0;

	&:hover {
		color:          var(--color-primary);
		border-color:   var(--color-primary);
	}
}

.badge-lead {
	margin-left:    auto;
	display:        inline-flex;
	align-items:    center;
	background:     var(--color-primary);
	color:          #fff;
	font-size:      0.68rem;
	padding:        2px 8px;
	border-radius:  4px;
	font-weight:    700;
	white-space:    nowrap;
	flex-shrink:    0;
	letter-spacing: 0.04em;
}

/** ----------------------------------------------------------------
 * Toggle switch
 * ---------------------------------------------------------------- */
.toggle-switch {
	position:       relative;
	display:        inline-block;
	width:          42px;
	height:         24px;
	flex-shrink:    0;

	input {
		opacity:        0;
		width:          0;
		height:         0;
		position:       absolute;

		&:checked + .toggle-slider {
			background:     var(--color-primary);

			&::before {
				transform:      translateX(18px);
			}
		}
	}
}

.toggle-slider {
	position:       absolute;
	cursor:         pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background:     var(--color-border);
	border-radius:  24px;
	transition:     background .2s;

	&::before {
		position:       absolute;
		content:        "";
		height:         18px;
		width:          18px;
		left:           3px;
		bottom:         3px;
		background:     #fff;
		border-radius:  50%;
		transition:     transform .2s;
		box-shadow:     0 1px 3px rgba(0,0,0,.2);
	}
}

.switch-row {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  14px;

	label {
		font-size:      var(--font-size-sm);
		font-weight:    500;
		color:          var(--color-text);
		margin:         0;
		cursor:         pointer;
	}
}

/** ----------------------------------------------------------------
 * Form control static (read-only display value)
 * ---------------------------------------------------------------- */
.form-control-static {
	padding:        0.45rem 0;
	font-size:      var(--font-size-sm);
	color:          var(--color-text);
	margin:         0;
	font-weight:    500;

	&.text-muted {
		font-weight:    400;
	}
}

/** ----------------------------------------------------------------
 * User-select list (radio-based, similar to org-select-list)
 * ---------------------------------------------------------------- */
.user-select-list {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	margin-bottom:  10px;
}

/** ----------------------------------------------------------------
 * Animations
 * ---------------------------------------------------------------- */
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.pulse { animation: pulse 2s ease-in-out infinite; }

/** ----------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------- */
@media (max-width: 900px) {
	.welcome-body {
		grid-template-columns: 1fr;
	}

	.welcome-hero {
		min-height: 320px;
	}

	.welcome-panel {
		padding: 32px 24px;
	}

	.welcome-hero-stats {
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.app-sidebar {
		position:   fixed;
		left:       0;
		top:        0;
		transform:  translateX(-100%);
		z-index:    500;
		height:     100vh;
	}

	.app-sidebar.open {
		transform:  translateX(0);
		box-shadow: var(--shadow-lg);
	}

	.sidebar-overlay {
		display:    block;
		position:   fixed;
		inset:      0;
		background: rgba(8,31,44,0.5);
		z-index:    499;
	}

	.app-main {
		width:      100%;
	}

	.main-content {
		padding:    16px;
	}

	.cards-grid {
		grid-template-columns: 1fr;
	}

	.dashboard-header-strip {
		padding: 20px;
	}

	.form-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.welcome-footer {
		flex-direction: column;
		align-items:    flex-start;
		padding:        20px;
	}

	.footer-info {
		flex-direction: column;
		gap:            10px;
	}

	.welcome-hero-content {
		padding: 30px 24px;
	}
}

/** ----------------------------------------------------------------
 * Theme: Promotora Cultural
 * Primary palette: #5C7497 (blue), #244A5D (dark), #F3D08E (gold)
 * ---------------------------------------------------------------- */
[data-theme="promotoracultural"] {
	--color-primary:        #5C7497;
	--color-primary-dark:   #455771;
	--color-primary-light:  #7D90AC;
	--color-primary-faint:  rgba(92,116,151,0.09);

	/* --color-dark:           #244A5D; */
	--color-dark:           #33727A;
	/* --color-dark2:          #1B3846; */
	--color-dark2:          #5C7497;
	--color-dark3:          #142A35;

	--color-surface-2:      #F2F2F2;
	--color-surface-3:      #EBEBEB;
	--color-border:         #DEDEDE;

	/* --color-text:           #1B3846; */
	--color-text:           #33727A;
	--color-text-muted:     #768890;

	--shadow-sm:            0 2px 8px  rgba(36,74,93,0.08);
	--shadow-md:            0 4px 20px rgba(36,74,93,0.13);
	--shadow-lg:            0 8px 40px rgba(36,74,93,0.20);
	--shadow-glow:          0 0 20px   rgba(92,116,151,0.28);

	& .welcome-hero-content img {
		max-height: 	120px;
		width: 			200px;
	}
}

/* ============================================================
 * Grant call detail page
 * ============================================================ */
.gc-detail-page {
	max-width: 920px;
	margin:    0 auto;
	padding:   16px;
}

.gc-detail-header {
	.btn-link {
		background: none;
		border:     none;
		color:      #6b7a8d;
		cursor:     pointer;
		padding:    0;
		font-size:  0.9rem;

		&:hover { color: #E56A54; }
	}
}

.gc-detail-card {
	background:    #fff;
	border-radius: 12px;
	overflow:      hidden;
	box-shadow:    0 2px 12px rgba(0,0,0,0.06);
}

.gc-detail-img img {
	width:       100%;
	max-height:  340px;
	object-fit:  cover;
	display:     block;
}

.gc-detail-body { padding: 28px; }

.gc-detail-title {
	font-size:     1.6rem;
	font-weight:   800;
	color:         #081F2C;
	margin:        8px 0 12px;
	line-height:   1.2;
}

.gc-detail-meta {
	display:    flex;
	flex-wrap:  wrap;
	gap:        14px;
	font-size:  0.85rem;
	color:      #6b7a8d;
	margin-bottom: 16px;
}

.gc-detail-description {
	font-size:     0.95rem;
	color:         #44525e;
	line-height:   1.55;
	margin-bottom: 18px;
}

.gc-detail-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #eef1f4;

	h3 {
		font-size:   1.05rem;
		font-weight: 700;
		color:       #081F2C;
		margin:      0 0 10px;
	}
}

.gc-detail-rich {
	font-size:   0.9rem;
	color:       #44525e;
	line-height: 1.6;

	h3 { font-size: 1rem; margin: 14px 0 8px; }
	ul { margin: 8px 0 8px 20px; padding: 0; }
	li { margin: 4px 0; }
}

.gc-detail-video {
	position: relative;
	padding-top: 56.25%;
	height: 0;

	iframe {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		border-radius: 8px;
	}
}

.gc-detail-cta { text-align: center; }

/* Submitted-application icons on the grant card header */
.gc-card-appls {
	display: flex;
	gap: 4px;
}

.gc-card-appl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff5f1;
	color: #E56A54;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, background .12s ease;

	&:hover {
		transform: scale(1.1);
		background: #ffe2d6;
	}
}

/* Video preview iframe wrapper (16:9) */
.video-embed-wrapper {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	max-width: 480px;
	border-radius: 8px;
	overflow: hidden;

	iframe,
	video {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background: #000;
	}
}

.appl-file-link {
	color: #E56A54;
	cursor: pointer;

	&:hover { text-decoration: underline; }
}

/* Character counter next to textareas */
.char-counter {
	display: block;
	text-align: right;
	font-size: 0.72rem;
	color: #888;
	margin-top: 2px;
}
.char-counter-warn { color: #E56A54; font-weight: 600; }

/* Dashboard step-by-step CTAs (dashboard_step_profile / dashboard_step_org) */
.dashboard-step {
	background: linear-gradient(135deg, #fff 0%, #faf7f2 100%);
	border: 2px dashed var(--color-primary, #E56A54);
	border-radius: 12px;
	padding: 40px 24px;
	margin: 20px 0 28px;
	text-align: center;
}
.dashboard-step-inner { max-width: 520px; margin: 0 auto; }
.dashboard-step-icon {
	font-size: 2.6rem;
	color: var(--color-primary, #E56A54);
	margin-bottom: 14px;
}
.dashboard-step h3 {
	font-size: 1.2rem;
	margin: 0 0 14px;
	color: #2a3b4d;
	font-weight: 600;
	line-height: 1.4;
}
.dashboard-step-pct {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-primary, #E56A54);
	margin-bottom: 18px;
}
.dashboard-step .btn-lg {
	padding: 12px 28px;
	font-size: 1rem;
}

/* Grant-card "More info" link spacing */
.gc-card-more-info {
	display: inline-block;
	margin-top: 10px;
	font-size:0.82rem;
	font-weight:500;
	text-decoration:underline;
}

/* Inline input error feedback (used by bind_email_validation) */
.input-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 2px rgba(220,53,69,.15);
}
.input-error {
	display: block;
	color: #dc3545;
	font-size: 0.78rem;
	margin-top: 3px;
}

/* Tiny success toast (rcult_applications._toast_success) */
.rcult-toast {
	position: fixed;
	bottom: 24px;
	right:  24px;
	background: #2e7d32;
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	z-index: 9999;

	&.show {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Application form: progress bar */
.appl-progress {
	position: relative;
	width: 100%;
	height: 18px;
	background: #eef1f4;
	border-radius: 9px;
	overflow: hidden;
}

.appl-progress-bar {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	background: linear-gradient(90deg, #E56A54, #f59f8a);
	transition: width .25s ease, background .3s ease;
}

.appl-progress-complete {
	background: linear-gradient(90deg, #2980b9, #6ab4e8) !important;
}

.btn-submit-dimmed {
	opacity: 0.55;
}

.appl-progress-label {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #081F2C;
}

/* Sticky mini bar -- fixed top-right, below the 64px topbar */
.appl-sticky-bar {
	position: fixed;
	top: 76px; /* 64px topbar + 12px gap */
	right: 24px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,.12);
	max-width: 420px;
}

.appl-sticky-top-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.appl-sticky-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.appl-sticky-nav-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	font-size: 0.7rem;
	color: #6b7a8d;
	cursor: pointer;
	transition: background .12s, color .12s;
	text-decoration: none;

	/* Section completion states */
	&.nav-sec-empty    { color: #bbb; }
	&.nav-sec-partial  { color: #27ae60; }
	&.nav-sec-complete { color: #2980b9; }

	&:hover {
		background: #fff5f1;
		color: #E56A54 !important;
	}
}

.appl-progress-mini {
	width: 200px;
	height: 14px;
}

.appl-progress-mini .appl-progress-label { font-size: 9px; }

.btn-icon-only {
	padding: 5px 8px;
	min-width: 0;
}

/* Responsive: on smaller screens, stretch full width */
@media (max-width: 768px){
	.appl-sticky-bar {
		right: 8px;
		left: 8px;
		max-width: none;
	}
	.appl-sticky-top-row {
		width: 100%;
	}
	.appl-sticky-top-row .appl-progress-mini {
		flex: 1;
	}
	.appl-sticky-nav {
		justify-content: center;
	}
}