/*!
 * EP-Web-Host-Manager — Admin stylesheet
 * Created by www.eplugins.net
 *
 * No web fonts, no CDN, no build step. System font stacks only, so the panel
 * renders identically on an air-gapped server and on shared hosting.
 */

/* ============================================================ *
 * 1. Tokens
 * ============================================================ */
:root {
  /* Surfaces */
  --ink:        #101A33;
  --ink-deep:   #0A1128;
  --ink-line:   #1E2A4A;
  --surface:    #F3F6FC;
  --card:       #FFFFFF;
  --line:       #E2E8F5;
  --line-soft:  #EEF2FA;

  /* Text */
  --text:       #16203A;
  --text-mid:   #4A5878;
  --text-dim:   #8390B0;
  --on-ink:     #E8EDFA;
  --on-ink-dim: #8C9AC0;

  /* Signal palette — each colour means one thing, everywhere */
  --cyan:       #00B8D9;   /* interactive / primary            */
  --cyan-deep:  #0091AB;
  --violet:     #6554C0;   /* domains / secondary              */
  --mint:       #00A96E;   /* money in / healthy               */
  --amber:      #F5A300;   /* waiting on us                    */
  --coral:      #FF5630;   /* overdue / broken                 */
  --pink:       #E5407B;   /* accents                          */

  --cyan-wash:   #E4F8FC;
  --violet-wash: #EEEBFA;
  --mint-wash:   #E1F7EF;
  --amber-wash:  #FEF3DC;
  --coral-wash:  #FFEAE4;

  /* Type */
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --num: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono",
         "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* Geometry */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --sidebar-w: 254px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 62px;

  --shadow-sm: 0 1px 2px rgba(16, 26, 51, .06), 0 1px 3px rgba(16, 26, 51, .05);
  --shadow:    0 4px 16px rgba(16, 26, 51, .07);
  --shadow-lg: 0 18px 46px rgba(16, 26, 51, .14);
}

/* ============================================================ *
 * 2. Reset
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 15px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }

a { color: var(--cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.ephm-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Numeric contexts get the mono face — money, IDs and counters line up. */
.ephm-num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ============================================================ *
 * 3. App shell
 * ============================================================ */
.ephm-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.ephm-app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* ---- Sidebar ---- */
.ephm-sidebar {
  background: linear-gradient(178deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.ephm-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--ink-line);
  min-height: var(--topbar-h);
}
.ephm-brand__mark {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  display: grid;
  place-items: center;
  font: 700 13px/1 var(--num);
  color: #06121F;
  letter-spacing: -.04em;
}
.ephm-brand__text { min-width: 0; }
.ephm-brand__name {
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ephm-brand__meta {
  font: 10px/1.3 var(--num);
  color: var(--on-ink-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ephm-nav { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }
.ephm-nav::-webkit-scrollbar { width: 6px; }
.ephm-nav::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 3px; }

.ephm-nav__group {
  font: 10px/1 var(--num);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5D6C93;
  padding: 18px 12px 8px;
}
.ephm-nav__group:first-child { padding-top: 4px; }

.ephm-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--on-ink-dim);
  font-size: 14px;
  font-weight: 500;
  transition: background .14s ease, color .14s ease;
  position: relative;
}
.ephm-nav__link:hover { background: rgba(255, 255, 255, .05); color: var(--on-ink); text-decoration: none; }
.ephm-nav__link.is-active { background: rgba(0, 184, 217, .14); color: #FFFFFF; font-weight: 600; }
.ephm-nav__link.is-active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan);
}
.ephm-nav__icon { flex: 0 0 18px; height: 18px; opacity: .95; }
.ephm-nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ephm-nav__count {
  margin-left: auto;
  font: 600 11px/1 var(--num);
  background: var(--coral);
  color: #FFFFFF;
  padding: 4px 7px;
  border-radius: 20px;
}
.ephm-nav__count[data-tone="amber"] { background: var(--amber); color: #3A2800; }
.ephm-nav__count[data-tone="cyan"]  { background: var(--cyan);  color: #062730; }

.ephm-sidebar__footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ink-line);
  font-size: 11px;
  color: #566388;
}
.ephm-sidebar__footer a { color: #7F8DB3; }

.ephm-app.is-collapsed .ephm-nav__label,
.ephm-app.is-collapsed .ephm-nav__group,
.ephm-app.is-collapsed .ephm-brand__text,
.ephm-app.is-collapsed .ephm-nav__count,
.ephm-app.is-collapsed .ephm-sidebar__footer { display: none; }
.ephm-app.is-collapsed .ephm-nav__link { justify-content: center; padding: 11px 0; }

/* ---- Main column ---- */
.ephm-main { min-width: 0; display: flex; flex-direction: column; }

.ephm-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.ephm-iconbtn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-sm);
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.ephm-iconbtn:hover { border-color: var(--cyan); color: var(--cyan-deep); }

