/* SupportCandy Customizations (MDI)
 * Loaded after SupportCandy's own framework/style.css so these rules win the cascade.
 */

/* --- Move the ticket sidebar (Currently Viewing, Ticket Status, etc.) to the left --- */
.wpsc-it-sidebar-widget-container {
	order: -1;
	margin-left: 0;
	margin-right: 20px;
}

/* --- TinyMCE reply toolbar icons: make them white instead of the default grey --- */
.mce-toolbar .mce-ico {
	color: #fff;
}

/* --- Widget headers: maroon while open, navy while collapsed ---
 * SupportCandy prints its own "Widget Header" appearance colors in wp_footer
 * (framework/class-wpsc-framework.php), which loads after this stylesheet, so
 * !important is needed here to still win the cascade.
 * The collapsed state is detected straight off the DOM: SupportCandy's own
 * toggle script hides the widget body with an inline `display: none`, so no
 * extra JS is needed here to track collapsed/open state.
 */
.wpsc-widget-header {
	background-color: #751b0c !important;
	color: #fff !important;
}
.wpsc-widget-header h2 {
	color: #fff !important;
}
.wpsc-it-widget:has(.wpsc-widget-body[style*="display: none"]) .wpsc-widget-header {
	background-color: #18232c !important;
}

/* --- New Ticket form: replace SupportCandy's float-based field grid with a real
 * CSS grid, scoped to just this form. Floats don't equalize row heights, so a
 * tall field (e.g. Category, with its helper text) makes shorter fields after it
 * tuck in unevenly instead of starting a clean new row. Each field already carries
 * a wpsc-lg-{12|6|4} class (full/half/third width, the only options SupportCandy's
 * field-width setting offers), so we just re-map those onto grid-column spans.
 */
.wpsc-create-ticket {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
	align-items: start;
}
.wpsc-create-ticket .wpsc-tff {
	float: none;
	width: auto !important;
	padding: 0 0 20px !important;
	box-sizing: border-box;
}
.wpsc-create-ticket .wpsc-lg-12 {
	grid-column: span 12;
}
.wpsc-create-ticket .wpsc-lg-6 {
	grid-column: span 6;
}
.wpsc-create-ticket .wpsc-lg-4 {
	grid-column: span 4;
}
@media (max-width: 768px) {
	.wpsc-create-ticket .wpsc-lg-6,
	.wpsc-create-ticket .wpsc-lg-4 {
		grid-column: span 12;
	}
}

/* --- Comfortable inner padding on form fields.
 * SupportCandy's own textarea rule sets no padding at all (text sits flush
 * against the border), and its text inputs/selects only get a thin 8px.
 * Matching SupportCandy's own selector scope (#wpsc-container / .wpsc-modal)
 * so this applies consistently everywhere a ticket form renders, not just
 * the new ticket page.
 */
#wpsc-container input[type="text"],
#wpsc-container input[type="password"],
#wpsc-container input[type="number"],
.wpsc-modal input[type="text"],
.wpsc-modal input[type="password"],
.wpsc-modal input[type="number"] {
	padding: 0 12px !important;
}
#wpsc-container select,
.wpsc-modal select {
	padding: 0 24px 0 12px !important;
}
#wpsc-container textarea,
.wpsc-modal textarea {
	padding: 10px 12px !important;
	box-sizing: border-box;
}

/* --- Time Worked repeater (see assets/js/time-tracker.js) --- */
.sc-mdi-time-tracker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.sc-mdi-tw-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sc-mdi-tw-row input[type="number"] {
	width: 60px !important;
}
.sc-mdi-tw-unit {
	color: #777;
}
.sc-mdi-tw-date {
	color: #999;
	font-size: 12px;
	margin-left: 8px;
}
.sc-mdi-tw-remove {
	cursor: pointer;
	color: #a00;
	font-size: 18px;
	line-height: 1;
	margin-left: 4px;
}
.sc-mdi-tw-add {
	width: fit-content;
}
.sc-mdi-tw-total {
	font-size: 13px;
	color: #555;
	margin-top: 2px;
}