/**
 * Tracksies HQ - Base Styles
 * Core typography, page layout, and form fundamentals.
 *
 * @package Tracksies
 * @since 2.0.0
 */

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

.tracksies-wrap {
	max-width: 1600px;
}

.tracksies-page-title {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: var(--tracksies-space-lg);
}

.tracksies-page-title .button {
	margin-left: auto;
}

.tracksies-page-title h1 {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tracksies-subtitle {
	color: var(--tracksies-text-light);
	margin-top: 5px;
}

.tracksies-logo {
	font-weight: 700;
	color: var(--tracksies-primary);
}

/* ============================================================================
   Dashboard Grid
   ============================================================================ */

.tracksies-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--tracksies-space-lg);
}

/* ============================================================================
   Stats
   ============================================================================ */

.tracksies-stats {
	display: flex;
	gap: 30px;
}

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

.tracksies-stat-value {
	display: block;
	font-size: 32px;
	font-weight: 700;
	color: var(--tracksies-text);
	line-height: 1.2;
}

.tracksies-stat-label {
	display: block;
	font-size: var(--tracksies-font-size-sm);
	color: var(--tracksies-text-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ============================================================================
   Feature List
   ============================================================================ */

.tracksies-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tracksies-feature-list li {
	padding: 10px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tracksies-feature-enabled {
	color: var(--tracksies-success);
}

/* ============================================================================
   Quick Actions
   ============================================================================ */

.tracksies-quick-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tracksies-action-button {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	background: var(--tracksies-surface);
	border: 1px solid var(--tracksies-border);
	border-radius: var(--tracksies-radius);
	text-decoration: none;
	color: var(--tracksies-text);
	transition: background-color 0.2s;
}

.tracksies-action-button:hover {
	background: var(--tracksies-background);
	color: var(--tracksies-text);
}

.tracksies-action-button i {
	color: var(--tracksies-primary);
}

/* ============================================================================
   Forms
   ============================================================================ */

.tracksies-form-group {
	margin-bottom: 15px;
}

.tracksies-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: var(--tracksies-font-size);
}

.tracksies-form-group input[type="text"],
.tracksies-form-group input[type="email"],
.tracksies-form-group input[type="number"],
.tracksies-form-group input[type="password"],
.tracksies-form-group select,
.tracksies-form-group textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tracksies-border);
	border-radius: var(--tracksies-radius);
	font-size: var(--tracksies-font-size-md);
}

.tracksies-form-group input[type="text"]:focus,
.tracksies-form-group input[type="email"]:focus,
.tracksies-form-group input[type="number"]:focus,
.tracksies-form-group input[type="password"]:focus,
.tracksies-form-group select:focus,
.tracksies-form-group textarea:focus {
	border-color: var(--tracksies-primary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(231, 114, 47, 0.1);
}

.tracksies-form-group .description {
	margin-top: 5px;
	font-size: var(--tracksies-font-size-sm);
	color: var(--tracksies-text-light);
}

.tracksies-form-group .required {
	color: var(--tracksies-error);
}

.tracksies-form-group textarea {
	resize: vertical;
}

.tracksies-form-row {
	display: flex;
	gap: 15px;
}

.tracksies-form-row .tracksies-form-group {
	flex: 1;
}

.tracksies-form-actions {
	margin-top: var(--tracksies-space-lg);
	padding-top: 15px;
	border-top: 1px solid var(--tracksies-border);
}

/* ============================================================================
   Form Table Adjustments
   ============================================================================ */

.tracksies-card .form-table {
	margin: 0;
}

.tracksies-card .form-table th {
	padding: 15px 10px 15px 0;
	width: 180px;
}

.tracksies-card .form-table td {
	padding: 15px 0;
}

/* ============================================================================
   Filters
   ============================================================================ */

.tracksies-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--tracksies-space-lg);
	flex-wrap: wrap;
	gap: 15px;
}

.tracksies-search-form {
	display: flex;
	gap: 8px;
}

.tracksies-search-form input[type="search"] {
	min-width: 250px;
	padding: 8px 12px;
	border: 1px solid var(--tracksies-border);
	border-radius: var(--tracksies-radius);
}

/* ============================================================================
   Status Filters
   ============================================================================ */

.tracksies-status-filters,
.tracksies-type-filters {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 5px;
	flex-wrap: wrap;
}

.tracksies-status-filters li a,
.tracksies-type-filters li a {
	display: inline-block;
	padding: 8px 14px;
	text-decoration: none;
	color: var(--tracksies-text-light);
	border-radius: var(--tracksies-radius);
	transition: all 0.2s;
}

.tracksies-status-filters li a:hover,
.tracksies-type-filters li a:hover {
	background: var(--tracksies-surface);
	color: var(--tracksies-text);
}

.tracksies-status-filters li a.current,
.tracksies-type-filters li a.current {
	background: var(--tracksies-primary);
	color: #fff;
}

.tracksies-status-filters .count,
.tracksies-type-filters .count {
	opacity: 0.7;
	font-size: var(--tracksies-font-size-sm);
}

/* ============================================================================
   Date Filters
   ============================================================================ */

.tracksies-date-filters {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: var(--tracksies-space-lg);
	padding: 12px 15px;
	background: var(--tracksies-surface);
	border-radius: var(--tracksies-radius);
}

.tracksies-date-filters label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tracksies-font-size);
	color: var(--tracksies-text-light);
}

.tracksies-date-filters input[type="date"] {
	padding: 8px 12px;
	border: 1px solid var(--tracksies-border);
	border-radius: var(--tracksies-radius);
}

/* ============================================================================
   Pagination
   ============================================================================ */

.tracksies-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--tracksies-space-lg);
	padding-top: 15px;
}

.tracksies-pagination-info {
	color: var(--tracksies-text-light);
	font-size: var(--tracksies-font-size);
}

.tracksies-pagination-links {
	display: flex;
	align-items: center;
	gap: 5px;
}

.tracksies-page-numbers {
	display: flex;
	gap: 3px;
}

.tracksies-page-numbers .button.current {
	background: var(--tracksies-primary);
	border-color: var(--tracksies-primary);
	color: #fff;
}

.tracksies-page-numbers .dots {
	padding: 0 8px;
	color: var(--tracksies-text-light);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.tracksies-muted {
	color: var(--tracksies-text-light);
}

.tracksies-hidden {
	display: none !important;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 782px) {
	.tracksies-form-row {
		flex-direction: column;
	}

	.tracksies-card .form-table th {
		width: auto;
		padding-bottom: 5px;
	}
}