/* ============================================================================

   Tire Storage Management System - Styles

   ============================================================================ */



:root {

	--ts-primary-color: #2c5aa0;

	--ts-secondary-color: #f39c12;

	--ts-danger-color: #e74c3c;

	--ts-success-color: #27ae60;

	--ts-bg-color: #f5f5f5;

	--ts-border-color: #ddd;

	--ts-text-color: #333;

	--ts-light-gray: #f9f9f9;

	--ts-border-radius: 4px;

	--ts-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

#tire_count{
	border: 1px solid var(--ts-border-color) !important;
}

/* ============================================================================

   Global Styles

   ============================================================================ */



.tire-storage-wrapper {

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,

		Ubuntu, Cantarell, sans-serif;

	color: var(--ts-text-color);

}



.tire-storage-login-wrapper,

.tire-storage-form-wrapper,

.tire-storage-listing {

	max-width: 1200px;

	margin: 0 auto;
}



/* ============================================================================

   Login Page

   ============================================================================ */



.tire-storage-login-wrapper {

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 400px;

	background-image: url(https://developer.wpsprintplan.com/wp-content/uploads/2024/04/slideshow_2022_main.jpg) !important;

}

.welcome-message{
		text-align: right;
		padding-bottom: 10px;
		padding-right: 30px;
}

.btn-logout{
	 background: #444;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;

}

#user_pass{
	background-color: #ddd !important;
}

.tire-storage-login-container {

	background: white;

	padding: 40px;

	border-radius: var(--ts-border-radius);

	box-shadow: var(--ts-box-shadow);

	max-width: 100% !important;

	text-align: left;

}



.tire-storage-login-container h1 {

	margin-bottom: 10px;

	color: var(--ts-primary-color);

	font-size: 24px;

}



.tire-storage-login-container p {

	margin-bottom: 30px;

	color: #666;

	font-size: 14px;

}



.tire-storage-login-container form {

	margin-top: 20px;

}



.tire-storage-login-container .user-login-wrap {

	margin-bottom: 20px;

}



.tire-storage-login-container .user-login-wrap input {

	width: 100%;

	padding: 12px;

	margin-bottom: 12px;

	border: 1px solid var(--ts-border-color);

	border-radius: var(--ts-border-radius);

	font-size: 14px;

	box-sizing: border-box;

}



.tire-storage-login-container input[type='submit'] {

	width: 100%;

	padding: 12px;

	background: var(--ts-primary-color);

	color: white;

	border: none;

	border-radius: var(--ts-border-radius);

	cursor: pointer;

	font-size: 16px;

	font-weight: 600;

	transition: background 0.3s;

}



.tire-storage-login-container input[type='submit']:hover {

	background: #1a3a60;

}



/* ============================================================================

   Header & Buttons

   ============================================================================ */



.tire-storage-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-bottom: 30px;

	flex-wrap: wrap;

	gap: 20px;

}



.tire-storage-header h1 {

	margin: 0;

	font-size: 28px;

	color: var(--ts-primary-color);

}



.btn {

	display: inline-block;

	padding: 10px 20px;

	border: none;

	border-radius: var(--ts-border-radius);

	cursor: pointer;

	font-size: 14px;

	font-weight: 600;

	text-decoration: none;

	transition: all 0.3s;

	box-sizing: border-box;

}



.btn-primary {

	background: #3894D1;

	color: #fff !important;

	border: none !important;

   border-radius: 100px;

}



.btn-primary:hover {

	background: #444444;

	transform: translateY(-2px);

	color: #fff !important;

	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.btn-secondary {

	background: #444444;

	color: #fff;

}



.btn-secondary:hover {

	background: #1a3a60;
   
   transform: translateY(-2px);
   
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.btn-small {

	padding: 6px 12px;

	font-size: 12px;

}



.btn-edit {

	background: #3498db;

	color: #fff !important;

	border: none !important;

   border-radius: 100px;
      
   text-align: center;

}

.btn-delete {

	background: #3498db !important;

	color: #fff !important;

	border: none !important;
   
   border-radius: 100px;
      
   text-align: center;

}



.btn-delete:hover {

	background: #3498db;

	color: #fff !important;
}



/* ============================================================================

   Search & Filter Controls

   ============================================================================ */



.tire-storage-controls {

	margin-bottom: 30px;

	background: #3894D1;

	padding: 20px;

	border-radius: var(--ts-border-radius);

}



.tire-storage-search-form {

	display: flex;

	gap: 10px;

	flex-wrap: wrap;

	align-items: center;

}



.tire-storage-search-form input,

.tire-storage-search-form select {

	padding: 10px 12px;

	border: 1px solid var(--ts-border-color);

	border-radius: var(--ts-border-radius);

	font-size: 16px;

	text-transform: uppercase !important;

	color: #2c5aa0;

   font-family: Racing Sans One;
   
   font-weight: 300;

	flex: 1;

	min-width: 150px;

	box-sizing: border-box;

}



.tire-storage-search-form input[type='text'] {

	min-width: 250px;

}



@media (max-width: 768px) {

	.tire-storage-search-form {

		flex-direction: column;

	}


	.tire-storage-search-form input,

	.tire-storage-search-form select,

	.tire-storage-search-form button {

		width: 100%;

	}

}



/* ============================================================================

   Table & Listing

   ============================================================================ */



.tire-storage-table-wrapper {

	overflow-x: auto;

	margin-bottom: 30px;

	border-radius: var(--ts-border-radius);

	box-shadow: var(--ts-box-shadow);

}



.tire-storage-table {

	width: 100%;

	border-collapse: collapse;

	background: white;

	margin-bottom: unset !important;

	border: 1px solid #2c5aa0 !important;

}



.tire-storage-table thead {

	background: var(--ts-primary-color);

	color: white;

}



.tire-storage-table th {

	padding: 15px;

	background-color: #3894D1 !important;

	text-align: left;

	font-weight: 600;

	border-bottom: 1px solid #2c5aa0 !important;
   
   border-right: 1px solid #2c5aa0 !important;
}



.tire-storage-table td {

	padding: 12px 15px;

	border-bottom: 1px solid #2c5aa0 !important;

}



.tire-storage-table tbody tr {

	transition: background 0.2s;

}



.tire-storage-table tbody tr:hover {

	background: var(--ts-light-gray);

}



.tire-storage-table tbody tr:nth-child(even) {

	background: #fafafa;

}



.notes-column {

	max-width: 300px;

	word-wrap: break-word;

	color: #666;

}



.actions-column {

	white-space: nowrap;

}



.actions-column .btn {

	margin-right: 5px;

	margin-bottom: 5px;

}



.season-badge {

	display: inline-block;

	padding: 4px 12px;

	border-radius: 20px;

	font-size: 12px;

	font-weight: 600;

	text-transform: uppercase;

}



.season-winter {

	background: #3498db;

	color: white;

}



.season-summer {

	background: #f39c12;

	color: white;

}



/* ============================================================================

   Forms

   ============================================================================ */



.tire-storage-form-wrapper {

	background-image: url(https://developer.wpsprintplan.com/wp-content/uploads/2024/04/slideshow_2022_main.jpg) ;
	
	border-radius: var(--ts-border-radius);

	background-color: #3894d1;
   
   background-position: center center;
   
   background-attachment: fixed;
   
   background-size: cover;
    
   font-family: inherit;

   font-weight: normal;

}



.tire-storage-form-container {

	background: white;

	padding: 30px;

	border-radius: var(--ts-border-radius);

	max-width: 100%;

	margin: 0 auto;

	box-shadow: var(--ts-box-shadow);

}



.tire-storage-form-container h1 {

	margin-bottom: 30px;

	color: var(--ts-primary-color);

	font-size: 24px;

	border-bottom: 2px solid var(--ts-border-color);

	padding-bottom: 15px;

	display: block;

   text-align: center;

}



.form-group {

	margin-bottom: 20px;

}



.form-group label {

	display: block;

	margin-bottom: 8px;

	font-weight: 600;

	color: var(--ts-text-color);

	font-size: 14px;

}



.form-group input,

.form-group select,

.form-group textarea {

	width: 100%;

	padding: 10px 12px;

	border: 1px solid var(--ts-border-color);

	border-radius: var(--ts-border-radius);

	font-size: 14px;

	font-family: inherit;

	box-sizing: border-box;

	transition: border-color 0.3s;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

	outline: none;

	border-color: var(--ts-primary-color);

	box-shadow: 0 0 0 2px rgba(44, 90, 160, 0.1);

}



.form-group textarea {

	resize: vertical;

	min-height: 100px;

}



.form-actions {

	display: flex;

	gap: 10px;

	margin-top: 30px;

	padding-top: 20px;

	border-top: 1px solid var(--ts-border-color);

}

.tire-storage-controls input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field {
 
    margin-bottom: 0 !important;

    background-color: #fff !important;

}

form.tire-storage-search-form button.btn-secondary {
 
    font-family: Racing Sans One;
 
    font-weight: 300;
 
    text-transform: uppercase;
}


.form-actions .btn {

	flex: 1;

	text-align: center;

	padding: 10px 30px;

   border-radius: 100px;
   
   border: none;
   
   background-color: #3894D1;
   
   color: #fff !important;
   
   text-transform: uppercase;

}



@media (max-width: 480px) {

	.form-actions {

		flex-direction: column;

	}



	.form-actions .btn {

		width: 100%;

	}

}



/* ============================================================================

   Messages

   ============================================================================ */



.tire-storage-error-message,

.tire-storage-success-message,

.tire-storage-error,

.tire-storage-notice {

	padding: 15px;

	margin-bottom: 20px;

	border-radius: var(--ts-border-radius);

	font-size: 14px;

}



.tire-storage-error-message,

.tire-storage-error {

	background: #f8d7da;

	border: 1px solid #f5c6cb;

	color: #721c24;

}



.tire-storage-error-message p,

.tire-storage-error p {

	margin: 0 0 10px 0;

}



.tire-storage-error-message p:last-child,

.tire-storage-error p:last-child {

	margin-bottom: 0;

}



.tire-storage-success-message,

.tire-storage-notice {

	background: #d4edda;

	border: 1px solid #c3e6cb;

	color: #155724;

}



/* ============================================================================

   Pagination

   ============================================================================ */



.tire-storage-pagination {

	display: flex;

	gap: 5px;

	justify-content: center;

	margin-top: 30px;

	align-items: center;

}



.tire-storage-pagination a,

.tire-storage-pagination span {

	display: inline-block;

	padding: 8px 12px;

	border: 1px solid var(--ts-border-color);

	border-radius: var(--ts-border-radius);

	text-decoration: none;

	color: var(--ts-primary-color);

	font-size: 14px;

	transition: all 0.2s;

}



.tire-storage-pagination a:hover {

	background: #3894D1;

	color: #fff !important;

	border-color: #3894D1;

}



.tire-storage-pagination .page-numbers.current {

	background: #3894D1;

	color: white;

	border-color: #3894D1;

}



/* ============================================================================

   No Results

   ============================================================================ */



.tire-storage-no-results {

	text-align: center;

	padding: 60px 20px;

	background: var(--ts-light-gray);

	border-radius: var(--ts-border-radius);

}



.tire-storage-no-results p {

	font-size: 18px;

	color: #666;

	margin-bottom: 20px;

}



/* ============================================================================

   Responsive Design

   ============================================================================ */



@media (max-width: 768px) {

	.tire-storage-login-wrapper {

		padding: 20px;

	}



	.tire-storage-login-container {

		padding: 30px 20px;

	}



	.tire-storage-form-container {

		padding: 20px;

	}



	.tire-storage-header {

		flex-direction: column;

		align-items: flex-start;

	}



	.tire-storage-header .btn {

		width: unset !important;

		text-align: center;

	}

	.tire-storage-controls input {
	    padding: 10px 12px !important;
	}



	.tire-storage-table {

		font-size: 13px;

		margin-bottom: 0 !important;
	}



	.tire-storage-table th,

	.tire-storage-table td {

		padding: 10px;

	}



	.actions-column .btn {

		display: block;

		width: 100%;

		margin-bottom: 5px;

	}



	.actions-column .btn:last-child {

		margin-bottom: 0;

	}

}



@media (max-width: 480px) {

	.tire-storage-login-wrapper,

	.tire-storage-form-wrapper,

	.tire-storage-listing {

		padding: 10px;

	}



	.tire-storage-table {

		font-size: 12px;

	}



	.tire-storage-table th,

	.tire-storage-table td {

		padding: 8px;

	}



	.tire-storage-header h1 {

		font-size: 20px;

	}



	.tire-storage-form-container h1 {

		font-size: 18px;

	}

}