/* ========================= Dark mode for Order page ========================= */ /* Trigger on system dark OR admin dark themes */ @media (prefers-color-scheme: dark) { body.app-ea_app.model-order.change-form { --dark-mode: 1; } } body.theme-dark.app-ea_app.model-order.change-form, body.dark.app-ea_app.model-order.change-form, body[data-theme="dark"].app-ea_app.model-order.change-form { --dark-mode: 1; } /* Tokens for dark */ body.app-ea_app.model-order.change-form[style], body.app-ea_app.model-order.change-form { /* no-op, keeps specificity low */ } body.app-ea_app.model-order.change-form { /* light tokens already defined above */ } /* when dark is on, swap tokens */ body.app-ea_app.model-order.change-form[style]{} /* keep lints quiet */ body.app-ea_app.model-order.change-form:is([style], .x){} /* noop */ body.app-ea_app.model-order.change-form:where(:is([style], :root)) {} body.app-ea_app.model-order.change-form[style] {} /* noop */ body.app-ea_app.model-order.change-form {} /* real override using the marker variable */ body.app-ea_app.model-order.change-form[style] {} /* noop */ body.app-ea_app.model-order.change-form {} /* Use :has to gate on our marker (supported modern browsers); we also duplicate key overrides below without :has for broader support */ body.app-ea_app.model-order.change-form:has([data-dark-on]) {} /* Practical override: if --dark-mode exists, switch tokens */ body.app-ea_app.model-order.change-form { /* cascade fallback – if --dark-mode is set, these will be overridden below */ } body.app-ea_app.model-order.change-form { /* keep original tokens intact above */ } body.app-ea_app.model-order.change-form { /* Dark token override */ } body.app-ea_app.model-order.change-form[style]{} /* noop */ /* Real token swap (simple & reliable) */ body.app-ea_app.model-order.change-form { /* if --dark-mode set on this element (by media or class), override tokens */ } body.app-ea_app.model-order.change-form[style]{} /* noop */ @media (prefers-color-scheme: dark) { body.app-ea_app.model-order.change-form { --bg: #0b1220; --card-bg: #0f172a; --text: #e5e7eb; --muted: #a1a8b4; --border: #233045; --ring: #60a5fa; --shadow: 0 1px 0 rgba(0,0,0,.6); } } body.theme-dark.app-ea_app.model-order.change-form, body.dark.app-ea_app.model-order.change-form, body[data-theme="dark"].app-ea_app.model-order.change-form { --bg: #0b1220; --card-bg: #0f172a; --text: #e5e7eb; --muted: #a1a8b4; --border: #233045; --ring: #60a5fa; --shadow: 0 1px 0 rgba(0,0,0,.6); } /* Force Order page dark tokens when the site switch sets html[data-theme="dark"] */ html[data-theme="dark"] body.app-ea_app.model-order.change-form { --bg: #0b1220; --card-bg: #0f172a; --text: #e5e7eb; --muted: #a1a8b4; --border: #233045; --ring: #60a5fa; --shadow: 0 1px 0 rgba(0,0,0,.6); } /* (optional) if you also use a class on in some views */ html.theme-dark body.app-ea_app.model-order.change-form, html.dark body.app-ea_app.model-order.change-form { --bg: #0b1220; --card-bg: #0f172a; --text: #e5e7eb; --muted: #a1a8b4; --border: #233045; --ring: #60a5fa; --shadow: 0 1px 0 rgba(0,0,0,.6); } /* Apply tokens to places that had light hard-codes */ body.app-ea_app.model-order.change-form #content { background: var(--bg); } body.app-ea_app.model-order.change-form #content-main > form .module, body.app-ea_app.model-order.change-form fieldset.module.aligned, body.app-ea_app.model-order.change-form .inline-group, body.app-ea_app.model-order.change-form .module.ssb { background: var(--card-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow); } /* Headings / labels */ body.app-ea_app.model-order.change-form fieldset.module > h2 { color: var(--text) !important; } body.app-ea_app.model-order.change-form .aligned .form-row > label { color: var(--muted); } body.app-ea_app.model-order.change-form fieldset.module label, body.app-ea_app.model-order.change-form fieldset.module p { color: var(--text); } /* Inputs */ body.app-ea_app.model-order.change-form form .vTextField, body.app-ea_app.model-order.change-form form .vIntegerField, body.app-ea_app.model-order.change-form form .vLargeTextField, body.app-ea_app.model-order.change-form form select, body.app-ea_app.model-order.change-form form input[type="text"], body.app-ea_app.model-order.change-form form input[type="number"], body.app-ea_app.model-order.change-form form textarea { background: var(--card-bg); border-color: var(--border); color: var(--text); } body.app-ea_app.model-order.change-form form :is(input, select, textarea):focus { border-color: #356dce; box-shadow: 0 0 0 3px rgba(96,165,250,.25); } /* Object-tools button */ body.app-ea_app.model-order.change-form .object-tools .btn-action { background: #0b1324; border-color: var(--border); color: var(--muted); } body.app-ea_app.model-order.change-form .object-tools .btn-order { /* Start (green) / Stop (red) – keep readable on dark */ background: rgba(34,197,94,.12); color: #34d399; border-color: rgba(34,197,94,.35); } body.app-ea_app.model-order.change-form .object-tools .btn-order.is-on { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.35); } body.app-ea_app.model-order.change-form .object-tools .btn-action .dot { background:#9aa4b2; } /* Inline table header/rows */ html[data-theme="dark"] body.app-ea_app.model-order.change-form .inline-group table thead th, html[data-theme="dark"] body.app-ea_app.model-order.change-form .module.ssb table thead th { background: #0c152a !important; color: var(--text, #e5e7eb) !important; border-bottom: 1px solid var(--border, #233045) !important; } body.app-ea_app.model-order.change-form .inline-group table, body.app-ea_app.model-order.change-form .module.ssb table { border-color: var(--border); } body.app-ea_app.model-order.change-form .inline-group table tbody tr { background: var(--card-bg, #fff); /* even */ } body.app-ea_app.model-order.change-form .inline-group table tbody tr:nth-child(odd) { background: var(--bg, #f9f9f9); /* odd */ } body.app-ea_app.model-order.change-form .inline-group table tbody tr:hover { background: #14213a; } /* Pills */ body.app-ea_app.model-order.change-form .pill-green { color: #34d399; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); } body.app-ea_app.model-order.change-form .pill-red { color: #f87171; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); } body.app-ea_app.model-order.change-form .pill-amber { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.35); } /* Customer badge (editable) */ body.app-ea_app.model-order.change-form .form-row.field-customer .fk-label-plain { background: var(--card-bg, #0b1324); color: #90c2ff; box-shadow: inset 0 0 0 1px #1f3a64, 0 1px 2px rgba(0,0,0,.35); } body.app-ea_app.model-order.change-form .form-row.field-customer .fk-label-plain.is-loading::after { background: linear-gradient(90deg, #0f1b33, #0b1324, #0f1b33); } /* Customer badge (readonly link) */ body div.form-row.field-customer div.flex-container > div.readonly > a { color: #90c2ff; background: var(--card-bg, #0b1324); border-color: #1f3a64; box-shadow: 0 1px 2px rgba(0,0,0,.35); } /* Inline "Update" button */ body.app-ea_app.model-order.change-form .btn-inline-update { background: #1d4ed8; border-color: #1d4ed8; } body.app-ea_app.model-order.change-form .btn-inline-update:hover { background: #2563eb; } /* Warning pill + overlay stay readable */ body.app-ea_app.model-order.change-form .order-warning { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #f87171; } /* Ensure explicit light theme attribute keeps light tokens (in case previous dark class lingered) */ html[data-theme="light"] #header .topbar__container { /* inherits above */ } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) #header .topbar__container{ --tb-fg: #eaf2ff; --tb-fg-muted: #cfe1ff; --tb-chip-bg: rgba(255,255,255,.10); --tb-chip-border: rgba(255,255,255,.20); --tb-btn-border: rgba(255,255,255,.32); --tb-btn-hover: rgba(255,255,255,.10); --tb-shadow: 0 2px 8px rgba(0,0,0,.18); --accent-success: #34d399; /* keep same accents for consistency */ --accent-danger: #f87171; --accent-warning: #fbbf24; } } /* explicit dark theme flag some admin themes use */ html[data-theme="dark"] #header .topbar__container{ --tb-fg: #eaf2ff; --tb-fg-muted: #cfe1ff; --tb-chip-bg: rgba(255,255,255,.10); --tb-chip-border: rgba(255,255,255,.20); --tb-btn-border: rgba(255,255,255,.32); --tb-btn-hover: rgba(255,255,255,.10); --tb-shadow: 0 2px 8px rgba(0,0,0,.18); --accent-success: #34d399; --accent-danger: #f87171; --accent-warning: #fbbf24; } #branding { width: 100%; } .topbar__brand{ color: var(--tb-fg); text-decoration: none; font-weight: 800; letter-spacing: -.3px; font-size: clamp(18px, 2.1vw, 22px); text-shadow: 0 1px 0 rgba(0,0,0,.12); } /* center "panel chip" */ .topbar__center{ display:flex; justify-content:center; } .panel-chip{ display: inline-flex; align-items: center; gap: .55rem; color: var(--tb-fg); font-weight: 800; padding: .45rem .75rem; border-radius: 9999px; background: var(--tb-chip-bg); border: 1px solid var(--tb-chip-border); backdrop-filter: blur(4px); box-shadow: var(--tb-shadow); } .panel-chip .dot{ width: .5rem; height: .5rem; border-radius: 9999px; background: #f166ab; box-shadow: 0 0 0 2px rgba(52,211,153,.28); } .panel-chip img{ width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); } /* actions (right) */ .topbar__actions{ display:flex; gap: 10px; align-items:center; } .btn.topbar__btn{ display:inline-flex; align-items:center; gap:.5rem; color: var(--tb-fg); padding: .42rem .8rem; border-radius: 9999px; border: 1px solid var(--tb-btn-border); text-decoration: none; font-weight: 700; letter-spacing: .2px; background: transparent; transition: background .18s ease, transform .08s ease, border-color .18s ease; } .btn.topbar__btn:hover{ background: var(--tb-btn-hover); transform: translateY(-1px); } /* mobile toggle (hamburger) */ .topbar__toggle{ display:none; width: 42px; height: 38px; border-radius: 10px; border: 1px solid var(--tb-btn-border); background: transparent; color: var(--tb-fg); } .topbar__toggle .bar{ display:block; width: 22px; height: 2px; margin: 5px auto; background: currentColor; border-radius: 2px; } /* ====== Responsive ====== */ @media (max-width: 900px){ .topbar__container{ grid-template-columns: 1fr auto auto; gap: 10px; } .topbar__center{ order: 3; grid-column: 1 / -1; } .topbar__actions{ position: absolute; top: 60px; right: 14px; display: none; flex-direction: column; gap: 8px; background: var(--tb-chip-bg); border: 1px solid var(--tb-chip-border); padding: 10px; border-radius: 14px; backdrop-filter: blur(6px); box-shadow: var(--tb-shadow); } .topbar__actions.is-open{ display:flex; } .topbar__toggle{ display:inline-block; } } #user-tools { display:none; }