/*
 * Top action cluster on every opted-in change form
 * (admin/maintenance/_form_action_bar.html, built by FormActionBarMixin).
 *
 * Written inside `maintenance` and moved to `core` on 2026-09-09, once nine
 * apps drew from it: a sheet that draws nine apps is not one module's file,
 * and leaving it there made app number ten edit another module's folder.
 * The class names keep their `maint-` / `mform-` prefix — renaming them would
 * touch every template of nine apps, and a class missed there loses its CSS
 * with no error anywhere.
 *
 * Opting an app in means adding its `app-<label>` to the `:is()` list here and
 * in form-mobile.css, not copying this file. Forgetting one list is silent:
 * `feedback` (2026-07-29) had the bar render as bare inline links AND kept the
 * footer submit-row, so users saw two competing sets of Save buttons.
 * `boiler` and `guard_log` lock all four lists with `test_shared_skin.py`.
 *
 * User decision 2026-07-27, extending the 2026-07-23 rule from the request
 * form to all of them: every action is a labelled, finger-sized button in ONE
 * row above the fields — no icon-only "⋯" in the header and no submenu inside
 * it. Lưu / Xóa / Lịch sử left the row on 2026-08-22 (user) and went back to
 * Unfold's own places, so this sheet no longer styles a Save button and no
 * longer hides the native footer submit-row.
 *
 * Written as plain CSS on purpose. Unfold ships a PRECOMPILED Tailwind sheet
 * holding only the utilities it uses itself; it has no green/red button set and
 * no `sm:`-tier sizing utilities for this shape. Colours come from Unfold's own
 * CSS variables so light and dark stay in step with the rest of the admin.
 *
 * Scope: the shared `body:is(...).change-form`.
 *
 * Sizing mirrors the changelist toolbar (changelist-mobile.css §5): 44px tall,
 * share the row and wrap on phones, shrink to content from 1024px up.
 */

body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-base-200);
  border-radius: 6px;
  background: #fff;
  color: var(--color-base-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act:hover {
  background: var(--color-base-50);
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act .material-symbols-outlined {
  font-size: 20px;
  flex: none;
}

/* Forward step in the workflow (Gửi / Bắt đầu / Hoàn thành / Duyệt / Sinh
 * lịch). Green, not the brand purple: purple is already the colour of every
 * neutral primary button in the admin, and "this moves the record forward"
 * deserves its own signal. */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--send {
  background: var(--color-green-600, #16a34a);
  border-color: var(--color-green-700, #15803d);
  color: #fff;
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--send:hover {
  background: var(--color-green-700, #15803d);
}

/* Destructive (Loại bỏ / Hủy / Từ chối / Xóa): red text on a white ground, so
 * it reads as dangerous without competing with the forward button for
 * attention. */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--danger {
  color: var(--color-red-600, #dc2626);
  border-color: var(--color-red-200, #fecaca);
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--danger:hover {
  background: var(--color-red-50, #fef2f2);
}

/* Dark theme — Unfold stamps `.dark` on the <html> element, so the descendant
 * form is the only shape that can match. */
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
  color: var(--color-base-200);
}
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act:hover {
  background: var(--color-base-800);
}
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--send {
  background: var(--color-green-600, #16a34a);
  border-color: var(--color-green-500, #22c55e);
  color: #fff;
}
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--send:hover {
  background: var(--color-green-700, #15803d);
}
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act--danger {
  background: var(--color-base-900);
  border-color: var(--color-red-500, #ef4444);
  color: var(--color-red-400, #f87171);
}

@media (min-width: 1024px) {
  body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form .maint-act {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------------------
 * Footer submit-row: đảo nút được tô đậm (user 2026-08-22).
 *
 * Unfold tô đặc màu chính cho "Lưu" (`_save`) và để "Lưu và tiếp tục chỉnh sửa"
 * (`_continue`) ở kiểu viền. Với các màn này thì ngược: người dùng phần lớn còn
 * việc để làm tiếp trên phiếu, nên nút nên bấm nhất là "Lưu và tiếp tục chỉnh
 * sửa" — nó cũng thay chỗ nút "Lưu lại" (post `_continue`) mà cụm nút đầu form
 * vừa bỏ đi.
 *
 * Đổi bằng CSS, KHÔNG shadow `admin/submit_line.html`: bản copy template sẽ âm
 * thầm mất nút mới khi nâng Unfold, còn ở đây chỉ sơn lại 2 nút. Màu lấy đúng
 * biến của Unfold nên hai kiểu vẫn khớp `unfold/components/button.html`
 * (`variant="default"` và variant mặc định), sáng lẫn tối.
 * ------------------------------------------------------------------------- */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_save"] {
  background: var(--color-white, #fff);
  border-color: var(--color-base-200);
  color: var(--color-font-important-light);
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_save"]:hover {
  background: var(--color-base-100);
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_continue"] {
  background: var(--color-primary-600);
  border-color: transparent;
  color: var(--color-white, #fff);
}
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_continue"]:hover {
  background: color-mix(in oklab, var(--color-primary-600) 80%, transparent);
}

.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_save"] {
  background: transparent;
  border-color: var(--color-base-700);
  color: var(--color-font-important-dark);
}
.dark body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance, .app-boiler, .app-tasks, .app-guard_log).change-form #submit-row button[name="_save"]:hover {
  background: color-mix(in oklab, var(--color-base-800) 80%, transparent);
}

/* --- Stat card ON the action row (2026-09-03, user request) ---------------
   The plan form's "Yêu cầu đã sinh" card used to sit a row lower, next to the
   status pills. The user asked for it beside "Sinh lịch" / "Hủy kế hoạch",
   which is also the honest grouping: the card is a LINK somewhere, i.e. a
   thing you press, while the pills only say where the record stands.

   A wrapper row rather than moving the card into `.maint-actions`: the card
   keeps its own shape (big number, chevron) and so stays identical to the same
   card on the Thiết bị / Điều chuyển / Kiểm kê forms — one component, one look
   (project rule). Only its POSITION moved. */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance).change-form .mform-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 20px;
}
/* The button cluster carries the row's margin on its own everywhere else; in
   here the wrapper owns it, or the row would end with 20px of dead space. */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance).change-form .mform-actions-row .maint-actions {
  flex: 0 1 auto;
  margin-bottom: 0;
}
/* The card must not be stretched by the row the way `.maint-act` buttons are:
   it holds a number, and a card as wide as the viewport reads as a banner. */
body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance).change-form .mform-actions-row .mform-stat {
  flex: 0 0 auto;
}
/* Phone: the buttons already go full width one per line, so the card follows
   suit instead of hanging half-width beside nothing. */
@media (max-width: 640px) {
  body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance).change-form .mform-actions-row .maint-actions,
  body:is(.app-maintenance, .app-feedback, .app-patrol, .app-transport, .app-qc_incoming, .app-attendance).change-form .mform-actions-row .mform-stat {
    flex: 1 1 100%;
  }
}