/* ============================================================================= ems-tokens.css — EMS Operations Hub shared design system Imperial Red / Poppins. Imported by every hub so they look & behave identically. (Load Poppins via Google Fonts in the page .) ============================================================================= */ :root{ --red:#C8102E; --red-dark:#a50d26; --dark:#3C3C3C; --grey:#B4B4B4; --line:#e6e6e6; --blue:#2D6CDF; --amber:#E8A33D; --green:#1f9d55; --bg:#f4f5f7; --card:#fff; --ink:#222; --muted:#6b6b6b; --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); --safe-b: env(safe-area-inset-bottom, 0px); } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ margin:0; } body{ font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45; padding-bottom:calc(96px + var(--safe-b)); /* room for the save-bar */ } /* ---- App bar (sticky red header) ---------------------------------------- */ .appbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; background:var(--red); color:#fff; padding:12px 16px; box-shadow:0 2px 6px rgba(0,0,0,.12); } .appbar .back{ font-size:22px; line-height:1; background:none; border:0; color:#fff; cursor:pointer; padding:4px 6px; } .appbar .logo{ height:30px; width:auto; display:block; flex:0 0 auto; } .appbar .titles{ display:flex; flex-direction:column; } .appbar .titles b{ font-weight:600; font-size:16px; } .appbar .titles span{ font-size:12px; opacity:.9; } .appbar .spacer{ flex:1; } .appbar .act{ background:rgba(255,255,255,.18); border:0; color:#fff; border-radius:8px; padding:8px 12px; font:inherit; font-weight:500; cursor:pointer; } /* ---- Layout ------------------------------------------------------------- */ .wrap{ max-width:760px; margin:0 auto; padding:16px; } .hero{ padding:18px 16px 6px; } .hero h1{ margin:0; font-size:20px; font-weight:600; } .hero p{ margin:2px 0 0; color:var(--muted); font-size:13px; } /* ---- Hub tiles (large launcher) ----------------------------------------- */ .tiles{ display:grid; grid-template-columns:1fr; gap:12px; } @media(min-width:560px){ .tiles{ grid-template-columns:1fr 1fr; } } .tile{ display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); font:inherit; color:inherit; width:100%; } .tile:active{ transform:translateY(1px); } .tile .chip{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; } .tile .t-main{ flex:1; } .tile .t-main b{ display:block; font-weight:600; font-size:16px; } .tile .t-main span{ color:var(--muted); font-size:13px; } .tile .badge{ background:#fff0f2; color:var(--red); border-radius:999px; font-size:12px; font-weight:600; padding:3px 9px; } .tile .chev{ color:var(--grey); font-size:20px; } /* ---- Section cards (numbered) ------------------------------------------- */ .sec{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:14px 0; box-shadow:var(--shadow); } .sec > h2{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:15px; font-weight:600; } .sec-n{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; } .sec .hint{ color:var(--muted); font-size:12px; margin:-6px 0 12px; } /* ---- Fields ------------------------------------------------------------- */ .field{ margin:10px 0; } .field > label{ display:block; font-size:13px; font-weight:500; margin-bottom:5px; color:var(--dark); } .field .req{ color:var(--red); } input[type=text], input[type=number], input[type=date], input[type=time], select, textarea{ width:100%; max-width:100%; min-width:0; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--grey); border-radius:var(--radius-sm); padding:11px 12px; } /* iOS Safari: native date/time controls have an intrinsic min width that overflows the container — reset their appearance so they honour width:100%. */ input[type=date], input[type=time]{ -webkit-appearance:none; appearance:none; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.12); } textarea{ min-height:74px; resize:vertical; } .row{ display:flex; gap:10px; flex-wrap:wrap; } .row > .field{ flex:1; min-width:120px; } /* ---- Segmented control (Day/Night, Yes/No) ------------------------------ */ .seg{ display:inline-flex; border:1px solid var(--grey); border-radius:var(--radius-sm); overflow:hidden; } .seg button{ font:inherit; border:0; background:#fff; padding:10px 16px; cursor:pointer; color:var(--dark); } .seg button + button{ border-left:1px solid var(--line); } .seg button.on{ background:var(--red); color:#fff; font-weight:600; } .seg.yn button.on.no{ background:var(--dark); } /* ---- Checklist toggle (EOS checks) -------------------------------------- */ .chk{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin:8px 0; } .chk .lbl{ font-size:14px; } .chk .tog{ display:inline-flex; border:1px solid var(--grey); border-radius:8px; overflow:hidden; } .chk .tog button{ font:inherit; border:0; background:#fff; padding:7px 13px; cursor:pointer; } .chk .tog button.yes.on{ background:var(--green); color:#fff; } .chk .tog button.no.on{ background:var(--dark); color:#fff; } /* ---- Repeatable sub-cards ---------------------------------------------- */ .subcard{ border:1px dashed var(--grey); border-radius:var(--radius-sm); padding:12px; margin:10px 0; position:relative; background:#fafafa; } .subcard .rm{ position:absolute; top:8px; right:8px; background:none; border:0; color:var(--red); cursor:pointer; font-size:18px; } .addbtn{ display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--red); color:var(--red); background:#fff0f2; border-radius:var(--radius-sm); padding:10px 14px; font:inherit; font-weight:500; cursor:pointer; } /* ---- Save bar (fixed) --------------------------------------------------- */ .savebar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:10px; padding:12px 16px calc(12px + var(--safe-b)); background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-top:1px solid var(--line); } .savebar .grow{ flex:1; } .btn{ font:inherit; font-weight:600; border-radius:var(--radius-sm); padding:13px 18px; cursor:pointer; border:1px solid var(--grey); background:#fff; color:var(--dark); } .btn-red{ background:var(--red); color:#fff; border-color:var(--red); } .btn-red:disabled{ opacity:.5; cursor:not-allowed; } .btn-ghost{ background:#fff; } /* ---- KPI cards ---------------------------------------------------------- */ .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } .kpi{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius-sm); padding:14px; box-shadow:var(--shadow); } .kpi .v{ font-size:24px; font-weight:600; } .kpi .k{ color:var(--muted); font-size:12px; } /* ---- Status pills ------------------------------------------------------- */ .pill{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; } .pill.draft{ background:#eee; color:#666; } .pill.queued{ background:#fff4e5; color:#9a6500; } .pill.ok{ background:#e8f6ee; color:#1f7a44; } .pill.flag{ background:#fdeaec; color:var(--red); } /* ---- Modal / bottom sheet ---------------------------------------------- */ .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center; } @media(min-width:560px){ .overlay{ align-items:center; } } .sheet{ background:#fff; width:100%; max-width:560px; border-radius:16px 16px 0 0; padding:18px; max-height:88vh; overflow:auto; } @media(min-width:560px){ .sheet{ border-radius:16px; } } /* ---- Toast -------------------------------------------------------------- */ .toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:60; background:var(--dark); color:#fff; padding:11px 16px; border-radius:10px; font-size:14px; box-shadow:var(--shadow); } .toast.err{ background:var(--red); } /* ---- Connection-test helpers (Phase 0) --------------------------------- */ .step{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; } .step .dot{ width:10px; height:10px; border-radius:50%; background:var(--grey); flex:0 0 auto; } .step.pass .dot{ background:var(--green); } .step.fail .dot{ background:var(--red); } .step .x{ color:var(--muted); font-size:12px; margin-left:auto; text-align:right; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }