/*
 * Portal design system — the final presentation layer for every route.
 * The warehouse inventory screen is the visual reference: calm paper canvas,
 * green operational accent, serif page names, compact responsive information.
 */
:root {
  --ui-ink: #14231a;
  --ui-muted: #647168;
  --ui-green: #075d39;
  --ui-green-dark: #05462b;
  --ui-soft: #e6f0e6;
  --ui-paper: #fffefa;
  --ui-panel: #f7faf5;
  --ui-line: #d8e1d7;
  --ui-danger: #bd4237;
  --ui-danger-soft: #fff1ef;
  --ui-page: clamp(16px, 5vw, 24px);
  --ui-radius: 16px;
  --ui-shadow: 0 7px 18px rgba(17, 48, 30, .08);
}

html, body { background: #f0f2ec !important; color: var(--ui-ink) !important; }
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
.app-shell { width: min(100%, 560px) !important; min-height: 100dvh !important; margin: 0 auto !important; padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; background: var(--ui-paper) !important; color: var(--ui-ink) !important; }
.app-shell :is(h1, h2, h3, p, b, strong, small, span, dd) { overflow-wrap: anywhere; }

/* Shared chrome: exactly one header and one bottom navigation treatment. */
.app-shell .portal-header,
.app-shell .home-shell header,
.app-shell .fleet-shell header {
  min-height: 76px !important;
  padding: 12px var(--ui-page) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 254, 250, .98) !important;
}
.app-shell .portal-header .brand {
  color: var(--ui-green) !important;
  font: 700 clamp(22px, 5.8vw, 30px)/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.055em !important;
}
.app-shell .portal-header .brand span { color: inherit !important; }
.app-shell .portal-header .language-trigger {
  height: 46px !important;
  min-width: 76px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 15px !important;
  background: var(--ui-paper) !important;
  color: var(--ui-ink) !important;
}
.app-shell .portal-header .avatar {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: var(--ui-soft) !important;
  color: var(--ui-green) !important;
}
.app-shell nav {
  width: min(calc(100% - 32px), 528px) !important;
  min-height: 76px !important;
  height: 76px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255, 254, 250, .98) !important;
  box-shadow: 0 8px 22px rgba(17, 48, 30, .16) !important;
}
.app-shell nav a { color: #929b94 !important; font-size: clamp(12px, 3.6vw, 14px) !important; font-weight: 500 !important; }
.app-shell nav a.on { color: var(--ui-green) !important; font-weight: 700 !important; }
.app-shell nav .nav-icon { width: 28px !important; height: 28px !important; }

/* One typographic hierarchy for headers, static pages and operational views. */
.app-shell .intro,
.app-shell .ideas-page,
.app-shell .knowledge-section,
.app-shell .warehouse-list,
.app-shell .change-history,
.app-shell .login-history,
.app-shell .parts-journal-list,
.app-shell .users-page { padding-inline: var(--ui-page) !important; }
.app-shell .intro { margin: 0 !important; padding-top: 24px !important; padding-bottom: 16px !important; }
.app-shell .intro h1,
.app-shell .ideas-hero h1,
.app-shell .inventory-history-intro h1,
.app-shell .task-title,
.app-shell .fleet-detail-head h1 {
  margin: 0 !important;
  color: var(--ui-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(29px, 8.2vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}
.app-shell .intro p,
.app-shell .ideas-hero p,
.app-shell .knowledge-card p,
.app-shell .history-event p { color: var(--ui-muted) !important; font-size: clamp(13px, 3.8vw, 16px) !important; line-height: 1.4 !important; }

/* Universal cards, rows, status chips and controls. */
.app-shell :is(.task-card, .machine-card, .warehouse-row, .knowledge-card, .idea-card, .parts-journal-entry, .change-history-item, .login-history-item, .history-event, .task-history, .task-description, .task-comments article, .fleet-detail, .task-detail) {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-paper) !important;
  box-shadow: var(--ui-shadow) !important;
}
.app-shell :is(.task-card, .machine-card, .warehouse-row, .knowledge-card, .idea-card, .parts-journal-entry, .change-history-item, .login-history-item, .history-event) { overflow: hidden !important; }
.app-shell :is(button, .primary, .block, .home-create, .home-completed, .fleet-bottom-action, .parts-comment, .parts-delete) {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: clamp(13px, 3.6vw, 16px) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}
.app-shell .primary,
.app-shell .home-create {
  background: linear-gradient(135deg, var(--ui-green), var(--ui-green-dark)) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(7, 93, 57, .19) !important;
}
.app-shell :is(button, .home-completed, .fleet-bottom-action):not(.primary):not(.home-create) {
  border-color: var(--ui-line) !important;
  background: var(--ui-panel) !important;
  color: var(--ui-green-dark) !important;
}
.app-shell .status,
.app-shell .machine-status,
.app-shell .fleet-condition,
.app-shell .idea-state {
  width: max-content !important;
  max-width: 100% !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ui-soft) !important;
  color: var(--ui-green) !important;
  font-size: clamp(10px, 2.9vw, 12px) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.app-shell .status.is-archived { background: #edf0ec !important; color: #5f6b62 !important; }
.app-shell :is(.danger, #delete-task, .parts-delete) { border-color: #efc3bd !important; background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; }

/* Work lists and detail pages align to the reference screen's compact rhythm. */
.app-shell .home-screen,
.app-shell .fleet-screen { padding: 20px var(--ui-page) 30px !important; background: var(--ui-paper) !important; }
.app-shell .home-title-row { gap: 12px !important; }
.app-shell .home-title-row > h1,
.app-shell .home-screen > h1,
.app-shell .fleet-screen > h1 { font-size: clamp(31px, 8.5vw, 43px) !important; }
.app-shell .home-summary,
.app-shell .fleet-summary { border-color: var(--ui-line) !important; background: var(--ui-panel) !important; }
.app-shell .home-feed,
.app-shell .machine-list,
.app-shell .completed-list { gap: 10px !important; }
.app-shell .task-card { padding: 14px !important; }
.app-shell .task-card-title { color: var(--ui-ink) !important; font-size: clamp(16px, 4.4vw, 19px) !important; line-height: 1.18 !important; }
.app-shell .task-card-meta,
.app-shell .machine-brand,
.app-shell .machine-meta,
.app-shell .warehouse-row small { color: var(--ui-muted) !important; font-size: clamp(11px, 3.1vw, 13px) !important; }
.app-shell .task-detail,
.app-shell .fleet-detail { margin: 0 !important; padding: 22px var(--ui-page) 30px !important; }
.app-shell .task-description { padding: 14px !important; background: var(--ui-panel) !important; box-shadow: none !important; }
.app-shell .task-description p { color: var(--ui-ink) !important; font-size: clamp(15px, 4.3vw, 18px) !important; line-height: 1.35 !important; }
.app-shell .task-history { padding: 14px !important; background: var(--ui-panel) !important; box-shadow: none !important; }

/* Owner and reference pages use the same card language. */
.app-shell .warehouse-list { display: grid !important; gap: 10px !important; padding-top: 4px !important; }
.app-shell .warehouse-list .warehouse-row { min-height: 76px !important; margin: 0 !important; padding: 14px !important; text-decoration: none !important; }
.app-shell .warehouse-list .warehouse-row b { color: var(--ui-ink) !important; font-size: clamp(17px, 4.8vw, 21px) !important; }
.app-shell .profile-actions { margin: 0 var(--ui-page) !important; padding-bottom: 20px !important; }
.app-shell .profile-actions > :is(a, button) { min-height: 56px !important; border-color: var(--ui-line) !important; border-radius: 14px !important; background: var(--ui-paper) !important; color: var(--ui-green-dark) !important; box-shadow: var(--ui-shadow) !important; }
.app-shell .knowledge-section,
.app-shell .parts-journal-list,
.app-shell .change-history,
.app-shell .login-history { display: grid !important; gap: 10px !important; padding-bottom: 24px !important; }
.app-shell .knowledge-card,
.app-shell .idea-card,
.app-shell .change-history-item,
.app-shell .login-history-item { padding: 14px !important; }
.app-shell .knowledge-card b,
.app-shell .idea-card h2,
.app-shell .change-history-item b,
.app-shell .login-history-item b { color: var(--ui-ink) !important; font-size: clamp(15px, 4.3vw, 18px) !important; }
.app-shell .ideas-page { gap: 14px !important; padding-top: 24px !important; padding-bottom: 28px !important; }

/* Secondary working routes retain the same compact hierarchy instead of
   inheriting one-off legacy layouts. */
.app-shell .completed-page { padding: 24px var(--ui-page) 28px !important; }
.app-shell .completed-page .completed-heading { display: grid !important; gap: 12px !important; margin: 0 !important; text-align: center !important; }
.app-shell .completed-page .completed-heading h1 { margin: 0 !important; color: var(--ui-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(30px, 8.6vw, 44px) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -.05em !important; }
.app-shell .completed-page .completed-heading p { max-width: 38ch !important; margin: 0 auto !important; color: var(--ui-muted) !important; font-size: clamp(14px, 4vw, 17px) !important; line-height: 1.38 !important; }
.app-shell .completed-page .completed-summary { display: flex !important; justify-content: center !important; gap: 8px !important; margin: 18px 0 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ui-green-dark) !important; font-size: clamp(15px, 4.2vw, 18px) !important; }
.app-shell .completed-page .completed-list { display: grid !important; gap: 10px !important; }
.app-shell .completed-page .completed-list .task-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; min-height: 0 !important; padding: 14px !important; text-align: left !important; }
.app-shell .completed-page .completed-list .task-card > .status { align-self: start !important; justify-self: end !important; min-width: 92px !important; padding: 8px 10px !important; text-align: center !important; white-space: normal !important; }
.app-shell .deleted-tasks-shell .tasks,
.app-shell .users-page,
.app-shell .forklifts:not(.warehouse-list) { display: grid !important; gap: 10px !important; padding: 0 var(--ui-page) 26px !important; }
.app-shell .task-row,
.app-shell .forklift-row { min-width: 0 !important; padding: 14px !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; background: var(--ui-paper) !important; box-shadow: var(--ui-shadow) !important; }
.app-shell .task-row { display: grid !important; gap: 7px !important; }
.app-shell .task-row b { color: var(--ui-ink) !important; font-size: clamp(16px, 4.5vw, 19px) !important; line-height: 1.2 !important; }
.app-shell .task-row small { color: var(--ui-muted) !important; font-size: clamp(11px, 3.2vw, 13px) !important; }
.app-shell .user-actions { margin-top: 4px !important; }
.app-shell .inventory-history-list { display: grid !important; gap: 10px !important; padding: 4px var(--ui-page) 18px !important; }
.app-shell .inventory-history-event { padding: 14px !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; background: var(--ui-paper) !important; box-shadow: var(--ui-shadow) !important; }
.app-shell .inventory-history-event > header { align-items: start !important; }
.app-shell .inventory-history-event header time,
.app-shell .inventory-history-event > p,
.app-shell .inventory-history-event small { color: var(--ui-muted) !important; }
.app-shell .inventory-history-back { margin: 0 !important; padding: 0 var(--ui-page) 20px !important; }
.app-shell .inventory-history-back a { color: var(--ui-green) !important; font-weight: 750 !important; }
.app-shell.empty-shell .empty { display: grid !important; justify-items: start !important; gap: 12px !important; min-height: calc(100dvh - 186px) !important; padding: clamp(32px, 10vw, 64px) var(--ui-page) !important; background: linear-gradient(145deg, #f4f8f2 0%, var(--ui-paper) 50%) !important; }
.app-shell.empty-shell .empty h1 { margin: 0 !important; color: var(--ui-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(30px, 8.2vw, 42px) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: -.05em !important; }
.app-shell.empty-shell .empty p { max-width: 34ch !important; margin: 0 !important; color: var(--ui-muted) !important; line-height: 1.4 !important; }
.app-shell.empty-shell .empty .primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 168px !important; padding: 10px 16px !important; text-decoration: none !important; }

/* Login is a portal screen too: it uses the exact same paper, green and form language. */
.app-shell.login { justify-content: center !important; gap: 20px !important; padding: 0 var(--ui-page) calc(110px + env(safe-area-inset-bottom)) !important; background: var(--ui-paper) !important; }
.app-shell.login .portal-header { width: calc(100% + (var(--ui-page) * 2)) !important; margin-inline: calc(var(--ui-page) * -1) !important; }
.app-shell.login .login-card { width: 100% !important; margin: 0 auto !important; border: 1px solid var(--ui-line) !important; border-radius: 20px !important; background: var(--ui-panel) !important; box-shadow: var(--ui-shadow) !important; }
.app-shell.login .login-card form { padding: 20px !important; }
.app-shell.login .login-field input { min-height: 52px !important; height: 52px !important; border-color: #c8d7c9 !important; border-radius: 13px !important; color: var(--ui-ink) !important; font-size: 16px !important; }
.app-shell.login .login-submit { min-height: 52px !important; height: 52px !important; margin-top: 10px !important; border-radius: 14px !important; font-size: 16px !important; }

/* All modal forms use the same operational surface. */
dialog { width: min(calc(100% - 24px), 520px) !important; max-height: calc(100dvh - 24px) !important; border: 0 !important; border-radius: 22px !important; background: var(--ui-paper) !important; box-shadow: 0 24px 56px rgba(10, 34, 20, .25) !important; }
dialog::backdrop { background: rgba(17, 32, 25, .48) !important; }
dialog form { display: grid !important; gap: 12px !important; max-height: calc(100dvh - 24px) !important; padding: 20px !important; overflow: auto !important; }
dialog .sheet-head h1 { font-family: Georgia, "Times New Roman", serif !important; color: var(--ui-ink) !important; font-size: clamp(26px, 7.5vw, 34px) !important; }
dialog :is(input, select, textarea) { border-color: #c8d7c9 !important; border-radius: 13px !important; background: #fbfcf8 !important; color: var(--ui-ink) !important; }
dialog .sheet-close { width: 44px !important; min-height: 44px !important; border-radius: 14px !important; background: var(--ui-soft) !important; color: var(--ui-green-dark) !important; }

@media (max-width: 374px) {
  .app-shell .portal-header { min-height: 68px !important; padding-inline: 14px !important; }
  .app-shell .portal-header .brand { font-size: clamp(19px, 5.6vw, 22px) !important; }
  .app-shell .portal-header .language-trigger { min-width: 62px !important; padding-inline: 7px !important; }
  .app-shell .portal-header .avatar { width: 44px !important; height: 44px !important; min-height: 44px !important; }
  .app-shell .task-detail,
  .app-shell .fleet-detail { padding-inline: 16px !important; }
}

/* Inventory catalogue: keep catalogue-specific cards above broad portal resets. */
.app-shell.catalogue-shell { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; }
.app-shell.catalogue-shell .catalogue-intro { display: grid !important; gap: 14px !important; padding: 24px var(--ui-page) 16px !important; }
.app-shell.catalogue-shell .catalogue-intro h1 { font-size: clamp(30px, 8.2vw, 42px) !important; }
.app-shell.catalogue-shell .catalogue-actions,
.app-shell.catalogue-shell .catalogue-detail-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.app-shell.catalogue-shell .catalogue-actions > *,
.app-shell.catalogue-shell .catalogue-detail-actions > * { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 13px !important; border: 1px solid var(--ui-line) !important; border-radius: 11px !important; background: var(--ui-soft) !important; color: var(--ui-green-dark) !important; font-size: 13px !important; font-weight: 750 !important; text-decoration: none !important; }
.app-shell.catalogue-shell .catalogue-actions .primary,
.app-shell.catalogue-shell .catalogue-detail-actions .primary { border-color: var(--ui-green) !important; background: var(--ui-green) !important; color: #fff !important; }
.app-shell.catalogue-shell .catalogue-detail-actions .danger { border-color: #e5beb9 !important; background: #fff0ee !important; color: #b43d2f !important; }
.app-shell.catalogue-shell .catalogue-list-wrap,
.app-shell.catalogue-shell .catalogue-detail { display: grid !important; gap: 12px !important; padding: 0 var(--ui-page) 28px !important; }
.app-shell.catalogue-shell .catalogue-search { display: grid !important; gap: 6px !important; margin: 0 !important; color: var(--ui-ink) !important; font-size: 13px !important; font-weight: 750 !important; }
.app-shell.catalogue-shell .catalogue-search input { min-height: 44px !important; padding: 0 12px !important; border: 1px solid var(--ui-line) !important; border-radius: 11px !important; background: #fffdfa !important; color: var(--ui-ink) !important; }
.app-shell.catalogue-shell .catalogue-list { display: grid !important; gap: 10px !important; }
.app-shell.catalogue-shell .catalogue-card { display: block !important; padding: 14px !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; background: var(--ui-paper) !important; box-shadow: var(--ui-shadow) !important; color: var(--ui-ink) !important; text-decoration: none !important; }
.app-shell.catalogue-shell .catalogue-card h2 { margin: 0 0 10px !important; color: var(--ui-ink) !important; font-family: inherit !important; font-size: 18px !important; font-weight: 750 !important; line-height: 1.22 !important; letter-spacing: 0 !important; }
.app-shell.catalogue-shell .catalogue-card dl { display: grid !important; gap: 6px !important; margin: 0 !important; }
.app-shell.catalogue-shell .catalogue-card dl > div { display: grid !important; grid-template-columns: 116px minmax(0, 1fr) !important; gap: 9px !important; }
.app-shell.catalogue-shell .catalogue-card dt { color: var(--ui-muted) !important; font-size: 12px !important; font-weight: 700 !important; }
.app-shell.catalogue-shell .catalogue-card dd { margin: 0 !important; color: var(--ui-ink) !important; font-size: 13px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; }
.app-shell.catalogue-shell .catalogue-assigned { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--ui-line) !important; }
.app-shell.catalogue-shell .catalogue-assigned p,
.app-shell.catalogue-shell .catalogue-back a { color: var(--ui-muted) !important; text-decoration: none !important; }
@media (min-width: 700px) { .app-shell.catalogue-shell .catalogue-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Catalogue editor has no files: keep the form short and operational. */
dialog.catalogue-sheet { width: min(calc(100% - 24px), 560px) !important; }
dialog.catalogue-sheet form { gap: 14px !important; padding: 18px !important; }
dialog.catalogue-sheet .sheet-head h1 { font-size: clamp(28px, 7.4vw, 36px) !important; letter-spacing: -.04em !important; }
dialog.catalogue-sheet .sheet-head { align-items: start !important; }
dialog.catalogue-sheet .catalogue-warehouses { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 12px !important; border: 1px solid var(--ui-line) !important; border-radius: 13px !important; }
dialog.catalogue-sheet .catalogue-warehouses legend { padding: 0 5px !important; color: var(--ui-ink) !important; font-size: 14px !important; font-weight: 750 !important; }
dialog.catalogue-sheet .catalogue-warehouses label { display: flex !important; align-items: center !important; gap: 9px !important; margin: 0 !important; color: var(--ui-ink) !important; font-size: 14px !important; font-weight: 700 !important; }
dialog.catalogue-sheet .catalogue-warehouses input[type="checkbox"] { flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; accent-color: var(--ui-green) !important; }
dialog.catalogue-sheet .catalogue-mysklad { padding: 12px 0 !important; border-top: 1px solid var(--ui-line) !important; border-bottom: 1px solid var(--ui-line) !important; }
dialog.catalogue-sheet .catalogue-mysklad summary { color: var(--ui-green-dark) !important; font-weight: 750 !important; cursor: pointer !important; }
dialog.catalogue-sheet .catalogue-mysklad summary small { color: var(--ui-muted) !important; font-weight: 500 !important; }
dialog.catalogue-sheet .catalogue-mysklad label { display: grid !important; gap: 5px !important; margin-top: 12px !important; }
dialog.catalogue-sheet .catalogue-note { margin: 0 !important; color: var(--ui-muted) !important; font-size: 12px !important; line-height: 1.4 !important; }
/* Inventory row: keep the update action compact while making the last update legible. */
.inventory-shell .inventory-meta-separator {
  display:inline-block!important;
  padding:0 5px!important;
  color:#89928b!important;
}
.inventory-shell .inventory-counted-at {
  display:inline-flex!important;
  align-items:center!important;
  padding:2px 6px!important;
  border-radius:999px!important;
  background:#edf3ee!important;
  color:#66756a!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.15!important;
  font-variant-numeric:tabular-nums!important;
}
.inventory-shell .inventory-update-button {
  gap:1px!important;
  text-align:center!important;
}
.inventory-shell .inventory-update-button span:first-child {
  display:block!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.045em!important;
}
.inventory-shell .inventory-update-button span:last-child {
  display:block!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1!important;
}

/* Consolidated operational pages: these rules deliberately use the same
   components as tasks and equipment, rather than their former page-specific
   action styles. */
.app-shell .profile-hero,.app-shell .profile-panel,.app-shell .warehouses-intro{padding-inline:var(--ui-page)!important}
.app-shell .profile-hero{padding-top:24px!important;padding-bottom:12px!important;border-bottom:1px solid var(--ui-line)!important}
.app-shell .profile-hero h1{margin:0!important;color:var(--ui-ink)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(32px,9vw,46px)!important;font-weight:500!important;line-height:1.05!important;letter-spacing:-.05em!important}
.app-shell .profile-hero p{margin:7px 0 0!important;color:var(--ui-muted)!important;font-size:clamp(15px,4vw,18px)!important}
.app-shell .profile-panel{display:grid!important;gap:16px!important;padding-top:16px!important;padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
.app-shell .profile-panel section{display:grid!important;gap:8px!important}
.app-shell .profile-panel h2{margin:0!important;color:var(--ui-muted)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.05em!important;text-transform:uppercase!important}
.app-shell .profile-panel-link{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:64px!important;padding:13px 14px!important;border:1px solid var(--ui-line)!important;border-radius:16px!important;background:var(--ui-paper)!important;box-shadow:var(--ui-shadow)!important;color:var(--ui-green-dark)!important;text-decoration:none!important}
.app-shell .profile-panel-link span{display:grid!important;gap:3px!important;min-width:0!important}.app-shell .profile-panel-link b{font-size:clamp(16px,4.4vw,19px)!important;line-height:1.15!important}.app-shell .profile-panel-link small{color:var(--ui-muted)!important;font-size:clamp(12px,3.3vw,14px)!important;line-height:1.25!important}.app-shell .profile-panel-link i{font-size:24px!important;font-style:normal!important}.app-shell .profile-logout{width:100%!important;margin-top:4px!important}
.app-shell .professional-warehouse-list{display:grid!important;gap:10px!important;padding:10px var(--ui-page) calc(110px + env(safe-area-inset-bottom))!important}
.app-shell .professional-warehouse-list .warehouse-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;gap:12px!important;min-height:78px!important;margin:0!important;padding:14px!important;border:1px solid var(--ui-line)!important;border-radius:18px!important;background:var(--ui-paper)!important;box-shadow:var(--ui-shadow)!important;color:var(--ui-ink)!important;text-decoration:none!important}
.app-shell .professional-warehouse-list .warehouse-row span{display:grid!important;gap:4px!important;min-width:0!important}.app-shell .professional-warehouse-list .warehouse-row b{font-size:clamp(18px,5vw,23px)!important;line-height:1.14!important}.app-shell .professional-warehouse-list .warehouse-row small{max-width:none!important;color:var(--ui-muted)!important;font-size:clamp(12px,3.4vw,14px)!important;text-align:left!important}.app-shell .professional-warehouse-list .warehouse-row strong{max-width:104px!important;color:var(--ui-green)!important;font-size:clamp(12px,3.4vw,15px)!important;line-height:1.15!important;text-align:right!important}.app-shell .professional-warehouse-list .warehouse-row i{color:var(--ui-green)!important;font-size:24px!important;font-style:normal!important}
.app-shell .home-scope{margin:0 0 10px!important;color:var(--ui-muted)!important;font-size:14px!important}.app-shell .home-scope a{color:var(--ui-green)!important;font-weight:750!important;text-decoration:none!important}
@media(max-width:374px){.app-shell .professional-warehouse-list .warehouse-row{grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}.app-shell .professional-warehouse-list .warehouse-row strong{grid-column:1/2;max-width:none!important;text-align:left!important}.app-shell .professional-warehouse-list .warehouse-row i{grid-column:2;grid-row:1/3}.app-shell .profile-panel{gap:14px!important}}

/* Commercial portal final system: shared actions, compact responsive cards. */
.app-shell{--commercial-green:#07663d;--commercial-pale:#f4f8f2;--commercial-border:#d4e1d5;--commercial-red:#b93b35}
.app-shell .action-primary,.app-shell .action-secondary,.app-shell .action-danger{min-height:44px!important;box-sizing:border-box!important;border-radius:18px!important;padding:10px 14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font:800 clamp(14px,3.8vw,18px)/1.15 Arial,sans-serif!important;text-align:center!important;text-decoration:none!important;box-shadow:none!important}
.app-shell .action-primary{background:var(--commercial-green)!important;color:#fff!important;border:1px solid var(--commercial-green)!important}.app-shell .action-secondary{background:var(--commercial-pale)!important;color:#075e38!important;border:1px solid var(--commercial-border)!important}.app-shell .action-danger{background:#fff2f0!important;color:var(--commercial-red)!important;border:1px solid #edb7b1!important}
.app-shell .action-primary:focus-visible,.app-shell .action-secondary:focus-visible,.app-shell .action-danger:focus-visible,.app-shell .machine-card:focus-visible,.app-shell .user-summary-card:focus-visible{outline:3px solid #2d8dff!important;outline-offset:2px!important}

/* Compatibility mapping for older route renderers.  All remaining actions use
   the same three visual types while their permissions and event handlers stay
   untouched. */
.app-shell .primary{min-height:44px!important;box-sizing:border-box!important;border:1px solid var(--commercial-green)!important;border-radius:18px!important;background:var(--commercial-green)!important;color:#fff!important;padding:10px 14px!important;font:800 clamp(14px,3.8vw,18px)/1.15 Arial,sans-serif!important;text-align:center!important;box-shadow:none!important}
.app-shell :is(.block,.task-actions>button:not(.primary):not(.action-primary):not(.action-danger),.equipment-actions>button:not(.primary):not(.action-primary):not(.action-danger)){min-height:44px!important;box-sizing:border-box!important;border:1px solid var(--commercial-border)!important;border-radius:18px!important;background:var(--commercial-pale)!important;color:#075e38!important;padding:10px 14px!important;font:800 clamp(14px,3.8vw,18px)/1.15 Arial,sans-serif!important;text-align:center!important;box-shadow:none!important}
.app-shell :is(#delete-task,#purge-portal-task,#delete-forklift,#logout){border-color:#edb7b1!important;background:#fff2f0!important;color:var(--commercial-red)!important}
.app-shell .primary:focus-visible,.app-shell .block:focus-visible,.app-shell .task-actions>button:focus-visible,.app-shell .equipment-actions>button:focus-visible{outline:3px solid #2d8dff!important;outline-offset:2px!important}
.app-shell .users-intro,.app-shell .user-detail-intro{padding:clamp(14px,4vw,28px)!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:12px!important}.app-shell .users-intro>div{min-width:0}.app-shell .users-intro p,.app-shell .user-detail-intro p{margin:6px 0 0!important;color:#687568!important;font:500 clamp(13px,3.4vw,16px)/1.35 Arial,sans-serif!important}.app-shell .users-list{display:grid!important;gap:8px!important;padding:0 clamp(10px,3vw,22px) calc(108px + env(safe-area-inset-bottom))!important}.app-shell .user-summary-card{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:14px!important;border:1px solid var(--commercial-border)!important;border-radius:18px!important;background:#fffefa!important;color:#13281d!important;text-decoration:none!important}.app-shell .user-summary-card span{display:grid!important;gap:4px!important;min-width:0}.app-shell .user-summary-card b{font:800 clamp(17px,4.7vw,24px)/1.1 Arial,sans-serif!important}.app-shell .user-summary-card small{font:500 clamp(12px,3.3vw,15px)/1.25 Arial,sans-serif!important;color:#687786!important}.app-shell .user-summary-card i,.app-shell .machine-arrow{font-style:normal!important;color:var(--commercial-green)!important;font-size:26px!important;flex:none!important}
.app-shell .user-detail-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:0 clamp(10px,3vw,22px) calc(108px + env(safe-area-inset-bottom))!important}.app-shell .user-access-card,.app-shell .user-change-log{border:1px solid var(--commercial-border)!important;border-radius:18px!important;background:#fffefa!important;padding:14px!important}.app-shell .user-access-card h2,.app-shell .user-change-log h2{margin:0 0 12px!important;font:800 clamp(19px,5vw,26px)/1.1 Arial,sans-serif!important}.app-shell .user-access-card dl{margin:0!important;display:grid!important;gap:9px!important}.app-shell .user-access-card dl div{display:grid!important;gap:2px!important}.app-shell .user-access-card dt{font-weight:700!important;color:#687568!important}.app-shell .user-access-card dd{margin:0!important;font-weight:700!important}.app-shell .user-detail-actions{display:grid!important;gap:8px!important;margin-top:14px!important}.app-shell .user-detail-actions>*{width:100%!important}.app-shell .user-change-log>div{display:grid!important;gap:3px!important;padding:10px 0!important;border-top:1px solid #e5ece5!important}.app-shell .user-change-log small{color:#687568!important}.app-shell .back-link{font:800 15px Arial,sans-serif!important;color:var(--commercial-green)!important;text-decoration:none!important}
.sheet .user-warehouse-select{border:1px solid var(--commercial-border)!important;border-radius:14px!important;padding:10px!important;display:grid!important;gap:8px!important}.sheet .user-warehouse-select label,.sheet .equipment-access-toggle{display:flex!important;align-items:flex-start!important;gap:8px!important}.sheet .equipment-access-toggle span{display:grid!important;gap:2px!important}.sheet .equipment-access-toggle small{color:#687568!important}
.app-shell .equipment-shell{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important}.app-shell .equipment-top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px clamp(10px,3vw,22px)!important}.app-shell .equipment-top-actions>*{width:100%!important}.app-shell .equipment-bottom-actions{padding:10px clamp(10px,3vw,22px)!important}.app-shell .equipment-bottom-actions>*{width:100%!important}.app-shell .equipment-list{display:grid!important;gap:7px!important;padding:0 clamp(10px,3vw,22px)!important}.app-shell .machine-card{min-height:0!important;display:grid!important;grid-template-columns:64px minmax(0,1fr) 22px!important;align-items:center!important;gap:10px!important;padding:10px!important;border:1px solid #b8d7c1!important;border-radius:17px!important;background:#fbfef9!important;color:#142a1e!important;text-decoration:none!important;box-shadow:0 5px 16px rgba(15,78,44,.07)!important;transition:transform .15s ease,background .15s ease!important}.app-shell .machine-card:active{transform:scale(.985)!important;background:#edf7ef!important}.app-shell .machine-image{width:64px!important;height:64px!important;border-radius:13px!important;overflow:hidden!important;display:grid!important;place-items:center!important;background:#e6f1e8!important}.app-shell .machine-image>*{width:100%!important;height:100%!important;object-fit:cover!important}.app-shell .machine-info{min-width:0!important;display:grid!important;gap:3px!important}.app-shell .machine-info>strong{font:800 clamp(15px,4.3vw,21px)/1.12 Arial,sans-serif!important;overflow-wrap:anywhere!important}.app-shell .machine-info>small{font:700 clamp(12px,3.2vw,15px)/1.2 Arial,sans-serif!important;color:#647267!important}.app-shell .machine-card-meta{display:flex!important;gap:6px 10px!important;flex-wrap:wrap!important}.app-shell .machine-card-meta b,.app-shell .insurance{font:700 clamp(11px,3vw,14px)/1.15 Arial,sans-serif!important;color:#526557!important}.app-shell .machine-work-state{color:#087044!important}.app-shell .insurance{font-style:normal!important}.app-shell .insurance.warning{color:#a85e05!important}.app-shell .insurance.danger{color:#bd3530!important}.app-shell .insurance.ok{color:#087044!important}
@media (max-width:340px){.app-shell .users-intro{align-items:stretch!important;flex-direction:column!important}.app-shell .equipment-top-actions{grid-template-columns:1fr!important}.app-shell .machine-card{grid-template-columns:54px minmax(0,1fr) 18px!important;padding:8px!important}.app-shell .machine-image{width:54px!important;height:54px!important}.app-shell .action-primary,.app-shell .action-secondary,.app-shell .action-danger{font-size:14px!important;padding-inline:9px!important}}
@media (min-width:720px){.app-shell .users-list,.app-shell .user-detail-grid,.app-shell .equipment-list{max-width:920px!important;margin-inline:auto!important}.app-shell .users-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}.app-shell .user-detail-grid{grid-template-columns:1.2fr .8fr!important}.app-shell .equipment-top-actions,.app-shell .equipment-bottom-actions{max-width:920px!important;margin-inline:auto!important}}