/* ==========================================================================
   Portal — Shared styles for client portal pages
   ========================================================================== */

/* Typography overrides */

	h1, h2, h3, h4, h5, h6 {
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
	}

/* Hide template loading spinner/overlay — FontAwesome isn't loaded on portal pages */

	body.portal:before,
	body.portal:after {
		display: none !important;
	}

/* Body — shared dark background */

	body.portal {
		background: url("images/overlay.png"), url("../../images/intro.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center 40%;
		background-repeat: repeat, no-repeat;
		background-color: #1b1f22;
		color: #ffffff;
	}

/* Centered card pages (login, dashboard) */

	body.portal-centered {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 2em;
	}

/* Full-width pages (project, demo) */

	body.portal-full {
		padding: 2em;
	}

/* Portal cards — layer on top of .box.style2 */

	.portal-card {
		border-radius: 8px;
		text-align: center;
		width: 100%;
	}

	.portal-card-narrow {
		max-width: 420px;
	}

	.portal-card-medium {
		max-width: 560px;
	}

	.portal-card h1 {
		letter-spacing: 0.5rem;
		font-size: 1.5em;
		margin-bottom: 0.5em;
	}

	.portal-card h2 {
		letter-spacing: 0.3rem;
		font-size: 1.1em;
		margin-bottom: 1.5em;
		color: rgba(255,255,255,0.7);
	}

/* Portal logo — circular with white border */

	.portal-logo {
		width: 5em;
		height: 5em;
		border: solid 2px #ffffff;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		margin: 0 auto 1.5em;
	}

	.portal-logo img {
		width: 70%;
		height: 70%;
		object-fit: contain;
	}

	.portal-logo img.invert {
		filter: brightness(0) invert(1);
	}

/* Company logo */

	.company-logo {
		max-width: 180px;
		max-height: 100px;
		margin: 0 auto 1.5em;
		display: block;
	}

/* Company name display (login step 2) */

	.company-name-display {
		font-size: 1.2em;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		margin-bottom: 1.5em;
	}

/* Dark form inputs — scoped to portal cards */

	.portal-card input[type="text"],
	.portal-card input[type="password"] {
		width: 100%;
		padding: 0.75em 1em;
		margin-bottom: 1em;
		background: #212931;
		border: 1px solid rgba(255,255,255,0.15);
		border-radius: 4px;
		color: #ffffff;
		font-family: inherit;
		font-size: 1em;
		font-weight: 300;
	}

	.portal-card input[type="text"]::placeholder,
	.portal-card input[type="password"]::placeholder {
		color: rgba(255,255,255,0.4);
	}

	.portal-card input[type="text"]:focus,
	.portal-card input[type="password"]:focus {
		outline: none;
		border-color: rgba(255,255,255,0.4);
	}

/* Portal card button override */

	.portal-card button {
		width: 100%;
		padding: 0.75em 1.5em;
		background: transparent;
		border: solid 2px rgba(255,255,255,0.5);
		border-radius: 4px;
		color: #ffffff;
		font-family: inherit;
		font-size: 0.9em;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		cursor: pointer;
		transition: background-color 0.2s, border-color 0.2s;
		height: auto;
		line-height: normal;
	}

	.portal-card button:hover {
		background: rgba(255,255,255,0.075);
		border-color: #ffffff;
	}

/* Login error */

	.login-error {
		color: #e74c3c;
		font-size: 0.9em;
		margin-bottom: 1em;
	}

/* Back links — dotted underline style */

	.portal-back {
		display: inline-block;
		margin-top: 1.5em;
		color: rgba(255,255,255,0.5);
		font-size: 0.85em;
		text-decoration: none;
		border-bottom: dotted 1px rgba(255,255,255,0.3);
	}

	.portal-back:hover {
		color: rgba(255,255,255,0.8);
		border-bottom-color: transparent;
	}

/* Dashboard welcome */

	.dashboard-welcome {
		color: rgba(255,255,255,0.6);
		font-size: 0.95em;
		margin-bottom: 2em;
	}

/* Project grid */

	.project-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
		margin-bottom: 2em;
	}

/* Project button */

	.project-btn {
		display: block;
		padding: 1.25em 1.5em;
		background: #212931;
		border: solid 2px rgba(255,255,255,0.15);
		border-radius: 6px;
		color: #ffffff;
		font-family: inherit;
		font-size: 1em;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		text-decoration: none;
		transition: background-color 0.2s, border-color 0.2s;
	}

	.project-btn:hover {
		background: rgba(255,255,255,0.075);
		border-color: rgba(255,255,255,0.4);
		color: #ffffff;
	}

/* No projects */

	.no-projects {
		color: rgba(255,255,255,0.4);
		font-style: italic;
		padding: 2em 0;
	}

/* Dashboard links */

	.dashboard-links {
		display: flex;
		justify-content: center;
		gap: 2em;
		margin-top: 1em;
	}

	.dashboard-links a {
		color: rgba(255,255,255,0.5);
		font-size: 0.85em;
		text-decoration: none;
		border-bottom: dotted 1px rgba(255,255,255,0.3);
	}

	.dashboard-links a:hover {
		color: rgba(255,255,255,0.8);
		border-bottom-color: transparent;
	}

