/* ============================================================
   RAGA Ops -- Slate / Plush Pink / Polished Brass design system
   Forked from Paralia's style.css (2026-09-06) for RAGA's own venue
   brand board (Depth/Raga Slate, Pulse/Plush Pink, Glow/Polished Brass,
   Balance/Green Marble, Softness/Warm Ivory). Same colour-only
   discipline as the original: every existing class name and structural
   rule is kept, only colour values change -- no template needs to
   change. This file only takes effect once RAGA's own server clone
   points base.html at it instead of style.css; it changes nothing for
   Paralia by existing here.

   Approved by Joe 2026-09-06 (see the RAGA Ops Palette artifact preview):
   sidebar = Polished Brass with dark Raga Slate text (not the reverse --
   white-on-brass read as too low-contrast), Plush Pink stays the one
   attention/action colour, danger stays a true (if softer) red rather
   than pink so "something's wrong" never visually collides with the
   primary brand colour, success moves from the old bright lime to
   Green Marble, and the old --sea-* teal "info" scale becomes a
   Polished Brass tint scale.
   ============================================================ */
:root {
  --sea-100: #F3E9D2;
  --sea-200: #E8D8B0;
  --sea-300: #D9C089;
  --sea-400: #C7A868; /* Polished Brass tint -- attention/information only */
  --sea-500: #A9863F;
  --sea-600: #86692F;
  --sea-700: #5C4820;

  --orange: #C21858;       /* Plush Pink -- primary action colour */
  --orange-hover: #9E1247;

  --coral: #B23A3A;
  --coral-soft: #FCE9EC;
  --lime: #22412C;         /* Green Marble -- positive/success */
  --green-soft: #E4EBE2;

  --bg: #F6F0E4;
  --panel: #FFFFFF;
  --panel-2: #F1EDE3;
  --panel-3: #E8E1D0;
  --border: #E4DBC7;
  --text: #17181C;
  --muted: #8C8574;
  --dark: #A9863F;         /* Polished Brass -- sidebar / nav surface */
  --white: #FFFFFF;

  --sidebar: 272px;
  --radius: 16px;
  --shadow: 0 16px 40px rgba(0,0,0,.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); }
/* ── App shell / sidebar ── */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--dark);
  border-right: 1px solid rgba(23,24,28,.1);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
