/*
 * ZITRUCKGO frontend styles.
 *
 * Brand palette:
 *   --zitg-orange: #F28C28  (primary)
 *   --zitg-black:  #111111  (secondary)
 *   --zitg-teal:   #4FC3D1  (accent — matches logo center)
 *   --zitg-yellow: #FFD400  (highlight stars)
 *   --zitg-bg:     #f6f7f9
 */

:root {
	--zitg-orange: #F28C28;
	--zitg-orange-dark: #d97a16;
	--zitg-black:  #111111;
	--zitg-teal:   #4FC3D1;
	--zitg-yellow: #FFD400;
	--zitg-bg:     #f6f7f9;
	--zitg-border: #e5e7eb;
	--zitg-muted:  #6b7280;
}

.zitg-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1f2937;
	max-width: 960px;
	margin: 0 auto;
}

.zitg-header {
	background: var(--zitg-black);
	color: #fff;
	padding: 18px 20px;
	border-radius: 8px 8px 0 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.zitg-header img { height: 48px; width: auto; border-radius: 6px; background:#fff; padding:2px; }
.zitg-header h2 { margin: 0; font-size: 20px; color: #fff; font-weight: 700; }
.zitg-header .zitg-tag { display:inline-block; background: var(--zitg-orange); color:#fff; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

.zitg-card {
	background: #fff;
	border: 1px solid var(--zitg-border);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	padding: 24px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.zitg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .zitg-row { grid-template-columns: 1fr; } }

.zitg-field { margin-bottom: 14px; }
.zitg-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}
.zitg-field .zitg-help { font-size: 12px; color: var(--zitg-muted); margin-top: 4px; }
.zitg-field .req { color: #dc2626; }

.zitg-input,
.zitg-select,
.zitg-textarea,
.zitg-file {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--zitg-border);
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.zitg-input:focus,
.zitg-select:focus,
.zitg-textarea:focus {
	outline: none;
	border-color: var(--zitg-orange);
	box-shadow: 0 0 0 3px rgba(242,140,40,0.18);
}
.zitg-textarea { min-height: 90px; resize: vertical; }

.zitg-btn {
	display: inline-block;
	background: var(--zitg-orange);
	color: #fff;
	border: 0;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, transform .05s;
	text-decoration: none;
}
.zitg-btn:hover { background: var(--zitg-orange-dark); }
.zitg-btn:active { transform: translateY(1px); }
.zitg-btn-secondary {
	background: var(--zitg-black);
}
.zitg-btn-secondary:hover { background: #000; }
.zitg-btn-accent {
	background: var(--zitg-teal);
	color: #06363c;
}
.zitg-btn-accent:hover { background: #3aafbd; }
.zitg-btn-sm { padding: 6px 12px; font-size: 13px; }

.zitg-flash {
	margin: 12px 0 18px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
	border-left: 4px solid var(--zitg-teal);
	background: #ecfeff;
	color: #0e7490;
}
.zitg-flash-success { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.zitg-flash-error   { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.zitg-flash-info    { background: #fffbeb; border-color: var(--zitg-yellow); color: #92400e; }

.zitg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 12px;
	background: #fff;
}
.zitg-table th, .zitg-table td {
	border-bottom: 1px solid var(--zitg-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}
.zitg-table th {
	background: #fafafa;
	font-weight: 700;
	color: #374151;
	border-top: 2px solid var(--zitg-orange);
}
.zitg-table tr:hover td { background: #fffaf3; }

.zitg-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.zitg-badge-open       { background: #ecfdf5; color: #065f46; }
.zitg-badge-assigned   { background: #fef3c7; color: #92400e; }
.zitg-badge-progress   { background: #e0f2fe; color: #075985; }
.zitg-badge-completed  { background: #ede9fe; color: #5b21b6; }
.zitg-badge-cancelled  { background: #fee2e2; color: #991b1b; }
.zitg-badge-pending    { background: #fef9c3; color: #854d0e; }
.zitg-badge-approved   { background: #dcfce7; color: #166534; }
.zitg-badge-rejected   { background: #fee2e2; color: #991b1b; }

.zitg-load-card {
	border: 1px solid var(--zitg-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 14px;
	background: #fff;
}
.zitg-load-card h3 { margin: 0 0 6px; color: var(--zitg-black); font-size: 16px; }
.zitg-load-meta { font-size: 13px; color: var(--zitg-muted); margin-bottom: 10px; }
.zitg-load-route { color: var(--zitg-orange); font-weight: 700; }

.zitg-bid-form {
	background: #fafafa;
	border: 1px dashed var(--zitg-border);
	padding: 12px;
	border-radius: 6px;
	margin-top: 12px;
}

.zitg-stars { color: var(--zitg-yellow); }
.zitg-muted { color: var(--zitg-muted); font-size: 12px; }
.zitg-commission { font-size:12px; color: var(--zitg-muted); margin-top: 6px; }

.zitg-section-title {
	margin: 24px 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--zitg-orange);
	font-size: 16px;
	color: var(--zitg-black);
}