/* =========================================================
   Global Variables
   ========================================================= */

:root {
	/* --- Status colors --- */
	--success-color: #059669;
	--warning-color: #d97706;
	--danger-color:  #dc2626;

	/* --- Neutral colors --- */
	--light-color: #f8fafc;
	--dark-color:  #1e293b;
	--gray-color:  #64748b;

	/* --- Brand colors --- */
	--primary-color:   #033eac;
	--secondary-color: #5ac7eb;
	--tertiary-color:  #eab944;

	--primary-contrast-color:   #ffffff;
	--secondary-contrast-color: #ffffff;
	--tertiary-contrast-color:  #ffffff;

	--primary-light-color:   #3f6fd3;
	--secondary-light-color: #8edbf3;
	--tertiary-light-color:  #f2d27c;

	/* --- Typography --- */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-base: 16px;
	--font-size-xs:   12px;
	--font-size-s:    14px;
	--font-size-m:    16px;
	--font-size-l:    18px;
	--font-size-xl:   20px;
	--line-height:    1.5;

	/* --- Spacing --- */
	--spacing-xs: 0.25rem;
	--spacing-s:  0.5rem;
	--spacing-m:  1rem;
	--spacing-l:  1.5rem;
	--spacing-xl: 2rem;

	/* --- Borders --- */
	--border-radius: 0.375rem;
	--border-width:  1px;
}

/* =========================================================
   Reset / Base
   ========================================================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	color: var(--dark-color);
	background-color: var(--light-color);
	height: 100vh;
	overflow: hidden;
}

/* =========================================================
   Layout
   ========================================================= */

.app-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.topbar-area {
	flex-shrink: 0;
}


.content-area {
	flex: 1;
	overflow: auto;
	padding: var(--spacing-l);
	background-color: #ffffff;
}

/* =========================================================
   Layout Left Panel + Right Main Panel
   ========================================================= */

.content-area.with-left-panel {
	display: flex;
	overflow: hidden;
	padding: 0;
}

.main-panel {
	flex: 1;
	min-width: 0;
	overflow: auto;
	padding-left: var(--spacing-xl);
	padding-right: var(--spacing-l);
	padding-top: var(--spacing-l);
	padding-bottom: var(--spacing-l);
}

.ui-col {
	flex: 1;
	min-width: 0;
}

.ui-row {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.ui-row.align-start { align-items: flex-start; }
.ui-row.align-center { align-items: center; }

.gap-s { gap: var(--spacing-s); }
.gap-m { gap: var(--spacing-m); }
.gap-l { gap: var(--spacing-l); }

.ui-stack {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
}


/* =========================================================
   Utilities
   ========================================================= */

.text-center { text-align: center; }

.mt-1 { margin-top: var(--spacing-s); }
		.mt-2 { margin-top: var(--spacing-m); }
.mt-3 { margin-top: var(--spacing-l); }

.pad-1 { padding: var(--spacing-s); }
.pad-2 { padding: var(--spacing-m); }
.pad-3 { padding: var(--spacing-l); }

/* =========================================================
   Headings / Separators
   ========================================================= */

h1 {
	color: var(--primary-color);
	font-size: var(--font-size-l);
}

h2 {
	color: var(--primary-color);
	font-size: var(--font-size-m);
}

h3 {
	color: var(--primary-color);
	font-size: var(--font-size-s);
}

hr {
	border: none;
	border-top: 1px solid #e5e7eb;
	margin: var(--spacing-l) 0;
	width: 100%;
}

/* =========================================================
   Action Button (shared UI atom)
   ========================================================= */

.action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 6px 10px;
	font-size: var(--font-size-s);
	font-weight: 400;

	border-radius: 4px;
	border: none;

	background-color: var(--secondary-light-color);
	color: var(--dark-color);

	text-decoration: none;
	cursor: pointer;

	transition:
		opacity   0.15s ease,
		transform 0.1s ease,
		box-shadow 0.1s ease;

	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.action-button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.action-button:active {
	transform: translateY(0);
	box-shadow: none;
}

.action-button.primary {
	background-color: var(--primary-light-color);
	color: var(--light-color);
}

.action-button.secondary {
	background-color: var(--secondary-light-color);
	color: var(--dark-color);
	border: 1px solid #cbd5e1;
}

.action-button.tertiary {
	background-color: var(--tertiary-light-color);
	color: var(--dark-color);
	border: 1px solid #cbd5e1;
}

.action-button.neutral {
	background-color: #ffffff;
	color: var(--dark-color);
	border: 1px solid #cbd5e1;
}

.action-button.success {
	background-color: var(--success-color);
	color: #ffffff;
}

.action-button.warning {
	background-color: var(--warning-color);
	color: #ffffff;
}

.action-button.danger {
	background-color: var(--danger-color);
	color: #ffffff;
}

.action-button.disabled,
.action-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;

	background-color: #94a3b8;
	color: #ffffff;
	box-shadow: none;
}

.action-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* =========================================================
   Empty State
   ========================================================= */

.empty-state {
	margin-top: 32px;
	padding: 32px 16px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;

	background-color: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: var(--border-radius);

	color: #64748b;
	text-align: center;
}

.empty-state-icon {
	font-size: 28px;
	opacity: 0.75;
}

.empty-state-text {
	max-width: 420px;
}

/* =========================================================
   Notification Badge
   ========================================================= */

.notification-badge {
	position: absolute;
	top: -4px;
	right: -4px;

	width: 16px;
	height: 16px;

	background-color: var(--danger-color);
	color: #ffffff;

	font-size: 10px;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* =====================================================
   PAGE ELEMENTS
   (aligned with form component)
   ===================================================== */

.page-section-header {
	font-size: var(--font-size-s);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;

	color: var(--primary-color);

	margin-top: var(--spacing-l);
	margin-bottom: var(--spacing-xs);

	padding-bottom: 6px;
	border-bottom: 1px solid #e5e7eb;
}

/* Visual bullet, same language as form-section-header */
.page-section-header::before {
	content: "▶";
	color: var(--tertiary-color);
	margin-right: var(--spacing-xs);
}

/* Final synthesis spacing */
.page-section-final {
	margin-top: calc(var(--spacing-l) * 1.5);
}

/* Textarea */
.page-textarea {
	width: 100%;
}