/* ==== App-specific overrides and additions ================================ */
/* App-specific variables for consistency */
:root
{
	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	/* Layout */
	--header-height: 80px;
	--header-height-condensed: 70px;
	/* Transitions */
	--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	/* Shadows */
	--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.25);
	--shadow-card-hover: 0 8px 24px var(--color-accent-glow);
	/* Borders */
	--border-thin: var(--line-thin) solid var(--color-border-inactive);
	--border-accent: var(--line-thin) solid var(--color-accent);
}

/* ---- Base Layout -------------------------------------------------------- */

.main-header
{
	flex: 0 0 var(--header-height);
	transition: all var(--transition-slow);
	align-items: center;
	padding: var(--space-sm) var(--space-lg);
	gap: var(--space-lg);
	display: flex;
}

/* Adjust layout for header with search */
.main-header:not(.header-home)
{
	flex-wrap: nowrap;
}

/* Ensure proper layout of header elements */
.main-header
{
	display: flex;
	align-items: center;
}

.main-header .logo-container
{
	flex: 0 0 auto;
}

.main-header .header-search
{
	flex: 1 1 auto;
	margin: 0 var(--space-lg);
}

.main-header .main-nav
{
	flex: 0 0 auto;
}

.main-content
{
	position: relative;
}

/* ---- Logo & Header States ----------------------------------------------- */
.logo-container
{
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all var(--transition-slow);
}

#logo-img
{
	display: block;
	width: 128px;
	height: 128px;
	background: url(../images/O-128.png) no-repeat center;
	background-size: contain;
	transition: all var(--transition-slow);
}

/* Header state: Home (large, centered, stacked) */
.main-header.header-home
{
	justify-content: center;
	flex-direction: column;
	padding: var(--space-xl) var(--space-lg);
}

.main-header.header-home .logo-container
{
	flex-grow: 0;
}

/* Show nav on home page, positioned below logo */
.main-header.header-home .main-nav
{
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

/* Header state: Condensed (small logo, horizontal, spaced) */
.main-header.header-condensed
{
	flex: 0 0 var(--header-height-condensed);
	flex-direction: row;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-lg);
}

.main-header.header-condensed #logo-img
{
	width: 64px;
	height: 64px;
}

/* Navigation base styles */
.main-nav
{
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	transition: opacity var(--transition-medium);
}

.nav-btn
{
	padding: var(--space-sm) var(--space-md);
	border: var(--border-thin);
	background: transparent;
	color: var(--color-text-accent);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.nav-btn:hover,
.nav-btn:focus
{
	background-color: var(--color-background-accent);
	color: var(--color-text-accent-bright);
	border-color: var(--color-border-active);
	box-shadow: 0 0 8px var(--color-accent-glow);
	outline: none;
}

.nav-btn.active
{
	background-color: var(--color-background-accent);
	color: var(--color-text-accent-bright);
	border-color: var(--color-accent-bright);
	box-shadow: 0 0 8px var(--color-accent-glow);
}

/* Header search bar */
.header-search
{
	flex: 1 1 auto;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.header-search .search-input
{
	width: 100%;
	padding: var(--space-xs) var(--space-md);
	font-size: 1rem;
}

/* Ensure header search results position properly */
.header-search .autocomplete-results
{
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-top: none;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	z-index: 1000;
	display: none;
	max-height: 300px;
	overflow-y: auto;
}

/* Hide header search when header is in home state (landing view active) */
.main-header.header-home .header-search
{
	display: none;
}

/* Show header search when header is condensed (other views) */
.main-header.header-condensed .header-search
{
	display: flex;
}

/* Ensure search input has proper styling in header */
.main-header.header-condensed .header-search .search-input
{
	width: 100%;
	padding: var(--space-xs) var(--space-md);
	font-size: 1rem;
}

/* ---- View Management ---------------------------------------------------- */
.view
{
	display: none;

	inset: 0;
	width: 100%;
	height: 100%;
}

.view.active
{
	display: block;
}

/* ---- Landing View ------------------------------------------------------- */
.landing-container
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.search-section
{
	width: 100%;
	max-width: 600px;
	margin-bottom: var(--space-2xl);
	position: relative;
}

.search-input
{
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-size: 1.1em;
}

.autocomplete-results
{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-top: none;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	z-index: 1000;
	display: none;
	max-height: 300px;
	overflow-y: auto;
}

.autocomplete-results.show
{
	display: block;
}

.autocomplete-item
{
	padding: var(--space-sm) var(--space-md);
	cursor: pointer;
	border-bottom: 1px solid var(--color-border-inactive);
	transition: background-color var(--transition-fast);
}

.autocomplete-item:hover,
.autocomplete-item:focus
{
	background-color: var(--color-background-accent);
	color: var(--color-text-accent);
}

.autocomplete-item:last-child
{
	border-bottom: none;
}

/* Hero Cards */
.hero-cards
{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

.hero-card
{
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	padding: var(--space-lg);
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-medium);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.hero-card:hover
{
	transform: translateY(-4px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card-hover);
}

/* Category-specific accents */
.hero-card[data-category="maintenance"]
{
	border-left: 4px solid var(--color-red);
}

.hero-card[data-category="development"]
{
	border-left: 4px solid var(--color-blue);
}

.hero-card[data-category="troubleshooting"]
{
	border-left: 4px solid var(--color-orange);
}

.hero-card[data-category="operations"]
{
	border-left: 4px solid var(--color-green);
}

.hero-card[data-category="special"]
{
	border-left: 4px solid var(--color-purple);
}

.card-icon
{
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-background-accent);
}

.card-icon svg
{
	width: 32px;
	height: 32px;
	fill: var(--color-accent);
}

.hero-card h2
{
	font-size: 1.3rem;
	margin: 0;
	border: none;
}

.hero-card p
{
	font-size: 0.95rem;
	color: var(--color-text-dim);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* ---- Service Browser View ----------------------------------------------- */
#browser-view h2
{
	text-align: center;
	margin-bottom: var(--space-xl);
}

.mosaic-container
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-md);
	padding: var(--space-md);
	max-height: 70vh;
}

.service-tile
{
	aspect-ratio: 1;
	padding: var(--space-md);
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: all var(--transition-medium);
	position: relative;
	overflow: hidden;
}

.service-tile:hover
{
	transform: scale(1.05);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-card-hover);
}