.ephm-search { flex: 1; max-width: 460px; position: relative; }
.ephm-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: 14px var(--ui);
  color: var(--text);
}
.ephm-search input::placeholder { color: var(--text-dim); }
.ephm-search input:focus { outline: none; border-color: var(--cyan); background: var(--card); box-shadow: 0 0 0 3px rgba(0, 184, 217, .13); }
.ephm-search__icon { position: absolute; left: 12px; top: 10px; color: var(--text-dim); pointer-events: none; }

.ephm-topbar__spacer { flex: 1; }

.ephm-userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--card);
  cursor: pointer;
}
.ephm-userchip:hover { border-color: var(--cyan); }
.ephm-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  color: #FFFFFF;
  font: 600 12px/1 var(--ui);
}
.ephm-userchip__name { font-size: 13.5px; font-weight: 600; }
.ephm-userchip__role { font-size: 11px; color: var(--text-dim); }

.ephm-content { padding: 22px; flex: 1; }
.ephm-content > * + * { margin-top: 18px; }

/* ============================================================ *
 * 4. Page header + flashes
 * ============================================================ */
.ephm-pagehead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ephm-pagehead__eyebrow {
  font: 10px/1 var(--num);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.ephm-pagehead h1 { font-size: 25px; font-weight: 680; letter-spacing: -.022em; }
.ephm-pagehead__sub { color: var(--text-mid); font-size: 14px; margin-top: 3px; }
.ephm-pagehead__actions { margin-left: auto; display: flex; gap: 9px; }

.ephm-flash {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px;
  border-radius: var(--r);
  border: 1px solid;
  font-size: 14px;
}
.ephm-flash + .ephm-flash { margin-top: 9px; }
.ephm-flash--success { background: var(--mint-wash);  border-color: #A5E5CD; color: #04553A; }
.ephm-flash--error   { background: var(--coral-wash); border-color: #FFBBA8; color: #8A2410; }
.ephm-flash--warning { background: var(--amber-wash); border-color: #F6D48A; color: #6B4A00; }
.ephm-flash--info    { background: var(--cyan-wash);  border-color: #A2E3F0; color: #06525F; }

/* ============================================================ *
 * 5. Cards
 * ============================================================ */
.ephm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ephm-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.ephm-card__title { font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.ephm-card__hint { font-size: 12.5px; color: var(--text-dim); }
.ephm-card__actions { margin-left: auto; }
.ephm-card__body { padding: 20px; }
.ephm-card__body--flush { padding: 0; }

/* ============================================================ *
 * 6. Signature element — Automation Pulse
 *
 * A hosting platform whose cron has stopped is silently not invoicing,
 * not suspending and not renewing. That fact deserves the widest,
 * loudest element on the screen, above the money.
 * ============================================================ */
.ephm-pulse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.ephm-pulse--healthy { background: linear-gradient(100deg, #0B2B22 0%, #0F3A2C 55%, #124434 100%); border-color: #1B5E47; }
.ephm-pulse--late    { background: linear-gradient(100deg, #33240A 0%, #452F08 55%, #533A0B 100%); border-color: #6B4E12; }
.ephm-pulse--stalled,
.ephm-pulse--never   { background: linear-gradient(100deg, #3A1109 0%, #4C170D 55%, #5C1C10 100%); border-color: #7A2716; }

.ephm-pulse__beat { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.ephm-pulse__dot {
  position: absolute; inset: 15px;
  border-radius: 50%;
  background: var(--mint);
}
.ephm-pulse__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--mint);
  opacity: .45;
  animation: ephm-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.ephm-pulse--late .ephm-pulse__dot,
.ephm-pulse--late .ephm-pulse__ring { background: var(--amber); border-color: var(--amber); }
.ephm-pulse--late .ephm-pulse__ring { background: none; }
.ephm-pulse--stalled .ephm-pulse__dot,
.ephm-pulse--never .ephm-pulse__dot { background: var(--coral); }
.ephm-pulse--stalled .ephm-pulse__ring,
.ephm-pulse--never .ephm-pulse__ring { border-color: var(--coral); animation-duration: 1.1s; }

@keyframes ephm-ping {
  0%   { transform: scale(.55); opacity: .8; }
  75%  { transform: scale(1);   opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

.ephm-pulse__headline { color: #FFFFFF; font-size: 16px; font-weight: 650; letter-spacing: -.012em; }
.ephm-pulse__detail   { color: rgba(255, 255, 255, .72); font-size: 13px; margin-top: 2px; }
.ephm-pulse__stats    { display: flex; gap: 26px; }
.ephm-pulse__stat     { text-align: right; }
.ephm-pulse__stat b   { display: block; font: 650 17px/1.2 var(--num); color: #FFFFFF; }
.ephm-pulse__stat span{ font: 10px/1 var(--num); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* ============================================================ *
 * 7. KPI cards
 * ============================================================ */
.ephm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px;
}
.ephm-kpi {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.ephm-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ephm-kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kpi-accent, var(--cyan));
}
.ephm-kpi[data-tone="mint"]   { --kpi-accent: var(--mint);   --kpi-wash: var(--mint-wash); }
.ephm-kpi[data-tone="cyan"]   { --kpi-accent: var(--cyan);   --kpi-wash: var(--cyan-wash); }
.ephm-kpi[data-tone="violet"] { --kpi-accent: var(--violet); --kpi-wash: var(--violet-wash); }
.ephm-kpi[data-tone="amber"]  { --kpi-accent: var(--amber);  --kpi-wash: var(--amber-wash); }
.ephm-kpi[data-tone="coral"]  { --kpi-accent: var(--coral);  --kpi-wash: var(--coral-wash); }

.ephm-kpi__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ephm-kpi__icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--kpi-wash, var(--cyan-wash));
  color: var(--kpi-accent, var(--cyan));
}
.ephm-kpi__label {
  font: 10px/1.3 var(--num);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ephm-kpi__value {
  font: 650 29px/1.05 var(--num);
  letter-spacing: -.035em;
  color: var(--text);
}
.ephm-kpi__foot { margin-top: 9px; font-size: 12.5px; color: var(--text-mid); display: flex; align-items: center; gap: 6px; }
.ephm-delta { font: 600 12px/1 var(--num); padding: 3px 7px; border-radius: 20px; }
.ephm-delta--up   { background: var(--mint-wash);  color: #06694A; }
.ephm-delta--down { background: var(--coral-wash); color: #A42D14; }
.ephm-delta--flat { background: var(--line-soft);  color: var(--text-mid); }

/* ============================================================ *
 * 8. Grids
 * ============================================================ */
.ephm-grid { display: grid; gap: 18px; }
.ephm-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ephm-grid--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================ *
 * 9. Chart (hand-rolled SVG — no chart library, works offline)
 * ============================================================ */
.ephm-chart { width: 100%; height: auto; display: block; }
.ephm-chart__grid   { stroke: var(--line-soft); stroke-width: 1; }
.ephm-chart__axis   { font: 10px var(--num); fill: var(--text-dim); }
.ephm-chart__bar    { fill: url(#ephmBarGrad); transition: opacity .15s ease; }
.ephm-chart__bar:hover { opacity: .78; }
.ephm-chart__line   { fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ephm-chart__point  { fill: var(--card); stroke: var(--violet); stroke-width: 2.5; }

.ephm-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-mid); }
.ephm-legend__key { display: inline-flex; align-items: center; gap: 7px; }
.ephm-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

/* ============================================================ *
 * 10. Work queue
 * ============================================================ */
.ephm-queue { list-style: none; margin: 0; padding: 0; }
.ephm-queue li + li { border-top: 1px solid var(--line-soft); }
.ephm-queue a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 20px;
  color: var(--text);
  transition: background .13s ease;
}
.ephm-queue a:hover { background: var(--surface); text-decoration: none; }
.ephm-queue__count {
  flex: 0 0 40px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  font: 650 15px/1 var(--num);
}
.ephm-queue__count[data-tone="cyan"]   { background: var(--cyan-wash);   color: var(--cyan-deep); }
.ephm-queue__count[data-tone="amber"]  { background: var(--amber-wash);  color: #8A5D00; }
.ephm-queue__count[data-tone="coral"]  { background: var(--coral-wash);  color: #A42D14; }
.ephm-queue__count[data-tone="violet"] { background: var(--violet-wash); color: #4B3BA5; }
.ephm-queue__count.is-zero { background: var(--line-soft); color: var(--text-dim); }
.ephm-queue__label { font-size: 14px; }
.ephm-queue__go { margin-left: auto; color: var(--text-dim); }

/* ============================================================ *
 * 11. Tables
 * ============================================================ */
.ephm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ephm-table th {
  text-align: left;
  padding: 11px 20px;
  font: 10px/1.3 var(--num);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ephm-table td { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ephm-table tbody tr:last-child td { border-bottom: 0; }
.ephm-table tbody tr:hover { background: #FAFCFF; }
.ephm-table__num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.ephm-table__right { text-align: right; }

.ephm-empty { padding: 34px 20px; text-align: center; color: var(--text-dim); }
.ephm-empty strong { display: block; color: var(--text-mid); font-weight: 600; margin-bottom: 4px; }

/* ============================================================ *
 * 12. Badges + buttons
 * ============================================================ */
.ephm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font: 600 11.5px/1.5 var(--ui);
  white-space: nowrap;
}
.ephm-badge--active,  .ephm-badge--paid,    .ephm-badge--closed  { background: var(--mint-wash);  color: #05664A; }
.ephm-badge--pending, .ephm-badge--unpaid,  .ephm-badge--open    { background: var(--amber-wash); color: #7A5300; }
.ephm-badge--overdue, .ephm-badge--fraud,   .ephm-badge--suspended,
.ephm-badge--cancelled, .ephm-badge--terminated                  { background: var(--coral-wash); color: #A42D14; }
.ephm-badge--draft,   .ephm-badge--expired, .ephm-badge--inactive{ background: var(--line-soft);  color: var(--text-mid); }
.ephm-badge--info                                                { background: var(--cyan-wash);  color: #06525F; }

.ephm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 17px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 600 14px var(--ui);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ephm-btn:hover { text-decoration: none; }
.ephm-btn--primary { background: var(--cyan); color: #05222A; }
.ephm-btn--primary:hover { background: var(--cyan-deep); color: #FFFFFF; }
.ephm-btn--ghost { background: var(--card); border-color: var(--line); color: var(--text-mid); }
.ephm-btn--ghost:hover { border-color: var(--cyan); color: var(--cyan-deep); }
.ephm-btn--danger { background: var(--coral); color: #FFFFFF; }
.ephm-btn--danger:hover { background: #E14320; }
.ephm-btn--block { width: 100%; }
.ephm-btn--lg { height: 44px; padding: 0 24px; font-size: 15px; }
.ephm-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ============================================================ *
 * 13. Activity feed
 * ============================================================ */
.ephm-feed { list-style: none; margin: 0; padding: 6px 0; }
.ephm-feed li { display: flex; gap: 12px; padding: 10px 20px; }
.ephm-feed__dot {
  flex: 0 0 8px; height: 8px; margin-top: 7px;
  border-radius: 50%; background: var(--cyan);
}
.ephm-feed__body { min-width: 0; }
.ephm-feed__text { font-size: 13.5px; color: var(--text); }
.ephm-feed__meta { font: 11px var(--num); color: var(--text-dim); margin-top: 2px; }

/* ============================================================ *
 * 14. Forms
 * ============================================================ */
.ephm-field { margin-bottom: 16px; }
.ephm-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-mid); }
.ephm-input, .ephm-select, .ephm-textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font: 14.5px var(--ui);
  color: var(--text);
}
.ephm-textarea { min-height: 110px; resize: vertical; }
.ephm-input:focus, .ephm-select:focus, .ephm-textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 184, 217, .14);
}
.ephm-input[aria-invalid="true"] { border-color: var(--coral); }
.ephm-help { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
.ephm-error { font-size: 12.5px; color: #A42D14; margin-top: 5px; }
.ephm-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-mid); }
.ephm-check input { width: 16px; height: 16px; accent-color: var(--cyan); }

/* ============================================================ *
 * 15. Sign-in screen
 * ============================================================ */
.ephm-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--surface);
}
.ephm-login__aside {
  background: linear-gradient(160deg, var(--ink) 0%, #142046 48%, #1B1147 100%);
  color: var(--on-ink);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ephm-login__aside::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  right: -140px; top: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 184, 217, .30) 0%, rgba(0, 184, 217, 0) 68%);
}
.ephm-login__aside::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  left: -120px; bottom: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 84, 192, .34) 0%, rgba(101, 84, 192, 0) 68%);
}
.ephm-login__pitch { position: relative; max-width: 420px; }
.ephm-login__pitch h2 { font-size: 30px; font-weight: 680; letter-spacing: -.028em; line-height: 1.2; }
.ephm-login__pitch p { color: var(--on-ink-dim); margin-top: 12px; font-size: 15px; }
.ephm-login__stats { position: relative; display: flex; gap: 34px; }
.ephm-login__stats b { display: block; font: 650 21px/1.2 var(--num); color: #FFFFFF; }
.ephm-login__stats span { font: 10px var(--num); letter-spacing: .12em; text-transform: uppercase; color: #6F7DA6; }

.ephm-login__panel { display: grid; place-items: center; padding: 40px 24px; }
.ephm-login__form { width: 100%; max-width: 384px; }
.ephm-login__form h1 { font-size: 24px; font-weight: 680; letter-spacing: -.022em; margin-bottom: 4px; }
.ephm-login__form > p { color: var(--text-mid); font-size: 14px; margin-bottom: 24px; }
.ephm-login__sig { margin-top: 30px; font-size: 12px; color: var(--text-dim); text-align: center; }

/* ============================================================ *
 * 16. Setup wizard
 * ============================================================ */
.ephm-wizard { min-height: 100vh; background: var(--surface); padding: 32px 20px 56px; }
.ephm-wizard__shell { max-width: 880px; margin: 0 auto; }
.ephm-wizard__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.ephm-wizard__brand .ephm-brand__mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
.ephm-wizard__brand h1 { font-size: 19px; font-weight: 660; letter-spacing: -.015em; }
.ephm-wizard__brand p { font: 10px var(--num); letter-spacing: .13em; text-transform: uppercase; color: var(--text-dim); }

.ephm-steps { display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; }
.ephm-step {
  flex: 1 1 96px;
  min-width: 96px;
  padding-top: 10px;
  border-top: 3px solid var(--line);
  font-size: 12px;
  color: var(--text-dim);
}
.ephm-step b { display: block; font: 10px/1.4 var(--num); letter-spacing: .12em; text-transform: uppercase; }
.ephm-step.is-done    { border-top-color: var(--mint); color: #05664A; }
.ephm-step.is-current { border-top-color: var(--cyan); color: var(--text); font-weight: 600; }

.ephm-wizard__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ephm-wizard__head { padding: 26px 30px 18px; border-bottom: 1px solid var(--line-soft); }
.ephm-wizard__head h2 { font-size: 21px; font-weight: 670; letter-spacing: -.02em; }
.ephm-wizard__head p { color: var(--text-mid); font-size: 14px; margin-top: 5px; }
.ephm-wizard__body { padding: 26px 30px; }
.ephm-wizard__foot {
  padding: 18px 30px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  display: flex; align-items: center; gap: 12px;
}
.ephm-wizard__foot .ephm-btn--primary { margin-left: auto; }
.ephm-wizard__sig { text-align: center; margin-top: 22px; font-size: 12px; color: var(--text-dim); }

.ephm-checklist { list-style: none; margin: 0; padding: 0; }
.ephm-checklist li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.ephm-checklist li:last-child { border-bottom: 0; }
.ephm-checklist__state {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12px/1 var(--ui); color: #FFFFFF;
}
.ephm-checklist__state.is-pass { background: var(--mint); }
.ephm-checklist__state.is-warn { background: var(--amber); color: #3A2800; }
.ephm-checklist__state.is-fail { background: var(--coral); }
.ephm-checklist__name { font-weight: 550; }
.ephm-checklist__note { margin-left: auto; font: 12px var(--num); color: var(--text-dim); text-align: right; }

.ephm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

/* ============================================================ *
 * 17. Responsive
 * ============================================================ */
@media (max-width: 1180px) {
  .ephm-grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .ephm-app { grid-template-columns: minmax(0, 1fr); }
  .ephm-sidebar {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .ephm-app.is-open .ephm-sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .ephm-scrim { display: none; }
  .ephm-app.is-open .ephm-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(10, 17, 40, .5);
  }
  .ephm-login { grid-template-columns: minmax(0, 1fr); }
  .ephm-login__aside { display: none; }
  .ephm-grid--1-1 { grid-template-columns: minmax(0, 1fr); }
  .ephm-pulse { grid-template-columns: auto minmax(0, 1fr); }
  .ephm-pulse__stats { grid-column: 1 / -1; justify-content: flex-start; }
  .ephm-pulse__stat { text-align: left; }
}
@media (max-width: 640px) {
  .ephm-content { padding: 15px; }
  .ephm-userchip__name, .ephm-userchip__role { display: none; }
  .ephm-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ephm-table th, .ephm-table td { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .ephm-sidebar, .ephm-topbar, .ephm-pagehead__actions { display: none; }
  .ephm-app { grid-template-columns: minmax(0, 1fr); }
  .ephm-card { box-shadow: none; }
}

/* ==================================================================== *
 * 18. List screens — toolbar, filters, tabs, pagination
 * Added in Phase 2. Every list view in the panel shares these, so the
 * clients, products, staff and log screens stay visually identical.
 * ==================================================================== */

.ephm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ephm-toolbar__spacer { flex: 1 1 auto; }

.ephm-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.ephm-filterbar .ephm-field { margin: 0; min-width: 150px; }
.ephm-filterbar__search { min-width: 240px; flex: 1 1 240px; }

/* Status tabs above a list. */
.ephm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.ephm-tabs__tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 15px;
  font: 600 13px/1 var(--ui);
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.ephm-tabs__tab:hover { color: var(--text); background: var(--cyan-wash); }
.ephm-tabs__tab.is-active {
  color: var(--cyan-deep);
  border-bottom-color: var(--cyan);
}
.ephm-tabs__n {
  font-family: var(--num);
  font-size: 11px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--line-soft);
  color: var(--text-mid);
}
.ephm-tabs__tab.is-active .ephm-tabs__n { background: var(--cyan); color: #fff; }

/* Pagination. */
.ephm-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}
.ephm-pager__summary {
  font: 500 12px/1 var(--ui);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ephm-pager__list { display: flex; gap: 4px; margin-left: auto; }
.ephm-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: 600 12px/1 var(--num);
  color: var(--text-mid);
  text-decoration: none;
  background: var(--card);
  transition: border-color .12s, color .12s, background .12s;
}
.ephm-pager__link:hover { border-color: var(--cyan); color: var(--cyan-deep); }
.ephm-pager__link.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.ephm-pager__gap {
  display: inline-flex;
  align-items: flex-end;
  padding: 0 4px;
  color: var(--text-dim);
  font: 600 12px/1 var(--ui);
}

/* Row actions that appear on hover, so the table stays calm at rest. */
.ephm-rowactions { display: flex; gap: 6px; justify-content: flex-end; }
.ephm-table tbody tr .ephm-rowactions { opacity: .35; transition: opacity .12s; }
.ephm-table tbody tr:hover .ephm-rowactions,
.ephm-table tbody tr:focus-within .ephm-rowactions { opacity: 1; }

/* A person cell: avatar plus two lines. */
.ephm-person { display: flex; align-items: center; gap: 10px; }
.ephm-person__name { font-weight: 600; color: var(--text); }
.ephm-person__sub {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--num);
}
.ephm-person a { color: inherit; text-decoration: none; }
.ephm-person a:hover { color: var(--cyan-deep); text-decoration: underline; }

/* ==================================================================== *
 * 19. Forms — sections, two and three column grids, inline errors
 * ==================================================================== */

.ephm-formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
}
.ephm-formgrid--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ephm-formgrid__wide { grid-column: 1 / -1; }

.ephm-fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.ephm-fieldset__legend {
  font: 700 11px/1 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
}

.ephm-input.has-error,
.ephm-select.has-error,
.ephm-textarea.has-error {
  border-color: var(--coral);
  background: var(--coral-wash);
}
.ephm-fielderror {
  display: block;
  margin-top: 5px;
  font: 500 12px/1.4 var(--ui);
  color: var(--coral);
}

.ephm-formactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.ephm-formactions__spacer { flex: 1 1 auto; }

/* ==================================================================== *
 * 20. Detail screens — stat strip, definition lists, danger zone
 * ==================================================================== */

.ephm-statstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 22px;
}
.ephm-statstrip__cell { background: var(--card); padding: 14px 16px; }
.ephm-statstrip__label {
  font: 600 10px/1 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.ephm-statstrip__value {
  font: 700 19px/1 var(--num);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ephm-statstrip__value--mint { color: var(--mint); }
.ephm-statstrip__value--coral { color: var(--coral); }
.ephm-statstrip__value--amber { color: var(--amber); }

.ephm-deflist { display: grid; gap: 0; }
.ephm-deflist__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ephm-deflist__row:last-child { border-bottom: 0; }
.ephm-deflist__key {
  font: 600 12px/1.5 var(--ui);
  color: var(--text-dim);
}
.ephm-deflist__val { font: 400 13px/1.5 var(--ui); color: var(--text); }
.ephm-deflist__val--num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.ephm-deflist__val--empty { color: var(--text-dim); font-style: italic; }

/* Destructive actions are visually quarantined. */
.ephm-danger {
  border: 1px solid var(--coral);
  border-radius: var(--r);
  background: var(--coral-wash);
  padding: 18px;
}
.ephm-danger__title {
  font: 700 13px/1 var(--ui);
  color: var(--coral);
  margin-bottom: 8px;
}
.ephm-danger__text {
  font: 400 13px/1.6 var(--ui);
  color: var(--text-mid);
  margin-bottom: 14px;
}

/* ==================================================================== *
 * 21. Pricing matrix, permission grid, code blocks
 * ==================================================================== */

.ephm-pricing { width: 100%; border-collapse: collapse; }
.ephm-pricing th {
  font: 600 11px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  padding: 0 10px 10px;
}
.ephm-pricing td { padding: 5px 10px 5px 0; }
.ephm-pricing input[type="text"],
.ephm-pricing input[type="number"] {
  width: 100%;
  max-width: 130px;
  font-family: var(--num);
  text-align: right;
}
.ephm-pricing__cycle { font: 600 13px/1 var(--ui); color: var(--text); white-space: nowrap; }

.ephm-permgroup { margin-bottom: 20px; }
.ephm-permgroup__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ephm-permgroup__title {
  font: 700 11px/1 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.ephm-permgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 18px;
}
.ephm-perm {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0;
  cursor: pointer;
}
.ephm-perm input { margin-top: 2px; flex: 0 0 auto; }
.ephm-perm__text { font: 400 13px/1.4 var(--ui); color: var(--text); }
.ephm-perm__key {
  display: block;
  font: 400 11px/1.4 var(--num);
  color: var(--text-dim);
}

.ephm-code {
  display: block;
  padding: 12px 14px;
  background: var(--ink-deep);
  color: #cfe9f5;
  border-radius: var(--r-sm);
  font: 400 12px/1.7 var(--num);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* Merge-field reference chips beside the template editor. */
.ephm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ephm-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 20px;
  padding: 4px 10px;
  font: 500 11px/1.4 var(--num);
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.ephm-chip:hover { border-color: var(--violet); color: var(--violet); }

@media (max-width: 720px) {
  .ephm-deflist__row { grid-template-columns: 1fr; gap: 2px; }
  .ephm-pager__list { margin-left: 0; }
  .ephm-filterbar__search { min-width: 100%; }
}