body { font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; }

.btn-primary { display:inline-flex; align-items:center; gap:.25rem; border-radius:.375rem; background:#4f46e5; color:#fff; padding:.375rem .75rem; font-size:.875rem; font-weight:500; box-shadow:0 1px 2px rgb(0 0 0 / .05); }
.btn-primary:hover { background:#6366f1; }
.btn-secondary { display:inline-flex; align-items:center; gap:.25rem; border-radius:.375rem; border:1px solid #cbd5e1; background:#fff; color:#334155; padding:.375rem .75rem; font-size:.875rem; font-weight:500; box-shadow:0 1px 2px rgb(0 0 0 / .05); }
.btn-secondary:hover { background:#f8fafc; }
.btn-danger { display:inline-flex; align-items:center; gap:.25rem; border-radius:.375rem; border:1px solid #fecdd3; background:#fff; color:#e11d48; padding:.375rem .75rem; font-size:.875rem; font-weight:500; }
.btn-danger:hover { background:#fff1f2; }

tbody tr:hover { background:#f8fafc; }
td, th { white-space:nowrap; }
td.wrap { white-space:normal; }
.num { text-align:right; font-variant-numeric: tabular-nums; }

/* Left menu on a phone (card 43): the menu button in the header opens it over the page */
@media (max-width: 767px) {
  #side-menu.menu-open { display:flex; position:fixed; top:0; bottom:0; left:0; z-index:40; width:15rem; overflow-y:auto; box-shadow:0 10px 30px rgb(0 0 0 / .35); }
}

/* App shell, card 63. Elements that only show in the narrow rail */
[data-rail-only] { display:none; }

/* On a computer the frame fills the window: the menu stays put, its lists scroll on their own,
   the account controls stay at the foot of the menu, and only the content column (#app-content) scrolls. */
@media screen and (min-width: 768px) {
  body.ts-app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  body.ts-app > #app-frame { flex:1 1 auto; min-height:0; }
  #side-menu { min-height:0; }
  #app-content { min-height:0; overflow-y:auto; }

  /* Narrow rail: the choice is kept in localStorage "ts-sidebar" and set on <html> before the page is drawn */
  .sidebar-collapsed #side-menu { width:4rem; }
  .sidebar-collapsed #side-menu [data-rail-hide],
  .sidebar-collapsed #side-menu [data-menu-item] > span.flex-1,
  .sidebar-collapsed #side-menu [data-menu-open] > span,
  .sidebar-collapsed #side-menu [data-menu-open] > svg:last-child { display:none; }
  .sidebar-collapsed #side-menu [data-rail-only] { display:inline-flex; }
  .sidebar-collapsed #side-menu [data-menu-top] { flex-direction:column; gap:.25rem; padding:.75rem 0; }
  .sidebar-collapsed #side-menu [data-menu-brand] { flex:none; padding:0; }
  .sidebar-collapsed #side-menu [data-sidebar-toggle] svg { transform:rotate(180deg); }
  .sidebar-collapsed #side-menu nav { padding-left:.5rem; padding-right:.5rem; }
  .sidebar-collapsed #side-menu [data-menu-item],
  .sidebar-collapsed #side-menu [data-menu-open],
  .sidebar-collapsed #side-menu [data-more-item],
  .sidebar-collapsed #side-menu [data-menu-back],
  .sidebar-collapsed #side-menu #menu-account a[href="/admin"] { position:relative; justify-content:center; padding-left:0; padding-right:0; }
  .sidebar-collapsed #side-menu [data-menu-count] { position:absolute; top:-.25rem; right:-.125rem; min-width:1rem; padding:0 .25rem; font-size:10px; line-height:1rem; }
  .sidebar-collapsed #side-menu [data-menu-group] { margin-bottom:.5rem; padding-top:.5rem; border-top:1px solid #1e293b; }
  .sidebar-collapsed #side-menu [data-menu-group]:first-of-type { border-top:0; padding-top:0; }
  .sidebar-collapsed #menu-account { padding-left:.5rem; padding-right:.5rem; }
  .sidebar-collapsed #menu-account [data-account-row] { justify-content:center; }
  /* The initials open My account, Help and Sign out as a small menu beside the rail */
  .sidebar-collapsed #account-links { display:none; }
  .sidebar-collapsed #menu-account.account-open #account-links {
    display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; position:absolute; left:calc(100% + .5rem); bottom:.75rem;
    z-index:30; width:12rem; margin:0; padding:.75rem 1rem; border-radius:.5rem; background:#0f172a; box-shadow:0 10px 30px rgb(0 0 0 / .35);
  }
  .sidebar-collapsed #account-links [data-rail-only] { display:block; max-width:100%; }
  .sidebar-collapsed #account-links a, .sidebar-collapsed #account-links button { font-size:.875rem; }
}