.service-tile h3
{
	font-size: 1.1rem;
	margin: 0;
	color: var(--color-text-accent);
	border: none;
}

.service-tile p
{
	font-size: 0.85rem;
	color: var(--color-text-dim);
	opacity: 0;
	position: absolute;
	bottom: var(--space-sm);
	left: var(--space-sm);
	right: var(--space-sm);
	transition: opacity var(--transition-fast);
	margin: 0;
	line-height: 1.5;
}

.service-tile:hover p
{
	opacity: 0.9;
}

/* ---- Wizard View -------------------------------------------------------- */
.wizard-container
{
	display: flex;
	gap: var(--space-lg);
	height: 100%;
}

.wizard-main-panel
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wizard-header
{
	flex: 0 0 auto;
	margin-bottom: var(--space-md);
	padding: 0;
}

/* Back button - Now in normal flow at top-left of content */
.back-btn
{
	position: static;
	margin: 0 0 var(--space-md) 0;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-background);
	border: var(--border-thin);
	color: var(--color-accent);
	cursor: pointer;
	transition: all var(--transition-fast);
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.back-btn:hover,
.back-btn:focus
{
	border-color: var(--color-accent-bright);
	color: var(--color-text-accent-bright);
	box-shadow: 0 0 8px var(--color-accent-glow);
	outline: none;
}

.wizard-content
{
	flex: 1 1 auto;
	padding: var(--space-lg);
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
}

/* Wizard Steps */
.wizard-step h3
{
	margin-bottom: var(--space-lg);
	border-bottom-style: solid;
}

.option-buttons
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-md);
	margin: var( --margin-main-gap ) var( --margin-main-right ) 0 var( --margin-main-left );
}

.option-btn
{
	padding: var(--space-md);
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all var(--transition-medium);
	text-align: left;
}

.option-btn:hover,
.option-btn:focus
{
	border-color: var(--color-accent);
	background-color: var(--color-background-accent);
	outline: none;
}

.option-btn.selected
{
	border-color: var(--color-accent-bright);
	background-color: var(--color-background-accent);
	box-shadow: 0 0 12px var(--color-accent-glow);
}

.option-btn h4
{
	margin: 0 0 var(--space-xs) 0;
	color: var(--color-text-accent);
	border: none;
	font-size: 1.1rem;
	text-align: center;
}

.option-btn p
{
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-dim);
	line-height: 1.5;
	text-align: center;
}

/* Option Components */
.option-component
{
	margin-bottom: var(--space-xl);
}

.option-component h4
{
	margin-bottom: var(--space-md);
	color: var(--color-text-accent);
	border-bottom: var(--line-thin) dotted var(--color-accent);
	padding-bottom: var(--space-xs);
}

