/* Dark slate theme (2026-08-16 redesign) — replaced the previous light
   palette outright, not a toggle. All colors below are still referenced
   exclusively through these custom properties everywhere else in this
   file, so this block is the one place the whole app's palette lives —
   see also the *-soft/-border pill tokens just below for status-pill/
   badge/message backgrounds, which needed their own translucent versions
   rather than the old flat pastel hexes (a solid pale-green block reads
   as "wrong" sitting on a near-black background, not "intentional"). */
:root {
  --bg: #020617;
  --surface: #0f172a;
  --surface-raised: #1e293b;
  --border: #1e293b;
  --border-soft: rgba(148, 163, 184, 0.16);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --gray: #94a3b8;
  /* Translucent pill backgrounds — one -soft/-border pair per status hue,
     reused by .status-pill, .badge, and .messages li so all three share
     the same "soft chip on dark surface" treatment instead of each
     inventing its own. */
  --green-soft: rgba(52, 211, 153, 0.12);
  --green-border: rgba(52, 211, 153, 0.25);
  --amber-soft: rgba(251, 191, 36, 0.12);
  --amber-border: rgba(251, 191, 36, 0.25);
  /* TRYING's own shade, added 2026-08-18 -- same warm/in-flight family as
     amber (PENDING) but visually distinct at a glance, not a second
     unrelated hue. */
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.12);
  --orange-border: rgba(251, 146, 60, 0.25);
  --red-soft: rgba(248, 113, 113, 0.12);
  --red-border: rgba(248, 113, 113, 0.25);
  --blue-soft: rgba(59, 130, 246, 0.14);
  --blue-border: rgba(59, 130, 246, 0.28);
  --indigo-soft: rgba(129, 140, 248, 0.14);
  --indigo-text: #a5b4fc;
}

/* Light theme (2026-08-16 toggle) — the exact palette this app used
   before the dark redesign, restored as an alternate token set rather
   than a new design. Every rule elsewhere in this file reads colors
   exclusively through the custom properties above/below, so defining
   this second block is the entire implementation — no component rule
   needed a dark:/light: variant of its own.

   Three layers, in increasing specificity, matching how a11y-conscious
   dark-first sites are supposed to declare this (see e.g. the pattern
   Anthropic's own Artifact docs recommend): the bare :root above is the
   fallback default (dark, unchanged from the 2026-08-16 redesign) for
   browsers with JS disabled and no OS preference either; the prefers-
   color-scheme media query below covers JS-disabled browsers whose OS
   is set to light; and the explicit [data-theme] attribute (set by
   theme-toggle.js before first paint, from localStorage or
   matchMedia — see base.html's inline head script) always wins once JS
   has run, in either direction, overriding both of the above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-raised: #eef1f5;
    --border: #e2e4e9;
    --border-soft: rgba(107, 114, 128, 0.08);
    --text: #1d2129;
    --text-muted: #6b7280;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --green: #16a34a;
    --amber: #b45309;
    --red: #b91c1c;
    --gray: #6b7280;
    --green-soft: #ecfdf5;
    --green-border: #a7f3d0;
    --amber-soft: #fffbeb;
    --amber-border: #fde68a;
    --orange: #c2410c;
    --orange-soft: #fff7ed;
    --orange-border: #fed7aa;
    --red-soft: #fef2f2;
    --red-border: #fecaca;
    --blue-soft: #eff6ff;
    --blue-border: #bfdbfe;
    --indigo-soft: #eef2ff;
    --indigo-text: #4338ca;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-raised: #eef1f5;
  --border: #e2e4e9;
  --border-soft: rgba(107, 114, 128, 0.08);
  --text: #1d2129;
  --text-muted: #6b7280;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --green: #16a34a;
  --amber: #b45309;
  --red: #b91c1c;
  --gray: #6b7280;
  --green-soft: #ecfdf5;
  --green-border: #a7f3d0;
  --amber-soft: #fffbeb;
  --amber-border: #fde68a;
  --orange: #c2410c;
  --orange-soft: #fff7ed;
  --orange-border: #fed7aa;
  --red-soft: #fef2f2;
  --red-border: #fecaca;
  --blue-soft: #eff6ff;
  --blue-border: #bfdbfe;
  --indigo-soft: #eef2ff;
  --indigo-text: #4338ca;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #020617;
  --surface: #0f172a;
  --surface-raised: #1e293b;
  --border: #1e293b;
  --border-soft: rgba(148, 163, 184, 0.16);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --gray: #94a3b8;
  --green-soft: rgba(52, 211, 153, 0.12);
  --green-border: rgba(52, 211, 153, 0.25);
  --amber-soft: rgba(251, 191, 36, 0.12);
  --amber-border: rgba(251, 191, 36, 0.25);
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.12);
  --orange-border: rgba(251, 146, 60, 0.25);
  --red-soft: rgba(248, 113, 113, 0.12);
  --red-border: rgba(248, 113, 113, 0.25);
  --blue-soft: rgba(59, 130, 246, 0.14);
  --blue-border: rgba(59, 130, 246, 0.28);
  --indigo-soft: rgba(129, 140, 248, 0.14);
  --indigo-text: #a5b4fc;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Lets native form chrome (date-picker calendar icon, select dropdown
   arrow/panel) render with theme-appropriate colors — overridden by the
   explicit color-scheme set in each [data-theme] block above once
   theme-toggle.js runs; this bare fallback only matters before that
   (or with JS disabled and no OS preference). */
