/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Brand variables and utility classes per design guidelines */
:root {
	--pair-dark-gray: #2D3840;
	--pair-green-1: #79864D;
	--pair-green-2: #AFC150;
	--pair-yellow: #E7FF4D;
	--pair-yellow-muted: #D5D787;
	--pair-beige: #C5BCA4;
	--pair-purple: #918CA1;
	--pair-purple-muted: #828587;

	--bg-light: #F8F8F8;
	--bg-white: #FFFFFF;

	--text-main: #333333;

	--alert-positive: #7BD422;
	--alert-negative: #FF4233;
	--alert-warning: #FFAB00;
}

/* Typography */
html, body {
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--text-main);
	background-color: var(--bg-light);
}

/* Buttons */
.brand-btn {
	background-color: var(--pair-dark-gray);
	color: var(--bg-white);
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
	font-weight: 600;
}
.brand-btn-outline {
	background: transparent;
	border: 1px solid var(--pair-dark-gray);
	color: var(--pair-dark-gray);
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
}
.brand-btn-outline:hover {
	background-color: var(--pair-yellow);
	color: var(--pair-dark-gray);
}

/* Search input */
.search-input {
	width: 24rem; /* fallback if utility classes not present */
	padding-left: 2.5rem !important; /* accommodate icon */
	height: 2.25rem;
	border-radius: 6px;
	border: 1px solid #d1d5db; /* neutral border */
	background-color: var(--bg-white);
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--text-main);
}

.search-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(145,140,161,0.12); /* subtle purple glow */
	border-color: var(--pair-purple);
}

/* Login form inputs */
.login-input {
	display: block;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #d1d5db;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--pair-dark-gray);
	background-color: var(--bg-white);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.login-input:focus {
	outline: none;
	border-color: var(--pair-purple);
	box-shadow: 0 0 0 3px rgba(145,140,161,0.12);
}

/* Inline links */
.brand-link {
	color: var(--pair-dark-gray);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.brand-link:hover {
	color: var(--pair-purple);
}

/* Small helpers */
.text-pair-yellow { color: var(--pair-yellow); }
.bg-pair-yellow { background-color: var(--pair-yellow); }
.text-pair-dark { color: var(--pair-dark-gray); }
.text-pair-dark-gray { color: var(--pair-dark-gray); }

/* Ensure buttons show pointer (hand) on hover */
button, input[type="submit"], .btn {
	cursor: pointer;
}

/* Shared branded table style */
.brand-table,
#case_file_archive_records {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--pair-purple-muted);
}

.brand-table th,
.brand-table td,
#case_file_archive_records th,
#case_file_archive_records td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.brand-table thead th,
#case_file_archive_records thead th {
	background-color: var(--pair-dark-gray);
	color: var(--pair-beige);
}

#case_file_archive_records thead th {
	position: sticky;
	top: 0;
	z-index: 10;
}

.brand-table tbody td,
#case_file_archive_records tbody > tr td {
	background-color: var(--bg-white);
	color: var(--pair-dark-gray);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.brand-table tbody tr:last-child td,
#case_file_archive_records tbody tr:last-child td {
	border-bottom: none;
}

/* Label column in detail tables */
.brand-table td.label-col {
	font-size: 0.875rem;
	font-weight: 500;
	color: #6b7280;
	width: 12rem;
}