.app-sidebar-brand { display: flex; align-items: baseline; gap: 0.4rem; padding: 22px 20px 6px; flex-wrap: wrap; }
.app-sidebar-dept { padding: 10px 20px 16px; }
.app-nav { flex: 1; padding: 4px 12px 16px; display: flex; flex-direction: column; }
.app-nav-group { padding: 10px 4px; }
.app-nav-group-system { margin-top: auto; border-top: 1px solid rgba(23,24,28,.12); padding-top: 14px; }
.app-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(23,24,28,.55); font-weight: 800; padding: 6px 10px 8px; }
.app-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.app-nav-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  color: rgba(23,24,28,.68); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.app-nav-list a svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.app-nav-list a:hover { background: rgba(23,24,28,.08); color: var(--text); }
.app-nav-list a.active { color: var(--text); background: rgba(194,24,88,.14); box-shadow: inset 3px 0 0 var(--orange); }
.app-nav-list a.active svg { color: var(--orange); stroke-width: 2; }
.app-nav-list a.app-nav-logout { color: var(--coral); }
.app-nav-list a.app-nav-logout:hover { background: rgba(178,58,58,.08); color: var(--coral); }
/* ── Mobile topbar + drawer ── */
.app-topbar {
  display: none; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--dark);
  border-bottom: 1px solid rgba(23,24,28,.12);
  position: sticky; top: 0; z-index: 30;
}
.app-menu-btn {
  background: transparent; border: 1px solid rgba(23,24,28,.2); color: var(--text);
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-menu-btn svg { width: 18px; height: 18px; }
.app-topbar-title { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.app-topbar-spacer { flex: 1; }
.app-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(2,10,13,.55); z-index: 35; }
@media (max-width: 820px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-topbar { display: flex; }
  .app-drawer-overlay.is-open { display: block; }
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { max-width: 1200px; width: 100%; margin: 2rem auto; padding: 0 1.5rem 2.5rem; }
@media (max-width: 820px) { .app-content { margin: 1.25rem auto; padding: 0 1rem 2rem; } }
/* ── Brand / dept switch ── */
.nav-logo-text { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 1.3rem; color: var(--text); letter-spacing: 1px; }
.nav-logo-ring { font-size: 1rem; color: var(--orange); font-weight: 300; }
.nav-logo-sub { font-size: 0.75rem; color: var(--text); font-weight: 400; margin-left: 0.2rem; flex-basis: 100%; }
.dept-switch { display: inline-flex; background: rgba(23,24,28,.08); border-radius: 20px; padding: 2px; }
.dept-switch-opt { padding: 4px 13px; border-radius: 18px; font-size: 11px; font-weight: 800; text-decoration: none; color: rgba(23,24,28,.6); letter-spacing: .03em; text-transform: uppercase; }
.dept-switch-opt.active { background: var(--orange); color: #FFFFFF; }
.dept-switch-opt.active:hover { background: var(--orange-hover); }
/* ── Legacy unauthenticated container (login page) ── */
.container { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; }
/* ── Login (left untouched -- own light surface, out of scope for this pass) ── */
body.login-page { background: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 100%; max-width: 380px; margin: 0 auto; padding: 3rem 2.5rem; background: white; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); text-align: center; }
.login-logo { margin-bottom: 0.25rem; line-height: 1; }
.logo-text { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 2.8rem; color: #17181C; letter-spacing: 2px; }
.logo-ring { font-size: 1.6rem; color: #A9863F; font-weight: 300; vertical-align: super; }
.login-subtitle { font-size: 0.8rem; color: #999; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 2.5rem; font-weight: 600; }
.login-box input { display: block; width: 100%; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.95rem; font-family: 'Nunito', sans-serif; outline: none; }
.login-box input:focus { border-color: #17181C; }
.login-box button { width: 100%; padding: 0.85rem; background: #17181C; color: white; border: none; border-radius: 6px; font-size: 0.95rem; font-family: 'Nunito', sans-serif; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; margin-top: 0.5rem; }
.login-box button:hover { background: #2B2C30; }
/* ── Cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.card h3 { margin-bottom: 0.5rem; color: var(--text); font-weight: 800; }
.card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.card a { color: var(--sea-500); font-weight: 800; font-size: 0.9rem; text-decoration: none; }
/* ── Alerts ── */
.alert { padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid transparent; }
.alert-danger { background: var(--coral-soft); color: #B23A3A; border-color: rgba(178,58,58,.35); }
.alert-success { background: var(--green-soft); color: #22412C; border-color: rgba(34,65,44,.3); }
h2 { margin-bottom: 1rem; color: var(--text); font-weight: 800; }
/* ── Page header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h2 { margin: 0; }
/* ── Buttons ── */
.btn-primary { display: inline-flex; align-items:center; gap:8px; padding: 0.6rem 1.2rem; background: var(--orange); color: #FFFFFF !important; border: none; border-radius: 10px; font-size: 0.9rem; font-family: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:disabled { background: #D8DADA; border-color: #D8DADA; color: #929697 !important; cursor: not-allowed; }
.btn-secondary { display: inline-flex; align-items:center; gap:8px; padding: 0.6rem 1.2rem; background: #FFFFFF; color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; font-family: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn-secondary:hover { background: var(--panel-2); border-color: #C9CCCC; }
.btn-danger { display: inline-flex; align-items:center; gap:8px; padding: 0.6rem 1.2rem; background: var(--coral-soft); color: #B23A3A; border: 1px solid rgba(178,58,58,.35); border-radius: 10px; font-size: 0.9rem; font-family: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn-danger:hover { background: var(--coral); color: #FFFFFF; border-color: var(--coral); }
/* ── Tables ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); font-size: 0.9rem; }
.data-table th { background: var(--panel-2); color: #5D6264; padding: 0.75rem 1rem; text-align: left; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.data-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FAFAF8; }
.data-table code { background: var(--panel-3); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.8rem; color: var(--sea-600); }
.empty-row { text-align: center; color: var(--muted); padding: 2.5rem !important; }
.badge { display: inline-block; background: var(--panel-3); color: var(--muted); padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
/* ── Forms ── */
.form-page { max-width: 580px; }
.form-page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.form-page-header h2 { margin: 0; }
.back-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.back-link:hover { color: var(--text); }
.form-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
.form-group { margin-bottom: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group label { display: block; font-weight: 800; font-size: 0.85rem; color: var(--text); margin-bottom: 0.4rem; }
.form-group input, .form-group select { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; font-family: inherit; outline: none; background: #FFFFFF; color: var(--text); }
.form-group input::placeholder { color: #9A9E9F; }
.form-group input:focus, .form-group select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(194,24,88,.10); }
.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; display: block; }
.req { color: var(--coral); }
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
/* ── Stock Count Sheet (screen view light, print view forced light below) ── */
.count-sheet { background: var(--panel); border: 1px solid var(--border); padding: 1.5rem 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.count-sheet-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.count-sheet-title .logo-text { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.count-sheet-title .logo-ring { font-size: 1.4rem; color: var(--orange); }
.count-sheet-subtitle { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
.count-sheet-meta { font-size: 0.85rem; color: var(--text); text-align: right; line-height: 1.7; }
.fill-line { display: inline-block; min-width: 120px; border-bottom: 1px solid var(--border); margin-left: 0.4rem; }
.count-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.85rem; }
.count-table th, .count-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; color: var(--text); }
.count-table thead tr:first-child th.category-row { background: var(--panel-2); color: #5D6264; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.78rem; }
.count-table thead tr:nth-child(2) th { background: var(--panel-3); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; color: var(--muted); }
.count-table .count-col { width: 90px; text-align: center; }
.count-table tbody td.count-col { height: 1.6rem; }
@media print {
    .app-sidebar, .app-topbar, .app-drawer-overlay, .no-print { display: none !important; }
    body { background: white; color: #000; }
    .app-content { margin: 0; padding: 0; max-width: none; }
    .count-sheet, .po-summary { background: #fff !important; box-shadow: none; padding: 0; border: none; }
    .count-sheet-meta, .fill-line, .count-sheet-subtitle { color: #000 !important; border-color: #999 !important; }
    .count-table { page-break-inside: auto; }
    .count-table th, .count-table td { border-color: #ddd !important; color: #000 !important; }
    .count-table thead tr:first-child th.category-row { background: #0d0d0d !important; color: #fff !important; }
    .count-table thead tr:nth-child(2) th { background: #f3f3f3 !important; color: #000 !important; }
    .count-table tr { page-break-inside: avoid; page-break-after: auto; }
    .count-table thead { display: table-header-group; }
    @page { size: A4; margin: 12mm; }
}
/* ── Purchase Orders ── */
.po-summary { background: var(--panel); border: 1px solid var(--border); padding: 1rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.95rem; line-height: 1.8; color: var(--text); }
.badge-approved { background: var(--green-soft); color: #22412C; }
/* === recipes-feature-css-v1 === */
.badge-draft { background: var(--panel-3); color: var(--muted); }
.badge-posted { background: var(--green-soft); color: #22412C; }
.badge-reopened { background: var(--sea-100); color: #7A5B22; }
.variance-up { color: #22412C; font-weight: 700; }
.variance-down { color: #B23A3A; font-weight: 700; }
.recipe-card { margin-bottom: 2rem; }
.page-break { page-break-after: always; }
/* ── List page toolbar + advanced table pattern (Raw Materials and future list pages) ── */
.control { width: 100%; height: 42px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; padding: 0 11px; color: var(--text); outline: 0; font-family: inherit; font-size: 0.95rem; }
.control:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(194,24,88,.1); }
.field label { display: block; margin-bottom: 6px; color: var(--text); font-size: 12px; font-weight: 800; }
.searchbox { position: relative; }
.searchbox svg, .searchbox i { position: absolute; left: 11px; top: 12px; width: 17px; height: 17px; color: var(--muted); }
.searchbox .control { padding-left: 36px; }
.table-toolbar { padding: 16px; display: grid; grid-template-columns: minmax(220px,1fr) 180px 150px auto; gap: 10px; align-items: end; }
@media (max-width: 950px) { .table-toolbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .table-toolbar { grid-template-columns: 1fr; } }
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable span { display: inline-flex; align-items: center; gap: 5px; }
.data-table th.sortable svg { width: 13px; height: 13px; }
.data-table .group-row td { background: var(--panel-2); color: #5D6264; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.actions-cell { text-align: right; white-space: nowrap; }
.action-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: #FFFFFF; color: var(--muted); display: inline-grid; place-items: center; margin-left: 5px; cursor: pointer; text-decoration: none; }
.action-btn:hover { border-color: #C9CCCC; background: var(--panel-2); color: var(--text); }
.action-btn svg { width: 15px; height: 15px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 900; border: 1px solid transparent; }
.status-pill.healthy { color: #22412C; background: var(--green-soft); border-color: rgba(34,65,44,.3); }
.status-pill.low { color: #7A5B22; background: var(--sea-100); border-color: rgba(169,134,63,.35); }
.status-pill.critical { color: #B23A3A; background: var(--coral-soft); border-color: var(--coral); }
.table-footer { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 7px; }
.pager button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: #FFFFFF; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pager button:disabled { opacity: .35; cursor: not-allowed; }
.pager svg { width: 16px; height: 16px; }
.page-pill { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; display: grid; place-items: center; background: rgba(194,24,88,.14); color: var(--orange-hover); font-weight: 900; }
.table-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.table-empty svg { width: 30px; height: 30px; margin-bottom: 10px; }
.table-empty b { display: block; color: var(--text); margin-bottom: 5px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.hero h1 { margin: 0 0 5px; font-size: 26px; }
.hero p { margin: 0; color: var(--muted); font-size: 14px; }
.btn-primary svg, .btn-secondary svg, .btn-danger svg { width: 16px; height: 16px; }
/* ── Raw Materials toolbar: widened for Supplier filter ── */
.table-toolbar { grid-template-columns: minmax(200px,1fr) 160px 160px 130px auto; }
/* ── Fix: internal_code badges (e.g. CNS-013) were wrapping mid-hyphen on narrow columns ── */
.data-table code { white-space: nowrap; }
/* ── Fix: Pack Size column was wrapping mid-value on narrow columns ── */
.data-table td.pack-cell { white-space: nowrap; }
/* ── Declare Production / repeating line-item form pattern ── */
.form-page-wide { max-width: 900px; }
.section-title { font-size: 15px; font-weight: 900; margin-bottom: 3px; color: var(--text); }
.section-sub { font-size: 11px; color: var(--muted); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 680px) { .form-row-3 { grid-template-columns: 1fr; } }
.line-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.line-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.line-table th, .line-table td { padding: 10px 11px; border-bottom: 1px solid var(--border); text-align: left; }
.line-table th { background: var(--panel-2); color: #5D6264; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.line-table td { font-size: 12px; color: var(--text); }
.line-table tr:last-child td { border-bottom: 0; }
.line-table .control.mini { max-width: 130px; height: 38px; }
.label-cell b { display: block; }
.label-cell span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.mobile-row-label { display: none; }
.totals { display: flex; justify-content: flex-end; gap: 28px; padding: 13px 10px 2px; color: var(--muted); font-size: 11px; }
.totals b { color: var(--text); font-size: 13px; }
.alert { display: flex; align-items: flex-start; gap: 10px; }
.alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.alert-info { background: var(--sea-100); color: #7A5B22; border: 1px solid rgba(169,134,63,.25); }
@media (max-width: 680px) {
    .line-wrap { overflow: visible; border: 0; }
    .line-table { min-width: 0; display: block; }
    .line-table thead { display: none; }
    .line-table tbody, .line-table tr, .line-table td { display: block; width: 100%; }
    .line-table tr { position: relative; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; padding: 12px; }
    .line-table td { border: 0; padding: 5px 0; }
    .line-table td.label-cell { margin-bottom: 5px; }
    .line-table .control.mini { max-width: none; }
    .mobile-row-label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin-bottom: 4px; }
    .totals { justify-content: space-between; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn-primary, .form-actions .btn-secondary { width: 100%; justify-content: center; }
}
/* ── Stock on Hand: lock consistent column widths across every category's separate table ── */
.stock-table { table-layout: fixed; min-width: 480px; }
.stock-table td, .stock-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-table td:nth-child(2) { white-space: normal; }
.data-table .group-row-header { background: var(--panel-2); color: #5D6264; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; }
/* ── Enter Stock Count (edit.html) only: lock consistent column widths across every category's separate table.
     Scoped to .count-table-entry specifically -- print.html's blank A4 sheet still uses plain .count-table
     with a different column count and must not be affected. ── */
.count-table-entry { table-layout: fixed; min-width: 560px; }
.count-table-entry td, .count-table-entry th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-table-entry td:nth-child(2) { white-space: normal; }