/* ERP shared design layer (forms, touch targets, feedback, themes). Loaded on every page: the compiled screens and the server-rendered ones.
 * It only restyles what already exists (no markup is rewritten), so every module follows the same rules without being rebuilt by hand.
 * Behaviour that goes with it: assets/ui/erp-forms.js. Light is the default page theme; the sidebar's Theme button switches the page too. */
:root { --erp-touch: 44px; --erp-invalid: #dc2626; --erp-valid: #16a34a; }

/* ---- 1. readable, never wider than the screen ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
:where(p, li, td, th, h1, h2, h3, h4, label, .t) { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---- 2. touch targets: 44 x 44 on phones, tablets and any touch screen ---- */
@media (max-width: 900px), (pointer: coarse) {
  /* min-height only ever makes a control taller, so it is forced over page rules that set 30-40px */
  button, [role=button], input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select, summary, a.btn, .btn, [class*="btn-"], a[class*="-btn"] { min-height: var(--erp-touch) !important; }
  .erp-rail-search { min-width: var(--erp-touch) !important; }
  /* icon-only links (the Download / View icons in the compiled tables) were 12-28 px; give them a 44 px target without changing the icon */
  a:has(> svg:only-child):not(:where(.erp-nav *, .erp-nowide)) { display: inline-flex; align-items: center; justify-content: center; min-width: var(--erp-touch); min-height: var(--erp-touch); box-sizing: border-box; }
  .erp-nav a, .erp-nav button, .erp-nav input, .erp-rf-dot, .panel-nav a, .panel-dropdown a, .panel-dropdown button { min-height: var(--erp-touch) !important; }
  .erp-nav a { display: flex; align-items: center; }
  nav a, [role=tab], [role=menuitem], td > a, th > a { min-height: var(--erp-touch); display: inline-flex; align-items: center; }
  :where(button, [role=button], a.btn, .btn):not(:where(.erp-nav *, .erp-nowide)) { min-width: var(--erp-touch); }
  :where(input[type=checkbox], input[type=radio]) { width: 22px; height: 22px; flex: 0 0 auto; }
  :where(label):has(> input[type=checkbox], > input[type=radio]), .chk { min-height: var(--erp-touch); display: flex; align-items: center; gap: 10px; }
  :where(td, th) > a:only-child, :where(nav, .tabs, .pxnav) a { min-height: var(--erp-touch); display: inline-flex; align-items: center; }
  /* 16px text in a field stops iPhones zooming the page when it gets focus */
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px; }
  /* the People Suite / Transport stylesheets set their own sizes with class selectors, so the touch sizes are repeated for them */
  .btn, .btn.sm, .px .btn, .modal .btn, .tabs button, .px select, .px textarea, .px input:not([type=checkbox]):not([type=radio]) { min-height: var(--erp-touch); }
  .px :is(input:not([type=checkbox]):not([type=radio]), select, textarea), .modal :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  .px .chk input, .modal .chk input { width: 22px; height: 22px; }
  .px .stars button { min-width: var(--erp-touch); min-height: var(--erp-touch); }
  /* modals become full-width sheets with the action bar always in reach */
  .modal-box, [role=dialog] > div { max-width: 100%; }
  .modal { padding: 8px; }
  .modal-box .bar:last-child, .modal-box form > .bar { position: sticky; bottom: -18px; background: inherit; padding: 10px 0 4px; z-index: 2; }
}
@media (max-width: 480px) { .modal-box { border-radius: 14px; padding: 14px; } .bar > .btn:not(.grow), .bar > button:not(.grow) { flex: 1 1 42%; } }

/* ---- 3. fields: required marker, invalid / valid state, inline message ---- */
.erp-req::after { content: " *"; color: var(--erp-invalid); font-weight: 700; }
:where(input, select, textarea).erp-invalid { border-color: var(--erp-invalid) !important; box-shadow: 0 0 0 1px var(--erp-invalid); }
:where(input, select, textarea).erp-valid:not(:placeholder-shown) { border-color: var(--erp-valid); }
.erp-fe { color: var(--erp-invalid); font-size: 12px; line-height: 16px; margin-top: 3px; display: flex; gap: 4px; align-items: flex-start; }
.erp-fe::before { content: "!"; flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--erp-invalid); color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 14px; margin-top: 1px; }
:where(input, select, textarea):disabled { cursor: not-allowed; opacity: .65; }
:where(input, select, textarea, button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--erp-primary, #4f46e5); outline-offset: 2px; }

/* ---- 4. busy buttons / forms (double-click protection) ---- */
.erp-busy { pointer-events: none; opacity: .7; position: relative; }
button.erp-busy::after, .btn.erp-busy::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: erp-spin .7s linear infinite; vertical-align: -2px; }
@keyframes erp-spin { to { transform: rotate(360deg); } }
#erp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--erp-primary, #4f46e5); z-index: 100000; transition: width .25s ease, opacity .3s; opacity: 0; pointer-events: none; }
#erp-progress.on { opacity: 1; width: 70%; transition: width 6s cubic-bezier(.1, .8, .2, 1); } #erp-progress.done { width: 100%; opacity: 0; transition: width .15s, opacity .35s .15s; }

