/* Work Order app — screen styles (grows with each milestone). */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #1c2430;
  background: #eef1f5;
}

.hidden { display: none !important; }

#app-header {
  background: #fff;
  color: #1c2430;
  border-bottom: 1px solid #d5dbe3;
}

/* Header content constrained to the same width as #app-main below. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
}

#app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

#app-header .logo { height: 34px; }

#app-header h1 { font-size: 20px; font-weight: 600; margin: 0; }

#header-user { font-size: 13px; }

#app-main { padding: 16px; max-width: 1280px; margin: 0 auto; }

.view { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 16px; }

/* Forms */
label { display: block; font-weight: 600; margin: 8px 0 2px; }
input[type="text"], input[type="date"], input[type="password"], select, textarea {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #b9c2cd;
  border-radius: 4px;
  font: inherit;
}
textarea { min-height: 60px; resize: vertical; }

button {
  font: inherit;
  padding: 5px 12px;
  border: 1px solid #14324f;
  border-radius: 4px;
  background: #14324f;
  color: #fff;
  cursor: pointer;
}
button.secondary { background: #fff; color: #14324f; }
button.danger { background: #a32020; border-color: #a32020; }
button:disabled { opacity: 0.5; cursor: default; }
button.small { padding: 2px 8px; font-size: 12px; }

.muted { color: #67717e; }
.small { font-size: 12px; }
.error { color: #a32020; }

/* Login */
.login-card { max-width: 380px; margin: 40px auto; }
.login-card h2 { margin-top: 0; }
.login-card button[type=submit] { margin-top: 14px; }

/* Board toolbar */
.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.create-wo { display: flex; gap: 10px; align-items: center; }
.create-wo label { display: flex; align-items: center; gap: 6px; margin: 0; }
.create-wo input { width: auto; }
.create-wo input[name=reg] { width: 110px; }
.id-preview { font-weight: 600; color: #14324f; min-width: 150px; }
.toolbar-spacer { flex: 1; }

/* Kanban — 3 equal columns (Open / In progress / Completed), each ~33% of the width. */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.kanban-col { background: #f4f6f9; border: 1px solid #d5dbe3; border-radius: 6px; padding: 8px; min-height: 140px; }
.kanban-col h3 { margin: 2px 2px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #4a5568; display: flex; justify-content: space-between; align-items: center; }
.kanban-col .count { background: #d5dbe3; border-radius: 10px; padding: 0 8px; font-size: 11px; color: #333; }
.wo-card { background: #fff; border: 1px solid #c9d2dc; border-radius: 5px; padding: 8px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.wo-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.wo-card-actions { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 8px; }
.wo-card-actions button { white-space: nowrap; padding: 2px 5px; font-size: 11px; }
.wo-card-actions .wo-move { padding: 2px 7px; line-height: 1.4; }

/* Status badges */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; background: #67717e; }
.status-open { background: #5b7ba6; }
.status-in-progress { background: #2f6fb2; }
.status-completed { background: #2e8b57; }

/* Editor shell */
.editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.editor-head h2 { margin: 0; font-size: 18px; }
#editor-saved { color: #2e8b57; font-size: 12px; }

/* Front page editor (M2) */
.fp-section { background: #fff; border: 1px solid #c9d2dc; border-radius: 5px; padding: 10px 12px; margin-bottom: 12px; }
.fp-section.pending { background: #fdf2f0; border-color: #e3bcb6; }
.fp-section.done { background: #f4faf7; border-color: #2e8b57; }
.fp-section h3 { margin: 0 0 10px; font-size: 14px; color: #1f3a5c; border-bottom: 1px solid #e1e6ec; padding-bottom: 6px; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 14px; margin-bottom: 10px; }
.fp-field { display: flex; flex-direction: column; gap: 3px; }
.fp-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #4a5568; }
.fp-field input, .fp-field select, .fp-field textarea { width: 100%; box-sizing: border-box; padding: 5px 7px; font: inherit; border: 1px solid #b9c2cd; border-radius: 4px; background: #fff; }
.fp-field textarea { min-height: 56px; resize: vertical; }
.fp-field textarea.fp-tall { min-height: 112px; }

.fp-table { width: 100%; border-collapse: collapse; }
.fp-table th, .fp-table td { border: 1px solid #d5dbe3; padding: 5px 7px; text-align: left; font-size: 13px; }
.fp-table th { background: #eef2f6; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #4a5568; }
.fp-table input[type="text"] { width: 100%; box-sizing: border-box; padding: 4px 6px; font: inherit; border: 1px solid #b9c2cd; border-radius: 4px; }
.fp-table select { width: 100%; box-sizing: border-box; padding: 4px 6px; font: inherit; border: 1px solid #b9c2cd; border-radius: 4px; background: #fff; }

.pen-note { font-size: 12px; color: #8a6d1f; margin: 4px 0 10px; }
.small-note { font-size: 11px; margin: 6px 0 0; }

.check-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e1e6ec; }
.check-row:last-child { border-bottom: none; }
.check-text { flex: 1; font-size: 13px; }
.btn-toggle { background: #fff; color: #4a5568; border: 1px solid #b9c2cd; }
.btn-toggle.active { background: #2e8b57; border-color: #2e8b57; color: #fff; font-weight: 600; }
.check-row .sig { width: 110px; padding: 4px 6px; font: inherit; border: 1px solid #b9c2cd; border-radius: 4px; }

.crs-box { border: 1px solid #1f6f63; border-radius: 5px; padding: 10px 12px; background: #f4faf8; }
.crs-box.pending { background: #fdf2f0; border-color: #e3bcb6; }
.crs-text { font-size: 13px; color: #1f3a5c; margin: 0 0 10px; font-style: italic; }

/* Task cards (M3) */
.card-block { border: 1px solid #e3bcb6; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; background: #fdf2f0; }
.card-block.completed { border-color: #2e8b57; background: #f4faf7; }
.card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head strong { font-size: 14px; color: #1f3a5c; margin-right: 4px; }
.assignee-badge { background: #5b7ba6; }
.card-sub { border-top: 1px dashed #d5dbe3; margin-top: 10px; padding-top: 8px; }
.card-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #4a5568; font-weight: 600; }
.parts-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.parts-table th, .parts-table td { border: 1px solid #d5dbe3; padding: 4px 6px; text-align: left; font-size: 12px; }
.parts-table th { background: #eef2f6; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #4a5568; white-space: nowrap; }
.parts-table input[type="text"] { width: 100%; box-sizing: border-box; padding: 3px 5px; font: inherit; border: 1px solid #b9c2cd; border-radius: 4px; }
/* Parts column widths: Description wide, GRN narrow (4-digit number). */
.parts-table .col-desc { width: 34%; }
.parts-table .col-grn { width: 7%; }
.parts-table .part-grn { max-width: 60px; }
/* Vertical separator line between the OFF and ON groups. */
.parts-table .parts-sep { width: 12px; padding: 0; border-left: none; border-right: 2px solid #8a94a3; background: transparent; }
/* Red ✕ delete control for part rows. */
button.part-del { background: none; border: none; color: #c0392b; font-size: 15px; font-weight: bold; line-height: 1; padding: 2px 6px; cursor: pointer; }
button.part-del:hover { color: #7f1d1d; background: #fdecea; border-radius: 4px; }
.card-divider { border: none; border-top: 1px solid #c9d1db; margin: 14px 0 10px; }
.card-flags { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 400; margin: 0; cursor: pointer; }
.flag input[type="checkbox"] { width: auto; }
.ec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; }
.ec-box { border: 3px solid #b45309; border-radius: 6px; padding: 10px 12px; margin-top: 12px; background: #fffaf3; }
.ec-box .fp-grid { margin-bottom: 0; }
.field-group { display: flex; flex-direction: column; gap: 8px; }

/* Admin registries (M6, pulled forward) */
.reg-form { margin-top: 10px; padding: 10px; border: 1px dashed #b9c2cd; border-radius: 6px; background: #f8fafc; }
.reg-btns { margin-top: 8px; }
#registry-status.ok { color: #1a7f37; font-size: 12px; }
#registry-status.warn { color: #b45309; font-size: 12px; }

/* Expired AML license highlight */
tr.row-expired td { background: #fdecec; }
td.cell-expired { color: #c0392b; font-weight: 600; }