/* Portal header — centered header for project/demo pages */

	.portal-header {
		max-width: calc(100% - 4em);
		margin: 0 auto 2em;
		text-align: center;
	}

	.portal-header h1 {
		letter-spacing: 0.5rem;
		font-size: 2.25em;
		margin-bottom: 0.5em;
	}

	.portal-header p {
		font-weight: 300;
		line-height: 1.65;
	}

	.portal-header a {
		color: inherit;
		border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
		text-decoration: none;
	}

	.portal-header a:hover {
		border-bottom-color: transparent;
	}

	.header-links {
		display: flex;
		justify-content: center;
		gap: 2em;
	}

/* Portal layout — flex-direction column modifier for .main */

	.portal-layout {
		flex-direction: column;
	}

/* Portal section — unified content block */

	.portal-section {
		width: 70vh;
		max-width: calc(100% - 4em);
		margin: 0 auto;
		padding: 2em;
		background: rgba(27, 31, 34, 0.85);
		border-radius: 4px;
		margin-bottom: 2em;
	}

	.portal-section h2 {
		color: #fff;
		font-size: 1.5em;
		margin-bottom: 1em;
	}

/* Summary grid */

	.summary-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5em;
	}

	@media screen and (max-width: 736px) {
		.summary-grid {
			grid-template-columns: 1fr;
		}
	}

/* Chart container */

	.chart-container {
		background: #212931;
		border-radius: 6px;
		padding: 1em;
	}

	.chart-container .apexcharts-text tspan,
	.chart-container .apexcharts-xaxis text,
	.chart-container .apexcharts-yaxis text {
		stroke: none !important;
	}

/* Map container */

	.map-container {
		height: 40vh;
		border-radius: 6px;
		overflow: hidden;
	}

/* Dashboard grid */

	.dashboard-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

/* Tables section */

	.tables-section {
		width: 100%;
		padding-top: 2em;
		font-size: 0.8em;
	}

	.tables-section h2 {
		color: #fff;
		font-size: 1.5em;
		margin-bottom: 1em;
	}

	.tables-section select {
		font-size: 1em;
	}

/* Tab navigation */

	.tab-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		border-bottom: 2px solid rgba(255,255,255,0.15);
		margin-bottom: 0.5em;
	}

	.tab-btn {
		background: none;
		background-color: transparent;
		border: none;
		border-radius: 0;
		height: auto;
		line-height: normal;
		color: rgba(255,255,255,0.5);
		padding: 0.6em 1.2em;
		cursor: pointer;
		font-size: 1em;
		font-family: inherit;
		letter-spacing: normal;
		border-bottom: 2px solid transparent;
		margin-bottom: -2px;
		transition: color 0.2s, border-color 0.2s;
	}

	.tab-btn:hover {
		color: rgba(255,255,255,0.8);
	}

	.tab-btn.active {
		color: #fff;
		border-bottom-color: #fff;
	}

	.tab-panel {
		display: none;
	}

	.tab-panel:first-of-type {
		display: block;
	}

/* Filter bar */

	.filter-bar {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-bottom: 0.3em;
	}

	.filter-item {
		display: flex;
		flex-direction: column;
		gap: 0.15em;
	}

	.filter-item label {
		color: rgba(255,255,255,0.6);
		letter-spacing: normal;
		text-transform: none;
	}

	.filter-item select {
		background-color: #212931;
		color: rgba(255,255,255,0.8);
		border: 1px solid rgba(255,255,255,0.15);
		border-radius: 4px;
		padding: 3px 6px;
		height: auto;
		font-family: inherit;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}

	.filter-item select:focus {
		outline: none;
		border-color: rgba(255,255,255,0.4);
	}

/* Grid.js dark theme overrides */

	.tables-section .gridjs-wrapper {
		border-radius: 6px;
		border: 1px solid rgba(255,255,255,0.1);
	}

	.tables-section .gridjs-wrapper,
	.tables-section .gridjs-container {
		background: transparent;
	}

	.tables-section .gridjs-footer {
		background-color: #1b1f22;
		border-top: 1px solid rgba(255,255,255,0.1);
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		color: rgba(255,255,255,0.85) !important;
	}

	.tables-section .gridjs-footer * {
		color: rgba(255,255,255,0.85) !important;
	}

	.tables-section .gridjs-footer button {
		background-color: #212931 !important;
		color: rgba(255,255,255,0.85) !important;
		border: 1px solid rgba(255,255,255,0.15);
		height: auto;
		line-height: normal;
		padding: 4px 8px;
		letter-spacing: normal;
		text-transform: none;
	}

	.tables-section .gridjs-footer button:hover {
		background-color: #2a3440 !important;
	}

	.tables-section .gridjs-footer button:disabled {
		color: rgba(255,255,255,0.25);
	}

	.tables-section .gridjs-footer button.gridjs-currentPage {
		background-color: rgba(255,255,255,0.15) !important;
		font-weight: bold;
	}

	.tables-section .gridjs-search {
		float: right;
	}

	.tables-section .gridjs-search-input {
		background-color: #212931;
		color: rgba(255,255,255,0.95) !important;
		border: 1px solid rgba(255,255,255,0.15);
		border-radius: 4px;
		padding: 6px 10px;
	}

	.tables-section .gridjs-search-input::placeholder {
		color: rgba(255,255,255,0.85);
	}

	.tables-section .gridjs-sort {
		filter: invert(1);
	}

	.tables-section .gridjs-head {
		margin-bottom: 3px;
	}

	.tables-section .gridjs-pages button.gridjs-currentPage {
		background-color: rgba(255,255,255,0.15);
	}