/* Forms */
.contact-form
{
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.form-group
{
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.form-group label
{
	font-weight: 500;
	color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select
{
	width: 100%;
}

.form-group textarea
{
	min-height: 120px;
	resize: vertical;
	font-family: 'IBMPlexMono-Regular', "Courier New", monospace;
}

/* Summary Sidebar */
.wizard-summary-panel
{
	flex: 0 0 320px;
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
}

.wizard-summary-panel h3
{
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text-accent);
	border-bottom: var(--line-thin) solid var(--color-accent);
	padding-bottom: var(--space-xs);
}

.wizard-summary-content
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.summary-empty-state
{
	color: var(--color-text-dimmer);
	font-style: italic;
	text-align: center;
	margin: auto;
}

.summary-section
{
	padding: var(--space-sm);
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
}

.summary-section-title
{
	font-weight: bold;
	color: var(--color-text-accent);
	margin-bottom: var(--space-xs);
	font-size: 0.9rem;
}

.summary-section-value
{
	color: var(--color-text);
	font-size: 0.85rem;
	line-height: 1.5;
	word-break: break-word;
}

.summary-path
{
	color: var(--color-text-dim);
	font-size: 0.8rem;
}

/* Summary Actions */
.summary-actions
{
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

/* Buttons */
.btn-primary,
.btn-secondary
{
	padding: var(--space-sm) var(--space-md);
	font-weight: bold;
	cursor: pointer;
	transition: all var(--transition-fast);
	border-radius: var(--border-radius);
	font-family: inherit;
}

.btn-primary
{
	color: var(--color-text-accent-bright);
	border: var(--line-thin) solid var(--color-accent-bright);
	background: var(--color-background);
}

.btn-primary:hover,
.btn-primary:focus
{
	background-color: var(--color-accent-bright);
	color: var(--color-black);
	box-shadow: 0 0 12px var(--color-accent-glow);
	outline: none;
}

.btn-secondary
{
	color: var(--color-text-dimmer);
	border: var(--border-thin);
	background: var(--color-background);
}

.btn-secondary:hover,
.btn-secondary:focus
{
	border-color: var(--color-accent-dim);
	color: var(--color-text-accent);
	outline: none;
}

/* ---- Client Area View --------------------------------------------------- */
.login-container
{
	max-width: 480px;
	margin: 0 auto;
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	padding: var(--space-xl);
}

.login-form
{
	transition: opacity var(--transition-medium);
}

.login-form.hidden
{
	display: none !important;
}

/* Dashboard */
.dashboard
{
	width: 100%;
}

/* Dashboard stays the same */
.dashboard.hidden
{
	display: none !important;
}

.dashboard-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-inactive);
}

.dashboard-header h3
{
	margin: 0;
}

/* Dashboard Grid */
.dashboard-grid
{
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-lg);
}

.dashboard-column
{
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.dashboard-section
{
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	padding: var(--space-lg);
}

.dashboard-section h4
{
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text-accent);
	border-bottom: var(--line-thin) solid var(--color-accent);
	padding-bottom: var(--space-xs);
}

.dashboard-section h5
{
	margin: 0 0 var(--space-sm) 0;
	color: var(--color-text-accent);
}

/* Documents Grid */
.documents-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}

.upload-section,
.downloads-section
{
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Messages */
.dashboard-section-full
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.messages-container
{
	flex: 1 1 auto;
	overflow-y: auto;
	margin-bottom: var(--space-md);
	padding: var(--space-md);
	background: var(--color-background);
	border: var(--border-thin);
	border-radius: var(--border-radius);
	min-height: 400px;
	max-height: 600px;
}

.message
{
	margin-bottom: var(--space-md);
	padding: var(--space-sm);
	background: var(--color-outer-shell);
	border: var(--border-thin);
	border-radius: var(--border-radius);
}

.message-sender
{
	font-weight: bold;
	color: var(--color-text-accent);
	margin-bottom: var(--space-xs);
}

.message-content
{
	color: var(--color-text);
	margin-bottom: var(--space-xs);
	line-height: 1.5;
}

.message-time
{
	font-size: 0.8rem;
	color: var(--color-text-dimmer);
}

.message-input-container
{
	display: flex;
	gap: var(--space-sm);
}

.message-input-container textarea
{
	flex: 1 1 auto;
	min-height: 80px;
	resize: vertical;
	font-family: inherit;
}

.message-input-container button
{
	align-self: flex-end;
}

/* Tables */
.table-wrapper
{
	overflow-x: auto;
	border-radius: var(--border-radius);
	border: var(--border-thin);
}

.request-table
{
	width: 100%;
	border-collapse: collapse;
	background: var(--color-background);
}

.request-table th,
.request-table td
{
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	border-bottom: 1px solid var(--color-border-inactive);
}

.request-table th
{
	background-color: var(--color-background-accent);
	font-weight: bold;
	color: var(--color-text-accent);
}

.request-table tbody tr:hover
{
	background-color: var(--color-background-accent);
}

/* Status indicators */
.status-pending
{
	color: var(--color-orange);
	font-weight: 500;
}

.status-in-progress
{
	color: var(--color-blue);
	font-weight: 500;
}

.status-done
{
	color: var(--color-green);
	font-weight: 500;
}

/* Hidden utility */
.hidden
{
	display: none !important;
}

.feedback-success
{
	color: var(--color-green);
	margin-top: 1rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-green);
	border-radius: var(--border-radius);
}

