:root {
  --dna-green: #025122;
  --dna-tan: #bb9b5d;
  --dna-gray: #474747;

  --bg-dark: #0a0a0a;
  --bg-dark-elevated: #111111;
  --bg-dark-panel: #171717;
  --bg-dark-control: rgba(64, 64, 64, 0.3);
  --text-dark: #fafafa;
  --muted-dark: #a1a1aa;
  --border-dark: #2b2b2b;
  --primary-dark: #f5f5f5;
  --primary-dark-soft: #27272a;

  --bg-light: #f8f7f3;
  --bg-light-elevated: #ffffff;
  --bg-light-panel: #ffffff;
  --text-light: #162031;
  --muted-light: #5f6f87;
  --border-light: #dde5f2;
  --primary-light: #0e7a5f;
  --primary-light-soft: rgba(14, 122, 95, 0.14);
  --light-warm-border: #ded8ca;
  --light-warm-header: var(--bg-light);
  --light-warm-header-text: #52624f;
  --light-warm-avatar: var(--bg-light);
  --light-warm-avatar-text: #075f46;
  --danger: #dc2626;
}

.skin-dark {
  --primary-accent: var(--dna-tan);
  --secondary-accent: var(--dna-green);
}

.skin-light {
  --primary-accent: var(--dna-green);
  --secondary-accent: var(--dna-tan);
}

* {
  box-sizing: border-box;
}

turbo-frame {
  display: block;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

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

.skin-dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

.skin-light {
  background: var(--bg-light);
  color: var(--text-light);
}

.app-shell {
  --app-body-gutter: 24px;
  --app-chrome-header-height: 72px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 72px 220px minmax(0, 1fr);
  grid-template-rows: var(--app-chrome-header-height) minmax(0, 1fr);
  position: relative;
}

.app-shell::before {
  content: "";
  border-bottom: 1px solid;
  height: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(var(--app-chrome-header-height) - 1px);
  z-index: 3;
}

.app-header-account,
.app-header-brand {
  align-items: center;
  border-right: 1px solid;
  display: flex;
  grid-row: 1;
  position: relative;
  z-index: 2;
}

.app-header-account {
  grid-column: 1;
  justify-content: center;
}

.app-header-brand {
  grid-column: 2;
  padding: 0 24px;
}

.app-utility-rail {
  align-self: start;
  border-right: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1;
  grid-row: 2;
  height: calc(100dvh - var(--app-chrome-header-height));
  max-height: calc(100dvh - var(--app-chrome-header-height));
  overflow: hidden;
  padding: 12px 0 14px;
  gap: 18px;
  position: sticky;
  top: var(--app-chrome-header-height);
  z-index: 200;
}

.skin-dark .app-header-account,
.skin-dark .app-header-brand,
.skin-dark .app-utility-rail {
  border-color: var(--border-dark);
}

.skin-dark .app-header-account,
.skin-dark .app-utility-rail {
  background: var(--bg-dark);
}

.skin-dark .app-header-brand {
  background: var(--bg-dark-elevated);
}

.skin-light .app-header-account {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
}

.skin-light .app-header-brand,
.skin-light .app-utility-rail {
  border-color: var(--light-warm-border);
}

.skin-light .app-header-brand {
  background: #ffffff;
}

.skin-dark .app-shell::before {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .app-shell::before {
  background: #ffffff;
  border-color: var(--border-light);
}

.utility-rail-mark,
.utility-rail-user,
.utility-rail-slot {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.utility-rail-mark {
  border: 1px solid;
  border-radius: 6px;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  height: 45px;
  overflow: hidden;
  text-decoration: none;
  width: 45px;
}

.utility-rail-mark:hover,
.utility-rail-mark:focus-visible {
  text-decoration: none;
}

.skin-dark .utility-rail-mark {
  background: #262626;
  border-color: #3f3f46;
  color: var(--text-dark);
}

.skin-light .utility-rail-mark {
  border-color: #d6cebf;
  background: #ffffff;
}

.utility-rail-slots {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.utility-rail-slots::-webkit-scrollbar {
  display: none;
}

.utility-rail-bottom {
  align-items: center;
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.utility-rail-theme-form {
  margin: 0;
}

.utility-rail-theme-toggle {
  appearance: none;
}

.utility-rail-theme-icon {
  background: currentColor;
  display: block;
  height: 22px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 22h4M8.3 15.7A7 7 0 1 1 15.7 15.7C14.7 16.5 14 17.4 14 19h-4c0-1.6-.7-2.5-1.7-3.3Z'/%3E%3Cpath d='M9.5 10.5h5M12 8v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 22h4M8.3 15.7A7 7 0 1 1 15.7 15.7C14.7 16.5 14 17.4 14 19h-4c0-1.6-.7-2.5-1.7-3.3Z'/%3E%3Cpath d='M9.5 10.5h5M12 8v5'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 22px;
}

.skin-dark .utility-rail-theme-toggle {
  background: #262626;
  border-color: #3f3f46;
  color: #facc15;
}

.skin-light .utility-rail-theme-toggle {
  background: #ffffff;
  border-color: #d6cebf;
  color: #8a6b24;
}

.utility-rail-theme-toggle:hover,
.utility-rail-theme-toggle:focus-visible {
  filter: brightness(1.12);
}

.utility-rail-slot {
  width: 45px;
  height: 45px;
  border: 1px solid;
  background: transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.utility-rail-record {
  font-size: 11px;
  font-weight: 750;
}

.utility-rail-shortcut-content {
  align-items: center;
  align-content: center;
  display: grid;
  gap: 0;
  grid-template-rows: min-content min-content;
  height: 100%;
  justify-items: center;
  line-height: 0.95;
  min-width: 0;
  position: relative;
  width: 100%;
}

.utility-rail-record-type {
  height: 15px;
  margin-bottom: -1px;
  opacity: 0.78;
  width: 15px;
}

.utility-rail-image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.utility-rail-record .utility-rail-image {
  border-radius: 5px;
  height: 100%;
  width: 100%;
}

.utility-rail-initials {
  display: block;
  line-height: 0.95;
  max-width: 38px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .utility-rail-slot {
  border-color: transparent;
  color: var(--muted-dark);
}

.skin-dark .utility-rail-record {
  border-color: var(--border-dark);
}

.skin-dark .utility-rail-record-fallback {
  background: var(--bg-dark-elevated);
}

.skin-dark .utility-rail-slot:hover {
  background: var(--primary-dark-soft);
  color: var(--text-dark);
}

.skin-dark .utility-rail-slot-active {
  background: var(--primary-dark-soft);
  border-color: var(--border-dark);
  color: var(--primary-dark);
}

.skin-light .utility-rail-slot {
  border-color: #d6cebf;
  color: #4f604d;
}

.skin-light .utility-rail-slot:hover,
.skin-light .utility-rail-slot:focus-visible {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--primary-light);
  text-decoration: none;
}

.skin-light .utility-rail-slot-active {
  background: var(--bg-light);
  border-color: var(--light-warm-border);
  color: var(--primary-light);
}

.skin-light .utility-rail-record-fallback {
  background: #ffffff;
}

.utility-rail-user {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  margin-top: auto;
  width: 28px;
}

.skin-dark .utility-rail-user {
  background: #262626;
  color: var(--muted-dark);
}

.utility-rail-action-button {
  align-items: center;
  appearance: none;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 45px;
  justify-content: center;
  padding: 0 4px;
  width: 45px;
}

.skin-dark .utility-rail-action-button {
  background: #262626;
  border-color: #3f3f46;
  color: var(--text-dark);
}

.skin-light .utility-rail-action-button {
  background: #ffffff;
  border-color: #d6cebf;
  color: #4f604d;
}

.app-sidebar {
  border-right: 1px solid;
  grid-column: 2;
  grid-row: 2;
  padding: 6px 12px 12px;
  position: relative;
  z-index: 1;
}

.skin-dark .app-sidebar {
  border-color: var(--border-dark);
  background: #0a0a0a;
}

.skin-light .app-sidebar {
  border-color: #ded8ca;
  background: #ffffff;
}

.app-brand {
  display: none;
  align-items: center;
}

.app-brand-logo {
  max-width: 172px;
  width: 100%;
}

.dna-os-logo {
  display: inline-flex;
  line-height: 0;
}

.dna-os-logo-image {
  display: block;
  height: auto;
  max-width: 100%;
}

.skin-light .dna-os-logo-dark,
.skin-dark .dna-os-logo-light {
  display: none;
}

.app-nav {
  display: grid;
  gap: 1px;
  margin-top: 0;
}

.app-nav-heading {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 14px 12px 8px;
}

.app-nav > .app-nav-heading:first-child {
  padding-top: 19px;
}

.skin-dark .app-nav-heading {
  color: var(--muted-dark);
}

.skin-light .app-nav-heading {
  color: var(--muted-light);
}

.app-nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  display: flex;
  gap: 10px;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 13px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.skin-dark .app-nav-item {
  color: rgba(250, 250, 250, 0.8);
}

.skin-dark .app-nav-item:hover {
  color: var(--text-dark);
  background: rgba(39, 39, 42, 0.65);
}

.skin-light .app-nav-item {
  color: #4f604d;
}

.skin-light .app-nav-item:hover {
  color: #243c2e;
  border-color: #d8cfbd;
  background: #eee8dc;
}

.skin-dark .app-nav-item-active {
  color: var(--text-dark);
  background: #27272a;
}

.skin-light .app-nav-item-active {
  border-color: var(--light-warm-border);
  border-radius: 6px;
  color: var(--primary-light);
  background: var(--bg-light);
}

.app-nav-icon,
.content-heading-title::before {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.app-nav-icon {
  flex: 0 0 auto;
  height: 16px;
  opacity: 0.9;
  width: 16px;
}

.app-nav-icon::before,
.content-heading-title::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 15px;
  -webkit-mask: var(--page-icon) center / contain no-repeat;
  mask: var(--page-icon) center / contain no-repeat;
  width: 15px;
}

.app-nav-icon-dashboard,
.controller-dashboard .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-users,
.controller-users .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.app-nav-icon-rates,
.controller-standard-rates .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v3.05c2.85.36 5 1.98 5 4.2h-4c0-.58-.8-1.25-2.3-1.25-1.36 0-2.2.48-2.2 1.2 0 .78 1.12 1.08 3.12 1.54C15.82 11.48 19 12.5 19 16.1c0 2.42-2.25 4.08-6 4.43V23h-2v-2.48c-3.55-.42-6-2.4-6-5.02h4c0 .88 1.04 1.6 2.78 1.6 1.9 0 2.72-.58 2.72-1.42 0-.86-1.08-1.18-3.28-1.7C8.16 13.26 5 12.27 5 9.27c0-2.34 2.27-3.9 6-4.23V2h2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-expenses,
.controller-expense-schedules .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Zm3 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-rates::before,
.app-nav-icon-expenses::before,
.controller-standard-rates .content-heading-title::before,
.controller-expense-schedules .content-heading-title::before {
  -webkit-mask: none;
  background: none;
  color: currentColor;
  font-size: 9px;
  font-weight: 850;
  height: auto;
  letter-spacing: -0.08em;
  line-height: 1;
  mask: none;
  width: auto;
}

.app-nav-icon-rates::before,
.controller-standard-rates .content-heading-title::before {
  content: "SR";
}

.app-nav-icon-expenses::before,
.controller-expense-schedules .content-heading-title::before {
  content: "ES";
}

.controller-standard-rates .content-heading-title::before,
.controller-expense-schedules .content-heading-title::before {
  font-size: 11px;
}

.app-nav-icon-subtasks,
.controller-sub-task-templates .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h3v3H4V5Zm5 .5h11v2H9v-2ZM4 11h3v3H4v-3Zm5 .5h11v2H9v-2ZM4 17h3v3H4v-3Zm5 .5h11v2H9v-2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-companies,
.controller-companies .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h11v18h5V9h-4V7h6v14H4Zm3-14v2h2V7H7Zm4 0v2h2V7h-2Zm-4 4v2h2v-2H7Zm4 0v2h2v-2h-2Zm-4 4v2h2v-2H7Zm4 0v2h2v-2h-2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-contacts,
.controller-contacts .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-8 9a8 8 0 0 1 16 0H4Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-projects,
.controller-projects .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h7l2 2h9v10.5A2.5 2.5 0 0 1 18.5 21h-13A2.5 2.5 0 0 1 3 18.5V6Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-invoices,
.controller-invoices .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v3.05c2.85.36 5 1.98 5 4.2h-4c0-.58-.8-1.25-2.3-1.25-1.36 0-2.2.48-2.2 1.2 0 .78 1.12 1.08 3.12 1.54C15.82 11.48 19 12.5 19 16.1c0 2.42-2.25 4.08-6 4.43V23h-2v-2.48c-3.55-.42-6-2.4-6-5.02h4c0 .88 1.04 1.6 2.78 1.6 1.9 0 2.72-.58 2.72-1.42 0-.86-1.08-1.18-3.28-1.7C8.16 13.26 5 12.27 5 9.27c0-2.34 2.27-3.9 6-4.23V2h2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-timesheets,
.controller-timesheets .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5v5l4 2-.9 1.8L11 13V7h2Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-reports,
.controller-reports .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4v-2Zm2-8h3v6H6v-6Zm5-6h3v12h-3V6Zm5 3h3v9h-3V9Z' fill='black'/%3E%3C/svg%3E");
}

.app-nav-icon-design-guide,
.controller-design-guide .content-heading-title {
  --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h11a3 3 0 0 1 3 3v15H7a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1Zm2 2H6v10.35c.31-.15.65-.25 1-.3V5Zm0 12a1 1 0 0 0 0 2h10v-2H7Zm2-9h6v2H9V8Zm0 4h6v2H9v-2Z' fill='black'/%3E%3C/svg%3E");
}

.app-main {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  z-index: 1;
}

.app-mobile-header {
  display: none;
}

.skin-dark .app-mobile-header.is-stuck {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .app-mobile-header.is-stuck {
  background: #ffffff;
  border-color: var(--border-light);
}

.app-nav-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: none;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.app-nav-toggle-icon,
.app-nav-toggle-icon::before,
.app-nav-toggle-icon::after {
  background: currentColor;
  border-radius: 2px;
  display: block;
  height: 2px;
  position: relative;
  transition: transform 200ms ease, opacity 200ms ease;
  width: 18px;
}

.app-nav-toggle-icon::before,
.app-nav-toggle-icon::after {
  content: "";
  left: 0;
  position: absolute;
}

.app-nav-toggle-icon::before { top: -6px; }
.app-nav-toggle-icon::after  { top:  6px; }

.app-nav-overlay {
  background: rgba(0, 0, 0, 0.45);
  display: none;
  inset: 0;
  position: fixed;
  z-index: 49;
}

.app-nav-overlay.is-visible { display: block; }

.app-nav-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: none;
  font-size: 16px;
  margin-bottom: 8px;
  padding: 4px 8px;
  text-align: right;
  width: 100%;
}

.app-content-wrapper {
  min-width: 0;
  padding: calc(var(--app-chrome-header-height) + var(--app-body-gutter)) var(--app-body-gutter) var(--app-body-gutter);
  position: relative;
}

.app-footer {
  border-top: 1px solid;
  padding: 10px 20px;
  font-size: 12px;
}

.skin-dark .app-footer {
  border-color: var(--border-dark);
  color: var(--muted-dark);
  background: #0a0a0a;
}

.skin-light .app-footer {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.auth-page {
  background: #f8f7f3;
  color: #182235;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.dashboard-page-shell {
  width: 100%;
  max-width: 1160px;
}

.dashboard-config-shell {
  display: grid;
  gap: 16px;
}

.content-heading {
  border: 1px solid;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-weight: 600;
}

.skin-dark .content-heading {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .content-heading {
  background: #ffffff;
  border-color: var(--border-light);
}

.app-content-wrapper > .content-heading {
  align-items: center;
  border-color: transparent;
  border-radius: 0;
  display: flex;
  height: var(--app-chrome-header-height);
  left: 0;
  margin: 0;
  min-height: var(--app-chrome-header-height);
  padding: 0 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.skin-dark .app-content-wrapper > .content-heading {
  background: var(--bg-dark-elevated);
}

.skin-light .app-content-wrapper > .content-heading {
  background: var(--bg-light-elevated);
}

.app-content-wrapper > .content-heading .content-heading-row {
  flex: 1 1 auto;
}

.content-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.content-heading-title-group {
  align-items: baseline;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.content-heading-title {
  align-items: center;
  display: inline-flex;
  font-size: 20px;
  gap: 8px;
  line-height: 1.15;
}

.content-heading-add-link {
  color: inherit;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  margin-left: 10px;
  position: relative;
  text-decoration: underline;
  text-underline-offset: 3px;
  top: -4px;
}

.content-heading-add-link:hover,
.content-heading-add-link:focus-visible {
  color: var(--primary-accent);
}

.content-heading-title::before {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.card {
  width: 100%;
  max-width: 920px;
  border: 1px solid;
  padding: 24px;
}

.skin-dark .card {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .card {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.auth-card {
  background: #fff;
  border-color: #d8ded8;
  border-radius: 10px;
  color: #182235;
  max-width: 420px;
  padding: 44px;
}

.auth-logo {
  display: flex;
  margin: 0 auto 28px;
  max-width: 240px;
}

.skin-dark .auth-card {
  background: #fff;
  border-color: #d8ded8;
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"],
.skin-dark .auth-card input[type="email"],
.skin-dark .auth-card input[type="password"],
.skin-dark .auth-card input[type="text"] {
  background: #fff;
  border-color: #d8ded8;
  color: #182235;
}

.auth-card .btn,
.skin-dark .auth-card .btn {
  background: #fff;
  border-color: #d8ded8;
  color: #182235;
}

.auth-card .btn:hover,
.auth-card .btn:focus-visible,
.skin-dark .auth-card .btn:hover,
.skin-dark .auth-card .btn:focus-visible {
  background: #f4f1ea;
  border-color: #c7cfc7;
}

.auth-card .btn-primary,
.skin-light .auth-card .btn-primary,
.skin-dark .auth-card .btn-primary {
  background: var(--dna-green);
  border-color: var(--dna-green);
  color: #fff;
}

.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus-visible,
.skin-light .auth-card .btn-primary:hover,
.skin-light .auth-card .btn-primary:focus-visible,
.skin-dark .auth-card .btn-primary:hover,
.skin-dark .auth-card .btn-primary:focus-visible {
  background: #013d1a;
  border-color: #013d1a;
}

.auth-instructions {
  color: #667085;
  margin: 8px 0 18px;
}

.auth-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.auth-secondary-actions {
  margin-top: 12px;
}

.auth-link {
  color: var(--dna-green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.auth-link:hover,
.auth-link:focus-visible {
  text-decoration: underline;
}

.dev-login-panel {
  border-top: 1px solid;
  margin-top: 18px;
  padding-top: 18px;
}

.dev-login-panel form {
  margin: 0;
}

.dev-login-button {
  width: 100%;
}

.skin-dark .dev-login-panel {
  border-color: var(--border-dark);
}

.skin-light .dev-login-panel {
  border-color: var(--border-light);
}

.auth-card .dev-login-panel {
  border-color: #d8ded8;
}

.dashboard-surface {
  width: 100%;
  max-width: 1160px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-subtitle {
  margin-top: 6px;
}

.skin-dark .dashboard-subtitle {
  color: var(--muted-dark);
}

.skin-light .dashboard-subtitle {
  color: var(--muted-light);
}


.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

label {
  font-size: 13px;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea {
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  color: inherit;
  width: 100%;
}

/* iOS Safari/WKWebView renders input[type="date"] with native inline sizing that
   ignores width: 100%. display: block forces it to behave like a block element
   and respect the container width — the same fix Bootstrap applies via .form-control. */
input[type="date"] {
  -webkit-appearance: none;
  apperance: none;
  display: block;
  max-width: 100%;
  min-width: 0;
}

.skin-dark input[type="email"],
.skin-dark input[type="password"],
.skin-dark input[type="text"],
.skin-dark input[type="search"],
.skin-dark input[type="number"],
.skin-dark input[type="url"],
.skin-dark input[type="tel"],
.skin-dark input[type="date"],
.skin-dark select,
.skin-dark textarea {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-light input[type="email"],
.skin-light input[type="password"],
.skin-light input[type="text"],
.skin-light input[type="search"],
.skin-light input[type="number"],
.skin-light input[type="url"],
.skin-light input[type="tel"],
.skin-light input[type="date"],
.skin-light select,
.skin-light textarea {
  border-color: var(--border-light);
  background: transparent;
}

.skin-dark input::placeholder,
.skin-dark textarea::placeholder {
  color: var(--muted-dark);
  opacity: 1;
}

.skin-light input::placeholder,
.skin-light textarea::placeholder {
  color: var(--muted-light);
  opacity: 1;
}

.btn {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.15;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

input[type="submit"].btn,
button.btn {
  appearance: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  min-height: 44px;
  padding: 0 12px;
  width: auto;
}

.btn.dino-link {
  gap: 0;
}

.btn.dino-link::after {
  content: none;
  display: none;
}

.skin-dark .btn {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-dark .btn:hover,
.skin-dark .btn:focus-visible {
  background: rgba(82, 82, 91, 0.4);
  border-color: #3f3f46;
}

.skin-light .btn {
  border-color: var(--border-light);
}

.btn-primary {
  font-weight: 600;
}

.skin-dark .btn-primary {
  border-color: #52525b;
  color: var(--text-dark);
}

.skin-light .btn-primary {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.dashboard-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dashboard-actions-stacked {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}

.dashboard-actions form {
  margin: 0;
}

.dashboard-inline-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.dashboard-inline-form .field {
  margin-bottom: 0;
}

.dashboard-inline-form-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-inline-form input[type="date"] {
  width: 100%;
}

.dashboard-config-panel,
.dashboard-config-summary,
.dashboard-widget {
  display: grid;
  gap: 14px;
}

.dashboard-config-panel {
  max-width: 760px;
}

.dashboard-status-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.72;
  padding: 4px 6px;
}

.dashboard-title-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-config-form {
  display: grid;
  gap: 12px;
}

.dashboard-config-form textarea {
  min-height: 130px;
  resize: vertical;
}

.dashboard-config-summary {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-config-details {
  display: grid;
  gap: 12px;
}

.dashboard-config-details summary {
  cursor: pointer;
  list-style: none;
}

.dashboard-config-details summary::-webkit-details-marker {
  display: none;
}

.dashboard-config-details[open] {
  grid-column: 1 / -1;
}

.dashboard-create-panel {
  display: grid;
  gap: 16px;
}

.dashboard-create-panel > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.dashboard-create-panel > summary::-webkit-details-marker {
  display: none;
}

.dashboard-create-panel > summary > span:first-child {
  display: grid;
  gap: 5px;
}

.dashboard-create-panel > summary small,
.field-help {
  font-size: 12px;
  opacity: 0.72;
}

.dashboard-create-panel[open] > summary .btn {
  display: none;
}

.legacy-dashboard {
  display: grid;
  gap: 16px;
}

.legacy-dashboard-xero-alert {
  align-items: center;
  border-color: var(--danger);
  display: flex;
  justify-content: space-between;
}

.legacy-dashboard-xero-alert > div {
  display: grid;
  gap: 4px;
}

.legacy-dashboard-xero-alert span {
  font-size: 12px;
  opacity: 0.76;
}

.legacy-dashboard-alert-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-dashboard-alert {
  align-content: center;
  border-radius: 10px;
  color: #ffffff;
  display: grid;
  min-height: 116px;
  padding: 20px;
  text-decoration: none;
}

.legacy-dashboard-alert strong {
  font-size: 30px;
  line-height: 1;
}

.legacy-dashboard-alert span {
  font-size: 12px;
  margin-top: 8px;
  text-transform: uppercase;
}

.legacy-dashboard-alert-review {
  background: #e22920;
}

.legacy-dashboard-alert-pending {
  background: #e6df16;
  color: #3f3f3f;
}

.legacy-dashboard-date {
  border: 1px solid;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 116px;
  overflow: hidden;
}

.skin-dark .legacy-dashboard-date {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-light .legacy-dashboard-date {
  border-color: var(--border-light);
  background: #ffffff;
}

.legacy-dashboard-date > div {
  align-content: center;
  display: grid;
  padding: 16px;
}

.legacy-dashboard-date > div:first-child {
  background: var(--dna-green);
  color: #ffffff;
  text-align: center;
}

.legacy-dashboard-date span,
.legacy-dashboard-date small {
  font-size: 11px;
  text-transform: uppercase;
}

.legacy-dashboard-date strong {
  font-size: 25px;
  line-height: 1.1;
}

.legacy-dashboard-announcement {
  background: linear-gradient(100deg, #147e9f, #23b7e5);
  color: #ffffff;
  max-width: calc(25% - 9px);
}

.legacy-dashboard-announcement > span {
  font-size: 12px;
  text-transform: uppercase;
}

.legacy-dashboard-announcement p:last-child {
  margin-bottom: 0;
}

.legacy-dashboard-main-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legacy-dashboard-panel {
  display: grid;
  gap: 14px;
}

.legacy-dashboard-panel h3 {
  font-size: 14px;
}

.legacy-dashboard-panel-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.dashboard-text-action {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

.legacy-dashboard-notification-list,
.legacy-dashboard-queue-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.legacy-dashboard-notification-list li,
.legacy-dashboard-queue-list li {
  border-top: 1px solid;
}

.skin-dark .legacy-dashboard-notification-list li,
.skin-dark .legacy-dashboard-queue-list li {
  border-color: var(--border-dark);
}

.skin-light .legacy-dashboard-notification-list li,
.skin-light .legacy-dashboard-queue-list li {
  border-color: var(--border-light);
}

.legacy-dashboard-notification-list a,
.legacy-dashboard-queue-list a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 10px;
  min-height: 52px;
  padding: 8px 0;
  text-decoration: none;
}

.legacy-dashboard-notification-list a > span:last-child {
  display: grid;
  gap: 3px;
}

.legacy-dashboard-notification-list small {
  font-size: 11px;
  opacity: 0.7;
}

.legacy-dashboard-notification-icon {
  color: var(--dna-green);
  font-size: 20px;
}

.legacy-dashboard-action-form {
  display: grid;
  gap: 10px;
}

.legacy-dashboard-action-form .field {
  margin-bottom: 0;
}

.legacy-dashboard-action-form textarea {
  min-height: 150px;
  resize: vertical;
}

.legacy-dashboard-queue-list strong {
  margin-left: auto;
}

.legacy-dashboard-queue-dot {
  border-radius: 999px;
  height: 18px;
  width: 18px;
}

.legacy-dashboard-queue-dot-pending {
  background: #e6df16;
}

.legacy-dashboard-queue-dot-review {
  background: #e22920;
}

.legacy-dashboard-queue-dot-approved {
  background: #3c8039;
}

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

.dashboard-widget-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-widget-heading span,
.dashboard-empty {
  font-size: 12px;
}

.dashboard-widget-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.dashboard-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.dashboard-alert-item {
  border-radius: 6px;
  overflow: hidden;
}

.dashboard-alert-link {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background 0.12s;
}

.skin-dark .dashboard-alert-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.skin-light .dashboard-alert-link:hover {
  background: #f0f4fa;
}

.dashboard-alert-count {
  align-items: center;
  background: var(--danger, #ef4444);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}

.dashboard-alert-count-review {
  background: var(--secondary-accent, #f59e0b);
}

.dashboard-alert-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.dashboard-alert-arrow {
  font-size: 16px;
  opacity: 0.4;
}

.dashboard-widget-heading span {
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.skin-dark .dashboard-widget-heading span,
.skin-dark .dashboard-empty {
  color: var(--muted-dark);
}

.skin-light .dashboard-widget-heading span,
.skin-light .dashboard-empty {
  color: var(--muted-light);
}

.dashboard-widget-main {
  display: grid;
  gap: 4px;
}

.dashboard-widget-main strong {
  font-size: 22px;
  line-height: 1.12;
}

.dashboard-action-stack,
.dashboard-widget-list {
  display: grid;
  gap: 10px;
}

.dashboard-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-widget-list li {
  align-items: baseline;
  display: grid;
  gap: 4px;
}

.widget {
  min-height: 98px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-box {
  border: 1px solid;
  border-radius: 8px;
  padding: 12px;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.skin-dark .stat-box {
  border-color: var(--border-dark);
  background: #111111;
}

.skin-light .stat-box {
  border-color: var(--border-light);
  background: var(--bg-light-panel);
}

.stat-label {
  font-size: 11px;
  margin-bottom: 4px;
}

.skin-dark .stat-label {
  color: var(--muted-dark);
}

.skin-light .stat-label {
  color: var(--muted-light);
}

.stat-value {
  font-size: 15px;
  font-weight: 600;
}

.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.panel-grid-single {
  grid-template-columns: 1fr;
}

.panel-grid-equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-link-panel {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-page-shell {
  display: grid;
  gap: 16px;
}

.setup-profile-panel {
  align-items: center;
  display: flex;
  gap: 16px;
}

.setup-avatar-preview {
  align-items: center;
  border: 1px solid;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 800;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  width: 72px;
}

.skin-dark .setup-avatar-preview {
  background: #262626;
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .setup-avatar-preview {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.setup-profile-copy {
  display: grid;
  gap: 4px;
}

.setup-profile-copy span,
.setup-action-list span {
  font-size: 12px;
}

.skin-dark .setup-profile-copy span,
.skin-dark .setup-profile-copy p,
.skin-dark .setup-action-list span {
  color: var(--muted-dark);
}

.skin-light .setup-profile-copy span,
.skin-light .setup-profile-copy p,
.skin-light .setup-action-list span {
  color: var(--muted-light);
}

.setup-form,
.setup-action-list {
  display: grid;
  gap: 14px;
}

.setup-checkbox {
  align-items: center;
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.setup-checkbox input {
  margin: 0;
}

.setup-actions-panel .button_to {
  margin: 0;
}

.setup-action-list > div:not(.dashboard-actions) {
  display: grid;
  gap: 4px;
}

.panel {
  border: 1px solid;
  border-radius: 8px;
  padding: 16px;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.skin-dark .panel {
  border-color: var(--border-dark);
  background: #111111;
}

.skin-light .panel {
  border-color: var(--border-light);
  background: var(--bg-light-panel);
}
.interactive-surface:hover {
  transform: translateY(-1px);
}

.skin-dark .interactive-surface:hover {
  border-color: #3f3f46;
  background: #1a1a1a;
}

.skin-light .interactive-surface:hover {
  border-color: #a7bfdc;
  background: #f0f5fc;
}

.panel-placeholder {

  margin-top: 10px;
  height: 220px;
  border-radius: 8px;
}

.skin-dark .panel-placeholder {
  background: linear-gradient(180deg, rgba(82, 82, 91, 0.24) 0%, rgba(24, 24, 27, 0.4) 100%);
}

.skin-light .panel-placeholder {
  background: linear-gradient(180deg, rgba(14, 122, 95, 0.12) 0%, rgba(221, 229, 242, 0.5) 100%);
}

.contacts-search {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative;
}

.contacts-search::before {
  content: "⌕";
  font-size: 15px;
  left: 12px;
  opacity: 0.65;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.search-input {
  min-width: 260px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px 8px 40px;
  background: transparent;
  color: inherit;
}

.contacts-search .search-input {
  padding-left: 40px;
}

.reports-search-form,
.reports-build-form {
  align-items: end;
  flex-wrap: wrap;
}

.reports-search-form .btn,
.reports-build-form .btn {
  align-self: stretch;
}

.reports-build-form .btn {
  align-self: end;
  min-height: 44px;
}

.reports-build-field {
  display: grid;
  gap: 6px;
  min-width: 200px;
}

.reports-build-field[hidden] {
  display: none;
}

.reports-build-field label {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.reports-build-form .search-input,
.reports-build-form select.search-input {
  min-width: 200px;
}

.reports-build-form::before {
  content: none;
}

.reports-build-form .search-input,
.reports-build-form select.search-input {
  padding-left: 12px;
}

.skin-dark .reports-build-field label {
  color: var(--muted-dark);
}

.skin-light .reports-build-field label {
  color: var(--muted-light);
}

.report-show-shell {
  max-width: none;
}

.report-show-shell .panel {
  padding: 0;
  overflow: hidden;
}

.report-show-shell .project-side-heading {
  align-items: center;
  border-bottom: 1px solid;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.report-show-shell .project-side-heading h2 {
  margin: 0;
}

.report-show-shell .project-side-heading span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.report-show-shell .entity-tabs {
  margin: 0;
  padding: 12px 16px;
}

.report-table-wrap {
  overflow-x: auto;
  padding: 0 16px 16px;
}

.report-table-heading {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.report-chart {
  border: 1px solid;
  border-radius: 10px;
  display: grid;
  gap: 16px;
  margin: 0 0 18px;
  padding: 16px;
}

.skin-dark .report-chart {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .report-chart {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.report-chart-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.report-chart-heading > div {
  display: grid;
  gap: 4px;
}

.report-chart-heading h4 {
  font-size: 14px;
  line-height: 1.25;
  margin: 0;
}

.report-chart-heading p {
  font-size: 12px;
  line-height: 1.45;
}

.report-chart-heading > strong {
  flex: 0 0 auto;
  font-size: 15px;
  white-space: nowrap;
}

.skin-dark .report-chart-heading p,
.skin-dark .report-chart-label {
  color: var(--muted-dark);
}

.skin-light .report-chart-heading p,
.skin-light .report-chart-label {
  color: var(--muted-light);
}

.report-chart-rows {
  display: grid;
  gap: 10px;
}

.report-chart-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 2fr) minmax(110px, auto);
  min-width: 0;
}

.report-chart-label {
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-chart-value {
  font-size: 12px;
  min-width: 0;
  text-align: right;
}

.report-chart-meter {
  appearance: none;
  background: transparent;
  border: 0;
  height: 14px;
  width: 100%;
}

.report-chart-meter::-webkit-meter-bar {
  background: transparent;
  border: 1px solid;
  border-radius: 999px;
  box-shadow: none;
  height: 12px;
}

.skin-dark .report-chart-meter::-webkit-meter-bar {
  border-color: var(--border-dark);
}

.skin-light .report-chart-meter::-webkit-meter-bar {
  border-color: var(--border-light);
}

.report-chart-meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, #087a5f, #17a67f);
  border-radius: 999px;
}

.report-chart-meter::-moz-meter-bar {
  background: linear-gradient(90deg, #087a5f, #17a67f);
  border-radius: 999px;
}

.report-metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
}

.report-metric {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.skin-dark .report-metric {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .report-metric {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.report-metric > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.report-metric > strong {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .report-table-heading {
  color: var(--muted-dark);
}

.skin-light .report-table-heading {
  color: var(--muted-light);
}

.report-show-shell .table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.report-show-shell .table th,
.report-show-shell .table td {
  border-bottom: 1px solid;
  font-size: 13px;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.report-show-shell .table thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-show-shell .table tbody tr:last-child td {
  border-bottom: 0;
}

.skin-dark .report-show-shell .table th,
.skin-dark .report-show-shell .table td {
  border-color: var(--border-dark);
}

.skin-light .report-show-shell .table th,
.skin-light .report-show-shell .table td {
  border-color: var(--border-light);
}

@media (max-width: 760px) {
  .report-chart-row {
    gap: 6px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .report-chart-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .report-chart-value {
    grid-column: 2;
    grid-row: 1;
  }

  .report-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.skin-dark .search-input {
  border-color: var(--border-dark);
  background: var(--bg-dark-control);
}

.skin-light .search-input {
  border-color: var(--border-light);
}

.advanced-search-popover {
  position: relative;
}

.advanced-search-summary {
  list-style: none;
}

.advanced-search-summary::-webkit-details-marker {
  display: none;
}

.advanced-search-panel {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(880px, calc(100vw - 360px));
  z-index: 20;
}

.advanced-search-panel.is-hidden {
  display: none;
}

.advanced-search-drawer {
  margin-bottom: 16px;
  margin-top: 0;
  position: static;
  width: 100%;
}

.skin-dark .advanced-search-panel {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .advanced-search-panel {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.advanced-search-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advanced-search-check {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  width: max-content;
}

.advanced-search-check input {
  width: auto;
}

.advanced-search-actions {
  display: flex;
  gap: 8px;
}

.contact-grid,
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-card,
.company-card {
  display: grid;
  gap: 8px;
}

.company-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.company-card h2 {
  margin-bottom: 14px;
}

.company-card .flip-group-front > .contact-meta {
  margin-top: 20px;
}

.editable-heading {
  align-items: flex-start;
  display: inline-flex;
  gap: 6px;
}

.contact-company {
  font-weight: 600;
}

.contact-title,
.contact-meta,
.detail-list dt {
  font-size: 13px;
}

.skin-dark .contact-title,
.skin-dark .contact-meta,
.skin-dark .detail-list dt {
  color: var(--muted-dark);
}

.skin-light .contact-title,
.skin-light .contact-meta,
.skin-light .detail-list dt {
  color: var(--muted-light);
}

.contact-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

.detail-list {
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.detail-list dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.detail-two-column {
  display: grid;
  grid-template-columns: 0.95fr 1.45fr;
  gap: 12px;
}

.entity-breadcrumb {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 10px;
  margin-bottom: 22px;
}

.entity-breadcrumb-link {
  color: inherit;
  text-decoration: none;
}

.skin-dark .entity-breadcrumb {
  color: var(--muted-dark);
}

.skin-light .entity-breadcrumb {
  color: var(--muted-light);
}

.entity-hero {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.entity-hero-main {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.entity-ai-icon {
  align-items: center;
  border-radius: 0;
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.entity-ai-icon::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v3h3a2 2 0 0 1 2 2v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1ZM8 9v3h3V9H8Zm5 0v3h3V9h-3Zm-5 6v2h8v-2H8ZM2 10h2v5H2v-5Zm18 0h2v5h-2v-5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v3h3a2 2 0 0 1 2 2v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1ZM8 9v3h3V9H8Zm5 0v3h3V9h-3Zm-5 6v2h8v-2H8ZM2 10h2v5H2v-5Zm18 0h2v5h-2v-5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 24px;
}

.skin-dark .entity-ai-icon {
  background: #262626;
  color: var(--text-dark);
}

.skin-light .entity-ai-icon {
  background: #e7eef9;
  color: var(--text-light);
}

.entity-title-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.entity-title-stack h1 {
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-title-stack span {
  font-size: 13px;
  line-height: 1.2;
}

.entity-company-link {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.entity-title-stack .entity-company-link {
  color: var(--primary-accent);
}

.entity-title-stack .entity-location-text {
  color: var(--primary-accent);
}

.skin-dark .entity-title-stack span {
  color: var(--muted-dark);
}

.skin-light .entity-title-stack span {
  color: var(--muted-light);
}

.skin-dark .entity-title-stack .entity-location-text,
.skin-light .entity-title-stack .entity-location-text {
  color: var(--primary-accent);
}

.entity-hero-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.entity-show-shell {
  max-width: 1160px;
}

.entity-title-row {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 0;
}

.entity-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.entity-tabs {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 3px;
}

.entity-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 44px;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
}

[data-entity-tab-panel].is-hidden {
  display: none;
}

.entity-tab:hover,
.entity-tab:focus-visible {
  text-decoration: none;
}

.entity-tab::after {
  background: currentColor;
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  opacity: 0;
  position: absolute;
  right: 8px;
  transform: scaleX(0.82);
  transition: opacity 140ms ease, transform 140ms ease;
}

.entity-tab-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.entity-tab:not(.entity-tab-active):hover::after,
.entity-tab:not(.entity-tab-active):focus-visible::after {
  opacity: 0.42;
  transform: scaleX(1);
}

.skin-dark .entity-tab {
  color: var(--muted-dark);
}

.skin-dark .entity-tab-active {
  color: var(--primary-accent);
}

.skin-dark .entity-tab:hover,
.skin-dark .entity-tab:focus-visible {
  background: transparent;
  color: var(--primary-accent);
}

.skin-light .entity-tab {
  color: var(--muted-light);
}

.skin-light .entity-tab-active {
  color: var(--primary-accent);
}

.skin-light .entity-tab:hover,
.skin-light .entity-tab:focus-visible {
  background: transparent;
  color: var(--primary-accent);
}

.entity-stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
}

.entity-stat-card {
  border: 1px solid;
  display: grid;
  gap: 12px;
  min-height: 78px;
  padding: 16px;
}

.entity-stat-card span,
.entity-panel-heading span,
.entity-empty,
.entity-list li > span,
.entity-detail-list dt {
  font-size: 12px;
}

.entity-stat-card strong {
  font-size: 18px;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .entity-stat-card {
  background: transparent;
  border-color: var(--border-dark);
}

.skin-light .entity-stat-card {
  background: transparent;
  border-color: var(--border-light);
}

.skin-dark .entity-stat-card span,
.skin-dark .entity-panel-heading span,
.skin-dark .entity-empty,
.skin-dark .entity-list li > span,
.skin-dark .entity-detail-list dt {
  color: var(--muted-dark);
}

.skin-light .entity-stat-card span,
.skin-light .entity-panel-heading span,
.skin-light .entity-empty,
.skin-light .entity-list li > span,
.skin-light .entity-detail-list dt {
  color: var(--muted-light);
}

.entity-dashboard-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
}

.entity-projects-panel {
  margin-bottom: 16px;
  overflow-x: auto;
}

.entity-company-details-panel {
  margin-bottom: 16px;
}

.entity-panel {
  padding: 0;
}

.entity-panel-heading {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.entity-panel-heading h2 {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
}

.entity-panel-title-with-permission {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.permission-light {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.permission-light-editable,
.flip-editor-editable .permission-light {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.permission-light-locked,
.flip-editor-locked .permission-light {
  background: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.18);
}

.permission-light-denied,
.flip-editor-denied .permission-light {
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

.entity-flip-grid {
  padding: 16px;
}

.entity-panel-detail-list .entity-flip-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  padding: 0;
}

.modal-editor {
  width: 100%;
}

.modal-editor-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  position: relative;
  text-align: left;
  width: 100%;
}

.modal-editor-trigger:disabled {
  cursor: default;
}

.entity-modal-editor-grid {
  gap: 14px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.modal-editor-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modal-editor-item-wide {
  grid-column: 1 / -1;
}

.modal-editor-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.modal-editor-value {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-editor-subvalue {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-section-modal-field {
  gap: 4px;
  min-height: 58px;
  padding: 12px;
}

.edit-section-modal-sheet {
  align-content: center;
  min-height: 60px;
  padding: 14px 11px;
}

.edit-section-modal-sheet .modal-editor-label {
  display: none;
}

.edit-section-modal-sheet .modal-editor-value {
  font-size: 13px;
  font-weight: 600;
}

.contact-methods-cell .modal-editor {
  min-height: 0;
}

.contact-methods-cell .edit-section-modal-sheet {
  min-height: 0;
  padding: 0;
}

.contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  font-size: 12px;
  font-weight: 500;
}

.timesheet-entry-meta .edit-section-modal-sheet {
  min-height: 52px;
}

.skin-dark .modal-editor-subvalue,
.skin-dark .contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  color: var(--muted-dark);
}

.skin-light .modal-editor-subvalue,
.skin-light .contact-methods-cell .modal-editor:nth-child(2) .modal-editor-value {
  color: var(--muted-light);
}

.modal-editor-trigger:not(:disabled):hover,
.modal-editor-trigger:not(:disabled):focus-visible {
  outline: none;
}

.skin-dark .modal-editor-label {
  color: var(--muted-dark);
}

.skin-dark .modal-editor-value {
  color: var(--text-dark);
}

.skin-dark .modal-editor-trigger:not(:disabled):hover,
.skin-dark .modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .modal-editor-label {
  color: var(--muted-light);
}

.skin-light .modal-editor-value {
  color: var(--text-light);
}

.skin-light .modal-editor-trigger:not(:disabled):hover,
.skin-light .modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible),
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible),
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .entity-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .project-side-panel:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger {
  background: transparent;
}

.entity-panel-detail-list .flip-editor {
  border-bottom: 1px solid;
  min-height: 58px;
}

.entity-panel-detail-list .flip-editor:last-child {
  border-bottom: 0;
}

.entity-panel-detail-list .flip-editor .flip-editor-face,
.entity-panel-detail-list .flip-editor-show .flip-editor-face {
  min-height: 58px;
}

.entity-panel-detail-list .flip-editor .flip-editor-front,
.entity-panel-detail-list .flip-editor-show .flip-editor-front {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 4px;
  justify-content: stretch;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}

.entity-panel-detail-list .flip-editor .flip-editor-front:hover,
.entity-panel-detail-list .flip-editor .flip-editor-front:focus-visible,
.entity-panel-detail-list .flip-editor-show .flip-editor-front:hover,
.entity-panel-detail-list .flip-editor-show .flip-editor-front:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

.entity-panel-detail-list .flip-editor .flip-editor-label,
.entity-panel-detail-list .flip-editor-show .flip-editor-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  padding: 0;
  text-transform: none;
}

.entity-panel-detail-list .flip-editor .flip-editor-value,
.entity-panel-detail-list .flip-editor-show .flip-editor-value {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-panel-detail-list .flip-editor .permission-light,
.entity-panel-detail-list .flip-editor-show .permission-light {
  margin-top: 3px;
}

.entity-panel-detail-list .flip-editor .flip-editor-back,
.entity-panel-detail-list .flip-editor-show .flip-editor-back {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 76px;
  padding: 12px 16px;
}

.entity-panel-detail-list .flip-editor.is-editing,
.entity-panel-detail-list .flip-editor-show.is-editing {
  min-height: 76px;
}

.skin-dark .entity-panel-detail-list .flip-editor {
  border-color: var(--border-dark);
}

.skin-light .entity-panel-detail-list .flip-editor {
  border-color: var(--border-light);
}

.skin-dark .entity-panel-detail-list .flip-editor .flip-editor-label,
.skin-dark .entity-panel-detail-list .flip-editor-show .flip-editor-label {
  color: var(--muted-dark);
}

.skin-light .entity-panel-detail-list .flip-editor .flip-editor-label,
.skin-light .entity-panel-detail-list .flip-editor-show .flip-editor-label {
  color: var(--muted-light);
}

.entity-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-list li {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
}

.entity-list li.entity-list-with-avatar {
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.entity-list li:last-child {
  border-bottom: 0;
}

.entity-list-avatar {
  height: 40px;
  width: 40px;
}

.entity-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.entity-list-primary {
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.entity-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.entity-detail-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-detail-list > div {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  padding: 12px 16px;
}

.entity-detail-list > div:last-child {
  border-bottom: 0;
}

.entity-detail-list-grid > div:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.entity-detail-list dd {
  font-size: 13px;
  font-weight: 650;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-empty {
  margin: 0;
  padding: 16px;
}

.skin-dark .entity-panel-heading,
.skin-dark .entity-list li,
.skin-dark .entity-detail-list > div {
  border-color: var(--border-dark);
}

.skin-light .entity-panel-heading,
.skin-light .entity-list li,
.skin-light .entity-detail-list > div {
  border-color: var(--border-light);
}

.expense-record {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.expense-record-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.expense-record-heading h3 {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.25;
}

.expense-record-heading form {
  margin: 0;
}

.expense-record-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.skin-dark .expense-record-kicker {
  color: var(--muted-dark);
}

.skin-light .expense-record-kicker {
  color: var(--muted-light);
}

.flip-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.contact-flip-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-flip-editor-grid {
  grid-template-columns: 1fr;
}

.add-record-panel {
  margin-bottom: 12px;
  overflow: hidden;
}

.add-record-summary {
  display: inline-flex;
  list-style: none;
  width: auto;
}

.add-record-summary::-webkit-details-marker {
  display: none;
}

.add-record-popover {
  position: relative;
}

.add-record-popover[open] {
  z-index: 10;
}

.add-record-popover-body {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(760px, calc(100vw - 360px));
}

.skin-dark .add-record-popover-body {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .add-record-popover-body {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

dialog {
  border: none;
  padding: 0;
}

.add-record-dialog {
  border: 1px solid;
  border-radius: 8px;
  margin: auto;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  width: min(760px, calc(100vw - 32px));
}

.add-record-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.skin-dark .add-record-dialog {
  background: #111111;
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .add-record-dialog {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
  color: var(--text-light);
}

.modal-editor-dialog {
  width: min(760px, calc(100vw - 32px));
}

.skin-dark .modal-editor-dialog {
  border-color: #b8bec8;
  border-width: 10px;
  width: min(780px, calc(100vw - 32px));
}

.dialog-header {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.skin-dark .dialog-header {
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.skin-light .dialog-header {
  border-color: var(--border-light);
  color: var(--text-light);
}

.dialog-title {
  font-weight: 600;
}

.dialog-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}

.dialog-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.dialog-validation-errors {
  align-items: start;
  display: grid;
  gap: 4px;
  margin-bottom: 0;
}

.dialog-validation-errors ul {
  margin: 0;
  padding-left: 20px;
}

.dialog-validation-errors p {
  font-size: 12px;
}

.dialog-body .field_with_errors input,
.dialog-body .field_with_errors select,
.dialog-body .field_with_errors textarea {
  border-color: #dc2626;
}

.task-dialog-form {
  display: grid;
  gap: 12px;
}

.task-dialog-form .directory-form-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.35fr);
}

.dialog-footer {
  align-items: center;
  display: flex;
  margin-top: 4px;
}

.dialog-footer-end {
  justify-content: flex-end;
}

.project-create-quick-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
}

.project-create-quick-row .compact-submit {
  max-width: none;
  white-space: nowrap;
}

.checkout-number-link {
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.checkout-number-link:hover,
.checkout-number-link:focus-visible {
  text-decoration: none;
}

.skin-dark .checkout-number-link {
  color: var(--muted-dark);
}

.skin-light .checkout-number-link {
  color: var(--muted-light);
}

@media (max-width: 640px) {
  .modal-editor-dialog {
    border-radius: 0;
    height: 100dvh;
    max-height: none;
    max-width: none;
    width: 100vw;
  }
}

.add-record-body {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.directory-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.directory-form-grid > .field-wide {
  grid-column: 1 / -1;
}

.week-jump-popover {
  position: relative;
  display: inline-block;
}

.week-jump-popover[open] {
  z-index: 10;
}

.week-jump-body {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 200px;
}

.skin-dark .week-jump-body {
  background: #111111;
  border-color: var(--border-dark);
}

.skin-light .week-jump-body {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.week-jump-form {
  display: grid;
  gap: 8px;
}

.week-jump-form .field {
  display: grid;
  gap: 4px;
}

.week-jump-form label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jump-year-select,
.jump-week-select {
  font-size: 13px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid;
}

.skin-dark .jump-year-select,
.skin-dark .jump-week-select {
  background: #222222;
  border-color: var(--border-dark);
  color: #ffffff;
}

.skin-light .jump-year-select,
.skin-light .jump-week-select {
  background: #ffffff;
  border-color: var(--border-light);
  color: #000000;
}

.directory-checks {
  align-content: start;
  display: grid;
  gap: 8px;
}

.compact-submit {
  max-width: 220px;
}

.directory-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.directory-row {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(190px, 0.65fr) minmax(0, 2fr) auto;
  gap: 14px;
  padding: 14px;
}

.directory-object {
  min-width: 0;
}

.directory-object h3 {
  font-size: 15px;
  line-height: 1.25;
  margin-top: 4px;
}

.directory-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.directory-actions {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.directory-actions form {
  margin: 0;
}

.record-sheet {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
}

.record-sheet-header,
.record-sheet-row {
  display: grid;
  grid-template-columns: var(--sheet-columns);
  min-width: var(--sheet-min-width, 980px);
}

.record-sheet-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.record-sheet-header > div,
.record-sheet-cell {
  min-width: 0;
  overflow: hidden;
  padding: 10px 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-sheet-row {
  border: 1px solid;
  border-bottom: 0;
  align-items: stretch;
}

.record-sheet-row:last-child {
  border-bottom: 1px solid;
}

.record-sheet-cell {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  min-height: 60px;
}

.record-sheet-primary {
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-cell {
  align-items: center;
}

.record-project-link {
  color: inherit;
  display: grid;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
}

.record-project-link:hover,
.record-project-link:focus-visible {
  text-decoration: none;
}

.record-project-detail-link {
  align-items: center;
  grid-template-columns: 36px minmax(0, 1fr);
}

.record-project-icon {
  display: inline-block;
  height: 32px;
  width: 32px;
}

.record-project-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H10l2 2.5h6.5A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H10l2 2.5h6.5A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 100%;
}

.record-project-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.record-project-number-line {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}

.record-project-number {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
}

.record-project-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .record-project-icon {
  color: var(--muted-dark);
}

.skin-dark .record-project-title {
  color: var(--muted-dark);
}

.skin-light .record-project-icon {
  color: var(--muted-light);
}

.skin-light .record-project-title {
  color: var(--muted-light);
}

.record-project-company {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-company-link {
  max-width: 100%;
}

.record-project-company-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-project-manager {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-dark .record-project-manager {
  color: var(--muted-dark);
}

.skin-light .record-project-manager {
  color: var(--muted-light);
}

.project-progress-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.progress-meter {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  height: 18px;
  overflow: hidden;
  padding: 0 6px;
  position: relative;
  width: 100%;
}

.progress-meter-fill {
  bottom: 0;
  border-radius: inherit;
  left: 0;
  min-width: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}

.progress-meter-value,
.progress-meter-label {
  line-height: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.progress-meter-value {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
}

.progress-meter-label {
  flex: 1 1 auto;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.progress-meter-warning .progress-meter-fill {
  background: var(--secondary-accent);
}

.progress-meter-info .progress-meter-fill {
  background: var(--secondary-accent);
}

/* Over-budget: bar is full width with red fill and the % label turns red */
.progress-meter-over .progress-meter-fill {
  background: var(--danger, #ef4444);
  width: 100% !important;
}

.progress-meter-over {
  border-color: var(--danger, #ef4444);
}

.progress-meter-over .progress-meter-value {
  color: var(--danger, #ef4444);
  font-weight: 900;
}

.skin-dark .progress-meter {
  background: #141414;
  border-color: var(--border-dark);
  color: #eef4ff;
}

.skin-light .progress-meter {
  background: #f8fbff;
  border-color: var(--border-light);
  color: #0d1726;
}

.record-sheet-muted {
  font-weight: 500;
}

.record-sheet-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  min-height: 60px;
  padding: 10px 12px 10px 8px;
}

.record-sheet-actions form {
  margin: 0;
}

.record-row-actions-stack {
  align-content: center;
  align-items: center;
  display: grid;
  gap: 4px;
  justify-content: center;
  padding: 6px 8px;
}

.record-row-actions-stack .record-row-delete-form {
  display: block;
  margin: 0;
}

.record-row-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  line-height: 1;
  min-width: 26px;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  width: 26px;
}

.skin-dark .record-row-icon-button {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .record-row-icon-button {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.skin-dark .record-row-icon-button-edit:hover,
.skin-dark .record-row-icon-button-edit:focus-visible {
  background: rgba(82, 82, 91, 0.4);
  border-color: #52525b;
  color: var(--text-dark);
}

.skin-light .record-row-icon-button-edit:hover,
.skin-light .record-row-icon-button-edit:focus-visible {
  background: #edf3fc;
  border-color: var(--primary-light);
  color: var(--primary-light);
}

.record-row-icon-button-delete {
  color: var(--danger);
}

.skin-dark .record-row-icon-button-delete,
.skin-light .record-row-icon-button-delete {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--danger);
}

.record-row-icon-button-delete:hover,
.record-row-icon-button-delete:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger);
}

.record-row-icon-pencil {
  background: currentColor;
  display: block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

.record-row-icon-x {
  font-size: 13px;
  font-weight: 800;
}

.record-row-icon-impersonate {
  background: currentColor;
  display: block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

.record-row-icon-restore {
  background: currentColor;
  display: block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

.skin-dark .record-row-icon-button-impersonate:hover,
.skin-dark .record-row-icon-button-impersonate:focus-visible {
  background: rgba(82, 82, 91, 0.4);
  border-color: #52525b;
  color: var(--text-dark);
}

.skin-light .record-row-icon-button-impersonate:hover,
.skin-light .record-row-icon-button-impersonate:focus-visible {
  background: #edf3fc;
  border-color: var(--primary-light);
  color: var(--primary-light);
}

.record-row-icon-button-restore {
  color: #16a34a;
}

.skin-dark .record-row-icon-button-restore,
.skin-light .record-row-icon-button-restore {
  border-color: rgba(22, 163, 74, 0.4);
  color: #16a34a;
}

.record-row-icon-button-restore:hover,
.record-row-icon-button-restore:focus-visible {
  background: rgba(22, 163, 74, 0.1);
  border-color: #16a34a;
}

.record-sheet-avatar-cell {
  align-items: center;
  display: flex;
  min-height: 60px;
  padding: 10px 8px 10px 10px;
}

.record-avatar {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.avatar-image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.record-avatar-number {
  font-size: 12px;
  padding: 0 8px;
  width: auto;
}

.record-timesheet-user-avatar {
  font-size: 20px;
  height: 32px;
  width: 32px;
}

.state-tag {
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.state-tag-pending {
  background: rgb(230, 230, 9);
  border-color: rgb(208, 208, 20);
  color: #757575;
}

.state-tag-in-review {
  background: #ff0a00;
  border-color: #e60b00;
  color: #ffffff;
}

.state-tag-active,
.state-tag-approved {
  background: #3c8039;
  border-color: #306a2e;
  color: #ffffff;
}

.state-tag-completed {
  background: #1797be;
  border-color: #1280a1;
  color: #ffffff;
}

.state-tag-locked {
  background: #707070;
  border-color: #5a5a5a;
  color: #ffffff;
}

.project-state-tabs {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
}

.user-department-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.project-state-tab {
  align-items: center;
  border: 1px solid transparent;
  color: inherit;
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  gap: 5px;
  line-height: 1.2;
  min-height: 44px;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 120ms ease;
}

.project-state-tab:hover,
.project-state-tab:focus-visible {
  text-decoration: none;
}

.project-state-tab::after {
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  opacity: 0;
  position: absolute;
  right: 8px;
  transform: scaleX(0.82);
  transition: opacity 140ms ease, transform 140ms ease;
}

.project-state-tab:not(.project-state-tab-selected):hover::after,
.project-state-tab:not(.project-state-tab-selected):focus-visible::after {
  opacity: 0.42;
  transform: scaleX(1);
}

.project-state-tab-count {
  font-weight: 800;
}

.project-state-tab-state-pending {
  color: rgb(230, 230, 9);
}

.project-state-tab-state-in-review {
  color: #ff3b34;
}

.project-state-tab-state-active {
  color: #4caf50;
}

.project-state-tab-state-completed {
  color: #1eb2df;
}

.project-state-tab-state-pending::after {
  background: rgb(230, 230, 9);
}

.project-state-tab-state-in-review::after {
  background: #ff3b34;
}

.project-state-tab-state-active::after {
  background: #4caf50;
}

.project-state-tab-state-completed::after {
  background: #1eb2df;
}

.project-state-tab-selected {
  color: var(--primary-accent);
}

.project-state-tab-selected::after {
  background: var(--primary-accent);
  opacity: 1;
  transform: scaleX(1);
}

.skin-dark .project-state-tab:hover,
.skin-dark .project-state-tab:focus-visible {
  background: transparent;
}

.skin-light .project-state-tab:hover,
.skin-light .project-state-tab:focus-visible {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .entity-tab::after,
  .project-state-tab::after {
    transition: none;
  }
}

.skin-dark .record-sheet-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .record-sheet-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.skin-dark .record-sheet-row {
  border-color: var(--border-dark);
}

.skin-light .record-sheet-row {
  border-color: var(--border-light);
}

.skin-dark .record-avatar {
  background: #262626;
  color: var(--primary-dark);
}

.skin-light .record-avatar {
  background: var(--light-warm-avatar);
  border: 1px solid var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.skin-light .record-avatar:has(.avatar-image) {
  border-color: transparent;
}

.record-sheet-companies {
  --sheet-columns: 64px minmax(320px, 1.6fr) minmax(220px, 1fr) minmax(190px, 0.85fr);
  --sheet-min-width: 900px;
}

.record-sheet-users {
  --sheet-columns: 64px minmax(300px, 1.6fr) minmax(170px, 0.75fr) minmax(220px, 1fr) minmax(88px, auto);
  --sheet-min-width: 850px;
}

.record-sheet-user-identity-heading {
  grid-column: 1 / 3;
}

.record-sheet-actions-heading {
  min-width: 0;
}

.record-sheet-user-identity {
  padding-left: 11px;
}

.record-user-detail-link {
  min-width: 0;
}

.record-sheet-users .record-sheet-actions {
  justify-content: flex-end;
  padding-right: 11px;
}

.record-sheet-projects {
  --sheet-columns: minmax(320px, 1.7fr) minmax(240px, 1.2fr) minmax(210px, 1fr);
  --sheet-min-width: 780px;
}

.projects-list-panel,
.object-list-panel {
  background: transparent;
  border: 0;
  padding: 0;
}

.skin-dark .projects-list-panel,
.skin-light .projects-list-panel,
.skin-dark .object-list-panel,
.skin-light .object-list-panel {
  background: transparent;
  border-color: transparent;
}

.projects-list-panel .record-sheet-projects,
.object-list-panel .object-record-sheet {
  gap: 12px;
  margin-top: -5px;
}

.object-list-panel .report-record-sheet-wide {
  margin-top: 25px;
}

.projects-list-panel .record-sheet-projects .record-sheet-header,
.object-list-panel .object-record-sheet .record-sheet-header {
  background: transparent;
  border: 0;
  margin-bottom: 2px;
}

.projects-list-panel .record-sheet-projects .record-sheet-row,
.object-list-panel .object-record-sheet .record-sheet-row {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.projects-list-panel .record-sheet-projects .record-sheet-row:last-child,
.object-list-panel .object-record-sheet .record-sheet-row:last-child {
  border-bottom: 1px solid;
}

.skin-dark .projects-list-panel .record-sheet-projects .record-sheet-row,
.skin-dark .object-list-panel .object-record-sheet .record-sheet-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .projects-list-panel .record-sheet-projects .record-sheet-row,
.skin-light .object-list-panel .object-record-sheet .record-sheet-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.record-object-detail-link {
  align-items: center;
  display: grid;
  gap: 3px;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 0;
  text-decoration: none;
}

.record-object-icon-cell {
  align-items: center;
  display: flex;
  justify-content: center;
}

.record-object-icon {
  color: currentColor;
  display: inline-block;
  height: 32px;
  width: 32px;
}

.record-object-icon::before {
  background: currentColor;
  content: "";
  display: block;
  height: 100%;
  -webkit-mask: var(--record-object-icon) center / contain no-repeat;
  mask: var(--record-object-icon) center / contain no-repeat;
  width: 100%;
}

.skin-dark .record-object-icon {
  color: var(--muted-dark);
}

.skin-light .record-object-icon {
  color: var(--muted-light);
}

.record-object-icon-company,
.record-object-icon-contact,
.record-object-icon-user {
  border: 1px solid;
  border-radius: 6px;
  height: 45px;
  padding: 6px;
  width: 45px;
}

.skin-dark .record-object-icon-company,
.skin-dark .record-object-icon-contact,
.skin-dark .record-object-icon-user {
  background: #262626;
  border-color: var(--border-dark);
}

.skin-light .record-object-icon-company,
.skin-light .record-object-icon-contact,
.skin-light .record-object-icon-user {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
}

.record-object-icon-invoice {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v3.05c2.85.36 5 1.98 5 4.2h-4c0-.58-.8-1.25-2.3-1.25-1.36 0-2.2.48-2.2 1.2 0 .78 1.12 1.08 3.12 1.54C15.82 11.48 19 12.5 19 16.1c0 2.42-2.25 4.08-6 4.43V23h-2v-2.48c-3.55-.42-6-2.4-6-5.02h4c0 .88 1.04 1.6 2.78 1.6 1.9 0 2.72-.58 2.72-1.42 0-.86-1.08-1.18-3.28-1.7C8.16 13.26 5 12.27 5 9.27c0-2.34 2.27-3.9 6-4.23V2h2Z' fill='black'/%3E%3C/svg%3E");
}

.record-object-icon-timesheet {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

.record-object-icon-contact {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}

.record-object-icon-announcement {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M4 15V9l11-4v14L4 15Z'/%3E%3Cpath d='M15 9.5h2.5a2.5 2.5 0 0 1 0 5H15M7 15l2 5h3l-2-4'/%3E%3C/svg%3E");
}

.directory-panel-intro {
  display: grid;
  gap: 4px;
}

.directory-panel-intro h2,
.empty-state-panel h2 {
  font-size: 18px;
  margin: 0;
}

.directory-panel-intro p,
.empty-state-panel p {
  margin: 0;
}

.skin-dark .directory-panel-intro p,
.skin-dark .empty-state-panel p {
  color: var(--muted-dark);
}

.skin-light .directory-panel-intro p,
.skin-light .empty-state-panel p {
  color: var(--muted-light);
}

.empty-state-panel {
  border: 1px dashed;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 20px;
}

.skin-dark .empty-state-panel {
  border-color: var(--border-dark);
}

.skin-light .empty-state-panel {
  border-color: var(--border-light);
}

.announcement-message-cell {
  min-width: 0;
}

.xero-settings-panel {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.xero-settings-panel > p {
  margin: 0;
}

.xero-status-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xero-status {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  margin: 0;
}

.xero-status dt {
  font-weight: 750;
}

.xero-status dd {
  margin: 0;
  min-width: 0;
}

.record-object-icon-user {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.record-object-icon-company {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M16 9h3a1 1 0 0 1 1 1v11M8 7h2M12 7h1M8 11h2M12 11h1M8 15h2M12 15h1M4 21h17'/%3E%3C/svg%3E");
}

.record-object-icon-report {
  --record-object-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4v-2Zm2-8h3v6H6v-6Zm5-6h3v12h-3V6Zm5 3h3v9h-3V9Z' fill='black'/%3E%3C/svg%3E");
}

.record-sheet-standard-rates {
  --sheet-columns: minmax(92px, 0.65fr) minmax(260px, 1.6fr) minmax(130px, 0.8fr) minmax(110px, 0.65fr) minmax(140px, 0.85fr) minmax(100px, auto);
  --sheet-min-width: 920px;
}

.record-sheet-expense-schedules {
  --sheet-columns: minmax(92px, 0.65fr) minmax(260px, 1.5fr) minmax(120px, 0.7fr) minmax(110px, 0.65fr) minmax(140px, 0.85fr) minmax(220px, 1.2fr) 48px;
  --sheet-min-width: 1028px;
}

.record-sheet-subtasks {
  --sheet-columns: minmax(92px, 0.65fr) minmax(320px, 1.8fr) minmax(160px, 0.9fr) minmax(100px, auto);
  --sheet-min-width: 760px;
}

.record-sheet-timesheets {
  --sheet-columns: minmax(280px, 1.45fr) minmax(250px, 1.15fr) minmax(180px, 0.85fr) minmax(130px, 0.6fr);
  --sheet-min-width: 840px;
}

.record-sheet-project-rates {
  --sheet-columns: minmax(90px, 0.6fr) minmax(220px, 1.6fr) minmax(150px, 0.9fr) minmax(140px, 0.9fr) minmax(110px, 0.6fr);
  --sheet-min-width: 760px;
}

.project-rates-body.is-hidden {
  display: none;
}

.project-rates-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.rate-custom-tag {
  margin-left: 8px;
}

.record-sheet-project-contacts {
  --sheet-columns: 61px minmax(160px, max-content) minmax(130px, 1fr) minmax(170px, 1.25fr) 64px;
  --sheet-min-width: 538px;
}

.record-sheet-project-client {
  --sheet-columns: 61px minmax(150px, 1.3fr) minmax(130px, 0.9fr) minmax(160px, 1.1fr);
  --sheet-min-width: 500px;
}

.project-contacts-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 0;
}

.project-panel-block .project-contacts-head h3 {
  margin: 0;
}

.project-contacts-block {
  gap: 0;
}

.project-actions-menu {
  position: relative;
}

.project-actions-menu[open] {
  z-index: 20;
}

.project-actions-menu-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  width: 24px;
}

.project-actions-menu-trigger::-webkit-details-marker {
  display: none;
}

.project-actions-menu-trigger > span {
  transform: translateY(-1px);
}

.project-actions-menu-panel {
  border: 1px solid;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  display: grid;
  min-width: 190px;
  overflow: hidden;
  padding: 5px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
}

.project-actions-menu-item {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.project-actions-menu-panel form {
  margin: 0;
}

.project-actions-menu-item-danger {
  color: #dc2626;
}

.project-budget-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.copy-project-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skin-dark .project-actions-menu-panel {
  background: #171717;
  border-color: var(--border-dark);
}

.skin-light .project-actions-menu-panel {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.skin-dark .project-actions-menu-item:hover,
.skin-dark .project-actions-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.skin-light .project-actions-menu-item:hover,
.skin-light .project-actions-menu-item:focus-visible {
  background: rgba(14, 122, 95, 0.08);
}

.project-contacts-sheet {
  gap: 10px;
  margin-top: 0;
}

.project-client-sheet {
  gap: 10px;
  margin-top: 0;
}

.project-client-sheet .record-sheet-header {
  background: transparent;
  border: 0;
  margin-bottom: 0;
}

.project-client-sheet .record-sheet-row {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.project-client-sheet .record-sheet-row:last-child {
  border-bottom: 1px solid;
}

.skin-dark .project-client-sheet .record-sheet-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .project-client-sheet .record-sheet-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.project-client-sheet > .modal-editor,
.project-client-sheet .record-sheet-row > .modal-editor {
  min-width: 0;
}

.project-client-sheet .edit-section-modal-sheet {
  height: 100%;
  min-height: 60px;
  padding: 10px 6px;
}

.project-client-sheet .edit-section-modal-sheet .modal-editor-label {
  display: none;
}

.project-client-sheet .record-sheet-avatar-cell {
  padding: 8px;
}

.project-show-page .project-client-sheet .edit-section-modal-sheet .modal-editor-value {
  font-weight: 600;
}

.project-client-notes {
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  white-space: normal;
}

.project-contacts-sheet .contacts-sheet-header {
  background: transparent;
  border: 0;
  margin-bottom: 0;
}

.project-contacts-sheet .contacts-sheet-header,
.project-contacts-sheet .contacts-sheet-row {
  grid-template-columns: var(--sheet-columns);
  min-width: var(--sheet-min-width);
}

.project-contacts-sheet .contacts-sheet-row {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.project-contacts-sheet .contacts-sheet-row:last-child {
  border-bottom: 1px solid;
}

.project-contacts-sheet .contacts-sheet-row + .contacts-sheet-row {
  margin-top: 8px;
}

.skin-dark .project-contacts-sheet .contacts-sheet-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .project-contacts-sheet .contacts-sheet-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.project-contact-identity {
  align-content: center;
  gap: 2px;
  padding: 10px 4px;
}

.project-contact-identity > .modal-editor {
  width: 100%;
}

.project-contact-identity .edit-section-modal-sheet {
  justify-items: start;
  min-height: 0;
  padding: 0;
}

.project-contact-identity .edit-section-modal-sheet .modal-editor-label {
  display: none;
}

.project-contact-identity .edit-section-modal-sheet .modal-editor-value {
  font-size: 12px;
  font-weight: 500;
}

.skin-dark .project-contact-identity .edit-section-modal-sheet .modal-editor-value {
  color: var(--muted-dark);
}

.skin-light .project-contact-identity .edit-section-modal-sheet .modal-editor-value {
  color: var(--muted-light);
}

.project-contact-company,
.project-contact-methods {
  align-content: center;
  display: grid;
  gap: 3px;
  min-height: 60px;
  min-width: 0;
  padding: 10px 6px;
}

.project-contact-company > *,
.project-contact-methods > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-contacts-sheet .record-sheet-actions {
  gap: 4px;
  justify-content: center;
  padding: 8px 4px;
  position: relative;
  z-index: 1;
}

.project-contacts-sheet .record-sheet-actions::before {
  bottom: 0;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 100%;
  top: 0;
  width: 32px;
}

.skin-dark .project-contacts-sheet .record-sheet-actions {
  background: var(--primary-dark-soft);
}

.skin-dark .project-contacts-sheet .record-sheet-actions::before {
  background: linear-gradient(to right, transparent, var(--primary-dark-soft));
}

.skin-light .project-contacts-sheet .record-sheet-actions {
  background: var(--bg-light-elevated);
}

.skin-light .project-contacts-sheet .record-sheet-actions::before {
  background: linear-gradient(to right, transparent, var(--bg-light-elevated));
}

.project-contacts-sheet .contacts-sheet-avatar-cell {
  padding: 8px;
}

.project-contact-chevron {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translateX(-1px);
  transition: transform 140ms ease;
}

.project-contact-disclosure-button[aria-expanded="true"] .project-contact-chevron {
  transform: rotate(-90deg);
}

.project-contact-expanded {
  border-top: 1px solid;
  display: grid;
  gap: 12px 18px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.project-contact-expanded[hidden] {
  display: none;
}

.project-contact-expanded-item {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-contact-expanded-item > span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-contact-expanded-item > strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.skin-dark .project-contact-expanded {
  border-color: var(--border-dark);
}

.skin-light .project-contact-expanded {
  border-color: var(--border-light);
}

.project-charge-block {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.project-charge-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.project-charge-list {
  display: grid;
  gap: 6px;
}

.project-charge-item {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.project-charge-item form {
  margin: 0;
}

.project-charge-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-charge-amount {
  font-weight: 650;
}

.skin-dark .project-charge-block {
  border-color: var(--border-dark);
}

.skin-light .project-charge-block {
  border-color: var(--border-light);
}

.task-subtask-add .entity-tabs {
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 0;
}

.contacts-sheet {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
}

.contacts-sheet-header,
.contacts-sheet-row {
  display: grid;
  grid-template-columns: 64px minmax(280px, 1.6fr) minmax(210px, 1fr) minmax(300px, 1.35fr);
  min-width: 840px;
}

.contacts-sheet-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.contacts-sheet-header > div {
  min-width: 0;
  overflow: hidden;
  padding: 10px 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-sheet-name-heading {
  grid-column: 1 / 3;
}

.skin-dark .contacts-sheet-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .contacts-sheet-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.skin-light .project-contacts-sheet .contacts-sheet-header {
  background: var(--bg-light-elevated);
}

.contacts-sheet-row {
  border: 1px solid;
  border-bottom: 0;
  align-items: stretch;
}

.contacts-sheet-row:last-child {
  border-bottom: 1px solid;
}

.skin-dark .contacts-sheet-row {
  border-color: var(--border-dark);
}

.skin-light .contacts-sheet-row {
  border-color: var(--border-light);
}

.contacts-sheet .flip-editor-sheet,
.record-sheet .flip-editor-sheet {
  height: 100%;
  min-height: 60px;
}

.flip-editor-sheet .flip-editor-face {
  border: 0;
  border-radius: 0;
  min-height: 60px;
}

.skin-dark .flip-editor-sheet .flip-editor-face {
  border-color: var(--border-dark);
}

.skin-light .flip-editor-sheet .flip-editor-face {
  border-color: var(--border-light);
}

.flip-editor-sheet .flip-editor-front {
  align-items: center;
  background: transparent;
  box-shadow: none;
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 14px 11px;
}

.flip-editor-sheet .flip-editor-front:hover,
.flip-editor-sheet .flip-editor-front:focus-visible {
  transform: none;
}

.skin-dark .flip-editor-sheet .flip-editor-front:hover,
.skin-dark .flip-editor-sheet .flip-editor-front:focus-visible {
  background: #1a1a1a;
  box-shadow: inset 0 -2px 0 var(--primary-dark);
}

.skin-light .flip-editor-sheet .flip-editor-front:hover,
.skin-light .flip-editor-sheet .flip-editor-front:focus-visible {
  background: #edf3fc;
  box-shadow: inset 0 -2px 0 var(--primary-light);
}

.flip-editor-sheet .flip-editor-front .flip-editor-label {
  display: none;
}

.flip-editor-sheet .flip-editor-value {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  padding-right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flip-editor-value-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.flip-editor-subvalue {
  display: block;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flip-editor-sheet .flip-editor-back {
  border: 0;
  gap: 4px;
  min-height: 60px;
  padding: 10px 8px;
}

.flip-editor-sheet .flip-editor-back .flip-editor-label {
  font-size: 9px;
  padding-right: 30px;
}

.flip-editor-sheet .flip-editor-input {
  min-height: 28px;
  padding: 4px 6px;
}

.flip-editor-sheet .flip-editor-actions {
  right: 6px;
  top: 6px;
}

.flip-editor-sheet .flip-editor-icon {
  font-size: 11px;
  height: 20px;
  min-width: 20px;
}

.flip-editor-sheet .flip-editor-error {
  min-height: 0;
}

.contacts-sheet-actions {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  min-height: 60px;
  padding: 10px 8px;
}

.contact-name-cell {
  align-items: center;
  display: grid;
  min-height: 60px;
  min-width: 0;
  padding: 14px 11px;
}

.contact-name-cell-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-contact-detail-link {
  display: grid;
  gap: 3px;
}

.record-contact-detail-link .record-project-number-line::after {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  content: "\2197";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 14px;
  justify-content: center;
  line-height: 1;
  margin-left: 1px;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
  width: 14px;
}

.record-contact-detail-link:hover .record-project-number-line::after,
.record-contact-detail-link:focus-visible .record-project-number-line::after {
  opacity: 0.85;
  transform: translateX(0);
}

.company-contact-cell,
.company-details-cell,
.timesheet-hours-cell {
  align-content: center;
  align-items: start;
  display: grid;
  gap: 3px;
}

.contact-title-unknown {
  font-style: italic;
}

.contact-methods-cell {
  align-content: center;
  display: grid;
  gap: 3px;
  min-height: 60px;
  min-width: 0;
  padding: 14px 11px;
}

.contact-methods-cell .flip-editor-sheet {
  height: auto;
  min-height: 0;
}

.contact-methods-cell .flip-editor-front {
  height: auto;
  min-height: 0;
  padding: 0;
}

.contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  font-size: 12px;
  font-weight: 500;
}

.skin-dark .contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  color: var(--muted-dark);
}

.skin-light .contact-methods-cell .flip-editor-sheet:nth-child(2) .flip-editor-value {
  color: var(--muted-light);
}

.contact-methods-cell .flip-editor-back {
  min-height: 38px;
  padding: 4px 0;
}

.object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-face,
.object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front,
.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front {
  background: transparent;
}

.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:hover,
.skin-dark .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:focus-visible,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:hover,
.skin-light .object-list-panel .object-record-sheet .flip-editor-sheet .flip-editor-front:focus-visible {
  background: transparent;
  box-shadow: none;
}

.contacts-sheet-avatar-cell {
  align-items: center;
  display: flex;
  min-height: 60px;
  padding: 10px 8px 10px 10px;
}

.contact-avatar {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.skin-dark .contact-avatar {
  background: #262626;
  color: var(--primary-dark);
}

.skin-light .contact-avatar {
  background: var(--light-warm-avatar);
  border: 1px solid var(--light-warm-border);
  color: var(--light-warm-avatar-text);
}

.skin-light .contact-avatar:has(.avatar-image) {
  border-color: transparent;
}

.entity-contact-avatar {
  font-size: 16px;
  height: 48px;
  width: 48px;
}

.entity-company-logo {
  height: 48px;
  width: 48px;
}

.company-contacts-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.company-contacts-list li {
  display: grid;
  gap: 2px;
}

.company-contact-link {
  text-decoration: none;
  font-weight: 600;
}

.skin-dark .company-contact-link {
  color: var(--text-dark);
}

.skin-light .company-contact-link {
  color: var(--text-light);
}

.company-contact-meta {
  font-size: 12px;
}

.skin-dark .company-contact-meta {
  color: var(--muted-dark);
}

.skin-light .company-contact-meta {
  color: var(--muted-light);
}

.timesheet-state-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.timesheet-state-field {
  margin: 0;
  min-width: 220px;
}

.timesheet-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.timesheet-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.timesheet-day-form {
  border: 1px solid;
  padding: 10px;
}

.skin-dark .timesheet-day-form {
  border-color: var(--border-dark);
}

.skin-light .timesheet-day-form {
  border-color: var(--border-light);
}

.alert {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 12px;
  line-height: 20px;
  margin-bottom: 16px;
  padding: 8px 12px;
}

.impersonation-alert {
  justify-content: space-between;
}

.impersonation-alert form {
  margin: 0;
}

.skin-dark .alert,
.skin-dark .alert-warning {
  background: rgba(69, 45, 9, 0.3);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fde68a;
}

.skin-light .alert,
.skin-light .alert-warning {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.35);
  color: #78350f;
}

.skin-dark .alert-success {
  background: rgba(20, 83, 45, 0.28);
  border-color: rgba(74, 222, 128, 0.35);
  color: #bbf7d0;
}

.skin-light .alert-success {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.32);
  color: #14532d;
}

.skin-dark .alert-notice {
  background: rgba(39, 39, 42, 0.55);
  border-color: rgba(161, 161, 170, 0.3);
  color: var(--text-dark);
}

.skin-light .alert-notice {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.28);
  color: #334155;
}

.skin-dark .alert-danger,
.skin-dark .alert-alert {
  background: rgba(69, 10, 10, 0.28);
  border-color: rgba(248, 113, 113, 0.38);
  color: #fecaca;
}

.skin-light .alert-danger,
.skin-light .alert-alert {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.32);
  color: #7f1d1d;
}

.report-stats-grid {
  margin-top: 12px;
  margin-bottom: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.report-row-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.report-record-sheet .record-sheet-header,
.report-record-sheet .record-sheet-row {
  grid-template-columns: minmax(180px, 2fr) minmax(80px, 0.8fr) repeat(4, minmax(90px, 0.9fr));
}

.report-record-sheet-wide .record-sheet-header,
.report-record-sheet-wide .record-sheet-row {
  grid-template-columns: minmax(220px, 2.2fr) minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(190px, 1.4fr) minmax(110px, 0.8fr);
}

.project-list,
.project-form-shell form {
  display: grid;
  gap: 12px;
}

.project-form-shell label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.skin-dark .project-form-shell label {
  color: #d8c08f;
}

.skin-light .project-form-shell label {
  color: var(--dna-tan);
}

.project-row {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 18px;
  align-items: start;
}

.project-title-link {
  color: inherit;
  text-decoration: none;
}

.project-row-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project-row-facts dt {
  font-size: 11px;
  margin-bottom: 3px;
}

.project-row-facts dd {
  margin: 0;
  font-weight: 600;
}

.skin-dark .project-row-facts dt {
  color: var(--muted-dark);
}

.skin-light .project-row-facts dt {
  color: var(--muted-light);
}

.project-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project-submit {
  max-width: 260px;
}

.archive-intake-guide {
  display: grid;
  gap: 16px;
  max-width: 960px;
  padding: 18px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
}

.archive-intake-guide-heading {
  display: grid;
  gap: 4px;
}

.archive-intake-guide-heading h2,
.archive-intake-guide-heading p {
  margin: 0;
}

.archive-intake-guide-heading h2 {
  font-size: 18px;
  line-height: 1.2;
}

.archive-intake-guide-heading > p:not(.archive-intake-guide-eyebrow) {
  color: var(--muted-dark);
  font-size: 14px;
}

.archive-intake-guide-eyebrow,
.archive-reference-label {
  color: var(--dna-tan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.archive-intake-guide-eyebrow {
  margin-bottom: 2px !important;
}

.archive-intake-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.45;
}

.archive-intake-steps li::marker {
  color: var(--dna-green);
  font-weight: 700;
}

.archive-filename-example {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  border-left: 3px solid var(--dna-green);
  background: rgba(74, 111, 93, 0.08);
}

.archive-filename-example code {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 12px;
}

.archive-department-legend {
  display: grid;
  gap: 8px;
}

.archive-department-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.archive-department-legend li {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.archive-department-legend code {
  color: var(--dna-green);
  font-size: 12px;
  font-weight: 700;
}

.skin-dark .archive-intake-guide {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .archive-intake-guide {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.skin-light .archive-intake-guide-heading > p:not(.archive-intake-guide-eyebrow) {
  color: var(--muted-light);
}

@media (max-width: 760px) {
  .archive-intake-guide {
    padding: 16px;
  }

  .archive-intake-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .archive-filename-example {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.project-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-detail-lower {
  margin-top: 12px;
}

.project-detail-heading .content-heading-title {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-heading-separator {
  color: inherit;
  opacity: 0.55;
}

.project-show-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.8fr);
}

.project-show-main,
.project-show-sidebar {
  display: grid;
  gap: 14px;
}

.project-show-page .modal-editor-label,
.project-show-page .project-block-label,
.project-show-page .project-readonly-label,
.project-show-page .project-side-budget > span:first-child,
.project-show-page .progress-meter-label,
.project-show-page .field > label,
.project-show-page .task-subtask-form > label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-show-page .modal-editor-label {
  gap: 5px;
}

.editable-indicator-colors-disabled .permission-light {
  display: none;
}

.project-detail-panel,
.project-side-panel {
  display: grid;
  gap: 0;
  padding: 0;
}

.project-panel-heading,
.project-side-heading,
.project-budget-heading {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.project-panel-heading h2,
.project-side-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.project-panel-heading h3,
.project-panel-block h3 {
  font-size: 13px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.project-panel-block {
  border-bottom: 1px solid;
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.project-panel-block .entity-modal-editor-grid {
  padding: 0;
}

.project-show-page .modal-editor-label .permission-light {
  align-self: center;
  animation: project-permission-light-fade 2600ms ease-out 450ms both;
  flex: 0 0 auto;
  height: 7px;
  margin: 0;
  opacity: 0;
  position: static;
  transform: none;
  transition: opacity 180ms ease;
  width: 7px;
}

.design-guide-permission-demo {
  display: grid;
  gap: 10px;
}

.design-guide-permission-example {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.skin-dark .design-guide-permission-example {
  border-color: var(--border-dark);
}

.skin-light .design-guide-permission-example {
  border-color: var(--border-light);
}

.design-guide-permission-example .modal-editor-label {
  gap: 5px;
}

.design-guide-permission-example .permission-light {
  animation: project-permission-light-fade 2600ms ease-out 450ms both;
  display: block;
  flex: 0 0 auto;
  height: 7px;
  opacity: 0;
  position: static;
  transform: none;
  transition: opacity 180ms ease;
  width: 7px;
}

.design-guide-permission-example:hover .permission-light,
.design-guide-permission-example:focus-within .permission-light {
  animation: none;
  opacity: 1;
}

.design-guide-permission-example > span:last-child,
.design-guide-usage-note p {
  font-size: 12px;
  line-height: 1.5;
}

.skin-dark .design-guide-permission-example > span:last-child,
.skin-dark .design-guide-usage-note p {
  color: var(--muted-dark);
}

.skin-light .design-guide-permission-example > span:last-child,
.skin-light .design-guide-usage-note p {
  color: var(--muted-light);
}

.design-guide-usage-note {
  display: grid;
  gap: 5px;
}

.design-guide-usage-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
}

@keyframes project-permission-light-fade {
  0%,
  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.project-show-page .modal-editor:hover .modal-editor-label .permission-light,
.project-show-page .modal-editor:focus-within .modal-editor-label .permission-light {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-show-page .modal-editor-label .permission-light,
  .design-guide-permission-example .permission-light {
    animation: none;
    opacity: 1;
    transition: none;
  }
}

.project-show-page .project-panel-block .modal-editor-value,
.project-show-page .project-side-panel .modal-editor-value {
  font-weight: 500;
  min-height: 1.25em;
}

.project-show-page [data-modal-editor-focus-attribute="description"] .modal-editor-value,
.project-show-page [data-modal-editor-focus-attribute="notes"] .modal-editor-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.project-show-page .project-side-panel > .modal-editor .entity-modal-editor-grid {
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 16px;
}

.project-show-page .project-side-panel > .modal-editor .modal-editor-label,
.project-show-page .project-side-panel > .modal-editor .modal-editor-value {
  white-space: normal;
}

.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(255, 255, 255, 0.03);
}

.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover),
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) {
  background: rgba(14, 122, 95, 0.04);
}

.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-dark .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger,
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):hover) .modal-editor-trigger,
.skin-light .project-panel-block:has(> .modal-editor > .modal-editor-trigger:not(:disabled):focus-visible) .modal-editor-trigger {
  background: transparent;
}

.project-panel-block:last-child {
  border-bottom: 0;
}

.project-flip-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-address-block {
  gap: 10px;
}

.project-block-label,
.project-readonly-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-readonly-line {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-readonly-value,
.project-client-summary,
.project-empty-table {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.project-client-summary {
  display: grid;
  gap: 4px;
}

.project-contact-sheet {
  display: grid;
  overflow-x: auto;
}

.project-contact-header,
.project-contact-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) minmax(180px, 1fr) minmax(190px, 1.1fr) minmax(120px, 0.8fr);
  min-width: 820px;
}

.project-contact-header {
  border: 1px solid;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-contact-header > div,
.project-contact-row > div {
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-contact-row {
  border: 1px solid;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 600;
}

.project-contact-row:last-child {
  border-bottom: 1px solid;
}

.project-task-sheet {
  --sheet-columns: minmax(68px, 0.45fr) minmax(190px, 1.5fr) minmax(125px, 0.8fr) minmax(100px, 0.7fr) 66px;
  --sheet-min-width: 660px;
  margin: 0;
  padding: 14px 16px;
}

.project-task-sheet .record-sheet-header {
  background: transparent;
  border: 0;
}

.project-budget-task-row {
  border: 1px solid;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.skin-dark .project-budget-task-row,
.skin-dark .task-subtask-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-light .project-budget-task-row,
.skin-light .task-subtask-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.project-task-group,
.project-task-identity,
.project-task-financials,
.project-task-po {
  align-content: center;
  display: grid;
  gap: 3px;
  min-height: 60px;
  min-width: 0;
}

.project-task-group,
.project-task-identity,
.project-task-po {
  padding: 10px 8px;
}

.project-task-identity > * {
  min-width: 0;
}

.project-task-financials {
  padding: 0 8px;
}

.project-task-financial-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-task-financials .modal-editor,
.project-task-financials .edit-section-modal-sheet {
  min-height: 0;
}

.project-task-financials .edit-section-modal-sheet {
  align-content: center;
  padding: 0;
}

.project-task-financials .edit-section-modal-sheet .modal-editor-value {
  line-height: 1.2;
}

/* Super-admin design guide */
.design-guide-page {
  display: grid;
  gap: 18px;
}

.design-guide-access-label,
.design-guide-eyebrow,
.design-guide-type-label,
.app-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.design-guide-access-label {
  border: 1px solid;
  border-radius: 999px;
  line-height: 1;
  padding: 5px 8px;
}

.skin-dark .design-guide-access-label {
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .design-guide-access-label {
  border-color: var(--border-light);
  color: var(--muted-light);
}

.design-guide-intro {
  align-items: end;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 24px;
}

.design-guide-intro > div {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.design-guide-intro h1 {
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.design-guide-intro p,
.design-guide-section-heading > p,
.design-guide-specimen-heading p,
.design-guide-component-heading p {
  line-height: 1.55;
}

.skin-dark .design-guide-intro p,
.skin-dark .design-guide-section-heading > p,
.skin-dark .design-guide-specimen-heading p,
.skin-dark .design-guide-component-heading p {
  color: var(--muted-dark);
}

.skin-light .design-guide-intro p,
.skin-light .design-guide-section-heading > p,
.skin-light .design-guide-specimen-heading p,
.skin-light .design-guide-component-heading p {
  color: var(--muted-light);
}

.design-guide-section-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.design-guide-section-nav a {
  border: 1px solid;
  border-radius: 999px;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 8px 11px;
  text-decoration: none;
}

.skin-dark .design-guide-section-nav a {
  border-color: var(--border-dark);
}

.skin-light .design-guide-section-nav a {
  border-color: var(--border-light);
}

.design-guide-section-nav a:hover,
.design-guide-section-nav a:focus-visible {
  border-color: var(--primary-accent);
  color: var(--primary-accent);
  outline: none;
}

.design-guide-section {
  display: grid;
  gap: 22px;
  padding: 24px;
  scroll-margin-top: 18px;
}

.design-guide-section-heading {
  align-items: end;
  border-bottom: 1px solid;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.55fr);
  padding-bottom: 18px;
}

.skin-dark .design-guide-section-heading {
  border-color: var(--border-dark);
}

.skin-light .design-guide-section-heading {
  border-color: var(--border-light);
}

.design-guide-section-heading > div {
  display: grid;
  gap: 7px;
}

.design-guide-section-heading h2 {
  font-size: clamp(21px, 2.4vw, 30px);
  letter-spacing: -0.025em;
}

.design-guide-eyebrow {
  color: var(--primary-accent);
}

.design-guide-specimen,
.design-guide-component-card {
  border: 1px solid;
  border-radius: 10px;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

.skin-dark .design-guide-specimen,
.skin-dark .design-guide-component-card {
  background: var(--bg-dark-elevated);
  border-color: var(--border-dark);
}

.skin-light .design-guide-specimen,
.skin-light .design-guide-component-card {
  background: var(--bg-light);
  border-color: var(--border-light);
}

.design-guide-specimen-heading,
.design-guide-component-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.design-guide-specimen-heading > div,
.design-guide-component-heading > div {
  display: grid;
  gap: 4px;
}

.design-guide-specimen-heading h3,
.design-guide-component-heading h3 {
  font-size: 15px;
}

.design-guide-specimen-heading code,
.design-guide-component-heading code,
.design-guide-type-row code,
.design-guide-font-stack code {
  border: 1px solid;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
  padding: 4px 6px;
}

.skin-dark .design-guide-specimen-heading code,
.skin-dark .design-guide-component-heading code,
.skin-dark .design-guide-type-row code,
.skin-dark .design-guide-font-stack code {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .design-guide-specimen-heading code,
.skin-light .design-guide-component-heading code,
.skin-light .design-guide-type-row code,
.skin-light .design-guide-font-stack code {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
  color: var(--muted-light);
}

.design-guide-record-sheet {
  margin: 0;
  overflow-x: auto;
  padding: 0;
}

.design-guide-component-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-guide-demo-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 42px;
}

.design-guide-control-demo {
  display: grid;
  gap: 6px;
  max-width: 280px;
}

.design-guide-state-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-guide-state-demo {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 52px;
  padding: 10px;
}

.skin-dark .design-guide-state-demo,
.skin-dark .design-guide-disclosure-demo {
  border-color: var(--border-dark);
}

.skin-light .design-guide-state-demo,
.skin-light .design-guide-disclosure-demo {
  border-color: var(--border-light);
}

.design-guide-state-demo > span {
  font-size: 12px;
  font-weight: 650;
}

.design-guide-disclosure-demo {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.design-guide-disclosure-summary {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px;
}

.design-guide-disclosure-summary > div {
  display: grid;
  gap: 4px;
}

.design-guide-disclosure-summary > div > span {
  font-size: 12px;
}

.skin-dark .design-guide-disclosure-summary > div > span {
  color: var(--muted-dark);
}

.skin-light .design-guide-disclosure-summary > div > span {
  color: var(--muted-light);
}

.design-guide-disclosure-panel {
  margin: 0;
}

.design-guide-disclosure-panel[hidden] {
  display: none;
}

.design-guide-font-stack {
  align-items: start;
  display: grid;
  gap: 10px;
}

.design-guide-font-stack > span {
  font-weight: 700;
}

.design-guide-font-stack code {
  overflow-wrap: anywhere;
  width: fit-content;
}

.design-guide-type-list {
  border: 1px solid;
  border-radius: 10px;
  overflow: hidden;
}

.skin-dark .design-guide-type-list {
  border-color: var(--border-dark);
}

.skin-light .design-guide-type-list {
  border-color: var(--border-light);
}

.design-guide-type-row {
  align-items: center;
  border-bottom: 1px solid;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  min-height: 86px;
  padding: 14px 16px;
}

.design-guide-type-row:last-child {
  border-bottom: 0;
}

.skin-dark .design-guide-type-row {
  border-color: var(--border-dark);
}

.skin-light .design-guide-type-row {
  border-color: var(--border-light);
}

.design-guide-type-row > div {
  align-items: start;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.design-guide-type-row > div > span {
  font-size: 12px;
  font-weight: 700;
}

.design-guide-type-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.design-guide-type-panel-heading {
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .design-guide-intro,
  .design-guide-section-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .design-guide-section-nav {
    justify-content: flex-start;
  }

  .design-guide-component-grid {
    grid-template-columns: 1fr;
  }

  .design-guide-type-row {
    align-items: start;
    gap: 14px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .design-guide-intro,
  .design-guide-section {
    padding: 16px;
  }

  .design-guide-specimen-heading,
  .design-guide-component-heading {
    align-items: start;
    flex-direction: column;
  }

  .design-guide-state-grid {
    grid-template-columns: 1fr;
  }
}

.project-task-actions {
  gap: 4px;
  padding: 8px;
}

.project-task-lock-icon {
  background: currentColor;
  display: block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

.project-task-lock-button.is-unlocked .project-task-lock-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.skin-dark .project-task-lock-button.is-locked,
.skin-dark .project-contact-disclosure-button[aria-expanded="false"],
.skin-dark .project-actions-menu-trigger {
  border-color: rgba(255, 255, 255, 0.58);
  color: rgba(255, 255, 255, 0.78);
}

.skin-dark .project-task-lock-button.is-locked:hover,
.skin-dark .project-task-lock-button.is-locked:focus-visible,
.skin-dark .project-contact-disclosure-button[aria-expanded="false"]:hover,
.skin-dark .project-contact-disclosure-button[aria-expanded="false"]:focus-visible,
.skin-dark .project-actions-menu-trigger:hover,
.skin-dark .project-actions-menu-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.88);
  outline: none;
}

.skin-dark .project-task-lock-button.is-unlocked,
.skin-dark .project-contact-disclosure-button[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.28);
}

.skin-dark .project-task-lock-button.is-unlocked:hover,
.skin-dark .project-task-lock-button.is-unlocked:focus-visible,
.skin-dark .project-contact-disclosure-button[aria-expanded="true"]:hover,
.skin-dark .project-contact-disclosure-button[aria-expanded="true"]:focus-visible {
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.42);
}

.skin-light .project-task-lock-button.is-locked,
.skin-light .project-contact-disclosure-button[aria-expanded="false"],
.skin-light .project-actions-menu-trigger {
  border-color: rgba(22, 32, 49, 0.52);
  color: rgba(22, 32, 49, 0.72);
}

.skin-light .project-task-lock-button.is-locked:hover,
.skin-light .project-task-lock-button.is-locked:focus-visible,
.skin-light .project-contact-disclosure-button[aria-expanded="false"]:hover,
.skin-light .project-contact-disclosure-button[aria-expanded="false"]:focus-visible,
.skin-light .project-actions-menu-trigger:hover,
.skin-light .project-actions-menu-trigger:focus-visible {
  background: rgba(22, 32, 49, 0.025);
  border-color: rgba(22, 32, 49, 0.64);
  color: rgba(22, 32, 49, 0.84);
  outline: none;
}

.skin-light .project-task-lock-button.is-unlocked,
.skin-light .project-contact-disclosure-button[aria-expanded="true"] {
  border-color: rgba(22, 32, 49, 0.08);
  color: rgba(22, 32, 49, 0.28);
}

.skin-light .project-task-lock-button.is-unlocked:hover,
.skin-light .project-task-lock-button.is-unlocked:focus-visible,
.skin-light .project-contact-disclosure-button[aria-expanded="true"]:hover,
.skin-light .project-contact-disclosure-button[aria-expanded="true"]:focus-visible {
  background: rgba(22, 32, 49, 0.015);
  border-color: rgba(22, 32, 49, 0.16);
  color: rgba(22, 32, 49, 0.42);
}

.task-subtask-row {
  border: 1px solid;
  border-radius: 0 0 8px 8px;
  border-top: 0;
  margin-bottom: 10px;
}

.task-subtask-cell {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 10px 11px;
}

.task-subtask-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.task-subtask-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.task-subtask-add summary {
  list-style: none;
}

.task-subtask-add summary::-webkit-details-marker {
  display: none;
}

.task-subtask-add-toggle {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

.task-subtask-add-toggle:hover,
.task-subtask-add-toggle:focus-visible {
  color: var(--primary-accent);
  outline: none;
}

.task-subtask-form {
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-width: 460px;
  padding: 12px;
}

.skin-dark .task-subtask-form {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .task-subtask-form {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.task-subtask-field-label {
  font-size: 12px;
  font-weight: 600;
}

.task-subtask-select {
  border: 1px solid;
  border-radius: 6px;
  color: inherit;
  font-size: 14px;
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
}

.task-subtask-submit {
  justify-self: start;
}

.task-subtask-list {
  display: grid;
  gap: 6px;
}

.task-subtask-item {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px;
}

.task-subtask-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-subtask-remove {
  flex: 0 0 26px;
}

.task-subtask-empty {
  font-size: 12px;
  font-weight: 500;
}

.skin-dark .task-subtask-item {
  background: var(--bg-dark-control);
  border-color: var(--border-dark);
}

.skin-light .task-subtask-item {
  background: var(--bg-light-panel);
  border-color: var(--border-light);
}

.skin-dark .task-subtask-empty {
  color: var(--muted-dark);
}

.skin-light .task-subtask-empty {
  color: var(--muted-light);
}

.project-file-tabs {
  border-bottom: 1px solid;
  display: flex;
  gap: 0;
  padding: 0 16px;
}

.project-document-upload {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px 16px;
}

.project-file-tab {
  border-right: 1px solid;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  position: relative;
}

.project-file-tab:first-child {
  border-left: 1px solid;
}

.project-file-tab-active {
  color: var(--primary-accent);
}

.project-file-tab-active::after {
  background: var(--primary-accent);
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 10px;
  position: absolute;
  right: 10px;
}

.project-side-panel {
  padding: 14px;
}

.project-side-panel .progress-meter {
  margin-bottom: 12px;
}

.project-state-actions,
.project-side-budget {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.project-state-actions {
  border-bottom: 1px solid;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.project-side-budget {
  padding-top: 12px;
}

.project-side-heading {
  border-bottom: 0;
  padding: 0 0 12px;
}

.project-side-heading strong,
.project-side-budget strong,
.project-budget-heading span {
  font-size: 14px;
}

.project-empty-table {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.project-history-list {
  border-top: 1px solid;
}

.project-history-entry {
  border-bottom: 1px solid;
  display: grid;
  gap: 7px;
  padding: 11px 0;
}

.project-history-entry:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.project-history-summary {
  display: grid;
  gap: 2px;
}

.project-history-entry-header {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.project-history-summary strong {
  font-size: 12px;
}

.project-history-summary span,
.project-history-entry time,
.project-history-changes {
  font-size: 11px;
  line-height: 1.35;
}

.project-history-entry time {
  color: inherit;
  opacity: 0.68;
  text-align: right;
  white-space: nowrap;
}

.project-history-changes {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
}

.skin-dark .project-panel-heading,
.skin-dark .project-side-heading,
.skin-dark .project-budget-heading,
.skin-dark .project-panel-block,
.skin-dark .project-file-tabs,
.skin-dark .project-file-tab,
.skin-dark .project-state-actions,
.skin-dark .project-empty-table,
.skin-dark .project-history-list,
.skin-dark .project-history-entry {
  border-color: var(--border-dark);
}

.skin-light .project-panel-heading,
.skin-light .project-side-heading,
.skin-light .project-budget-heading,
.skin-light .project-panel-block,
.skin-light .project-file-tabs,
.skin-light .project-file-tab,
.skin-light .project-state-actions,
.skin-light .project-empty-table,
.skin-light .project-history-list,
.skin-light .project-history-entry {
  border-color: var(--border-light);
}

.skin-dark .project-block-label,
.skin-dark .project-readonly-label,
.skin-dark .project-readonly-value,
.skin-dark .project-client-summary,
.skin-dark .project-empty-table {
  color: var(--muted-dark);
}

.skin-light .project-block-label,
.skin-light .project-readonly-label,
.skin-light .project-readonly-value,
.skin-light .project-client-summary,
.skin-light .project-empty-table {
  color: var(--muted-light);
}

.project-invoice-actions {
  border-top: 1px solid;
  margin-top: 12px;
  padding-top: 12px;
}

.project-invoice-list {
  border-top: 1px solid;
  display: grid;
  margin-top: 12px;
}

.project-invoice-link {
  align-items: center;
  border-bottom: 1px solid;
  color: inherit;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
  text-decoration: none;
}

.project-invoice-link span:first-child {
  display: grid;
  gap: 2px;
}

.project-invoice-link small {
  font-size: 11px;
  font-weight: 600;
}

.skin-dark .project-invoice-actions,
.skin-dark .project-invoice-list,
.skin-dark .project-invoice-link {
  border-color: var(--border-dark);
}

.skin-light .project-invoice-actions,
.skin-light .project-invoice-list,
.skin-light .project-invoice-link {
  border-color: var(--border-light);
}

.skin-dark .project-invoice-link small {
  color: var(--muted-dark);
}

.skin-light .project-invoice-link small {
  color: var(--muted-light);
}

.record-sheet-invoices {
  --sheet-columns: minmax(360px, 1.8fr) minmax(220px, 0.95fr) minmax(120px, 0.55fr);
  --sheet-min-width: 720px;
}

.invoice-amount-period-cell {
  align-content: center;
  align-items: start;
  display: grid;
  gap: 3px;
}

.invoice-show-page {
  display: grid;
  gap: 14px;
}

.invoice-document,
.invoice-actions-panel,
.invoice-form-panel {
  padding: 0;
}

.invoice-document-toolbar,
.invoice-header-grid,
.invoice-client-grid,
.invoice-notes-grid,
.invoice-actions-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.invoice-document-toolbar {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  flex-wrap: wrap;
}

.invoice-header-grid,
.invoice-client-grid,
.invoice-notes-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
}

.invoice-logo {
  display: block;
  max-width: 260px;
  width: 100%;
}

.invoice-logo-company {
  max-width: 430px;
}

.invoice-from,
.invoice-client-address,
.invoice-project-meta,
.invoice-summary-box {
  min-width: 0;
}

.invoice-from address,
.invoice-client-address,
.invoice-summary-box dl,
.invoice-project-meta dl {
  font-style: normal;
  line-height: 1.45;
}

.invoice-summary-box {
  border-left: 1px solid;
  padding-left: 18px;
}

.invoice-summary-box h2 {
  font-size: 18px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.invoice-summary-box dl,
.invoice-project-meta dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.invoice-summary-box dl > div,
.invoice-project-meta dl > div {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr);
}

.invoice-summary-box dt,
.invoice-project-meta dt {
  font-weight: 600;
}

.invoice-summary-box dd,
.invoice-project-meta dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.invoice-line-header,
.invoice-task-row,
.invoice-charge-row,
.invoice-day-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1.8fr) minmax(100px, 0.6fr) minmax(90px, 0.55fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(74px, 0.4fr);
  min-width: 900px;
}

.invoice-line-header {
  border-bottom: 1px solid;
  border-top: 1px solid;
  font-size: 11px;
  font-weight: 800;
  padding: 10px 16px;
  text-transform: uppercase;
}

.invoice-charge-list {
  overflow-x: auto;
}

.invoice-task-group {
  min-width: 900px;
}

.invoice-task-row,
.invoice-charge-row,
.invoice-day-row {
  align-items: center;
  border-bottom: 1px solid;
  padding: 7px 16px;
}

.invoice-task-row {
  font-weight: 700;
}

.invoice-day-row span {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.invoice-charge-row {
  font-weight: 600;
}

.invoice-day-row {
  font-size: 12px;
}

/* Indent only the description cell so grid columns stay aligned across all row types */
.invoice-charge-row > div:first-child {
  padding-left: 12px;
}

.invoice-day-row > div:first-child {
  padding-left: 28px;
}

.invoice-day-copy-btn {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  margin-left: 4px;
  opacity: 0;
  padding: 0 2px;
  transition: opacity 140ms ease, color 140ms ease;
  vertical-align: middle;
}

.invoice-day-row:hover .invoice-day-copy-btn {
  opacity: 0.45;
}

.invoice-day-copy-btn:hover,
.invoice-day-copy-btn:focus-visible {
  opacity: 1;
}

.invoice-day-copy-btn--copied {
  color: #16a34a;
  opacity: 1;
}

.invoice-hold-button {
  font-size: 16px;
  font-weight: 700;
}

.invoice-hold-cell {
  display: flex;
  justify-content: flex-end;
}

/* Unwrap the button_to form wrapper so it doesn't break grid alignment */
.invoice-hold-form {
  display: contents;
}

/* Generic visibility utility — used by invoice task group collapse/expand
   and any other component that toggles "is-hidden" via JS or ERB. */
.is-hidden {
  display: none !important;
}

/* Invoice task group toggle button (▸ / ▾ collapse control) */
.invoice-task-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 0 0;
  vertical-align: middle;
}

.invoice-task-toggle-icon {
  font-size: 11px;
  line-height: 1;
  opacity: 0.65;
  user-select: none;
}

/* Indent the charge/day rows inside a collapsed task group */
.invoice-task-body {
  border-bottom: 1px solid;
}

/* Scope the billing-model/PO span styling to only direct-child spans
   so it doesn't leak into the .invoice-task-toggle-icon span */
.invoice-task-row > div > span {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

/* Borderless inline editor for values that should read like show-page text. */
.editable-show-field {
  align-items: center;
  display: flex;
  gap: 4px;
  margin: 0;
}

.editable-show-field-input {
  appearance: textfield;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  flex: 0 0 64px;
  font-size: inherit;
  font-weight: inherit;
  height: 35px;
  min-height: 35px;
  min-width: 60px;
  opacity: 1;
  padding: 0 2px;
  text-align: right;
  transition: background 0.15s, box-shadow 0.15s;
  width: 64px;
}

.editable-show-field-input::-webkit-inner-spin-button,
.editable-show-field-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.skin-light input[type="number"].editable-show-field-input,
.skin-dark input[type="number"].editable-show-field-input {
  border: 0;
  height: 35px;
  min-height: 35px;
  padding: 0 2px;
}

.editable-show-field-input:hover {
  opacity: 1;
  outline: none;
}

.editable-show-field-input:focus {
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -2px currentColor;
  outline: none;
}

.editable-show-field-unit {
  font-size: 11px;
  opacity: 0.65;
}

.invoice-percent-save {
  display: none !important;
}

.skin-light .editable-show-field-input {
  background: transparent;
  color: inherit;
}

.skin-light .editable-show-field-input:hover,
.skin-light .editable-show-field-input:focus {
  background: rgba(14, 122, 95, 0.06);
}

.skin-dark .editable-show-field-input {
  background: transparent;
  color: inherit;
}

.skin-dark .editable-show-field-input:hover,
.skin-dark .editable-show-field-input:focus {
  background: rgba(255, 255, 255, 0.05);
}

.invoice-total-table {
  border-bottom: 1px solid;
  display: grid;
  gap: 4px;
  justify-content: end;
  padding: 16px;
}

.invoice-total-table > div {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, auto);
  text-align: right;
  text-transform: uppercase;
}

/* The dialog wrapper div gets the 2-column grid from > div, which causes
   the button to sit in col 1 only while the hidden <dialog> takes col 2.
   Span the button across all columns so label + amount align with the
   Invoice Total row below. */
.invoice-total-table .invoice-discount-edit-btn {
  grid-column: 1 / -1;
}

/* ── Project status section ──────────────────────────────────────────────── */

.invoice-project-status {
  border-bottom: 1px solid;
  padding: 16px;
}

.invoice-project-status-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.invoice-project-status-header h2 {
  font-size: 13px;
  margin: 0;
  text-transform: uppercase;
}

.invoice-project-status-toggle {
  flex: 0 0 26px;
}

.invoice-project-status-toggle-form {
  margin: 0;
}

.invoice-project-status-toggle-icon {
  background: currentColor;
  display: block;
  height: 15px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 15px;
}

.invoice-project-status-toggle-icon.is-hidden-state {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.7 2.7'/%3E%3Cpath d='M9.9 4.2A10.8 10.8 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.1 3.2'/%3E%3Cpath d='M6.6 6.6C3.6 8.6 2 12 2 12s3.5 8 10 8a9.8 9.8 0 0 0 4.1-.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.7 2.7'/%3E%3Cpath d='M9.9 4.2A10.8 10.8 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.1 3.2'/%3E%3Cpath d='M6.6 6.6C3.6 8.6 2 12 2 12s3.5 8 10 8a9.8 9.8 0 0 0 4.1-.9'/%3E%3C/svg%3E");
}

.invoice-project-status-table {
  margin-top: 12px;
}

.invoice-project-status-table-header {
  display: flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: space-between;
  padding: 6px 0;
  text-transform: uppercase;
}

.task-status-row {
  align-items: center;
  border-top: 1px solid;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr minmax(160px, 0.6fr) minmax(180px, auto);
  padding: 8px 0;
}

.task-status-description {
  font-weight: 600;
}

.task-status-bar {
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.task-status-bar-fill {
  border-radius: 4px;
  height: 100%;
}

.task-status-percent {
  font-size: 12px;
  text-align: right;
}

.skin-light .invoice-project-status,
.skin-light .invoice-project-status-table-header,
.skin-light .task-status-row {
  border-color: var(--border-light);
}

.skin-dark .invoice-project-status,
.skin-dark .invoice-project-status-table-header,
.skin-dark .task-status-row {
  border-color: var(--border-dark);
}

.skin-light .task-status-bar {
  background: #e0e7ef;
}

.skin-light .task-status-bar-fill {
  background: #3b82c4;
}

.skin-dark .task-status-bar {
  background: #2a2a2a;
}

.skin-dark .task-status-bar-fill {
  background: #4da6c8;
}

@media print {
  .no-print { display: none !important; }
}

.invoice-notes-grid {
  border-bottom: 1px solid;
}

.invoice-notes-grid h2 {
  font-size: 13px;
  margin-bottom: 8px;
}

.invoice-footer {
  font-size: 12px;
  line-height: 1.5;
  padding: 16px;
  text-align: center;
}

.invoice-actions-panel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

/* ── Invoice inline field editors ─────────────────────────────────────────── */

/* Used inside <dd> in the invoice summary / project meta grids.
   Shows only the value (label hidden) matching existing <dd> typography. */
.invoice-dd-editor {
  display: block;
  text-align: right;
  width: 100%;
}

.invoice-dd-editor .modal-editor-label {
  display: none;
}

.invoice-dd-editor .modal-editor-value {
  font-size: inherit;
  font-weight: 700;
  white-space: normal;
}

.invoice-dd-editor.modal-editor-trigger:not(:disabled) {
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

/* Clickable discount / upcharge row in the totals table */
.invoice-discount-edit-btn {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  font-size: inherit;
  gap: 18px;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, auto);
  padding: 0;
  text-align: right;
  text-transform: uppercase;
  width: 100%;
}

.invoice-discount-edit-btn:hover,
.invoice-discount-edit-btn:focus-visible {
  opacity: 0.8;
  outline: none;
}

/* Clickable billing period text in the invoice line header */
.invoice-period-edit-btn {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: left;
}

.invoice-period-edit-btn:hover,
.invoice-period-edit-btn:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Notes section modal_editor: shows as flowing text, not truncated */
.invoice-notes-editor .modal-editor-label {
  display: none;
}

.invoice-notes-editor .modal-editor-value {
  font-size: 14px;
  font-weight: 400;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
}

.invoice-notes-editor.modal-editor-trigger:not(:disabled) {
  border-radius: 4px;
  padding: 4px;
  margin: -4px;
}

/* Clickable task description button in the charge group task row */
.invoice-task-desc-btn {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline;
  font-size: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.invoice-task-desc-btn:hover,
.invoice-task-desc-btn:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Skin hover tints for invoice inline editors */
.skin-dark .invoice-dd-editor.modal-editor-trigger:not(:disabled):hover,
.skin-dark .invoice-dd-editor.modal-editor-trigger:not(:disabled):focus-visible,
.skin-dark .invoice-notes-editor.modal-editor-trigger:not(:disabled):hover,
.skin-dark .invoice-notes-editor.modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.skin-light .invoice-dd-editor.modal-editor-trigger:not(:disabled):hover,
.skin-light .invoice-dd-editor.modal-editor-trigger:not(:disabled):focus-visible,
.skin-light .invoice-notes-editor.modal-editor-trigger:not(:disabled):hover,
.skin-light .invoice-notes-editor.modal-editor-trigger:not(:disabled):focus-visible {
  background: rgba(14, 122, 95, 0.06);
}

.invoice-actions-panel form {
  margin: 0;
}

.skin-dark .invoice-document-toolbar,
.skin-dark .invoice-summary-box,
.skin-dark .invoice-line-header,
.skin-dark .invoice-task-row,
.skin-dark .invoice-task-body,
.skin-dark .invoice-charge-row,
.skin-dark .invoice-day-row,
.skin-dark .invoice-total-table,
.skin-dark .invoice-notes-grid {
  border-color: var(--border-dark);
}

.skin-light .invoice-document-toolbar,
.skin-light .invoice-summary-box,
.skin-light .invoice-line-header,
.skin-light .invoice-task-row,
.skin-light .invoice-task-body,
.skin-light .invoice-charge-row,
.skin-light .invoice-day-row,
.skin-light .invoice-total-table,
.skin-light .invoice-notes-grid {
  border-color: var(--border-light);
}

.skin-dark .invoice-line-header,
.skin-dark .invoice-task-row {
  background: #141414;
}

.skin-light .invoice-line-header,
.skin-light .invoice-task-row {
  background: #f5f8fc;
}

.skin-dark .invoice-charge-row,
.skin-dark .invoice-day-row {
  color: var(--muted-dark);
}

.skin-light .invoice-charge-row,
.skin-light .invoice-day-row {
  color: var(--muted-light);
}

.invoice-print-body {
  background: #eef1f5;
  color: #111827;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
}

.invoice-print-toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 18px auto 12px;
  max-width: 960px;
  width: calc(100% - 32px);
}

.invoice-print-page {
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  margin: 0 auto 36px;
  max-width: 960px;
  min-height: 11in;
  padding: 44px 52px 36px;
  position: relative;
  width: calc(100% - 32px);
}

.invoice-print-header,
.invoice-print-client-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.invoice-print-header {
  align-items: start;
  margin-bottom: 30px;
}

.invoice-print-logo {
  display: block;
  margin-bottom: 12px;
  max-width: 310px;
  width: 48%;
}

.invoice-print-from address,
.invoice-print-client-address {
  font-style: normal;
}

.invoice-print-summary,
.invoice-print-project-meta {
  border-left: 1px solid #d6dbe4;
  padding-left: 22px;
}

.invoice-print-summary h1 {
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.invoice-print-summary dl,
.invoice-print-project-meta dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.invoice-print-summary dl > div,
.invoice-print-project-meta dl > div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.invoice-print-summary dt,
.invoice-print-project-meta dt {
  color: #4b5563;
  font-weight: 600;
}

.invoice-print-summary dd,
.invoice-print-project-meta dd {
  margin: 0;
  text-align: right;
}

.invoice-print-client-grid {
  margin-bottom: 30px;
}

.invoice-print-lines {
  border-top: 1px solid #d6dbe4;
  margin-top: 8px;
}

.invoice-print-row {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 92px 82px 100px 100px;
  padding: 7px 8px;
}

.invoice-print-line-header,
.invoice-print-task-row {
  border-bottom: 1px solid #d6dbe4;
  font-weight: 700;
}

.invoice-print-line-header {
  color: #111827;
}

.invoice-print-task-group {
  break-inside: avoid;
}

.invoice-print-task-row {
  background: #f6f8fb;
  margin-top: 10px;
}

.invoice-print-task-row span,
.invoice-print-day-row span {
  color: #6b7280;
  display: block;
  font-size: 12px;
}

.invoice-print-charge-row {
  border-bottom: 1px solid #edf0f4;
}

.invoice-print-day-row {
  border-bottom: 1px solid #f1f3f6;
  color: #374151;
  padding-left: 28px;
}

.invoice-print-row > div:nth-child(2),
.invoice-print-row > div:nth-child(3),
.invoice-print-row > div:nth-child(4),
.invoice-print-row > div:nth-child(5) {
  text-align: right;
}

.invoice-print-empty {
  color: #6b7280;
  padding: 18px 8px;
}

.invoice-print-total-table {
  display: grid;
  gap: 6px;
  justify-content: end;
  margin: 22px 0 56px auto;
  width: 310px;
}

.invoice-print-total-table > div {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 110px;
  text-align: right;
}

.invoice-print-total-table > div:last-child {
  font-size: 15px;
  text-transform: uppercase;
}

.invoice-print-project-status {
  border-top: 1px solid #d6dbe4;
  margin: 22px 0;
  padding-top: 12px;
  width: 50%;
}

.invoice-print-project-status-header {
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.invoice-print-task-status-row {
  border-top: 1px solid #edf0f4;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 5px 0;
}

.invoice-print-notes {
  margin-bottom: 42px;
  max-width: 620px;
}

.invoice-print-notes h2 {
  font-size: 14px;
  margin: 0 0 6px;
}

.invoice-print-notes p {
  margin: 0 0 4px;
}

.invoice-print-footer {
  border-top: 1px solid #d6dbe4;
  font-size: 11px;
  margin-top: 28px;
  padding-top: 18px;
  text-align: center;
}

.invoice-print-footer p {
  margin: 0 0 3px;
}

.notification-dropdown {
  position: relative;
  display: inline-block;
}

.utility-rail-bottom .notification-dropdown,
.utility-rail-bottom .button_to {
  margin: 0;
}

.notification-button {
  position: relative;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}

.utility-rail-bottom .notification-button {
  border: 1px solid;
  border-radius: 6px;
  font-size: 20px;
  height: 45px;
  justify-content: center;
  padding: 0;
  width: 45px;
}

.skin-dark .utility-rail-bottom .notification-button {
  border-color: #3f3f46;
  color: var(--text-dark);
}

.skin-light .utility-rail-bottom .notification-button {
  background: #ffffff;
  border-color: #d6cebf;
  color: #4f604d;
}

.notification-button:hover {
  opacity: 0.8;
}

.notification-badge {
  display: inline-block;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
}

.notification-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.utility-rail-bottom .notification-menu {
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  margin-top: 0;
  right: auto;
  top: auto;
}

.skin-dark .notification-menu {
  background: #2a2a2a;
  border-color: #444;
}

.notification-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-empty {
  padding: 16px;
  text-align: center;
  color: #999;
  font-size: 13px;
  margin: 0;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.skin-dark .notification-item {
  border-bottom-color: #444;
}

.notification-item:hover {
  background-color: #f5f5f5;
}

.skin-dark .notification-item:hover {
  background-color: #333;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  font-size: 18px;
  min-width: 20px;
  text-align: center;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notification-content strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-content small {
  font-size: 12px;
  color: #666;
}

.skin-dark .notification-content small {
  color: #999;
}

.notification-footer {
  padding: 8px 8px;
  border-top: 1px solid #eee;
  background-color: #fafafa;
}

.skin-dark .notification-footer {
  border-top-color: #444;
  background-color: #1f1f1f;
}

.notification-clear-btn {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
}

.skin-dark .notification-clear-btn {
  background-color: #333;
  border-color: #555;
  color: #ddd;
}

.notification-clear-btn:hover {
  background-color: #e0e0e0;
}

.skin-dark .notification-clear-btn:hover {
  background-color: #444;
}

.announcement-container {
  margin: 0;
  padding: 0;
}

.announcement-container:has(.announcement-banner) {
  margin-bottom: 12px;
}

.announcement-banner {
  padding: 14px 16px;
  border-radius: 6px;
  margin: 0;
  font-size: 14px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 182, 26, 0.05) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
  animation: slideDown 0.3s ease-out;
}

.announcement-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.announcement-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

.announcement-icon-emoji {
  font-size: 18px;
  display: block;
}

.announcement-content {
  flex: 1;
  line-height: 1.5;
  word-break: break-word;
  padding-top: 2px;
}

.announcement-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-close:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.announcement-close-icon {
  display: block;
  font-weight: 300;
  font-size: 16px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (max-width: 600px) {
  .announcement-banner {
    padding: 12px 12px;
    font-size: 13px;
  }
  
  .announcement-wrapper {
    gap: 10px;
  }
  
  .announcement-icon-emoji {
    font-size: 16px;
  }

  .record-sheet-header,
  .record-sheet-row {
    min-width: auto !important;
  }

  .record-sheet-header > div,
  .record-sheet-cell {
    padding: 8px;
    font-size: 12px;
  }

  .record-sheet-cell {
    min-height: 40px;
  }

  .record-sheet,
  .contacts-sheet {
    --sheet-min-width: 100%;
  }

  .timesheet-cell-form input[type="number"] {
    font-size: 12px;
    padding: 4px;
  }

  .timesheet-cell-submit {
    min-height: 32px;
    min-width: 32px;
    padding: 2px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn {
    padding: 0 8px;
    font-size: 12px;
  }

  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .content-heading-row {
    flex-direction: column;
    gap: 12px;
  }

  .panel {
    padding: 12px;
    border-radius: 8px;
  }

  .card {
    max-width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .announcement-banner {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 182, 26, 0.03) 100%);
    border-color: rgba(255, 193, 7, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .announcement-close {
    color: var(--text-secondary);
  }
  
  .announcement-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

@media print {
  @page {
    margin: 0.45in;
    size: letter;
  }

  .invoice-print-body {
    background: #fff;
    color: #000;
    font-size: 11px;
  }

  .invoice-print-toolbar {
    display: none;
  }

  .invoice-print-page {
    box-shadow: none;
    margin: 0;
    max-width: none;
    min-height: auto;
    padding: 0;
    width: 100%;
  }

  .invoice-print-task-group,
  .invoice-print-summary,
  .invoice-print-project-meta,
  .invoice-print-notes,
  .invoice-print-footer {
    break-inside: avoid;
  }
}

/* Native apps (iOS/Android) toggle this class via JS immediately before
   printing, since Android's WebView.createPrintDocumentAdapter() does not
   honor @media print the way browsers and iOS's viewPrintFormatter() do. */
body.native-printing .invoice-print-toolbar {
  display: none;
}

.skin-dark .project-contact-header {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .project-contact-header {
  background: var(--light-warm-header);
  border-color: var(--light-warm-border);
  color: var(--light-warm-header-text);
}

.skin-dark .project-contact-row {
  border-color: var(--border-dark);
}

.skin-light .project-contact-row {
  border-color: var(--border-light);
}

.timesheet-show-page,
.timesheet-sheet-section,
.timesheet-entry-grid {
  min-width: 0;
}

.timesheet-show-page {
  display: grid;
  gap: 22px;
}

.timesheet-hero {
  align-items: start;
  column-gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
  row-gap: 14px;
}

.timesheet-hero-icon {
  flex: 0 0 auto;
  height: 44px;
  width: 44px;
}

.timesheet-hero-actions {
  align-items: center;
  column-gap: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  row-gap: 8px;
}

.timesheet-week-nav,
.timesheet-header-actions,
.timesheet-sheet-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.timesheet-week-nav {
  flex: 0 0 auto;
  justify-content: flex-start;
  min-width: 0;
}

.timesheet-week-nav form,
.timesheet-week-nav .button_to {
  margin: 0;
}

.timesheet-header-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.timesheet-header-actions form,
.timesheet-header-actions .button_to {
  margin: 0;
}

.timesheet-status-row {
  align-items: center;
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-width: 0;
  padding-left: 60px;
}

.timesheet-status-cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.timesheet-workflow-link {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.timesheet-workflow-link:hover,
.timesheet-workflow-link:focus-visible {
  color: var(--primary-accent);
}

.timesheet-add-icon-button {
  color: inherit;
  gap: 8px;
  min-width: 64px;
  padding-left: 12px;
  padding-right: 12px;
}

.timesheet-add-plus {
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
}

.timesheet-add-clock {
  height: 18px;
  opacity: 1;
  width: 18px;
}

.timesheet-add-clock::before {
  height: 18px;
  width: 18px;
}

.timesheet-add-currency {
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.timesheet-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.timesheet-title-row h1 {
  flex: 0 0 auto;
  padding-right: 2px;
}

.timesheet-status-approval {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

.approval-info {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid;
}

.skin-dark .approval-info {
  border-left-color: var(--border-dark);
  color: #aaaaaa;
}

.skin-light .approval-info {
  border-left-color: var(--border-light);
  color: #666666;
}

.approval-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.approval-value {
  font-weight: 500;
}

.approval-date {
  font-size: 12px;
  font-style: italic;
}

.timesheet-icon-button {
  font-size: 17px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
  width: 44px;
}

.timesheet-sheet-section {
  display: grid;
  gap: 14px;
  padding: 4px 0 12px;
}

.timesheet-sheet-section + .timesheet-sheet-section {
  padding-top: 8px;
}

.timesheet-sheet-heading {
  padding: 0 2px;
}

.timesheet-sheet-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

/* Timesheet show entry grids (desktop). The mobile card layout lives in the
   820px media block — "Timesheet show page" section. */
.timesheet-entry-grid {
  display: grid;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.timesheet-entry-header,
.timesheet-entry-row {
  display: grid;
  min-width: var(--timesheet-min-width);
}

.timesheet-work-grid .timesheet-entry-header,
.timesheet-work-grid .timesheet-entry-row {
  grid-template-columns: 48px minmax(240px, 1.45fr) minmax(180px, 1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-expense-grid .timesheet-entry-header,
.timesheet-expense-grid .timesheet-entry-row {
  grid-template-columns: 48px minmax(240px, 1.45fr) minmax(180px, 1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-entry-grid {
  --timesheet-min-width: 1104px;
}

.timesheet-entry-header {
  border: 0;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.timesheet-entry-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 8px;
  text-align: left;
}

.timesheet-entry-header .timesheet-entry-date-header {
  justify-items: center;
  text-align: center;
}

.timesheet-entry-header > .timesheet-entry-meta:nth-child(2),
.timesheet-total-row > .timesheet-entry-meta:nth-child(2) {
  transform: translateX(-46px);
}

.timesheet-entry-header span {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
}

.timesheet-entry-row {
  align-items: stretch;
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.timesheet-entry-row-editable {
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.timesheet-entry-row-editable:focus {
  outline: none;
}

.timesheet-entry-row:last-child {
  border-bottom: 1px solid;
}

.timesheet-row-handle {
  align-self: stretch;
}

.timesheet-entry-avatar {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 10px 6px;
  position: relative;
}

.timesheet-row-type-icon {
  flex: 0 0 auto;
}

.timesheet-row-charge-icon {
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 750;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.timesheet-entry-avatar .lock-indicator {
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  bottom: 6px;
  display: inline-flex;
  font-size: 9px;
  height: 16px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 4px;
  width: 16px;
}

.timesheet-entry-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 10px;
}

.timesheet-entry-meta .flip-editor-sheet {
  height: 100%;
  min-height: 52px;
}

.timesheet-entry-meta .flip-editor-sheet .flip-editor-front,
.timesheet-entry-meta .flip-editor-sheet .flip-editor-back {
  min-height: 52px;
}

.timesheet-entry-meta-stack {
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
}

.timesheet-row-details {
  justify-content: center;
}

.timesheet-row-project strong {
  font-size: 13px;
  line-height: 1.2;
}

.timesheet-row-details span:first-child {
  color: inherit;
  font-weight: 650;
}

.timesheet-entry-meta strong,
.timesheet-entry-total {
  font-size: 13px;
  line-height: 1.15;
}

.timesheet-entry-meta span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-cell-form {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 8px 4px;
  position: relative;
}

.timesheet-cell-form input[type="number"] {
  font-size: 13px;
  min-height: 28px;
  padding: 4px 5px;
  text-align: right;
}

.timesheet-day-value {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  gap: 2px;
  justify-content: center;
  line-height: 1.2;
  min-width: 0;
  padding: 12px 8px;
}

.timesheet-day-note {
  font-size: 10px;
  font-variant-numeric: normal;
  font-weight: 500;
  max-width: 100%;
  opacity: 0.65;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-day-has-notes {
  position: relative;
}

.timesheet-dialog-days {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.timesheet-dialog-day-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timesheet-day-description {
  font-size: 11px;
  padding: 2px 4px;
  width: 100%;
}

.timesheet-dialog-hint {
  color: inherit;
  font-size: 11px;
  margin: 6px 0 0;
  opacity: 0.55;
}

.timesheet-project-search {
  width: 100%;
}

.timesheet-cell-submit {
  border: 1px solid;
  bottom: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  min-height: 18px;
  padding: 0 5px;
  position: absolute;
  right: 3px;
}

.timesheet-entry-total {
  align-items: center;
  display: flex;
  font-weight: 750;
  justify-content: center;
  padding: 12px 8px;
}

.timesheet-entry-actions {
  align-items: center;
  display: flex;
  padding: 8px;
}

.timesheet-total-row {
  font-weight: 750;
}

.timesheet-total-row .timesheet-entry-date-header {
  align-items: center;
  display: flex;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 0;
  padding: 12px 8px;
}

.approved-by {
  font-size: 12px;
  text-align: right;
}

.skin-dark .timesheet-entry-header,
.skin-dark .timesheet-entry-row,
.skin-dark .timesheet-cell-submit {
  border-color: var(--border-dark);
}

.skin-light .timesheet-entry-header,
.skin-light .timesheet-entry-row,
.skin-light .timesheet-cell-submit {
  border-color: var(--border-light);
}

.skin-dark .timesheet-entry-header {
  background: transparent;
  color: var(--muted-dark);
}

.skin-dark .timesheet-entry-row {
  background: var(--primary-dark-soft);
  border-color: #343438;
}

.skin-dark .timesheet-entry-row-editable:hover,
.skin-dark .timesheet-entry-row-editable:focus-visible {
  background: rgba(39, 39, 42, 0.46);
  box-shadow: inset 3px 0 0 var(--primary-accent);
}

.skin-light .timesheet-entry-header {
  background: transparent;
  color: var(--light-warm-header-text);
}

.skin-light .timesheet-entry-row {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.skin-light .timesheet-entry-row-editable:hover,
.skin-light .timesheet-entry-row-editable:focus-visible {
  background: #f7fbf8;
  box-shadow: inset 3px 0 0 var(--primary-accent);
}

.skin-dark .timesheet-entry-meta span,
.skin-dark .timesheet-day-value,
.skin-dark .approved-by {
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-meta span,
.skin-light .timesheet-day-value,
.skin-light .approved-by {
  color: var(--muted-light);
}

.skin-dark .timesheet-row-details span:first-child {
  color: rgba(250, 250, 250, 0.82);
}

.skin-light .timesheet-row-details span:first-child {
  color: #42533f;
}

.skin-dark .timesheet-row-charge-icon,
.skin-dark .timesheet-entry-avatar .lock-indicator {
  background: #141414;
  border-color: var(--border-dark);
  color: var(--muted-dark);
}

.skin-light .timesheet-row-charge-icon,
.skin-light .timesheet-entry-avatar .lock-indicator {
  background: var(--light-warm-avatar);
  border-color: var(--light-warm-border);
  color: var(--muted-light);
}

.skin-dark .timesheet-cell-submit {
  background: #141414;
  color: var(--primary-dark);
}

.skin-light .timesheet-cell-submit {
  background: #f8fbff;
  color: var(--primary-light);
}

@media (min-width: 1081px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .app-sidebar {
    height: calc(100dvh - var(--app-chrome-header-height));
    overflow: hidden;
  }

  .app-main {
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .app-content-wrapper {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--app-body-gutter) var(--app-body-gutter);
    scrollbar-gutter: stable;
  }

  .app-content-wrapper > .content-heading {
    margin: 0 calc(var(--app-body-gutter) * -1) var(--app-body-gutter);
    position: sticky;
    top: 0;
    z-index: 25;
  }
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .app-header-account,
  .app-header-brand {
    display: none;
  }

  .app-utility-rail {
    display: none;
  }

  .app-sidebar {
    height: 100%;
    left: 0;
    padding: 12px;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    z-index: 1000;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  /* The desktop background is transparent above the header band; the drawer needs a solid fill */
  .skin-dark .app-sidebar {
    background: #0a0a0a;
  }

  .app-brand {
    display: flex;
    height: auto;
    margin: 0 -12px;
    padding: 4px 24px 14px;
  }

  .app-nav {
    margin-top: 15px;
  }

  .app-shell::before {
    display: none;
  }

  .app-sidebar::before {
    display: none;
  }

  .app-main {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto 1fr auto;
  }

  .app-mobile-header {
    align-items: center;
    border-bottom: 1px solid transparent;
    display: flex;
    height: 52px;
    padding: 0 8px;
    pointer-events: none;
    position: sticky;
    top: 0;
    transition: background-color 160ms ease, border-color 160ms ease;
    z-index: 30;
  }

  .app-nav-toggle {
    display: inline-flex;
    pointer-events: auto;
  }

  .app-content-wrapper {
    padding: 14px 16px 20px;
    position: static;
  }

  .app-main > .app-content-wrapper > .content-heading {
    align-items: center;
    display: flex;
    height: auto;
    left: auto;
    margin: -66px 0 16px;
    min-height: 52px;
    padding: 0 0 0 48px;
    position: static;
    right: auto;
    top: auto;
  }

  .app-main > .app-content-wrapper > .content-heading > .content-heading-row {
    flex: 1;
  }

  /* Native apps hide the title, so push the remaining Add action to the right edge */
  body.hotwire-native .content-heading-title-group {
    justify-content: flex-end;
    width: 100%;
  }

  /* Flash and announcement banners render before the heading; keep it below them */
  .app-main > .app-content-wrapper > .alert ~ .content-heading,
  .app-main > .app-content-wrapper > .announcement-container:has(.announcement-banner) ~ .content-heading {
    margin-top: 0;
    padding-left: 0;
  }

  .app-nav-close {
    display: block;
  }

  .contact-grid,
  .company-grid,
  .flip-editor-grid,
  .project-show-layout,
  .project-form-grid,
  .project-row,
  .project-row-facts,
  .directory-form-grid,
  .directory-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-row {
    grid-template-columns: 1fr;
  }

  .directory-actions {
    justify-content: flex-start;
  }

  .timesheet-hero {
    grid-template-columns: 1fr;
  }

  .timesheet-hero-actions {
    width: 100%;
  }

  .timesheet-header-actions {
    justify-content: flex-start;
  }

  .entity-dashboard-grid,
  .entity-stat-grid,
  .dashboard-widget-grid,
  .legacy-dashboard-alert-grid,
  .legacy-dashboard-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-dashboard-announcement {
    max-width: calc(50% - 6px);
  }
}

@media (max-width: 820px) {
  .copy-project-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-header,
  .content-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid,
  .panel-grid,
  .panel-grid-equal,
  .dashboard-widget-grid,
  .legacy-dashboard-alert-grid,
  .legacy-dashboard-main-grid,
  .project-create-quick-row,
  .contact-grid,
  .company-grid,
    .company-card-details,
    .entity-modal-editor-grid,
    .flip-editor-grid,
    .contact-detail-grid,
    .detail-two-column,
    .project-show-layout,
    .project-flip-grid,
    .project-row,
    .project-row-facts,
    .project-form-grid,
    .project-stats-grid,
    .directory-form-grid,
    .directory-details,
    .invoice-header-grid,
    .invoice-client-grid,
    .invoice-notes-grid {
    grid-template-columns: 1fr;
  }

  .legacy-dashboard-announcement {
    max-width: none;
  }

  .legacy-dashboard-xero-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .task-dialog-form .directory-form-grid {
    grid-template-columns: 1fr;
  }

  .invoice-summary-box {
    border-left: 0;
    padding-left: 0;
  }

  .dashboard-inline-form {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    gap: 8px;
    margin-bottom: 12px;
  }

  .widget {
    min-height: 82px;
  }

  .stat-box {
    padding: 10px;
  }

  .stat-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .stat-value {
    font-size: 14px;
  }

  .dashboard-page-shell .dashboard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-page-shell .dashboard-actions .btn,
  .dashboard-page-shell .dashboard-actions input[type="submit"].btn,
  .dashboard-page-shell .dashboard-actions button.btn {
    width: 100%;
  }

  .invoice-actions-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-actions-panel .btn,
  .invoice-actions-panel input[type="submit"].btn,
  .invoice-actions-panel button.btn {
    width: 100%;
  }

  .contacts-search {
    width: 100%;
  }

  /* The stacked heading row aligns items flex-start, which shrink-wraps the
     actions row and defeats the width: 100% rules above; stretch it back */
  .content-heading-row .dashboard-actions {
    align-self: stretch;
  }

  .entity-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .entity-dashboard-grid,
  .entity-stat-grid {
    grid-template-columns: 1fr;
  }

  .entity-tabs {
    overflow-x: auto;
    max-width: 100%;
  }

  .entity-detail-list-grid {
    grid-template-columns: 1fr;
  }

  .entity-detail-list-grid > div:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid;
  }

  .add-record-popover,
  .add-record-popover-body {
    width: 100%;
  }

  .add-record-popover-body {
    position: static;
  }

  .search-input {
    min-width: 0;
    width: 100%;
  }

  .app-content-wrapper {
    padding: 14px 16px 16px;
  }

  /* The heading row stacks vertically here: keep the title/Add group centered in the
     52px bar band beside the hamburger, with search/actions flowing below the band */
  .app-main > .app-content-wrapper > .content-heading {
    align-items: flex-start;
  }

  .app-main > .app-content-wrapper > .content-heading .content-heading-title-group,
  .app-main > .app-content-wrapper > .content-heading .content-heading-title {
    align-items: center;
    min-height: 52px;
  }

  .dashboard-page-shell {
    max-width: 100%;
  }

  .panel {
    padding: 12px;
  }

  /* Show page: collapse two-column panel grid to single column */
  .entity-grid {
    grid-template-columns: 1fr;
  }

  /* Department tabs: horizontal scroll strip instead of wrapping */
  .user-department-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .user-department-tabs .entity-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Generic record-sheet card layout — applies to all record-sheet tables */
  .record-sheet {
    gap: 8px;
    overflow-x: visible;
  }

  .record-sheet .record-sheet-header {
    display: none;
  }

  .record-sheet .record-sheet-row {
    border: 1px solid;
    border-radius: 6px;
    display: grid;
    gap: 6px 12px;
    min-height: 0;
    min-width: 0;
    padding: 12px;
  }

  .record-sheet .record-sheet-actions {
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    padding-top: 6px;
  }

  .record-sheet .flip-editor-sheet {
    height: auto;
    min-height: 0;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 0;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front .flip-editor-label {
    display: flex;
  }

  .record-sheet .flip-editor-sheet .flip-editor-front .flip-editor-label > span:first-child {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
  }

  .record-sheet .flip-editor-sheet .flip-editor-value {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .record-sheet .flip-editor-sheet .flip-editor-back {
    min-height: 0;
    padding: 0;
  }

  /* Generic mobile card label injection — any cell with a data-label attribute
     (record-sheet tables, the timesheet show entry grids, and the invoice
     show line-item rows) renders that label above its content via ::before */
  .record-sheet [data-label],
  .timesheet-entry-grid [data-label],
  .invoice-charge-list [data-label] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .record-sheet [data-label]::before,
  .timesheet-entry-grid [data-label]::before,
  .invoice-charge-list [data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
  }

  /* Invoice show page: line-item grid (.invoice-line-header/.invoice-task-row/
     .invoice-charge-row/.invoice-day-row) collapses from the 900px
     horizontal-scroll desktop table into stacked cards, reusing the generic
     data-label pattern above. Desktop rules live at the
     ".invoice-line-header" section. */
  .invoice-charge-list {
    overflow-x: visible;
  }

  .invoice-task-group {
    min-width: 0;
  }

  .invoice-line-header {
    display: none;
  }

  .invoice-task-row,
  .invoice-charge-row,
  .invoice-day-row {
    border-radius: 6px;
    gap: 6px 12px;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    min-width: 0;
    padding: 10px 12px;
  }

  .invoice-charge-row,
  .invoice-day-row {
    padding-left: 12px;
  }

  .invoice-task-row > :first-child,
  .invoice-charge-row > :first-child,
  .invoice-day-row > :first-child {
    grid-column: 1 / -1;
  }

  .invoice-task-row > div:empty,
  .invoice-charge-row > div:empty,
  .invoice-day-row > div:empty {
    display: none;
  }

  /* Users: card grid layout */
  .record-sheet-users .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar role"
      "avatar manager"
      "actions actions";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-users .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-users .record-sheet-row > :nth-child(3) {
    align-self: start;
    font-size: 13px;
    grid-area: role;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-manager-cell {
    font-size: 13px;
    grid-area: manager;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-users .record-sheet-manager-cell.is-empty {
    display: none;
  }

  .record-sheet-users .record-sheet-actions {
    grid-area: actions;
  }

  /* Standard Rates: card grid layout */
  .record-sheet-standard-rates .record-sheet-row {
    grid-template-areas:
      "code description"
      "rate tier"
      "dept dept"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-standard-rates .record-sheet-row > :nth-child(1) { grid-area: code; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(2) { grid-area: description; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(3) { grid-area: rate; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(4) { grid-area: tier; }
  .record-sheet-standard-rates .record-sheet-row > :nth-child(5) { grid-area: dept; }

  .record-sheet-standard-rates .record-sheet-actions {
    grid-area: actions;
  }

  /* Expense Schedules: card grid layout */
  .record-sheet-expense-schedules .record-sheet-row {
    grid-template-areas:
      "code       description"
      "rate       unit"
      "dept       std-rate"
      "actions    actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-expense-schedules .record-sheet-row > :nth-child(1) { grid-area: code; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(2) { grid-area: description; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(3) { grid-area: rate; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(4) { grid-area: unit; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(5) { grid-area: dept; }
  .record-sheet-expense-schedules .record-sheet-row > :nth-child(6) { grid-area: std-rate; }

  .record-sheet-expense-schedules .record-sheet-actions {
    grid-area: actions;
  }

  /* Companies: card grid layout */
  .record-sheet-companies .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar contact"
      "details details";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-companies .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-companies .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: details;
    min-height: 0;
    padding: 0;
  }

  /* Project client: match the company card layout */
  .record-sheet-project-client .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar contact"
      "notes notes";
    grid-template-columns: 61px minmax(0, 1fr);
  }

  .record-sheet-project-client .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 8px;
  }

  .record-sheet-project-client .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: name;
    min-height: 0;
  }

  .record-sheet-project-client .record-sheet-row > :nth-child(3) {
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-client .record-sheet-row > :nth-child(4) {
    grid-area: notes;
    min-height: 0;
    padding: 0;
  }

  /* Projects: card grid layout */
  .record-sheet-projects .record-sheet-row {
    grid-template-areas:
      "project project"
      "company company"
      "progress progress"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(1) {
    grid-area: project;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: company;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-projects .record-sheet-row > :nth-child(3) {
    grid-area: progress;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-projects .record-sheet-actions {
    grid-area: actions;
  }

  /* Timesheets: card grid layout */
  .record-sheet-timesheets .record-sheet-row {
    grid-template-areas:
      "user    user"
      "week    hours"
      "status  status";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(1) {
    grid-area: user;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: week;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: hours;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-timesheets .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: status;
    min-height: 0;
    padding: 0;
  }

  /* Invoices: card grid layout */
  .record-sheet-invoices .record-sheet-row {
    grid-template-areas:
      "invoice invoice"
      "amount  amount"
      "state   state";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(1) {
    grid-area: invoice;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: amount;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .record-sheet-invoices .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: state;
    min-height: 0;
    padding: 0;
  }

  /* Sub Task Templates: card grid layout */
  .record-sheet-subtasks .record-sheet-row {
    grid-template-areas:
      "avatar title"
      "avatar dept"
      "actions actions";
    grid-template-columns: 52px 1fr;
  }

  .record-sheet-subtasks .record-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-subtasks .record-sheet-row > :nth-child(2) { grid-area: title; }
  .record-sheet-subtasks .record-sheet-row > :nth-child(3) { grid-area: dept; }

  .record-sheet-subtasks .record-sheet-actions {
    grid-area: actions;
  }

  /* Project Contacts: card grid layout */
  .record-sheet-project-contacts .record-sheet-row {
    grid-template-areas:
      "avatar  contact actions"
      "avatar  company actions"
      "details details actions";
    grid-template-columns: 61px minmax(0, 1fr) 64px;
  }

  .record-sheet-project-contacts .contacts-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 8px;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(2) {
    align-self: end;
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(3) {
    grid-area: company;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(4) {
    grid-area: details;
    min-height: 0;
    overflow: visible;
    padding: 0;
    word-break: break-all;
  }

  .record-sheet-project-contacts .record-sheet-actions {
    align-self: stretch;
    grid-area: actions;
    justify-content: center;
    padding: 0;
  }

  /* Project task sheet (embedded in project show): card grid layout */
  .project-task-sheet .record-sheet-row {
    grid-template-areas:
      "dept actions"
      "desc desc"
      "fee po";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .project-task-sheet .record-sheet-row > :nth-child(1) { grid-area: dept; }

  .project-task-sheet .record-sheet-row > :nth-child(2) {
    grid-area: desc;
    overflow: visible;
    white-space: normal;
  }

  .project-task-sheet .record-sheet-row > :nth-child(3) { grid-area: fee; }

  .project-task-sheet .record-sheet-row > :nth-child(4) { grid-area: po; }

  .project-task-sheet .record-sheet-actions {
    grid-area: actions;
  }

  .project-task-sheet .task-subtask-row {
    display: block;
  }

  /* Standalone tasks index (has extra lock-status column): card grid layout */
  .record-sheet-tasks .record-sheet-row {
    grid-template-areas:
      "dept    dept"
      "desc    desc"
      "billing fee"
      "po      lock"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(1) { grid-area: dept; }

  .record-sheet-tasks .record-sheet-row > :nth-child(2) {
    grid-area: desc;
    overflow: visible;
    white-space: normal;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(3) { grid-area: billing; }
  .record-sheet-tasks .record-sheet-row > :nth-child(4) { grid-area: fee; }

  .record-sheet-tasks .record-sheet-row > :nth-child(5) {
    grid-area: po;
    overflow: visible;
    white-space: normal;
  }

  .record-sheet-tasks .record-sheet-row > :nth-child(6) { grid-area: lock; }

  .record-sheet-tasks .record-sheet-actions {
    grid-area: actions;
  }

  /* Contacts sheet (uses contacts-specific class names): card grid layout */
  .contacts-sheet .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar company"
      "methods methods";
    grid-template-columns: 52px 1fr;
  }

  .contacts-sheet .contacts-sheet-avatar-cell {
    align-self: center;
    grid-area: avatar;
    min-height: 0;
    padding: 0;
  }

  .contacts-sheet .contact-name-cell {
    align-self: end;
    grid-area: name;
    min-height: 0;
    overflow: visible;
    padding: 0;
    white-space: normal;
  }

  .contacts-sheet .record-sheet-row > :nth-child(3) { grid-area: company; }
  .contacts-sheet .record-sheet-row > :nth-child(4) {
    grid-area: methods;
    min-height: 0;
    padding: 0;
  }

  /* ============================================================
     Timesheet show page (timesheets#show / manager_show) — mobile
     Collapses the detail heading to a single column, lets the header
     action buttons wrap, and converts the Time/Charges entry grids
     (.timesheet-entry-grid) from the 1104px horizontal-scroll desktop
     layout into stacked cards, reusing the generic data-label pattern.
     Desktop rules live at the ".timesheet-entry-grid" section above.
     ============================================================ */
  .timesheet-hero {
    gap: 12px;
  }

  .timesheet-hero-actions {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }

  .timesheet-week-nav,
  .timesheet-header-actions,
  .timesheet-status-row {
    width: 100%;
  }

  .timesheet-status-row {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 0;
  }

  .week-jump-body {
    left: 0;
    right: auto; /* base anchors right:0, which pushes the panel off-screen
                    when the calendar button sits near the left edge */
  }

  .timesheet-status-row .approval-info {
    border-left: 0; /* divider reads as clutter once it wraps to its own line */
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;
  }

  .timesheet-entry-grid {
    gap: 8px;
    overflow-x: visible;
  }

  .timesheet-entry-grid .timesheet-entry-header {
    display: none;
  }

  .timesheet-entry-grid .timesheet-entry-row {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-radius: 8px;
    gap: 6px 12px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 2-up day cells on ~360px phones */
    min-width: 0; /* kills the 1104px --timesheet-min-width */
    padding: 12px;
  }

  .timesheet-entry-grid .timesheet-entry-avatar {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-height: 32px;
    padding: 0;
  }

  .timesheet-entry-grid .timesheet-entry-row-locked .timesheet-entry-avatar {
    display: flex;
  }

  .timesheet-entry-grid .timesheet-entry-meta,
  .timesheet-entry-grid .timesheet-entry-actions {
    grid-column: 1 / -1;
  }

  .timesheet-entry-grid .timesheet-entry-meta {
    padding: 0;
  }

  .timesheet-entry-grid .edit-section-modal-sheet {
    min-height: 0;
    padding: 0;
  }

  .timesheet-entry-grid .modal-editor-value,
  .timesheet-entry-grid .timesheet-entry-meta span {
    overflow: visible; /* un-truncate project/task names */
    text-overflow: clip;
    white-space: normal;
  }

  .timesheet-entry-grid .timesheet-cell-form {
    align-items: stretch; /* input and check button share the same height */
    gap: 2px 6px;
    grid-template-columns: minmax(0, 1fr) auto; /* input + inline check */
    padding: 0;
  }

  .timesheet-entry-grid .timesheet-cell-form::before {
    grid-column: 1 / -1; /* injected day label spans above the input */
  }

  .timesheet-entry-grid .timesheet-cell-submit {
    position: static; /* stop overlaying the input */
  }

  .timesheet-entry-grid .timesheet-entry-total {
    display: none; /* per-row subtotal reads as a stray value among the day
                      inputs; the tally row below carries the totals */
    justify-content: flex-start;
    padding: 0;
  }

  .timesheet-entry-grid .timesheet-total-row .timesheet-entry-total {
    display: flex; /* the tally row keeps its grand total */
  }

  .timesheet-entry-grid .timesheet-total-row .timesheet-entry-date-header {
    display: grid;
    gap: 2px; /* stacks injected label over the total value */
  }

  .timesheet-entry-grid .timesheet-total-row > div:empty {
    display: none; /* the literal empty filler divs */
  }

  .timesheet-entry-grid .timesheet-entry-actions {
    padding: 0;
    padding-top: 2px;
  }
}

/* Hide on-page headings when running inside the Hotwire Native iOS shell,
   since the native nav bar already shows the page's <title>. */
body.hotwire-native .hide-native {
  display: none !important;
}

/* With the title hide-native'd, the Add link is the first visible heading item;
   drop the offsets that assume a title baseline beside it. */
body.hotwire-native .content-heading-add-link {
  margin-left: 0;
  top: 0;
}