/*
 * WrenchPress admin styles.
 *
 * The single source of truth for the work-order status badges. The six modifier
 * classes are keyed exactly on the status slugs in
 * WrenchPress_Work_Orders_Repository::statuses(): new, estimate, approved,
 * in_progress, ready, closed. Reused on the dashboard, the Work Orders list,
 * service history, and the work-order detail so a status always looks the same.
 *
 * Admin-only and enqueued only on WrenchPress screens, so the minimal-frontend
 * CSS rule does not apply here.
 */

.wrenchpress-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

/* new: neutral grey, the just-arrived state. */
.wrenchpress-status--new {
	background-color: #e2e4e7;
	color: #1d2327;
}

/* estimate: amber, awaiting a quote. */
.wrenchpress-status--estimate {
	background-color: #f6e7b8;
	color: #5c4400;
}

/* approved: blue, the customer signed off. */
.wrenchpress-status--approved {
	background-color: #cfe2f3;
	color: #0a3d62;
}

/* in_progress: indigo, work underway. */
.wrenchpress-status--in_progress {
	background-color: #d6d6f5;
	color: #2d2b6b;
}

/* ready: green, done and waiting for pickup. */
.wrenchpress-status--ready {
	background-color: #cdebcd;
	color: #14501a;
}

/* closed: dark muted, the job is finished. */
.wrenchpress-status--closed {
	background-color: #50575e;
	color: #ffffff;
}

/*
 * Appointment status badges. Keyed exactly on the appointment status slugs in
 * WrenchPress_Appointments_Repository::statuses(): scheduled, completed,
 * cancelled, no-show (slug == class == stored DB value, including the hyphen).
 * Each reuses a hue already present above rather than introducing a new palette.
 */

/* scheduled: blue, the upcoming/active default (reuses the approved hue). */
.wrenchpress-status--scheduled {
	background-color: #cfe2f3;
	color: #0a3d62;
}

/* completed: green, the appointment happened (reuses the ready hue). */
.wrenchpress-status--completed {
	background-color: #cdebcd;
	color: #14501a;
}

/* cancelled: grey, voided and de-emphasized (reuses the new hue, darker text). */
.wrenchpress-status--cancelled {
	background-color: #e2e4e7;
	color: #50575e;
}

/* no-show: amber, missed and needs attention (reuses the estimate hue). */
.wrenchpress-status--no-show {
	background-color: #f6e7b8;
	color: #5c4400;
}

/*
 * Reminder status badges. Keyed exactly on the stored DB values in
 * WrenchPress_Reminders_Repository::statuses(): pending, handled, dismissed,
 * superseded (slug == class == stored DB value). Each reuses a hue already
 * present above rather than introducing a new palette.
 */

/* pending: blue, the active outstanding follow-up (reuses the approved hue). */
.wrenchpress-status--pending {
	background-color: #cfe2f3;
	color: #0a3d62;
}

/* handled: green, contacted and resolved (reuses the ready hue). */
.wrenchpress-status--handled {
	background-color: #cdebcd;
	color: #14501a;
}

/* dismissed: grey, staff voided it and de-emphasized (reuses the cancelled hue). */
.wrenchpress-status--dismissed {
	background-color: #e2e4e7;
	color: #50575e;
}

/*
 * superseded: muted grey, auto-replaced by a newer reminder, lowest emphasis.
 * #5b6067 on #e2e4e7 is 4.97:1, so it clears AA (4.5:1) for the 12px/600 badge
 * text, which is not WCAG "large text". It stays lighter than dismissed and
 * cancelled (#50575e), so the lowest-emphasis hierarchy survives.
 */
.wrenchpress-status--superseded {
	background-color: #e2e4e7;
	color: #5b6067;
}

/*
 * Overdue due-value emphasis on the reminders worklist.
 *
 * The ratio here is computed against the STRIPED list-table row (#f6f7f7) that
 * WP core paints under every other row, not against white. This value only ever
 * renders inside a list table, so roughly half of all overdue values sit on the
 * stripe. #b32d2e is 5.87:1 striped and 6.30:1 on white. The old #d63638 looked
 * fine at 4.73:1 on white but measured 4.40:1 on the stripe and failed AA.
 * Do not "simplify" this back to the lighter red.
 *
 * Colour is not the only cue: column_due() also emits a warning dashicon and
 * visually-hidden "(reached)" text, so the meaning survives without colour.
 */
.wrenchpress-due--overdue {
	color: #b32d2e;
	font-weight: 600;
}

/* Dashboard layout helpers. */
.wrenchpress-status-list,
.wrenchpress-summary-list {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

.wrenchpress-status-list li,
.wrenchpress-summary-list li {
	margin: 0 0 6px;
}

.wrenchpress-status-list a {
	text-decoration: none;
}

.wrenchpress-status-count {
	font-weight: 600;
}

.wrenchpress-quick-actions {
	margin: 1em 0 1.5em;
}

.wrenchpress-getting-started {
	margin-top: 1.5em;
}

.wrenchpress-getting-started summary {
	cursor: pointer;
	font-weight: 600;
}

.wrenchpress-reminder-prompt > p:first-child {
	margin-top: 0;
}

.wrenchpress-reminder-prompt .form-table {
	margin-top: 0.5em;
}

.wrenchpress-reminder-prompt .form-table th,
.wrenchpress-reminder-prompt .form-table td {
	padding-top: 6px;
	padding-bottom: 6px;
}

.wrenchpress-reminder-prompt p.description {
	margin-top: 0;
}

.wrenchpress-reminder-prompt p.submit {
	margin: 0.5em 0 0;
	padding: 0;
}

.wp-core-ui .button-link {
	padding-left: 10px;
	padding-right: 10px;
}

.wp-core-ui .button-primary {
	padding-left: 10px;
	padding-right: 10px;
}

/*
 * Focus ring for the appointments island, and for nothing else.
 *
 * FullCalendar's event elements and its toolbar buttons are the only focusable
 * controls the plugin adds to wp-admin that WP core does not already style. Core
 * ships correct focus styles for .button, inputs, and links, so this stylesheet
 * deliberately contains no other focus rule and no other outline declaration.
 *
 * currentColor plus the offset is what keeps the ring visible on every surface
 * the island paints, including the dark closed badge. A fixed hex cannot: a
 * #1d2327 ring on #50575e measures 2.17:1 and fails SC 1.4.11.
 */
.wrenchpress-appointments :focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * Confirmation dialog.
 *
 * Shared surface: the vanilla helper in assets/js/wrenchpress-dialog.js builds
 * this markup on the server-rendered admin pages, and the appointments React
 * island renders the same markup in JSX. They share this class and the <dialog>
 * semantics; they deliberately do not share code.
 *
 * There is no stacking declaration here and there must never be one. The dialog
 * is opened with showModal(), which promotes it to the browser's top layer, so
 * it already paints above the WP admin bar and above every overlay on the page.
 *
 * There is no focus rule here either. The only focusable descendants are core
 * .button and .button-primary elements, which WP core already gives a correct
 * focus style; a plugin rule would only take that away.
 */
.wrenchpress-dialog {
	max-width: 480px;
	padding: 24px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	box-shadow: 0 3px 30px rgba( 0, 0, 0, 0.3 );
}

.wrenchpress-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.5 );
}

.wrenchpress-dialog h2 {
	margin: 0 0 16px;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.wrenchpress-dialog__body {
	margin: 0 0 16px;
}

.wrenchpress-dialog__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
