/* Planning module styles — palette ported verbatim from ops-app v1.1.0 (ops-app/public/css/app.css) so the SPM looks like the tool the team already uses. Do not improvise new colours here; change the reference first, then port. Theming is driven by data-theme on (light | dark), set before first paint by the inline script in base.html — same mechanism as ops-app theme.js. `prefers-color-scheme` is honoured only as the DEFAULT; an explicit choice always wins and persists per browser. Note on scope: the platform stylesheet (static/css/app.css) hard-codes a light body. That is why dark mode previously produced dark cards on a light page and a near-invisible ghost button. The `:root[data-theme="dark"]` block below repaints the few platform surfaces the planner sits on. It is deliberately minimal — body, links, base cards and tables — and is scoped to the dark attribute, so light mode is byte-for-byte the platform's. */ :root, :root[data-theme="light"] { --p-bg: #f2f4f7; --p-bg-raised: #ffffff; --p-bg-inset: #e9edf2; --p-text: #1c2430; --p-muted: #55616f; --p-brand: #23677e; --p-brand-ink: #ffffff; --p-border: #c6ced6; --p-border-soft: #dde3e9; --p-accent-row: #f7fafc; --p-danger: #b3261e; --p-danger-soft: #fdecea; --p-ok: #1b7a3d; --p-ok-soft: #e4f4ea; --p-warn-soft: #fdf0dc; --p-warn-ink: #9a6510; --p-today: #fff7e0; --p-shadow: 0 1px 3px rgba(16, 24, 32, .12); --p-e-service: #23677e; --p-e-sales: #6b4fa0; --p-e-exhibition: #a05c1f; --p-e-others: #55616f; } :root[data-theme="dark"] { --p-bg: #141a22; --p-bg-raised: #1d252f; --p-bg-inset: #10151c; --p-text: #e6ebf1; --p-muted: #97a3b0; --p-brand: #4da3bd; --p-brand-ink: #0d1319; --p-border: #3a4553; --p-border-soft: #2a3340; --p-accent-row: #202a35; --p-danger: #ff8a80; --p-danger-soft: #3a2224; --p-ok: #6fd68f; --p-ok-soft: #1d3325; --p-warn-soft: #3a2f1a; --p-warn-ink: #e5b567; --p-today: #2c2a1c; --p-shadow: 0 1px 3px rgba(0, 0, 0, .5); --p-e-service: #4da3bd; --p-e-sales: #a98fd6; --p-e-exhibition: #d69a5b; --p-e-others: #97a3b0; } /* Repaint the platform surfaces the planner sits on, dark only. */ :root[data-theme="dark"] body { background: var(--p-bg); color: var(--p-text); } :root[data-theme="dark"] a { color: var(--p-brand); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .tile { background: var(--p-bg-raised); border-color: var(--p-border-soft); color: var(--p-text); } :root[data-theme="dark"] table { background: var(--p-bg-raised); } :root[data-theme="dark"] th { color: var(--p-muted); } :root[data-theme="dark"] td { border-bottom-color: var(--p-border-soft); } :root[data-theme="dark"] tr:hover td { background: var(--p-accent-row); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--p-bg-raised); color: var(--p-text); border-color: var(--p-border); } /* ---------- theme toggle (parity with ops-app v1.1.0) ---------- */ .p-theme-btn { background: none; border: 1px solid #46525f; color: #cfd8e0; border-radius: 4px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; line-height: 20px; margin-left: auto; } .p-theme-btn:hover { color: #fff; border-color: #6b7885; } /* The topbar is dark in both themes (platform styling), so the toggle keeps its light-on-dark treatment rather than following the palette. */ .p-h1 { font-size: 20px; margin: 4px 0 10px; color: var(--p-brand); } .p-muted { color: var(--p-muted); } .p-small { font-size: 12.5px; } .p-struck { text-decoration: line-through; } .p-err { color: var(--p-danger); font-size: 13px; } /* ---------- buttons ---------- */ .p-btn { display: inline-block; background: var(--p-brand); color: var(--p-brand-ink); border: none; border-radius: 7px; padding: 9px 16px; min-height: 40px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 22px; } .p-btn:hover { filter: brightness(1.08); } /* Ghost buttons sit on the PAGE background, so they must use page-surface tokens. Using the topbar's colours here is what made "Export CSV" vanish. */ .p-btn.ghost { background: var(--p-bg-raised); color: var(--p-text); border: 1px solid var(--p-border); font-weight: 500; } .p-btn.ghost:hover { border-color: var(--p-brand); color: var(--p-brand); } .p-btn.danger { background: var(--p-bg-raised); color: var(--p-danger); border: 1px solid var(--p-danger); } .p-btn.sm { padding: 4px 10px; min-height: 30px; font-size: 13px; line-height: 20px; } .p-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; } /* ---------- period nav ---------- */ .p-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .p-seg { display: inline-flex; border: 1px solid var(--p-border); border-radius: 8px; overflow: hidden; } .p-seg a { padding: 8px 13px; color: var(--p-muted); text-decoration: none; background: var(--p-bg-raised); min-height: 38px; line-height: 22px; } .p-seg a:hover { color: var(--p-brand); } .p-seg a.on { background: var(--p-brand); color: var(--p-brand-ink); font-weight: 600; } .p-period { font-weight: 600; color: var(--p-text); } /* ---------- entry cards ---------- */ .p-entry { display: block; text-decoration: none; color: var(--p-text); border: 1px solid var(--p-border-soft); border-left: 4px solid var(--p-e-service); background: var(--p-bg-raised); border-radius: 7px; padding: 7px 9px; margin: 5px 0; font-size: 13px; box-shadow: var(--p-shadow); } .p-entry:hover { border-color: var(--p-brand); } .p-entry .p-l1 { display: block; font-weight: 600; } .p-entry .p-l2 { display: block; color: var(--p-muted); font-size: 12px; } .p-exhibition { border-left-color: var(--p-e-exhibition); } .p-others { border-left-color: var(--p-e-others); } .p-status-cancelled { border-left-color: var(--p-danger); opacity: .8; } .p-status-cancelled .p-l1, .p-status-cancelled .p-l2 { text-decoration: line-through; color: var(--p-danger); } .p-requested { border-left-color: var(--p-warn-ink); } .p-cancelline { display: block; color: var(--p-danger); font-size: 11.5px; margin-top: 2px; } .p-reqline { display: block; color: var(--p-warn-ink); font-size: 11.5px; margin-top: 2px; } .p-jobadge { display: inline-block; font-size: 10.5px; border-radius: 4px; padding: 1px 6px; margin-top: 3px; background: var(--p-bg-inset); color: var(--p-muted); } .p-jo-pending { background: var(--p-warn-soft); color: var(--p-warn-ink); } .p-jo-done { background: var(--p-ok-soft); color: var(--p-ok); } .p-jo-entry-cancelled { background: var(--p-danger-soft); color: var(--p-danger); } .p-full { display: none; margin-top: 5px; padding-top: 4px; font-size: 11.5px; border-top: 1px dashed var(--p-border-soft); color: var(--p-muted); } .p-full b { color: var(--p-text); font-weight: 600; } /* ---------- my week ---------- */ .p-myweek .p-day { background: var(--p-bg-raised); border: 1px solid var(--p-border-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .p-myweek .p-day.p-today { border-color: var(--p-brand); box-shadow: 0 0 0 1px var(--p-brand); } .p-dayhead { display: flex; align-items: center; gap: 8px; } .p-dayhead .p-d { font-weight: 700; color: var(--p-text); } .p-dayhead .p-dow { color: var(--p-muted); font-size: 13px; flex: 1; } /* ---------- GM grid ---------- */ .p-gridwrap { overflow-x: auto; border: 1px solid var(--p-border-soft); border-radius: 10px; background: var(--p-bg-raised); -webkit-overflow-scrolling: touch; } table.p-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; } .p-grid th, .p-grid td { border-bottom: 1px solid var(--p-border-soft); border-right: 1px solid var(--p-border-soft); padding: 6px 8px; vertical-align: top; text-align: left; min-width: 150px; background: var(--p-bg-raised); text-transform: none; letter-spacing: normal; } .p-grid thead th { position: sticky; top: 0; background: var(--p-bg-inset); z-index: 10; font-size: 13px; color: var(--p-text); } .p-grid .p-datecell { position: sticky; left: 0; background: var(--p-bg-inset); z-index: 5; min-width: 96px; width: 96px; font-size: 12.5px; font-weight: 600; color: var(--p-text); } .p-grid thead th.p-datecell { z-index: 15; } .p-grid tr.p-today td { background: var(--p-today); } .p-grid tr.p-weekend td { background: var(--p-accent-row); } .p-grid tr:hover td { background: inherit; } .p-grid .p-dow { display: block; color: var(--p-muted); font-weight: 400; font-size: 11.5px; } .p-colbtn { background: none; border: none; color: inherit; font: inherit; font-weight: 600; padding: 2px 4px; border-radius: 5px; cursor: pointer; white-space: nowrap; } .p-colbtn:hover { background: var(--p-bg-raised); color: var(--p-brand); } .p-addcell { margin-top: 3px; opacity: .75; } /* Column detail levels (set by the inline script on grid.html). */ td.p-col-full .p-full { display: block; } th.p-col-min, td.p-col-min { min-width: 44px; width: 44px; } td.p-col-min .p-entry, td.p-col-min .p-addcell { display: none; } th.p-col-min .p-colbtn { writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; } /* ---------- approvals ---------- */ .p-pending { background: var(--p-warn-soft); border: 1px solid var(--p-warn-ink); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; color: var(--p-text); } .p-pending header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .p-pending strong, .p-pending a { color: var(--p-text); } .p-badge { background: var(--p-warn-ink); color: var(--p-bg-raised); border-radius: 10px; font-size: 12px; font-weight: 700; padding: 1px 8px; } .p-prow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; } .p-pinfo { flex: 1; min-width: 220px; font-size: 13.5px; } .p-pbtns { display: flex; gap: 6px; } .p-pbtns form { margin: 0; } /* ---------- detail + forms ---------- */ .p-card { background: var(--p-bg-raised); border: 1px solid var(--p-border-soft); border-radius: 12px; box-shadow: var(--p-shadow); padding: 18px 20px; max-width: 720px; color: var(--p-text); } .p-dl { margin: 10px 0; } .p-dl dt { font-size: 12px; color: var(--p-muted); margin-top: 8px; } .p-dl dd { margin: 1px 0 0; } .p-cancelbox { background: var(--p-danger-soft); color: var(--p-danger); border-radius: 7px; padding: 8px 10px; font-size: 13px; } .p-reqbox { background: var(--p-warn-soft); color: var(--p-warn-ink); border-radius: 7px; padding: 8px 10px; font-size: 13px; } .p-confirm { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--p-border-soft); } .p-form label { display: block; margin: 10px 0 2px; font-size: 13.5px; color: var(--p-muted); } .p-form input[type=text], .p-form input[type=email], .p-form input[type=date], .p-form input[type=time], .p-form input[type=number], .p-form select, .p-form textarea { width: 100%; max-width: 420px; padding: 9px; border: 1px solid var(--p-border); border-radius: 7px; background: var(--p-bg-raised); color: var(--p-text); min-height: 40px; } .p-form input:focus, .p-form select:focus, .p-form textarea:focus { outline: 2px solid var(--p-brand); outline-offset: 0; border-color: var(--p-brand); } .p-form fieldset { border: none; padding: 0; margin: 0; } .p-datepills { display: flex; gap: 6px; flex-wrap: wrap; } .p-datepills button { border: 1px solid var(--p-border); background: var(--p-bg-raised); color: var(--p-text); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; min-height: 40px; cursor: pointer; } .p-datepills button.on { background: var(--p-brand); color: var(--p-brand-ink); border-color: var(--p-brand); font-weight: 600; } .p-itemrow { display: flex; gap: 6px; margin-bottom: 6px; max-width: 420px; } .p-itemrow .p-qty { width: 70px; flex: none; } .p-itemrow input[type=text] { flex: 1; } /* ---------- job orders ---------- */ .p-jo-card { padding: 12px 14px; margin-bottom: 10px; max-width: none; } .p-jo-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .p-jo-head strong { color: var(--p-text); } .p-jo-checks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .p-jo-checks form { margin: 0; display: flex; align-items: center; gap: 5px; } .p-jo-checks input[type=text] { width: 110px; min-height: 30px; padding: 4px 7px; font-size: 12px; background: var(--p-bg-raised); color: var(--p-text); border: 1px solid var(--p-border); border-radius: 5px; } .p-tag { font-size: 11.5px; background: var(--p-bg-inset); color: var(--p-muted); border-radius: 5px; padding: 2px 7px; } @media (max-width: 700px) { .p-grid th, .p-grid td { min-width: 132px; font-size: 12.5px; } .p-card { padding: 14px; } .p-nav { gap: 6px; } .p-seg a { padding: 8px 10px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }