/* ============================================================================ EPCIDO ACADEMY — stylesheet Direction A: "Corporate clarity". THEMING Light is the default. Dark is opt-in via . app.js only has to flip that one attribute and write localStorage. COLOUR RULE Every colour lives in one of the two token blocks below (LIGHT / DARK). No colour literal appears anywhere else in this file — including the course-category chip colours, which are tokenised per theme. The only colour keywords used outside the token blocks are the context-derived keywords `transparent` and `currentColor`. BRAND PROPORTION ~80% neutral surfaces, ~15% navy (sidebar band + headings + links), ~5% Epcido Red — active nav marker, the single primary action, the "today" marker and error states. Red is a signal, never a fill. ========================================================================== */ /* ---------------------------------------------------------------- geometry */ :root { --sidebar-w: 236px; --r-xs: 5px; --r-sm: 7px; --r-md: 9px; --r-lg: 13px; --r-pill: 999px; --font-ui: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: "Poppins", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tap: .14s ease; } /* ============================== LIGHT (default) ========================== */ :root, :root[data-theme="light"] { color-scheme: light; /* surfaces */ --bg: #F6F7F9; --bg-accent: #E9EDF6; --surface: #FFFFFF; --surface-2: #F1F3F7; --surface-3: #EDF0F5; --surface-hover: #F2F5FA; --border: #E2E6ED; --border-2: #C3CBD9; /* text */ --fg: #222831; --fg-2: #5B6472; --fg-3: #656E7E; --heading: #1F367E; /* navy — corporate structure & links */ --link: #27449D; --link-hover: #1F367E; --navy-soft: #E8ECF7; --navy-soft-fg: #1F367E; --sel-bg: #27449D; --sel-fg: #FFFFFF; /* Epcido red — signal only */ --red: #CB0C2D; --red-hover: #A80A25; --red-on: #FFFFFF; --red-text: #B00A26; --red-soft: #FBE7EA; /* status */ --ok: #0D6B4C; --ok-soft: #E1F2E9; --err: #B00A26; --err-soft: #FBE7EA; --err-border: #EFC3CC; /* sidebar band */ --sidebar-bg: #1F367E; --sidebar-fg: #FFFFFF; --sidebar-fg-2: #B9C4E6; --sidebar-hover: rgba(255, 255, 255, .08); --sidebar-active-bg: rgba(255, 255, 255, .14); --sidebar-active-bar: #FF4A66; /* 3.40:1 on the navy band — was 2.90:1 */ --sidebar-border: #16265C; /* chrome */ --topbar-bg: #FFFFFF; --field-bg: #FFFFFF; --field-border: #8A95A6; /* 3.03:1 on white — was 1.78:1, effectively invisible */ --ring: rgba(39, 68, 157, .26); --overlay: rgba(15, 20, 35, .45); --shadow-1: 0 1px 2px rgba(24, 33, 64, .06); --shadow-2: 0 2px 8px rgba(24, 33, 64, .08); --shadow-3: 0 18px 44px rgba(24, 33, 64, .18); --today: #CB0C2D; --today-soft: #FBE7EA; --scroll-thumb: #C6CEDC; /* the mark ships in two inks; -nav is always the lifted one — the sidebar band is navy in both themes */ --logo: url("/assets/academy-logo.png"); --logo-nav: url("/assets/academy-logo-dark.png"); /* course-category data colours (never Epcido Red) */ /* Calendar chips: saturated enough to read across a month at a glance. Every pair below was measured — the weakest is 6.8:1, well past the 4.5:1 legibility floor. */ --cat-ipaf-bg: #FFD9BC; --cat-ipaf-fg: #7A3208; /* orange 6.95:1 */ --cat-udt-bg: #C9DEF6; --cat-udt-fg: #123E70; /* blue 7.83:1 */ --cat-first-aid-bg: #C2E9D4; --cat-first-aid-fg: #0E5233; /* green 6.99:1 */ --cat-hotworks-bg: #FFD2CF; --cat-hotworks-fg: #8A1B18; /* data-red 6.83:1 */ --cat-internal-bg: #B9E6DD; --cat-internal-fg: #084C43; /* teal 7.26:1 */ --cat-other-bg: #DDE3E1; --cat-other-fg: #37443F; /* gray 7.84:1 */ } /* ================================== DARK ================================= */ :root[data-theme="dark"] { color-scheme: dark; /* surfaces */ --bg: #0B0F1A; --bg-accent: #16203A; --surface: #131A29; --surface-2: #1A2233; --surface-3: #0F1524; --surface-hover: #1C2537; --border: #26304A; --border-2: #384663; /* text */ --fg: #E8ECF4; --fg-2: #9AA6BC; --fg-3: #7E8CA6; --heading: #DCE4F7; /* navy — corporate structure & links */ --link: #8FB2F5; --link-hover: #B7CEFB; --navy-soft: #1B2748; --navy-soft-fg: #A9C0F5; --sel-bg: #3A62D6; --sel-fg: #FFFFFF; /* Epcido red — signal only */ --red: #E11E3C; --red-hover: #F03350; --red-on: #FFFFFF; --red-text: #FF7A8C; --red-soft: #2E1520; /* status */ --ok: #46D69B; --ok-soft: #10291F; --err: #FF8A8A; --err-soft: #2E1717; --err-border: #6B2B33; /* sidebar band */ --sidebar-bg: #101830; --sidebar-fg: #F2F5FC; --sidebar-fg-2: #9FADD0; --sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active-bg: rgba(255, 255, 255, .10); --sidebar-active-bar: #FF4A66; --sidebar-border: #1D2745; /* chrome */ --topbar-bg: #101726; --field-bg: #0F1524; --field-border: #5A6890; /* 3.31:1 on the dark field — was 1.66:1 */ --ring: rgba(143, 178, 245, .30); --overlay: rgba(3, 6, 14, .66); --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 2px 10px rgba(0, 0, 0, .45); --shadow-3: 0 20px 48px rgba(0, 0, 0, .60); --today: #FF7A8C; --today-soft: #2E1520; --scroll-thumb: #2E3A54; --logo: url("/assets/academy-logo-dark.png"); --logo-nav: url("/assets/academy-logo-dark.png"); /* course-category data colours (never Epcido Red) */ /* Lifted so a chip reads as a coloured object rather than a stain on the cell. */ --cat-ipaf-bg: #4A2E12; --cat-ipaf-fg: #FFBE86; /* orange 7.67:1 */ --cat-udt-bg: #1B3455; --cat-udt-fg: #9DC8FA; /* blue 7.24:1 */ --cat-first-aid-bg: #173C2D; --cat-first-aid-fg: #87E5B8; /* green 8.10:1 */ --cat-hotworks-bg: #4C2523; --cat-hotworks-fg: #FFA9A5; /* data-red 7.19:1 */ --cat-internal-bg: #153E3A; --cat-internal-fg: #6FE2D2; /* teal 7.57:1 */ --cat-other-bg: #333B3E; --cat-other-fg: #C6D3CF; /* gray 7.42:1 */ } /* ================================== base ================================= */ * { box-sizing: border-box; } [hidden] { display: none !important; } /* must win over .app/.login-wrap display:grid */ html, body { height: 100%; margin: 0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--navy-soft); color: var(--navy-soft-fg); } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; } /* ================================== brand ================================ */ .brand { font-family: var(--font-head); font-weight: 600; letter-spacing: .14em; font-size: 15px; color: var(--heading); } .brand span { color: var(--red-text); margin-left: 7px; font-weight: 500; } .brand.big { font-size: 21px; letter-spacing: .11em; } .brand .mark { display: block; width: 168px; max-width: 100%; aspect-ratio: 720 / 257; background: var(--logo) left center / contain no-repeat; } .brand.big .mark { width: 232px; margin: 0 auto 6px; background-position: center; } .sidebar .brand .mark { background-image: var(--logo-nav); } /* navy band in both themes */ /* ================================== login ================================ */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1100px 560px at 50% -10%, var(--bg-accent) 0%, var(--bg) 62%); } .login-card { width: min(92vw, 372px); box-shadow: var(--shadow-3); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1); } .login-card { padding: 28px; } .login-card .sub { color: var(--fg-2); margin: 7px 0 22px; font-size: 13.5px; } .login-card button.primary { width: 100%; margin-top: 4px; } /* ================================== forms ================================ */ form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--fg-2); margin-bottom: 14px; font-weight: 500; } input, select, textarea { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--r-sm); padding: 8px 11px; min-height: 34px; color: var(--fg); font-size: 13.5px; width: 100%; font-family: inherit; transition: border-color var(--tap), box-shadow var(--tap); } textarea { min-height: 62px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--fg-3); } input:hover, select:hover, textarea:hover { border-color: var(--border-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--ring); } input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; background: var(--surface-2); } .error { color: var(--err); font-size: 12.5px; min-height: 16px; margin: 6px 0 0; font-weight: 500; } /* ================================= buttons =============================== */ button.primary { background: var(--red); color: var(--red-on); border: 1px solid var(--red); border-radius: var(--r-sm); padding: 8px 15px; min-height: 34px; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-1); transition: background var(--tap), border-color var(--tap); } button.primary:hover { background: var(--red-hover); border-color: var(--red-hover); } button.primary:active { transform: translateY(1px); } button.ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 13px; min-height: 34px; font-size: 13.5px; font-weight: 500; transition: background var(--tap), color var(--tap), border-color var(--tap); } button.ghost:hover { color: var(--fg); background: var(--surface-2); border-color: var(--fg-3); } button.danger { background: transparent; color: var(--err); border: 1px solid var(--err-border); border-radius: var(--r-sm); padding: 8px 13px; min-height: 34px; font-size: 13.5px; font-weight: 500; } button.danger:hover { background: var(--err-soft); } button.sm { padding: 5px 11px; min-height: 30px; font-size: 12.5px; } button.link { background: none; border: 0; color: var(--link); padding: 0; font-size: 13px; font-weight: 500; } button.link:hover { color: var(--link-hover); text-decoration: underline; } /* =============================== app shell =============================== */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); padding: 20px 12px; overflow-y: auto; } .sidebar .brand { color: var(--sidebar-fg); padding: 4px 10px 22px; } .sidebar .brand span { color: var(--sidebar-fg-2); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--r-md); color: var(--sidebar-fg-2); font-weight: 500; font-size: 13.5px; transition: background var(--tap), color var(--tap); } .nav-item .ic { width: 18px; text-align: center; font-size: 13.5px; } .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); } .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-fg); font-weight: 600; } .nav-item.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: var(--r-pill); background: var(--sidebar-active-bar); } .content { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); } .langs { display: flex; gap: 4px; } .lang { background: transparent; border: 1px solid var(--border); color: var(--fg-2); border-radius: var(--r-sm); padding: 4px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; transition: background var(--tap), color var(--tap); } .lang:hover { color: var(--fg); border-color: var(--border-2); } .lang.on { background: var(--navy-soft); color: var(--navy-soft-fg); border-color: transparent; } .user { display: flex; align-items: center; gap: 10px; } .uname { font-weight: 600; font-size: 13.5px; } .pill { background: var(--navy-soft); color: var(--navy-soft-fg); padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; } .theme-btn { width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1; } .main { padding: 22px; overflow: auto; } /* =============================== page head =============================== */ .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 19px; margin: 0; color: var(--heading); } .tools { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .search { width: 220px; } .flt { width: auto; min-width: 150px; } /* ================================= tables ================================ */ .tablewrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); box-shadow: var(--shadow-2); } table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; } table.grid th { text-align: left; padding: 9px 14px; color: var(--fg-2); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; } table.grid td { padding: 9px 14px; border-bottom: 1px solid var(--border); } table.grid tbody tr:last-child td { border-bottom: 0; } table.grid tbody tr:hover { background: var(--surface-hover); } .rowact { text-align: right; white-space: nowrap; } .cur { color: var(--fg-3); font-size: 11.5px; } .chip { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; } .chip.on { background: var(--ok-soft); color: var(--ok); } .chip.off { background: var(--surface-2); color: var(--fg-2); } .empty, .loading { padding: 30px; text-align: center; color: var(--fg-2); } .clickrow { cursor: pointer; } .cat-cell { white-space: normal; } /* ================================== modal ================================ */ .modal-back { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 20px; z-index: 50; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); width: min(94vw, 640px); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-3); } .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .modal-head h2 { font-size: 15.5px; margin: 0; color: var(--heading); } .x { background: transparent; border: 1px solid transparent; color: var(--fg-2); font-size: 14px; line-height: 1; border-radius: var(--r-sm); padding: 5px 8px; } .x:hover { color: var(--fg); background: var(--surface-2); border-color: var(--border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; padding: 20px; } .fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .fld.wide { grid-column: 1 / -1; } .fld label { font-size: 11.5px; color: var(--fg-2); font-weight: 500; } .fld > label, .switch { margin-bottom: 0; } /* neutralise the inherited form-label gap */ .switch { flex-direction: row !important; align-items: center; gap: 8px; } .switch input { width: auto; min-height: 0; accent-color: var(--link); } .form-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); gap: 10px; } .form-actions > div { display: flex; gap: 10px; } /* =============================== dashboard =============================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-1); } .stat-v { font-family: var(--font-head); font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); } .stat-l { color: var(--fg-2); font-size: 12.5px; margin-top: 2px; } .stat-s { color: var(--fg-3); font-size: 11.5px; margin-top: 4px; } .cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .card h3 { margin: 0 0 12px; font-size: 13.5px; color: var(--heading); } ul.mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; } ul.mini li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 7px; border-bottom: 1px solid var(--border); } ul.mini li:last-child { padding-bottom: 0; border-bottom: 0; } .date { color: var(--fg-2); font-size: 12px; font-variant-numeric: tabular-nums; } .date.red { color: var(--err); font-weight: 600; } .tag { background: var(--navy-soft); color: var(--navy-soft-fg); padding: 1px 7px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; } .muted { color: var(--fg-2); } .small { font-size: 12px; } .ok { color: var(--ok); } /* =============================== settings ================================ */ .rate-row { margin-bottom: 10px; } .rate-big { font-family: var(--font-head); font-size: 19px; font-weight: 600; margin-bottom: 4px; color: var(--fg); } .rate-edit { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .rate-edit input { width: 130px; } /* ============================= date picker =============================== */ /* color-scheme is set per theme on :root, so native date controls follow the theme */ input[type="date"] { cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; } .dp-pop { position: fixed; z-index: 100; width: 252px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow-3); } .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp-title { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--heading); } .dp-nav { background: transparent; border: 1px solid var(--border); color: var(--fg-2); border-radius: var(--r-sm); width: 28px; height: 28px; padding: 0; line-height: 1; } .dp-nav:hover { color: var(--fg); background: var(--surface-2); border-color: var(--border-2); } .dp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 3px; } .dp-week span { text-align: center; font-size: 10.5px; color: var(--fg-3); font-weight: 600; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-cell { height: 30px; min-height: 0; border: 0; background: transparent; color: var(--fg); border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer; padding: 0; font-variant-numeric: tabular-nums; } .dp-cell:hover { background: var(--surface-2); } .dp-empty { visibility: hidden; } .dp-today { box-shadow: inset 0 0 0 1px var(--today); background: var(--red-soft); color: var(--today); font-weight: 600; } .dp-sel, .dp-sel:hover { background: var(--sel-bg); color: var(--sel-fg); font-weight: 700; box-shadow: none; } .dp-foot { margin-top: 6px; text-align: center; } .dp-today-btn { background: transparent; border: 0; color: var(--link); font-size: 12px; cursor: pointer; font-weight: 500; } .dp-today-btn:hover { color: var(--link-hover); text-decoration: underline; } /* =============================== calendar ================================ */ .cal-nav { align-items: center; } .cal-title { font-family: var(--font-head); font-weight: 600; min-width: 148px; text-align: center; color: var(--heading); } .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; } .leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); } .leg-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .cal-head div { color: var(--fg-2); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 0 8px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-height: 94px; padding: 6px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-1); } .cal-cell.out { background: transparent; border-color: transparent; box-shadow: none; } .cal-cell.today { border-color: var(--today); } .cal-day { font-size: 11.5px; color: var(--fg-2); font-weight: 600; font-variant-numeric: tabular-nums; } .cal-cell.today .cal-day { color: var(--red-on); background: var(--today); border-radius: var(--r-pill); padding: 0 6px; align-self: flex-start; } .cal-chip { display: flex; flex-direction: column; gap: 1px; border: 0; border-left: 4px solid currentColor; border-radius: var(--r-xs); padding: 4px 7px; min-height: 0; text-align: left; font-family: inherit; font-weight: 600; cursor: pointer; background: var(--surface-2); color: var(--fg-2); transition: border-left-width var(--tap), padding-left var(--tap); } .cal-chip:hover { border-left-width: 7px; padding-left: 4px; } .cc-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; } .cc-cat { font-weight: 700; letter-spacing: .01em; } .cc-n { font-weight: 700; font-variant-numeric: tabular-nums; } .cc-split { font-size: 10px; font-weight: 500; } .cal-chip.is-exam { box-shadow: inset 0 0 0 1.5px currentColor; } /* course-category chips — tokenised per theme, text/fill >= 4.5:1 in both */ .cat-ipaf { background: var(--cat-ipaf-bg); color: var(--cat-ipaf-fg); } .cat-udt { background: var(--cat-udt-bg); color: var(--cat-udt-fg); } .cat-first_aid { background: var(--cat-first-aid-bg); color: var(--cat-first-aid-fg); } .cat-hotworks { background: var(--cat-hotworks-bg); color: var(--cat-hotworks-fg); } .cat-internal { background: var(--cat-internal-bg); color: var(--cat-internal-fg); } .cat-other { background: var(--cat-other-bg); color: var(--cat-other-fg); } /* legend dots take the solid category colour (higher specificity than .cat-*) */ .cal-legend .leg-dot { background: currentColor; } /* ======================= enroll: duplicate check ========================= */ .dup-box { margin-top: 7px; } .dup-title { font-size: 11.5px; color: var(--err); margin-bottom: 5px; font-weight: 600; } .dup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 5px; } .dup-info { font-size: 12.5px; } .dup-exams { color: var(--fg-2); font-size: 11px; margin-top: 2px; } .dup-chosen { font-size: 12.5px; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; display: flex; gap: 10px; align-items: center; justify-content: space-between; } .dup-chosen .link { color: var(--ok); } /* =========================== batch people rows =========================== */ #ed-people { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } #ed-addrow { align-self: flex-start; } .pl-row { display: flex; flex-direction: column; gap: 4px; } .pl-main { display: flex; gap: 8px; align-items: center; } .pl-name { flex: 1; min-width: 0; } .pl-dob { flex: 0 0 150px; } .pl-del { background: transparent; border: 1px solid var(--border); color: var(--fg-2); border-radius: var(--r-sm); width: 34px; height: 34px; flex: 0 0 auto; line-height: 1; } .pl-del:hover { color: var(--err); border-color: var(--err-border); background: var(--err-soft); } .pl-matches { min-width: 0; } /* ========================== multi-exam enroll ============================ */ #ed-exams { display: flex; flex-direction: column; gap: 6px; } .ex-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; margin-bottom: 0; transition: border-color var(--tap), background var(--tap); } .ex-row:hover { border-color: var(--border-2); background: var(--surface-2); } .ex-row input { width: auto; min-height: 0; accent-color: var(--link); } .ex-row span { flex: 1; font-size: 13px; color: var(--fg); } .ex-price { color: var(--fg-2); font-size: 12.5px; } /* ============================ session detail ============================= */ .cat-chip2 { display: inline-block; background: var(--navy-soft); color: var(--navy-soft-fg); border: 0; border-radius: var(--r-xs); padding: 3px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; margin: 1px 2px 1px 0; font-family: inherit; } .cat-chip2:hover { background: var(--surface-2); color: var(--link-hover); } .sess-fin { margin: 16px 0 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .pos { color: var(--ok); } .neg { color: var(--err); } .stat-v.pos { color: var(--ok); } .stat-v.neg { color: var(--err); } .sub-h { font-size: 15px; margin: 20px 0 10px; color: var(--heading); } .kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kv span { color: var(--fg-2); font-size: 11.5px; } .kv b { font-size: 13.5px; font-weight: 600; } /* =============================== responsive ============================== */ @media (max-width: 760px) { /* The sidebar used to be hidden here, which left a phone with no way to navigate at all. It becomes a bottom bar instead — thumb-reachable, and clear of the iPhone home indicator. */ .app { grid-template-columns: 1fr; } .form-grid, .cards2, .ac-two { grid-template-columns: 1fr; } .main { padding: 14px 14px calc(66px + env(safe-area-inset-bottom)); } .topbar { padding: 8px 12px; position: sticky; top: 0; z-index: 20; gap: 8px; } .topbar .uname { display: none; } /* the phone belongs to one person */ .topbar .pill { font-size: 10px; padding: 2px 7px; } .langs { gap: 2px; } .lang { padding: 3px 6px; font-size: 11px; } .user { gap: 6px; flex-shrink: 0; } .user .ghost.sm { padding: 5px 9px; font-size: 12px; } .search { width: 100%; } .sidebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--sidebar-border); box-shadow: 0 -2px 12px rgba(0,0,0,.18); } .sidebar .brand { display: none; } /* the logo lives in the top bar on a phone */ .nav { flex-direction: row; width: 100%; gap: 0; } .nav-item { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 9.5px; text-align: center; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item .ic { width: auto; font-size: 15px; } .nav-item.active::before { display: none; } /* the left rail makes no sense horizontally */ /* Nine tabs do not fit a phone. The five a trainer opens daily stay; the rest are reachable from the More tab. Everything still works — only the shortcut is hidden. */ .nav-item[data-nav="clients"], .nav-item[data-nav="enrollments"], .nav-item[data-nav="users"], .nav-item[data-nav="settings"] { display: none; } .nav-more { display: flex !important; } /* tables are the widest thing here — let them scroll inside their own box, never the page */ .tablewrap { -webkit-overflow-scrolling: touch; } table.grid { font-size: 12.5px; } table.grid th, table.grid td { padding: 8px 10px; } /* money bands stack instead of squeezing */ .v4-money, .v4-chain, .ac-chain { flex-direction: column; gap: 6px; } .v4-cell, .ac-cell { flex: 0 0 auto; padding: 8px 10px; } .v4-fig, .ac-fig { font-size: 19px; margin: 1px 0 2px; } .v4-band { padding: 11px 12px; } .v4-foot { flex-wrap: wrap; gap: 8px; } .v4-op, .ac-op { display: none; } .v4-panels { grid-template-columns: 1fr; } .v4-viz { justify-content: center; } .page-head { gap: 10px; } .page-head h1 { font-size: 18px; } .modal { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; } .modal-back { padding: 0; align-items: end; } .res-row { flex-direction: column; align-items: stretch; gap: 6px; } .res-exam { justify-content: space-between; } .int-tbl { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================================ DASHBOARD — Variant 4 "Executive one-screen" ========================================================================== */ /* ================== VARIANT 4 — "Executive one-screen" ================== Fits 1280x720 without scrolling. Tokens only, no colour literals. */ .v4-screen { display: flex; flex-direction: column; gap: 12px; } .v4-screen .page-head { margin-bottom: 0; } .v4-screen .page-head h1 { display: flex; align-items: baseline; gap: 10px; } .v4-day { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; } .v4-meta { gap: 6px; } /* ------------------------------------------------------------ money band */ .card.v4-band { padding: 13px 16px 11px; } .v4-bandhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .v4-title { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--heading); } .v4-note { font-size: 11.5px; color: var(--fg-3); } .v4-money { display: flex; align-items: stretch; gap: 14px; } .v4-chain { flex: 1 1 auto; display: flex; align-items: stretch; gap: 8px; min-width: 0; } .v4-op { flex: 0 0 12px; align-self: center; text-align: center; font-family: var(--font-head); font-size: 15px; color: var(--fg-3); } .v4-cell { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; } .v4-cell-strong { flex-grow: 1.15; background: var(--navy-soft); } .v4-pending { background: transparent; border: 1px dashed var(--border-2); } .v4-lab { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); } .v4-fig { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: 3px; white-space: nowrap; color: var(--fg); font-variant-numeric: tabular-nums; } .v4-fig i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--fg-3); margin-left: 3px; } .v4-cell-strong .v4-fig { color: var(--navy-soft-fg); } .v4-cell-strong .v4-fig i { color: var(--navy-soft-fg); opacity: .75; } .v4-na { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--fg-2); margin-top: 5px; } .v4-sub { font-size: 10.5px; line-height: 1.32; color: var(--fg-3); margin-top: 4px; } .v4-star { color: var(--fg-3); } /* ----------------------------------------------- proportion donut (SVG) */ .v4-viz { flex: 0 0 198px; display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--border); } .v4-donut { position: relative; flex: 0 0 114px; width: 114px; height: 114px; } .v4-donut svg { display: block; width: 100%; height: 100%; } .v4-track-ring { fill: none; stroke: var(--surface-3); stroke-width: 11; } .v4-arc { fill: none; stroke-width: 11; } .v4-arc-earn { stroke: var(--ok); } .v4-arc-cost { stroke: var(--cat-udt-fg); } .v4-ring-na { fill: none; stroke: var(--border-2); stroke-width: 1.5; } .v4-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .v4-mid b { font-family: var(--font-head); font-size: 21px; font-weight: 600; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; } .v4-mid span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-top: 3px; } .v4-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--fg-2); } .v4-key li { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .v4-key i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; } .k-earn { background: var(--ok); } .k-cost { background: var(--cat-udt-fg); } .k-na { background: transparent; border: 1px dashed var(--border-2); } /* --------------------------------- band foot: the single red signal */ .v4-foot { display: flex; align-items: center; gap: 16px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); } .v4-owed { display: flex; align-items: baseline; gap: 10px; padding-left: 11px; border-left: 3px solid var(--red); } .v4-owed .v4-lab { color: var(--red-text); } .v4-owed b { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--red-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .v4-owed b span { font-size: 11px; } .v4-owed-note { flex: 1 1 auto; font-size: 12px; color: var(--fg-2); } .v4-owed-note b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .v4-rate { font-size: 11px; color: var(--fg-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .v4-rate span { display: block; color: var(--fg-3); opacity: .8; } /* ------------------------------------------------------------- 3 panels */ .v4-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .card.v4-panel { padding: 12px 15px 11px; display: flex; flex-direction: column; } .card.v4-panel h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); } .card.v4-panel h3 em { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); font-variant-numeric: tabular-nums; } .v4-pfoot { margin-top: auto; padding-top: 9px; font-size: 10.5px; line-height: 1.35; color: var(--fg-3); } /* bars — sold by course */ .v4-bars { display: flex; flex-direction: column; gap: 9px; } .v4-brow { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .v4-btop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; } .v4-bname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); } .v4-bval { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; } .v4-bval em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--fg-3); margin-left: 3px; } .v4-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .v4-track i { display: block; height: 100%; border-radius: var(--r-pill); } .f-ipaf { background: var(--cat-ipaf-fg); } .f-udt { background: var(--cat-udt-fg); } /* segmented bars — sessions & payments */ .v4-seg { display: flex; height: 9px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .v4-seg i { display: block; height: 100%; } .s-done { background: var(--fg-3); } .s-plan { background: var(--link); } .p-unpaid { background: var(--fg-3); } .p-waived { background: var(--border-2); } .p-paid { background: var(--ok); } .v4-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; } .v4-legend span { display: inline-flex; align-items: center; gap: 6px; } .v4-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } /* next sessions */ ul.mini.v4-next { gap: 0; margin-top: 10px; font-size: 12px; } ul.mini.v4-next li { flex-wrap: nowrap; gap: 8px; padding: 5px 0; } ul.mini.v4-next li b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } ul.mini.v4-next .date { flex: 0 0 46px; } .v4-fill { flex: 0 0 34px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .v4-fill i { display: block; height: 100%; background: var(--link); border-radius: var(--r-pill); } .v4-cnt { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; } /* payment rows */ .v4-plist { margin-top: 10px; } .v4-prow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .v4-prow:last-child { border-bottom: 0; } .v4-prow > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); } .v4-prow .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; } .v4-prow b { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } .v4-pamt { color: var(--fg-2); font-variant-numeric: tabular-nums; min-width: 82px; text-align: right; } /* ------------------------------------------------------- alert strip */ .card.v4-strip { display: flex; align-items: stretch; padding: 0; overflow: hidden; } .v4-alert { flex: 1 1 0; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px 14px; font-size: 11.5px; line-height: 1.35; color: var(--fg-2); border-right: 1px solid var(--border); } .v4-alert:last-child { border-right: 0; flex-grow: 2; } .v4-alert b { color: var(--fg); font-weight: 600; } .v4-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: 0 0 8px; margin-top: 4px; } .d-ok { background: var(--ok); } .d-info { background: var(--link); } .d-na { background: transparent; border: 1px dashed var(--border-2); } /* ------------------------------------------------------------ fallbacks */ /* shorter screens: shrink the chrome, never the honest wording */ @media (max-height: 700px) { .v4-screen { gap: 8px; } .v4-donut { flex-basis: 88px; width: 88px; height: 88px; } .v4-viz { flex-basis: 172px; } .v4-mid b { font-size: 17px; } .card.v4-band { padding: 10px 14px 8px; } .card.v4-panel { padding: 10px 13px 9px; } .v4-bars { gap: 7px; } .v4-pfoot { display: none; } } @media (max-width: 1150px) { .v4-money { flex-direction: column; } .v4-chain { flex-wrap: wrap; } .v4-viz { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--border); padding: 10px 0 0; justify-content: center; } .v4-key { flex-direction: row; gap: 14px; } } @media (max-width: 860px) { .v4-panels { grid-template-columns: 1fr; } .card.v4-strip { flex-direction: column; } .v4-alert { border-right: 0; border-bottom: 1px solid var(--border); } .v4-alert:last-child { border-bottom: 0; } .v4-foot { flex-wrap: wrap; } } /* --- classes the live dashboard needs beyond the mock (all six categories, a real fixed-cost slice, partial payments, a warning dot) --- */ .v4-arc-fix { stroke: var(--fg-3); } .v4-key .k-fix { background: var(--fg-3); } .v4-seg .p-partial, .sw.p-partial { background: var(--cat-ipaf-fg); } .v4-dot.d-warn { background: var(--red); } .v4-track .f-first-aid { background: var(--cat-first-aid-fg); } .v4-track .f-hotworks { background: var(--cat-hotworks-fg); } .v4-track .f-internal { background: var(--cat-internal-fg); } .v4-track .f-other { background: var(--cat-other-fg); } /* a loss-making total must not read like a healthy one */ .v4-cell.v4-loss { background: var(--err-soft); } .v4-cell.v4-loss .v4-fig, .v4-cell.v4-loss .v4-sub { color: var(--err); } /* saved-on-own-staff sits beside "still owed": notional money, so it reads green, not red */ .v4-owed.v4-saved b { color: var(--ok); } .v4-owed.v4-saved .v4-lab { color: var(--ok); } /* ---- themed confirm/alert (native dialogs are suppressed in embedded panes) ---- */ .modal.ask { width: min(94vw, 420px); } .ask-body { padding: 18px 20px 4px; } .ask-body p { margin: 0 0 8px; font-size: 13.5px; color: var(--fg); } .ask-body p + p { color: var(--fg-2); font-size: 13px; } .ask-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; } button.danger-solid { background: var(--red); color: var(--red-on); border: 0; border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; } button.danger-solid:hover { background: var(--red-hover); } /* ---- exam results: one row per person, one control group per exam ---- */ .res-wrap { padding: 16px 20px 6px; max-height: 62vh; overflow: auto; } .res-hint { margin: 0 0 12px; } .res-bulk { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .res-row { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); } .res-row:last-child { border-bottom: 0; } .res-name { flex: 1 1 40%; min-width: 0; font-size: 13.5px; font-weight: 600; padding-top: 5px; } .res-exams { flex: 1 1 60%; display: flex; flex-direction: column; gap: 6px; } .res-exam { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .res-cat { font-size: 12px; font-weight: 600; color: var(--fg-2); min-width: 76px; text-align: right; } .res-btns { display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; } .res-b { background: transparent; border: 0; border-radius: var(--r-xs); padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--fg-2); font-family: inherit; } .res-b:hover { color: var(--fg); } .res-b.ok.on { background: var(--ok); color: var(--surface); } .res-b.bad.on { background: var(--red); color: var(--red-on); } .res-b.none.on { background: var(--fg-3); color: var(--surface); } /* exam chips carry their own result so the single person-level status loses no detail */ .cat-chip2.st-passed { background: var(--ok-soft); color: var(--ok); } .cat-chip2.st-failed { background: var(--err-soft); color: var(--err); } .cat-chip2.st-no_show { background: var(--surface-3); color: var(--fg-3); } .pay-amt { margin-left: 8px; font-weight: 500; } /* payment is grouped by payer: a mixed group's companies settle separately */ .pay-block { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; } .pay-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; background: var(--surface-2); border-radius: var(--r-md) var(--r-md) 0 0; } .pay-head-act { display: flex; align-items: center; gap: 6px; } .pay-block .res-row { padding: 8px 12px; } /* ---- payment state: neutral while the course is ahead, red once it is behind ---- */ .pay-ok { color: var(--ok); font-weight: 600; } .pay-waived { color: var(--fg-3); } .pay-warn { color: var(--cat-ipaf-fg); font-weight: 600; } .pay-late { color: var(--err); font-weight: 700; } .pay-late::before { content: "● "; font-size: 9px; vertical-align: 2px; } /* invitation link, shown once after creating it */ .inv-link { margin-top: 12px; } .inv-link input { font-size: 12px; font-family: var(--font-mono, monospace); } /* a calendar day is itself the place to start a new group */ .cal-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .cal-add { background: transparent; border: 0; color: var(--fg-3); font-size: 15px; line-height: 1; padding: 0 3px; border-radius: var(--r-xs); opacity: 0; transition: opacity var(--tap), color var(--tap); } .cal-cell:hover .cal-add { opacity: 1; } .cal-add:hover { color: var(--red); background: var(--red-soft); } .cal-add:focus-visible { opacity: 1; } /* planned exams for a session: ticks, not a list box */ .multiref { display: flex; flex-wrap: wrap; gap: 6px; } .mr-item { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; margin: 0 !important; font-size: 13px; color: var(--fg); } .mr-item input { width: auto; } .mr-item:has(input:checked) { background: var(--navy-soft); border-color: var(--link); color: var(--navy-soft-fg); font-weight: 600; } /* Epcido's own rates: one row per course carrying every cost, grouped into per-person and per-day so it is obvious which ones can be charged to one seat. */ .int-box { margin-top: 14px; } .int-tbl { table-layout: fixed; width: 100%; font-size: 12.5px; } .int-tbl th, .int-tbl td { padding: 7px 6px; box-sizing: border-box; } .int-tbl td { overflow: hidden; text-overflow: ellipsis; } .int-tbl th { white-space: normal; word-break: break-word; line-height: 1.2; font-size: 10.5px; vertical-align: bottom; text-align: right; } .int-tbl th:first-child { text-align: left; } /* 22 + 10x7.4 + 4 = 100 */ .int-tbl th:nth-child(1), .int-tbl td:nth-child(1) { width: 24%; } /* 24 + 6x9.5 + 2x9.5 + 4 = 100, with nine data columns */ .int-tbl td:nth-child(n+2):nth-child(-n+9), .int-tbl tr:last-child th:nth-child(n+2):nth-child(-n+9) { width: 9%; } .int-tbl th:last-child, .int-tbl td:last-child { width: 4%; } .int-grp th { text-align: center; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); border-bottom: 0; padding-bottom: 2px; } .int-grp th[colspan] { border-left: 1px solid var(--border); border-right: 1px solid var(--border); } .int-name b { font-weight: 600; } .int-tbl input { width: 100%; padding: 5px 6px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; } .int-tbl input::-webkit-outer-spin-button, .int-tbl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .int-tbl input[type=number] { -moz-appearance: textfield; } /* travel columns are meaningless for courses that never leave the Academy */ .int-tbl input.int-na { opacity: .35; } .int-tbl td.int-our, .int-tbl td.int-save { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* ============================================================================ CLIENT CARD — money first, then what to sell next ========================================================================== */ .ac-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--fg-2); } .ac-meta b { color: var(--fg); } .card.ac-band { padding: 13px 16px 11px; } .ac-bandhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .ac-title { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--heading); } .ac-note { font-size: 11.5px; color: var(--fg-3); } .ac-chain { display: flex; align-items: stretch; gap: 8px; } .ac-op { flex: 0 0 12px; align-self: center; text-align: center; font-family: var(--font-head); font-size: 15px; color: var(--fg-3); } .ac-cell { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-2); } .ac-cell.is-owed { background: var(--red-soft); } .ac-cell.is-owed .ac-fig { color: var(--red-text); } .ac-lab { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; } .ac-fig { font-family: var(--font-head); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0 3px; color: var(--fg); } .ac-fig i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--fg-3); } .ac-sub { font-size: 11.5px; color: var(--fg-3); line-height: 1.35; } .ac-sub .warn { color: var(--cat-ipaf-fg); } /* ageing ramp: the older the money, the hotter the colour */ .ac-age { margin-top: 12px; } .ac-agebar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); } .ac-agebar i { display: block; height: 100%; } .ag-0 { background: var(--cat-other-fg); } .ag-1 { background: var(--cat-udt-fg); } .ag-2 { background: var(--cat-ipaf-fg); } .ag-3 { background: var(--cat-hotworks-fg); } .ac-agekey { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; } .ac-agekey li { display: flex; flex-direction: column; gap: 1px; } .ac-agev { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; } .ac-agev i { width: 9px; height: 9px; border-radius: 2px; } .ac-agel { font-size: 11px; color: var(--fg-3); padding-left: 15px; } .ac-foot { margin: 10px 0 0; } .ac-two { margin-top: 14px; } .ac-waves li { justify-content: space-between; } .ac-away { color: var(--fg-3); font-size: 12px; margin-left: auto; } .ac-hint { margin: 10px 0 0; } /* the "More" tab exists only on phones */ .nav-more { display: none; background: transparent; border: 0; font-family: inherit; } .more-list { padding: 10px 12px 18px; display: flex; flex-direction: column; gap: 2px; } .more-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--r-sm); color: var(--fg); font-size: 15px; } .more-item:hover { background: var(--surface-2); } .more-item .ic { width: 22px; text-align: center; }