:root { color-scheme: dark; }

/* display:flex/flex-direction:column here is what makes login.html's
   .login-page{flex:1} center itself with the footer pinned below — kept
   even though base.html's own body only ever has one direct child now
   (.app-shell, given flex:1 below) so both templates share one rule. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Used only by login.html's minimal top bar now (logo + Admin link) —
   the authenticated app shell replaced this with .sidebar below. */
header.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  height: 36px;
  width: auto;
}

.tagline {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}

header.site-header a {
  color: var(--accent);
  text-decoration: none;
}

header.site-header a:hover { text-decoration: underline; }

.admin-link {
  font-size: 0.9rem;
}

.logout-form {
  display: inline;
  margin: 0;
}

.logout-form button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

.logout-form button:hover { text-decoration: underline; }

/* Authenticated app shell (2026-08-16 redesign) — replaced the old
   top-bar nav (header.site-header + .site-nav, still used by login.html
   only, see above) with a persistent left sidebar. base.html's only
   change was swapping that top bar for this structure; every route,
   view, form, and template block inside <main> is untouched. */
/* Fixed to exactly one viewport tall (not flex:1 growing with content,
   the original rule) — revised 2026-08-18, user-reported, superseding
   that same day's earlier position:sticky attempt on .sidebar alone.
   The sticky-only fix pinned the sidebar but left .site-footer scrolling
   away at the bottom of a long page, since nothing capped .app-shell's
   own height — only .sidebar had special positioning, .app-content
   (main + footer) still just grew as tall as its content and the whole
   document scrolled past the footer. Capping .app-shell itself at 100vh
   and letting only <main> below scroll internally (see .app-content/
   main) fixes sidebar AND footer together, correctly, with neither
   needing its own position:sticky hack — both are just normal flex
   children of a box that itself never grows past the viewport. */
.app-shell {
  display: flex;
  height: 100vh;
  min-width: 0;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  /* No position/height trickery needed — .app-shell above is now capped
     at 100vh and never scrolls itself, so a plain flex child naturally
     stretches to fill that fixed height and stays put. */
}

/* Stacked (logo above text), not side-by-side — the Relien Group
   wordmark logo is wide relative to the sidebar's 240px, and putting it
   next to the app name left almost no width for the text, wrapping
   "VDIgo Fax Services" one word per line (caught visually on the real
   deployed page, not obvious from markup alone). */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand .brand-logo {
  max-width: 100%;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-brand-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem;
  flex: 1;
}

.sidebar-nav a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav a:hover {
  color: var(--text);
  background: var(--border-soft);
}

.sidebar-nav a.is-active {
  color: var(--text);
  background: var(--surface-raised);
  border-left-color: var(--red);
  font-weight: 600;
}

/* Shared by .sidebar-footer and .site-footer below (added 2026-08-18,
   user-reported) so the two visually line up at the same height across
   the page — not a color/theme token, so it lives here as a one-off
   custom property rather than duplicated in every light/dark :root
   block above. A literal height (not just "whatever the content needs")
   is the only way to *guarantee* the two match exactly rather than
   coincidentally being close depending on font metrics; each footer's
   own content is vertically centered inside it via flexbox below,
   regardless of how tall that content actually is. Tightened
   88px -> 60px same day, per explicit "more compact" feedback — still
   comfortably fits .sidebar-footer's two stacked rows (the session-user/
   theme-toggle row plus the logout link below), just without the
   original's generous extra breathing room. */
:root {
  --app-footer-height: 60px;
  /* Shared by .filter-bar (Outbox/Inbox) and .stat-cards (Dashboard)
     below, added 2026-08-18 per explicit request — the "top section"
     under each page's h1 should read as the same height across all
     three list pages. Originally 76px and applied as a min-height (a
     floor); revised the same day once live measurement (getBoundingClientRect
     on the real deployed page, not guessed) showed .stat-cards' actual
     3-line content (label/value/sub, including the deliberately large
     1.5rem stat number) naturally needs ~114px with its original
     padding — a floor alone let it render taller than .filter-bar
     instead of matching it. Raised to 102px and switched BOTH rules from
     min-height to a literal height (with box-sizing: border-box) so the
     two are now forced to genuinely match rather than just share a
     floor — .filter-bar's own content (~82px) is shorter than that, so
     it centers within the extra room via its existing align-items:
     flex-end (bottom-anchors labeled inputs with the label-less Filter/
     Clear buttons next to them, unchanged); .stat-cards keeps its own
     modest vertical padding (reduced 0.85rem -> 0.5rem, see its own
     rule) rather than being stretched further, since its content is the
     one that actually defines this shared height. */
  --page-top-row-height: 102px;
}

.sidebar-footer {
  height: var(--app-footer-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sidebar-footer .session-user {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sidebar-footer .logout-form button {
  color: var(--text-muted);
}

.sidebar-footer .logout-form button:hover { color: var(--text); }

/* Sun/moon theme toggle — lives in the sidebar footer since this app
   has no persistent top header bar anymore (moved into .sidebar by the
   2026-08-16 redesign). theme-toggle.js swaps which icon is visible and
   sets/persists the [data-theme] attribute the CSS above keys off of. */
.theme-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
}

/* Shows the icon for the theme a click would switch TO, not the current
   one — a moon in light mode invites switching to dark; a sun in dark
   mode invites switching to light. Default (light, no [data-theme="dark"]
   match) shows the moon; dark mode below flips to the sun. */
.theme-toggle-icon-sun { display: none; }

:root[data-theme="dark"] .theme-toggle-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle-icon-moon { display: none; }

.app-content {
  flex: 1;
  /* min-height: 0 (not the flex-item default of auto) is what lets
     <main>'s own overflow-y: auto actually take effect below — without
     it, a flex column child can't shrink below its content's natural
     height, so main would just grow forever instead of scrolling
     internally, and .app-content (and .app-shell above it) would grow
     past the 100vh cap right back to the old whole-page-scroll problem. */
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-brand {
    border-bottom: none;
    padding: 0.75rem 1rem;
  }

  .sidebar-brand-text { display: none; }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.5rem;
    flex: 1;
  }

  .sidebar-nav a.is-active {
    border-left-color: transparent;
    border-bottom: 2px solid var(--red);
    border-radius: 6px 6px 0 0;
  }

  .sidebar-footer {
    /* The fixed height (added 2026-08-18) is a desktop-only concern —
       aligning it with .site-footer down the left edge of a tall page.
       On mobile .sidebar is a horizontal topbar and .sidebar-footer is
       just its rightmost row item, sized like everything else in that
       row rather than forced to a specific height. */
    height: auto;
    border-top: none;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
  }

  .sidebar-footer .session-user {
    max-width: 140px;
  }
}

main {
  flex: 1;
  /* Scrolls internally — added 2026-08-18, user-reported, alongside
     .app-shell's 100vh cap above. This is the ONE scrolling region in
     the authenticated app shell now; .sidebar and .site-footer are
     both plain (non-scrolling) flex siblings around it and stay fixed
     in place regardless of how long a page's content is. min-height: 0
     is required here too, same reason as .app-content's own comment.
     Kept as a fallback for pages that don't use .panel-scroll below
     (e.g. Send Fax) — on Dashboard/Outbox/Inbox this scrollbar should
     never actually engage, since .panel-scroll's own flex:1 exactly
     consumes whatever's left of main's height and .table-scroll scrolls
     internally instead (see both below). */
  overflow-y: auto;
  min-height: 0;
  /* display:flex/flex-direction:column, added 2026-08-18 — lets
     .panel-scroll (Dashboard/Outbox/Inbox's outer .panel) grow via its
     own flex:1 to fill exactly whatever vertical space main has left,
     rather than a page needing to guess a fixed height for the table
     region. Other main children (Send Fax's .page-header/.send-layout)
     aren't flex:1, so they keep their normal content-driven height as
     plain flex-column items — this is a no-op for them. */
  display: flex;
  flex-direction: column;
  /* max-width raised 1600px -> 1800px 2026-08-16 (final UI refinement) —
     1600px left a visibly large unused margin on larger desktop displays
     (~160px per side at 1920px; 1800px brings that down to ~60px, close
     to the ~92% of viewport this was asked to target at that width).
     Deliberately kept width:100% rather than switching to a percentage
     (e.g. 92%) — a percentage narrows the container below max-width too,
     and at common laptop widths like 1366px that's already *narrower*
     than 100% was, which wrapped Dashboard's Created column onto two
     lines (caught by testing at 1366px specifically, per this task's own
     instructions). width:100% only ever grows the usable area (up to the
     cap); it never shrinks it below what already worked. */
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.25rem 2rem 1.5rem;
}

h1 {
  font-size: 1.4rem;
  /* Tightened 1.25rem -> 0.75rem 2026-08-16 (compact density pass) — the
     heading should still read as a clear break from the content below,
     just without a large unused gap before it starts. */
  margin: 0 0 0.75rem;
}

/* Page heading + a primary action button on the same row (currently just
   Dashboard's "Send Fax" button) — h1's own bottom margin is redundant
   here, the row itself carries that spacing instead. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.page-header h1 {
  margin: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Now lives inside .panel-scroll as the direct structural analog of
   Outbox/Inbox's .filter-bar (same padding/min-height/border-bottom) —
   restructured 2026-08-18, user-reported: the table on Dashboard used to
   start noticeably lower than on Outbox/Inbox because .stat-cards sat
   outside .panel with its own margin-bottom AND a separate "Recent
   Activity" .panel h2 bar sat between it and the table (removed from
   dashboard.html) — together those made the table start ~67px lower on
   Dashboard, felt as a page "jump" navigating between these pages. Now
   the box models are identical, so the table starts at the same offset
   on all three pages. */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  align-items: center;
  /* Tightened 0.85rem -> 0.5rem top/bottom 2026-08-18, live-measured
     (see --page-top-row-height's own comment) — this row's height is
     the one driven by content (the cards' own 3-line stack), not by
     this padding, so trimming it doesn't clip anything; it just keeps
     the shared 102px height from growing larger than it needs to. */
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--border);
  height: var(--page-top-row-height);
  box-sizing: border-box;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stat cards are <a> tags (each links to its matching page) — reset link
   chrome and add a hover/focus cue so they still read as clickable. */
a.stat-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.stat-card:hover,
a.stat-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.stat-card .label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.stat-card .value {
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.2;
}

.stat-card .sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Failed count is meant to catch the eye — same red already used for the
   FAILED status pill (.status-pill.status-failed), not a new color. */
.stat-card-failed .value {
  color: var(--red);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.panel h2 {
  font-size: 1.05rem;
  margin: 0;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

/* Dashboard/Outbox/Inbox's outer .panel only (see dashboard.html/
   outbox.html/inbox.html — NOT .form-panel/.preview-panel on Send Fax,
   which have their own fixed-content layout and shouldn't stretch) —
   added 2026-08-18, replacing a guessed vh value on .table-scroll
   itself. Fills exactly whatever vertical space main has left (main is
   now a flex column, see main's own comment) so the table region
   genuinely fills the screen on any viewport height instead of leaving
   a gap (too-small a guess) or clipping (too-large a guess). min-height:
   0 lets it shrink below its content's natural height so its own
   .table-scroll child can actually take over scrolling internally. */
.panel-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Outbox's auto-refresh swap target (added 2026-08-18, see
   auto-refresh.js) — wraps the {% if records %}.table-scroll{% else %}
   .empty-state{% endif %} block so it has one stable id to swap the
   innerHTML of on each poll. Needs the exact same flex passthrough as
   .panel-scroll's own rule above, or .table-scroll's flex:1 inside it
   would have nothing to grow against — this div sits between
   .panel-scroll and .table-scroll in the DOM now, where .table-scroll
   used to be a direct flex child of .panel-scroll itself. */
#outbox-results {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.auto-refresh-indicator {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.table-scroll {
  /* Safety net — the declared column widths below (or whatever a user has
     dragged them to) can still add up to more than a narrow viewport.
     Scrolling beats silently clipping content off the right edge. */
  overflow-x: auto;
  overflow-y: auto;
  /* Fills whatever space .panel-scroll has left after its filter-bar/
     stat-cards sibling (flex:1 + min-height:0) — replaces a fixed
     max-height guess (65vh, then 78vh) that either left a visible gap
     above the footer or couldn't adapt to different viewport heights.
     Only the rows inside this box scroll (the sticky thead below keeps
     column headers visible) — .panel-scroll's siblings above it
     (filter-bar/stat-cards) and main's own header/footer stay fixed in
     place regardless of row count. */
  flex: 1;
  min-height: 0;
}

/* Column headers stay visible while rows scroll beneath them, inside
   .table-scroll's own bounded box above — position: sticky needs an
   opaque background (var(--surface), matching .panel's own) or scrolled
   row content would show through underneath the header text; z-index
   keeps it above row content generally (the column-resize handle inside
   each th is a child of it, so it moves/stays with the sticky header
   automatically, no separate z-index needed for that). */
table.activity thead th, table.records thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

table.activity, table.records {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.activity {
  /* Dashboard's Recent Activity: fixed columns are fine here — Actions is
     just "View · Download", never more, so it always fits its 15%. */
  table-layout: fixed;
}

table.records {
  /* Outbox: table-layout: fixed with every column given an explicit
     percentage (set below) summing to exactly 100%, not px + one "auto"
     column. An unspecified/auto column is only *supposed* to absorb
     100%-of-leftover, but that made the table's actual rendered width
     unreliable across real viewports/persisted drag widths — explicit
     percentages guarantee the table always fills its container
     deterministically, in every browser, regardless of what a user has
     previously dragged (see outbox.js's versioned storage key). */
  table-layout: fixed;
}

/* Actions was originally sized as "the largest flexible share" (31%) back
   when that column's own content justified it — now it's a single
   "Actions ▾" button, and reserving nearly a third of the table's width
   for one ~110px button was the actual cause of the table reading as
   sparse/not-compact (found 2026-08-16 looking at real production data
   in a wide viewport — row padding alone wasn't the issue). Redistributed
   the freed-up space to the columns that actually hold variable-length
   content (Sent By's email addresses, Created's timestamp). Still sums
   to exactly 100% — see table.records's own comment for why that matters.
   Scoped to #outbox-table specifically (not just table.records) because
   Outbox and Inbox share the .records table styling but have a different
   number/order of columns (Inbox has no Sent By) — a generic
   table.records col.col-* rule can't correctly size both at once. */
#outbox-table col.col-from { width: 13%; }
#outbox-table col.col-to { width: 13%; }
#outbox-table col.col-sent-by { width: 20%; }
#outbox-table col.col-status { width: 11%; }
#outbox-table col.col-pages { width: 7%; }
#outbox-table col.col-created { width: 22%; }
#outbox-table col.col-actions { width: 14%; }

/* Inbox: same .records table styling as Outbox, but no Sent By column —
   the freed share goes to From/To (formatted numbers like "(732) 798-1096"
   need a bit more room than raw digits) and Created. Sums to 100%. */
#inbox-table col.col-from { width: 18%; }
#inbox-table col.col-to { width: 18%; }
#inbox-table col.col-pages { width: 8%; }
#inbox-table col.col-status { width: 13%; }
#inbox-table col.col-created { width: 29%; }
#inbox-table col.col-actions { width: 14%; }

/* My Cover Pages (added 2026-08-18) — three separate tables (Mine/Shared
   with me/Everyone else's), each scoped by its own id since they don't
   share a column count (the read-only "Shared with me" table has no
   Actions or Shared column). Sums to 100% each, same convention as
   Outbox/Inbox above. */
#cover-pages-mine-table col.col-label { width: 18%; }
#cover-pages-mine-table col.col-to { width: 20%; }
#cover-pages-mine-table col.col-from { width: 20%; }
#cover-pages-mine-table col.col-subject { width: 20%; }
#cover-pages-mine-table col.col-shared { width: 8%; }
#cover-pages-mine-table col.col-actions { width: 14%; }

#cover-pages-shared-table col.col-label { width: 18%; }
#cover-pages-shared-table col.col-owner { width: 18%; }
#cover-pages-shared-table col.col-to { width: 20%; }
#cover-pages-shared-table col.col-from { width: 20%; }
#cover-pages-shared-table col.col-subject { width: 24%; }

#cover-pages-others-table col.col-label { width: 15%; }
#cover-pages-others-table col.col-owner { width: 15%; }
#cover-pages-others-table col.col-to { width: 16%; }
#cover-pages-others-table col.col-from { width: 16%; }
#cover-pages-others-table col.col-subject { width: 16%; }
#cover-pages-others-table col.col-shared { width: 8%; }
#cover-pages-others-table col.col-actions { width: 14%; }

table.records th {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}

.col-resize-handle:hover,
.col-resize-handle.is-resizing {
  background: var(--accent);
  opacity: 0.35;
}

/* Dashboard/Outbox/Inbox all share one row-density standard — deliberately
   NOT three separately-tuned values (an earlier version of this file had
   Records slightly roomier than Activity "since Outbox is more operational
   than a glance-at summary") — 2026-08-16's compact-UI pass explicitly
   asked for consistent row height everywhere, so a user switching pages
   doesn't feel a jump. table-layout:fixed + shared .actions-toggle (see
   below) means matching padding alone is enough to make all three tables'
   rows the same height in practice. */
table.activity th, table.activity td,
table.records th, table.records td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
  vertical-align: middle;
}

table.records th {
  white-space: nowrap;
}

/* From, To, Sent By, Pages: short, predictable values (phone numbers, an
   email from a small known staff roster, a page count) that should never
   wrap — and if one somehow runs long, truncate with an ellipsis rather
   than blowing out the column/row. Created is deliberately NOT here (see
   .cell-nowrap-full below) — truncating a timestamp silently hides real
   information (the year, AM/PM), which an overlong email getting an
   ellipsis doesn't. */
table.records td.cell-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Created: nowrap without an ellipsis fallback — the column width above
   (18%) is sized to comfortably fit "Aug 15, 2026 · 6:39 AM" at desktop
   widths, so this should never actually need to truncate; if it somehow
   doesn't fit, showing the full value via the table's own horizontal
   scroll beats silently hiding the time/year. */
table.records td.cell-nowrap-full {
  white-space: nowrap;
}

table.activity td.actions-cell {
  white-space: nowrap;
}

table.records td.actions-cell {
  white-space: nowrap;
}

/* Per-row Actions dropdown (Outbox only) — a single compact trigger
   instead of a row of inline links, so the row never grows taller than
   its other cells regardless of how many actions a given record has. */
.actions-dropdown {
  position: relative;
  display: inline-block;
}

/* This button's own rendered height (padding + its line box) is what
   actually determines every row's height in every table that uses it
   (Dashboard/Outbox/Inbox all share this component) — it's taller than a
   plain text cell, so it becomes the tallest thing in the row and every
   other cell's height follows it, regardless of how tight the table's own
   td padding is. Found 2026-08-16 measuring real row heights on
   production (Outbox rows were 47.78px vs Dashboard's 42.97px, and the
   Actions cell's own height matched the button's height plus td padding
   almost exactly in both) — vertical padding trimmed here to shrink the
   one element actually setting the floor on row height everywhere. */
.actions-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.actions-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.actions-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.actions-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* position: fixed (top/left computed in outbox.js at open time) rather
   than absolute — deliberately escapes .table-scroll's clipping (its
   overflow-x: auto forces a computed overflow-y: auto too, which would
   otherwise clip a menu opening near the bottom of the table) without
   needing to reparent the element out of the row. */
.actions-menu {
  display: none;
  position: fixed;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem;
  z-index: 1000;
}

.actions-menu.is-open {
  display: block;
}

.actions-menu a,
.actions-menu button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.actions-menu a:hover,
.actions-menu a:focus-visible,
.actions-menu button:hover,
.actions-menu button:focus-visible {
  background: var(--bg);
  outline: none;
}

.actions-menu form {
  margin: 0;
}

table.activity th:nth-child(1) { width: 9%; }  /* Direction */
table.activity th:nth-child(2) { width: 13%; } /* From */
table.activity th:nth-child(3) { width: 13%; } /* To */
table.activity th:nth-child(4) { width: 17%; } /* Sent By */
table.activity th:nth-child(5) { width: 11%; } /* Status */
table.activity th:nth-child(6) { width: 7%; }  /* Pages */
table.activity th:nth-child(7) { width: 15%; } /* Created */
table.activity th:nth-child(8) { width: 15%; } /* Actions */

table.activity th, table.records th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.activity tbody tr:last-child td, table.records tbody tr:last-child td { border-bottom: none; }
table.activity tbody tr:hover, table.records tbody tr:hover { background: var(--border-soft); }

/* Identifies the exact record a Send/Send Retry redirect just created
   (by pk, via ?highlight=<pk> — see outbox() in views.py), never by row
   position. Pure CSS, no JS/timers needed: holds the tint, then fades to
   transparent over the remainder of a ~4s run, once, on page load. */
@keyframes row-highlight-fade {
  0% { background-color: var(--blue-soft); }
  60% { background-color: var(--blue-soft); }
  100% { background-color: transparent; }
}

table.records tbody tr.row-highlight {
  animation: row-highlight-fade 4s ease-out forwards;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  /* space-between (used until 2026-08-16) distributed all of main's
     leftover width as gaps between fields — harmless at the old 1600px
     container width, but widening main (see main's own comment) made
     those gaps stretch into large, uneven-looking whitespace between
     otherwise intentionally-compact fields. flex-start keeps a fixed,
     deliberate gap between fields regardless of container width; Filter/
     Clear are pushed to the row's right edge via .form-actions's own
     margin-left:auto below instead. */
  justify-content: flex-start;
  column-gap: 1.5rem;
  row-gap: 0.6rem;
  align-items: flex-end;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  /* Matches Dashboard's .stat-cards height exactly via the shared
     --page-top-row-height variable, added 2026-08-18 — a literal height
     (not min-height, see that variable's own comment), since this row's
     content (~82px) is shorter than stat-cards' 102px; align-items:
     flex-end above centers the shortfall as space at the top instead of
     stretching the inputs themselves. */
  height: var(--page-top-row-height);
  box-sizing: border-box;
}

.filter-bar .form-group {
  margin-bottom: 0;
}

/* Sized to what each field actually holds, not one blanket width (see
   CLAUDE.md's compact-UI notes, 2026-08-16) — From/To only ever hold a
   raw digits-only phone number (never the formatted display value, see
   fax_extras.py — filtering must match the stored raw field), Status only
   ever holds a short status word, Sent By needs enough room for a full
   staff email address, and the date inputs are sized to the browser's own
   native picker chrome. */
.filter-bar .field-from,
.filter-bar .field-to {
  width: 130px;
}

.filter-bar .field-status {
  width: 130px;
}

.filter-bar .field-sent-by {
  width: 210px;
}

.filter-bar .field-date {
  width: 150px;
}

.filter-bar .form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Anchors Filter/Clear to the row's right edge now that .filter-bar
     itself is flex-start (see above) — on a wrap (narrow viewports) this
     naturally drops to its own line instead of clinging to whatever field
     precedes it. */
  margin-left: auto;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge.direction-inbound { background: var(--indigo-soft); color: var(--indigo-text); border-color: var(--blue-border); }
.badge.direction-outbound { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--border-soft);
  color: var(--gray);
  border: 1px solid transparent;
}

.status-pill.status-complete, .status-pill.status-efaxcomplete { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.status-pill.status-pending { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
/* TRYING gets its own related-but-distinct shade (2026-08-18) — same
   warm/in-flight family as PENDING's amber, not a shared color the two
   statuses used to be indistinguishable by. */
.status-pill.status-trying { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); }
.status-pill.status-failed { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }

.empty-state {
  /* Tightened 2rem -> 1.5rem 2026-08-16 — was already close to compact
     (no min-height/fixed-height was ever set on this or its parent .panel,
     so an empty Inbox never actually reserved table-sized space; the
     extra vertical whitespace on the page below it is main's own
     flex:1 sticky-footer behavior, not this element). Landed mid the
     spec's ~24-40px target range instead of at its top edge. */
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
}

.send-layout {
  /* ~35/65 composer/preview split, present from page load — not just once
     a preview exists (see preview-panel below) — the preview carries far
     more visual information (a full rendered PDF page) and should read as
     the dominant panel from the start, not something that shifts the
     whole layout into existence only after a click. */
  display: grid;
  grid-template-columns: minmax(320px, 35%) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 980px) {
  .send-layout {
    grid-template-columns: 1fr;
  }
}

.form-panel {
  /* Matches .filter-bar/.panel h2's 1rem/1.25rem padding (Outbox, Inbox,
     Dashboard's Recent Activity header) — previously noticeably more
     generous than every other panel, including the Preview panel sitting
     right next to it on this same page, which read as an inconsistency
     switching between pages rather than a deliberate choice. */
  padding: 1.25rem 1.25rem 1.5rem;
}

.preview-panel {
  min-width: 320px;
  overflow: hidden;
}

.preview-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.preview-panel h2 {
  font-size: 1.05rem;
  margin: 0;
}

.preview-pane {
  width: 100%;
  height: 75vh;
  min-height: 560px;
  border: none;
  display: block;
}

/* Re-hideable Preview panel, added 2026-08-18, fixed 2026-08-18 (first
   version let the composer column grow to fill the freed space, which
   read as the whole page resizing on every toggle — user-reported). The
   form column's own definition (minmax(320px, 35%)) is left completely
   untouched here on purpose, exactly matching .send-layout's base rule
   above, so hiding/showing Preview never changes the composer's width —
   only the preview column shrinks, down to just enough for its own
   header (with the "Show" button, always visible so collapsing is never
   a dead end). */
.send-layout.preview-collapsed {
  grid-template-columns: minmax(320px, 35%) auto;
}

.send-layout.preview-collapsed .preview-pane {
  display: none;
}

.form-panel .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  color: var(--red);
  font-size: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 0.9rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

/* Send Fax's To field + its "Save as favorite" button on one row —
   added 2026-08-18. The input keeps growing to fill the row; the button
   stays a fixed, content-sized width next to it. */
.to-number-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Wraps the button onto its own line below the input rather than
     squeezing both onto one row -- fixed 2026-08-18: this row used to
     sit inside a 2-column .form-row (a 50/50 split with the Favorite
     number field), and on top of the composer panel's own ~35% width,
     the button was eating most of an already-narrow half-column,
     leaving the To input a sliver. Moving the To field out of that
     .form-row (see send.html) fixed the main case; this wrap is a
     second line of defense for any viewport still tight enough to
     matter (e.g. the <980px single-column layout). */
  flex-wrap: wrap;
}

.to-number-row input[type="text"] {
  flex: 1;
  min-width: 180px;
}

.to-number-row .btn-small {
  flex-shrink: 0;
}

/* Explicit height (rather than trusting padding alone) so text inputs,
   date inputs, and selects line up pixel-for-pixel — native date/select
   chrome (the calendar icon, the dropdown arrow) otherwise renders at a
   slightly different intrinsic height per control/browser. Tightened
   38px -> 34px 2026-08-16 (compact density pass) — matches the new
   .btn-primary/.btn-secondary height below so a filter row's inputs and
   its Filter/Clear buttons line up. */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select {
  height: 34px;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text);
}

.cover-fields {
  display: none;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-bottom: 1.1rem;
}

.field-error {
  color: var(--red);
  font-size: 0.82rem;
  margin-top: 0.3rem;
}

.field-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 0.3rem;
}

p.field-hint {
  margin: 0 0 1.25rem;
}

.status-cell {
  /* Badge and detail flow on the same line when the detail is short
     enough (e.g. "TRYING  Dialing"), only wrapping onto a second line
     when it genuinely doesn't fit — a forced-block detail line cost every
     row with any detail text a full extra line even for a one-word
     value, which is exactly the kind of height inconsistency a genuinely
     short vs. long detail shouldn't share. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
}

.status-detail {
  color: var(--text-muted);
  font-size: 0.76rem;
  overflow-wrap: break-word;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  /* Matches the 34px form-control height above (compact density pass,
     2026-08-16) — Filter/Clear/Send Fax line up with the inputs/selects
     next to them instead of standing taller. */
  height: 34px;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-small {
  height: 30px;
  padding: 0 0.75rem;
  font-size: 0.85rem;
}

.attachment-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.attachment-filename {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact context panel shown only in Edit & Retry mode — deliberately not
   a full .panel (no border/shadow) so it reads as supplementary info
   beneath the primary controls, not another card competing for attention. */
.original-attempt {
  margin-bottom: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.original-attempt h3 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.original-attempt dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}

.original-attempt dt {
  color: var(--text-muted);
}

.original-attempt dd {
  margin: 0;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-secondary {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
}

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.messages li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  transition: opacity 0.3s ease;
}

.messages li.is-dismissing {
  opacity: 0;
}

/* Django's built-in message tags (django.contrib.messages), one color
   per severity — the same four/five states everywhere a message can
   appear, not styled ad hoc per page. success/info auto-dismiss (see
   messages.js); warning/error don't, and get an explicit "until
   dismissed" visual weight via the border-left instead. */
.messages li.success { background: var(--green-soft); color: var(--green); }
.messages li.info, .messages li.debug { background: var(--blue-soft); color: var(--accent-hover); }
.messages li.warning { background: var(--amber-soft); color: var(--amber); border-left: 3px solid var(--amber); }
.messages li.error { background: var(--red-soft); color: var(--red); border-left: 3px solid var(--red); }

.message-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  padding: 0;
}

.message-close:hover,
.message-close:focus-visible {
  opacity: 1;
}

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer {
  /* Fixed height matching .sidebar-footer exactly (--app-footer-height,
     defined alongside .sidebar-footer above) so the two line up across
     the page, added 2026-08-18 per explicit request — content is
     vertically centered inside via flexbox rather than relying on
     padding to produce a height that happens to match. flex-shrink: 0
     keeps it from ever being squeezed by main's flex:1 in .app-content's
     column layout — main is the one that scrolls/gives, never this. */
  height: var(--app-footer-height);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer p { margin: 0.2rem 0; }

.site-footer a {
  color: var(--accent);
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem;
  width: 320px;
}

.login-box h1 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.login-box .tagline { margin: 0 0 1.25rem; }

.login-box label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.login-box input[type="text"],
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.login-box button {
  width: 100%;
  padding: 0.55rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
}

.login-box .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  color: var(--red);
  font-size: 0.85rem;
}