/* ============================================================================ * ems.css — EMS component layer (Phase 1) * ---------------------------------------------------------------------------- * Loaded by includes/layouts/partials/tw_head.php, so it reaches the admin * panel (app.php), the portal (portal.php) and bare pages (bare.php). * * It does NOT reach the login / forgot-password screens: those render in * glass.php with css/theme.css + css/custom.css, and stay exactly as they are. * * Phase 1 is additive only. Every class here is `ems-` prefixed, and no view * uses these names yet, so loading this file changes nothing on screen. Views * move onto the classes one at a time in the later phases. * * Two rules to keep it that way: * 1. Never style a bare element (`table`, `button`, `a`) — only `.ems-*`. * 2. Keep every rule at single-class specificity, so a Tailwind utility * written next to a component class still wins. The Play CDN injects its * stylesheet after this file, so `class="ems-btn mt-6"` behaves as * expected. * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. Tokens * The values mirror the Tailwind theme in tw_head.php, restated as custom * properties so a theme switch is a token flip rather than a class rewrite. * ------------------------------------------------------------------------- */ :root { /* Brand */ --ems-brand: #3e2723; --ems-brand-hover: #33201d; --ems-brand-ink: #5b403c; --ems-brand-wash: #f6efed; --ems-on-brand: #ffffff; /* Surfaces */ --ems-ground: #f7f9fc; --ems-paper: #ffffff; --ems-paper-2: #faf9f8; --ems-paper-3: #f2f4f7; /* Ink */ --ems-ink: #191c1e; --ems-ink-2: #504442; --ems-ink-3: #827472; /* Rules — warmer and lighter than the current #d3c3c0 outline-variant */ --ems-rule: #e6e0de; --ems-rule-soft: #f2eeed; /* Status — one definition for the whole app */ --ems-ok: #1e7d4f; --ems-ok-bg: #f2fbf6; --ems-ok-rule: #bfe3d0; --ems-warn: #b97309; --ems-warn-bg: #fdf8ef; --ems-warn-rule: #f0dcb8; --ems-err: #ba1a1a; --ems-err-bg: #fdf3f2; --ems-err-rule: #f3c9c6; --ems-info: #1565c0; --ems-info-bg: #f1f6fd; --ems-info-rule: #c6dcf5; --ems-idle: #6b7280; --ems-idle-bg: #f7f8fa; --ems-idle-rule: #e2e5e9; /* Shape */ --ems-r-control: 7px; --ems-r-card: 10px; --ems-r-pill: 999px; /* Rhythm */ --ems-gutter: 18px; --ems-gap: 12px; /* Type */ --ems-fs-title: 21px; --ems-fs-section: 15px; --ems-fs-card: 14px; --ems-fs-body: 13px; --ems-fs-meta: 11.5px; --ems-fs-label: 10px; --ems-focus: 0 0 0 3px rgba(62, 39, 35, .22); } /* Dark palette. Nothing sets these hooks yet — `` is still * hard-coded in the layouts — so this block is inert until phase 7 adds the * toggle. Both hooks are here because Tailwind is configured `darkMode:"class"` * while `[data-theme]` is the friendlier attribute to flip server-side. */ html.dark, html[data-theme="dark"] { --ems-brand: #e3beb8; --ems-brand-hover: #f0d3ce; --ems-brand-ink: #e3beb8; --ems-brand-wash: #2a1f1d; --ems-on-brand: #241a18; --ems-ground: #111315; --ems-paper: #191c1f; --ems-paper-2: #1f2226; --ems-paper-3: #22262a; --ems-ink: #e9ebee; --ems-ink-2: #b0b6bd; --ems-ink-3: #848b93; --ems-rule: #2c3035; --ems-rule-soft: #23272b; --ems-ok: #4cc38a; --ems-ok-bg: #14251d; --ems-ok-rule: #23492f; --ems-warn: #e0a458; --ems-warn-bg: #241d12; --ems-warn-rule: #4a3820; --ems-err: #ff8a80; --ems-err-bg: #2a1615; --ems-err-rule: #552a27; --ems-info: #7ab3f0; --ems-info-bg: #131d29; --ems-info-rule: #23394f; --ems-idle: #9aa1a9; --ems-idle-bg: #1d2023; --ems-idle-rule: #2c3035; --ems-focus: 0 0 0 3px rgba(227, 190, 184, .25); } /* --------------------------------------------------------------------------- * 2. Buttons * `.ems-btn` is the outlined default — the shape 15 pages currently spell out * as `px-3 py-2 rounded-lg border border-outline-variant text-label-md …`. * ------------------------------------------------------------------------- */ .ems-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--ems-rule); border-radius: var(--ems-r-control); background: var(--ems-paper); color: var(--ems-ink); font: inherit; font-size: var(--ems-fs-meta); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .ems-btn:hover { background: var(--ems-paper-2); border-color: var(--ems-ink-3); } .ems-btn:focus-visible{ outline: none; box-shadow: var(--ems-focus); } .ems-btn:disabled, .ems-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .ems-btn--primary { background: var(--ems-brand); border-color: var(--ems-brand); color: var(--ems-on-brand); } .ems-btn--primary:hover { background: var(--ems-brand-hover); border-color: var(--ems-brand-hover); } .ems-btn--ghost { background: transparent; border-color: transparent; color: var(--ems-ink-2); } .ems-btn--ghost:hover { background: var(--ems-paper-3); border-color: transparent; color: var(--ems-ink); } .ems-btn--danger { background: transparent; border-color: var(--ems-err-rule); color: var(--ems-err); } .ems-btn--danger:hover { background: var(--ems-err-bg); border-color: var(--ems-err); } .ems-btn--sm { padding: 4px 8px; font-size: var(--ems-fs-label); } .ems-btn--lg { padding: 9px 16px; font-size: var(--ems-fs-body); } .ems-btn--icon { padding: 6px; width: 30px; } .ems-btn--block { display: flex; width: 100%; } /* Material Symbols sit slightly high next to 12.5px text. */ .ems-btn .material-symbols-outlined { font-size: 16px; line-height: 1; } /* --------------------------------------------------------------------------- * 3. Card * Replaces the `bg-white rounded-lg border border-outline-variant shadow-sm` * chain typed out in 89 places. One hairline, no drop shadow. * ------------------------------------------------------------------------- */ .ems-card { background: var(--ems-paper); border: 1px solid var(--ems-rule); border-radius: var(--ems-r-card); overflow: hidden; } .ems-card__head { display: flex; align-items: center; /* Not space-between: a head holding just an icon and a title would push * them to opposite ends of the card. The heading claims the slack instead, * so an icon stays beside its title and any action after it goes right. */ justify-content: flex-start; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--ems-rule-soft); } /* Push the trailing element right — but only when it is an action. A head is * written either as [icon][title] or as [title][action], and the title is * often wrapped in a div with its icon, so keying on the heading tag alone * misses half the cases. The last child gets the slack unless it is the * heading itself. */ .ems-card__head > :last-child:not(:first-child):not(h1):not(h2):not(h3):not(h4):not(.ems-card__title) { margin-left: auto; } .ems-card__title { font-size: var(--ems-fs-card); font-weight: 600; color: var(--ems-ink); margin: 0; } .ems-card__sub { font-size: var(--ems-fs-meta); color: var(--ems-ink-3); margin: 2px 0 0; } .ems-card__body { padding: 14px; } .ems-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--ems-rule-soft); font-size: var(--ems-fs-meta); color: var(--ems-ink-3); } /* A card whose body is a table wants no padding around it. */ .ems-card__body--flush { padding: 0; } /* Same padding and rule as __head, but it stays a block. Many section heads * stack a title over a line of help text; __head is a flex row and would sit * them side by side. */ .ems-card__band { padding: 10px 14px; border-bottom: 1px solid var(--ems-rule-soft); } /* --------------------------------------------------------------------------- * 4. Toolbar — search, filters, count. Sits above a table inside a card. * ------------------------------------------------------------------------- */ .ems-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--ems-rule-soft); } .ems-toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ems-toolbar__grow { flex: 1 1 220px; min-width: 180px; } .ems-toolbar__count { font-size: var(--ems-fs-meta); color: var(--ems-ink-3); } .ems-toolbar__count b { color: var(--ems-ink); font-weight: 600; } /* --------------------------------------------------------------------------- * 5. Form controls * ------------------------------------------------------------------------- */ .ems-input, .ems-select, .ems-textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--ems-rule); border-radius: var(--ems-r-control); background: var(--ems-paper-2); color: var(--ems-ink); font: inherit; font-size: var(--ems-fs-body); line-height: 1.4; } .ems-input::placeholder, .ems-textarea::placeholder { color: var(--ems-ink-3); } .ems-input:focus, .ems-select:focus, .ems-textarea:focus { outline: none; border-color: var(--ems-brand); box-shadow: var(--ems-focus); background: var(--ems-paper); } .ems-select { padding-right: 34px; } .ems-textarea{ min-height: 78px; resize: vertical; } /* Input with a leading icon (search boxes, icon-marked fields). Wrap in `.ems-search`, put the icon in `.ems-search__icon`. The two-class selector on the input keeps the reserved room even when a Tailwind utility sits on the same element, so the text never runs under the icon. */ .ems-search { position: relative; } /* The class is repeated so this outranks both the forms plugin and the `.ems-input.ems-input` reset in section 20 below, which would otherwise put the padding back to 10px and slide the text under the icon. */ .ems-search .ems-input.ems-input, .ems-search .ems-select.ems-select { padding-left: 38px; } .ems-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: block; line-height: 1; color: var(--ems-ink-3); font-size: 20px; pointer-events: none; } .ems-field { display: block; margin-bottom: var(--ems-gap); } .ems-field__label { display: block; margin-bottom: 5px; font-size: var(--ems-fs-meta); font-weight: 600; color: var(--ems-ink-2); } .ems-field__label--req::after { content: " *"; color: var(--ems-err); } .ems-field__hint { display: block; margin-top: 5px; font-size: var(--ems-fs-meta); color: var(--ems-ink-3); } .ems-field__error { display: block; margin-top: 5px; font-size: var(--ems-fs-meta); color: var(--ems-err); } .ems-field--invalid .ems-input, .ems-field--invalid .ems-select, .ems-field--invalid .ems-textarea { border-color: var(--ems-err); } /* Segmented control — the two-to-five-way filter a