.feedback-error
{
	color: var(--color-red);
	margin-top: 1rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-red);
	border-radius: var(--border-radius);
}

.feedback-info
{
	color: var(--color-blue);
	margin-top: 1rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-blue);
	border-radius: var(--border-radius);
}

/* Footer styles for error messages */
footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	z-index: 10000;
	display: none;
	/* Initially hidden, shown when errors occur */
	text-align: center;
}

.error-message
{
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn
{
	from
	{
		opacity: 0;
		transform: translateY(10px);
	}

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

/* ==========================================================================
   Mobile / Portrait Layout - COMPLETELY SEPARATE EXPERIENCE
   ========================================================================== */
@media (orientation: portrait)
{
	:root
	{
		--header-height: auto;
		--header-height-condensed: auto;
	}

	/* Reset body for mobile */
	html,
	body
	{
		height: auto;
		overflow: auto;
	}

	/* Header stacks vertically */
	.main-header
	{
		flex-direction: column;
		padding: var(--space-md);
		gap: var(--space-md);
	}

	/* Mobile header search styling */
	.header-search
	{
		width: 100%;
		max-width: 100%;
	}

	.header-search .search-input
	{
		width: 100%;
	}

	.main-header.header-home,
	.main-header.header-condensed
	{
		justify-content: center;
	}

	#logo-img
	{
		width: 96px !important;
		height: 96px !important;
	}

	.main-header.header-condensed #logo-img
	{
		width: 64px !important;
		height: 64px !important;
	}

	.main-nav
	{
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.nav-btn
	{
		flex: 1 1 auto;
		text-align: center;
		min-width: 120px;
	}

	/* Views become normal flow elements */
	.view
	{
		position: static;
		height: auto;
		overflow: visible;
		padding: var(--space-md);
		border: none;
		border-radius: 0;
	}

	/* Landing View Mobile */
	.landing-container
	{
		display: block;
	}

	.search-section
	{
		max-width: none;
		margin-bottom: var(--space-xl);
	}

	.hero-cards
	{
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.hero-card
	{
		flex-direction: row;
		text-align: left;
		align-items: center;
	}

	.card-icon
	{
		width: 48px;
		height: 48px;
		margin: 0;
		flex-shrink: 0;
	}

	.card-icon svg
	{
		width: 24px;
		height: 24px;
	}

	/* Browser View Mobile */
	.mosaic-container
	{
		grid-template-columns: repeat(2, 1fr);
		max-height: none;
	}

	/* Wizard View Mobile */
	.wizard-container
	{
		flex-direction: column;
	}

	.wizard-summary-panel
	{
		flex: 0 0 auto;
		order: -1;
		max-height: 250px;
		width: 100%;
	}

	.wizard-content
	{
		padding: var(--space-md);
	}

	.wizard-header
	{
		margin-bottom: var(--space-sm);
	}

	.back-btn
	{
		width: 100%;
		justify-content: center;
		margin-bottom: var(--space-md);
	}

	/* Keep the rest of your mobile wizard styles */
	.wizard-container
	{
		flex-direction: column;
	}

	.wizard-summary-panel
	{
		flex: 0 0 auto;
		order: -1;
		max-height: 250px;
	}

	.wizard-content
	{
		padding: var(--space-md);
	}

	.option-buttons
	{
		grid-template-columns: 1fr;
	}

	.summary-actions
	{
		flex-direction: column;
	}

	.summary-actions
	{
		flex-direction: column;
	}

	.summary-actions button
	{
		width: 100%;
	}

	/* Client Area Mobile */
	.login-container
	{
		max-width: none;
		padding: var(--space-md);
	}

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

	.dashboard-column-side
	{
		order: -1;
	}

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

	.messages-container
	{
		min-height: 300px;
		max-height: 400px;
	}

	.message-input-container
	{
		flex-direction: column;
	}

	.message-input-container button
	{
		align-self: stretch;
	}

	.table-wrapper
	{
		border: none;
	}

	.request-table
	{
		font-size: 0.9rem;
	}

	.request-table th,
	.request-table td
	{
		padding: var(--space-xs) var(--space-sm);
	}
}