/* ---- 5. notifications ---- */
#erp-toasts { position: fixed; z-index: 100001; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.erp-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: #0f172a; color: #fff; border-left: 5px solid #64748b; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); animation: erp-in .18s ease-out; }
.erp-toast.ok { border-left-color: #22c55e; } .erp-toast.err { border-left-color: #ef4444; } .erp-toast.warn { border-left-color: #f59e0b; }
.erp-toast button { margin-left: auto; background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; min-width: var(--erp-touch); min-height: var(--erp-touch); margin-top: -10px; margin-right: -10px; }
@keyframes erp-in { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 600px) { #erp-toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
#erp-offline { position: fixed; z-index: 100002; left: 0; right: 0; top: 0; background: #b45309; color: #fff; text-align: center; padding: 8px 12px; font-size: 14px; }

/* ---- 6. drag-and-drop file fields ---- */
.erp-drop { border: 2px dashed #94a3b8 !important; border-radius: 12px; padding: 12px; transition: background .15s, border-color .15s; }
.erp-drop.erp-over { border-color: var(--erp-primary, #4f46e5) !important; background: rgba(79, 70, 229, .08); }
.erp-drop[data-erp-file]::after { content: "Selected: " attr(data-erp-file); display: block; margin-top: 6px; font-size: 13px; color: var(--erp-valid); font-weight: 600; }
.erp-drop-hint { font-size: 12px; color: var(--erp-muted, #64748b); margin-top: 4px; }

/* ---- 7. searchable long dropdowns (server-rendered pages) ---- */
.erp-sfind { margin-bottom: 4px; }

/* ---- 8. dark theme for the server-rendered screens (the sidebar's Theme button; the compiled screens follow once they are rebuilt, see the audit report) ---- */
html[data-erp-page-theme=dark] { color-scheme: dark; --erp-ink: #e2e8f0; --erp-text: #cbd5e1; --erp-muted: #94a3b8; --erp-line: #334155; --erp-line-soft: #1e293b; --erp-bg: #0b1220; --erp-surface: #111a2e; --panel: #111a2e; --ink: #e2e8f0; --muted: #94a3b8; --border: #334155; }
html[data-erp-page-theme=dark] body:has(.panel-shell), html[data-erp-page-theme=dark] body.erp-page { background: var(--erp-bg); color: var(--erp-ink); }
html[data-erp-page-theme=dark] :is(.px, .modal-box, .panel-main) :is(input, select, textarea) { background: #0b1220; color: #e2e8f0; border-color: #475569; }
html[data-erp-page-theme=dark] :is(.px label, .modal-box label) { color: #cbd5e1; }
html[data-erp-page-theme=dark] :is(.px .card, .modal-box, .tile, .hd-doc, .notice, .pax, .cal .day, .org .node, .pipe .cand, .px table) { background: #111a2e; color: #e2e8f0; border-color: #334155; }
html[data-erp-page-theme=dark] .btn.alt { background: #1e293b; color: #e2e8f0; border-color: #475569; }
html[data-erp-page-theme=dark] :is(.px td, .px th) { border-color: #334155; }
html[data-erp-page-theme=dark] .tile.hl { background: #3b2f0b; border-color: #92400e; } html[data-erp-page-theme=dark] .tile.good { background: #052e1a; border-color: #166534; } html[data-erp-page-theme=dark] .tile.bad { background: #3b0d0d; }
html[data-erp-page-theme=dark] .note { background: #1e293b; color: #e2e8f0; border-color: #334155; } html[data-erp-page-theme=dark] .note.warn { background: #3b2f0b; color: #fcd34d; } html[data-erp-page-theme=dark] .note.bad { background: #3b0d0d; color: #fca5a5; }
html[data-erp-page-theme=dark] .st { background: #334155; color: #e2e8f0; } html[data-erp-page-theme=dark] .st.ok { background: #14532d; color: #bbf7d0; } html[data-erp-page-theme=dark] .st.warn { background: #713f12; color: #fde68a; } html[data-erp-page-theme=dark] .st.fail { background: #7f1d1d; color: #fecaca; } html[data-erp-page-theme=dark] .st.info { background: #312e81; color: #c7d2fe; }
html[data-erp-page-theme=dark] .hd-find ul { background: #111a2e; } html[data-erp-page-theme=dark] .hd-chip { background: #312e81; color: #c7d2fe; } html[data-erp-page-theme=dark] .hd-lock { background: #713f12; color: #fde68a; }
html[data-erp-page-theme=dark] .erp-toast { background: #1e293b; }
.erp-drop::before { content: "You can also drag and drop a file here"; display: block; font-size: 12px; color: var(--erp-muted, #64748b); margin-bottom: 6px; }
.erp-fe-float { position: absolute; z-index: 100000; background: #fff; color: var(--erp-invalid); border: 1px solid var(--erp-invalid); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); max-width: 320px; pointer-events: none; }
html[data-erp-page-theme=dark] .erp-fe-float { background: #1e293b; }
.erp-sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }