: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 {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 72px 240px minmax(0, 1fr);
}

.app-utility-rail {
  border-right: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 18px;
}

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

.skin-light .app-utility-rail {
  border-color: var(--light-warm-border);
  background: #f1eee7;
}

.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: 10px;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  height: 44px;
  overflow: hidden;
  text-decoration: none;
  width: 44px;
}

.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;
}

.utility-rail-slot {
  width: 44px;
  height: 44px;
  border: 1px solid;
  background: transparent;
  border-radius: 8px;
  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-image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.utility-rail-initials {
  display: block;
  line-height: 1;
}

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

.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);
}

.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);
}

.app-sidebar {
  border-right: 1px solid;
  padding: 12px;
}

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

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

.app-brand {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 12px;
}

.app-brand-logo {
  max-width: 150px;
  width: 100%;
  height: auto;
}

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

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

.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='M6 2h12v20l-3-2-3 2-3-2-3 2V2Zm3 5v2h6V7H9Zm0 4v2h6v-2H9Zm0 4v2h4v-2H9Z' 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-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.app-topbar {
  border-bottom: 1px solid;
  min-height: 48px;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

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

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

.topbar-role {
  margin-left: 8px;
  font-size: 11px;
}

.skin-dark .topbar-role {
  color: var(--muted-dark);
}

.skin-light .topbar-role {
  color: var(--muted-light);
}

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

.topbar-actions form {
  margin: 0;
}

.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-topbar-user-info {
  align-items: baseline;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

.app-content-wrapper {
  min-width: 0;
  padding: 24px;
}

.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: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  font-weight: 600;
}

.skin-dark .content-heading {
  background: transparent;
}

.skin-light .content-heading {
  background: transparent;
}

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

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

.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;
}

.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-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-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-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-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 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: stretch;
}

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

.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;
}

.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;
}

.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);
}

.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-active::after {
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  position: absolute;
  right: 8px;
}

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

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

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

.skin-dark .entity-tab:hover,
.skin-dark .entity-tab:focus-visible {
  background: rgba(39, 39, 42, 0.6);
  color: var(--text-dark);
}

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

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

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

.skin-light .entity-tab:hover,
.skin-light .entity-tab:focus-visible {
  background: rgba(216, 227, 242, 0.65);
  color: var(--text-light);
}

.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;
  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-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-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;
}

.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);
}

.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-start;
  min-height: 60px;
  padding: 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-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;
}

.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, background-color 120ms ease;
}

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

.project-state-tab-selected::after {
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 8px;
  position: absolute;
  right: 8px;
}

.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);
}

.skin-dark .project-state-tab:hover,
.skin-dark .project-state-tab:focus-visible {
  background: rgba(39, 39, 42, 0.6);
}

.skin-light .project-state-tab:hover,
.skin-light .project-state-tab:focus-visible {
  background: rgba(216, 227, 242, 0.65);
}

.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(210px, 1.35fr) minmax(260px, 1.5fr) minmax(140px, 0.8fr) minmax(210px, 1fr) minmax(190px, auto);
  --sheet-min-width: 980px;
}

.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: 10px;
}

.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-invoice {
  --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='M7 3h10a2 2 0 0 1 2 2v16l-3-2-2 2-2-2-2 2-2-2-3 2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%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-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' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.35' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16M7 17v-5M12 17V7M17 17v-8'/%3E%3Cpath d='M5 4h14v16H5z'/%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: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(190px, 1.2fr) minmax(120px, 0.8fr) minmax(90px, auto);
  --sheet-min-width: 920px;
}

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

.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;
}

.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);
}

.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: "\2192";
  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;
}

.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-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;
}

.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(76px, 0.5fr) minmax(220px, 1.8fr) minmax(96px, 0.6fr) minmax(90px, 0.55fr) minmax(130px, 0.85fr) minmax(150px, 0.7fr);
  --sheet-min-width: 880px;
  margin: 0;
  padding: 14px 16px;
}

.task-subtask-row {
  border-top: 0;
}

.skin-dark .task-subtask-row {
  background: rgba(255, 255, 255, 0.02);
}

.skin-light .task-subtask-row {
  background: rgba(15, 23, 42, 0.02);
}

.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 {
  width: fit-content;
}

.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: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-subtask-chip {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  padding: 3px 4px 3px 10px;
}

.task-subtask-chip form {
  display: inline-flex;
  margin: 0;
}

.task-subtask-remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  opacity: 0.7;
  padding: 0;
  width: 18px;
}

.task-subtask-remove:hover,
.task-subtask-remove:focus-visible {
  color: var(--danger);
  opacity: 1;
}

.task-subtask-empty {
  font-size: 12px;
  font-weight: 500;
}

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

.skin-light .task-subtask-chip {
  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-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;
  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;
}

.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 {
  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 {
  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-task-row span,
.invoice-day-row span {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.invoice-charge-row {
  font-weight: 600;
  padding-left: 28px;
}

.invoice-day-row {
  font-size: 12px;
  padding-left: 44px;
}

.invoice-hold-button {
  min-height: 26px;
  padding: 0 10px;
}

.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;
}

.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-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-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-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-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;
}

.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);
}

.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;
}

.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 0 12px 0;
  padding: 0;
}

.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) {
  .app-content-wrapper {
    padding: 16px 12px;
  }

  .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;
  }

  .app-topbar {
    padding: 8px 12px;
  }

  .app-topbar-user-info {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .topbar-actions {
    gap: 4px;
  }
}

@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;
  }
}

.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-detail-heading .content-heading-title {
  font-size: 20px;
}

.timesheet-detail-heading .content-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.timesheet-detail-heading .dashboard-actions {
  flex-wrap: nowrap;
}

.timesheet-show-page,
.timesheet-grid-panel,
.timesheet-entry-grid {
  min-width: 0;
}

.timesheet-workflow-panel {
  padding: 14px 16px;
}

.timesheet-workflow-actions,
.timesheet-state-cluster,
.timesheet-panel-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.timesheet-state-cluster {
  justify-content: flex-start;
}

.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: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

.timesheet-popover-body {
  width: min(920px, calc(100vw - 360px));
}

.timesheet-grid-panel {
  padding: 0;
}

.timesheet-panel-heading {
  border-bottom: 1px solid;
  padding: 14px 16px;
}

.timesheet-panel-heading h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.timesheet-entry-grid {
  display: grid;
  overflow-x: auto;
  padding: 14px 16px;
}

.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: 24px minmax(150px, 1.3fr) minmax(145px, 1.1fr) minmax(145px, 1.1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-expense-grid .timesheet-entry-header,
.timesheet-expense-grid .timesheet-entry-row {
  grid-template-columns: 24px minmax(150px, 1.3fr) minmax(145px, 1.1fr) minmax(145px, 1.1fr) repeat(7, 56px) 60px 70px;
}

.timesheet-entry-grid {
  --timesheet-min-width: 1040px;
}

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

.timesheet-entry-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 8px;
  text-align: left;
}

.timesheet-entry-header span {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
}

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

.timesheet-entry-row:last-child {
  border-bottom: 1px solid;
}

.timesheet-row-handle {
  align-self: stretch;
}

.timesheet-entry-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 8px;
}

.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: 6px;
  padding: 6px;
}

.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-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: flex-end;
  padding: 10px 8px;
}

.timesheet-entry-actions {
  align-items: center;
  display: flex;
  padding: 8px;
}

.timesheet-total-row {
  font-weight: 750;
}

.approved-by {
  font-size: 12px;
  text-align: right;
}

.skin-dark .timesheet-panel-heading,
.skin-dark .timesheet-entry-header,
.skin-dark .timesheet-entry-row,
.skin-dark .timesheet-cell-submit {
  border-color: var(--border-dark);
}

.skin-light .timesheet-panel-heading,
.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: #141414;
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-header {
  background: var(--light-warm-header);
  color: var(--light-warm-header-text);
}

.skin-dark .timesheet-entry-meta span,
.skin-dark .approved-by {
  color: var(--muted-dark);
}

.skin-light .timesheet-entry-meta span,
.skin-light .approved-by {
  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 (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-utility-rail {
    display: none;
  }

  .app-sidebar {
    height: 100%;
    left: 0;
    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);
  }

  .app-nav-toggle {
    display: inline-flex;
  }

  .app-nav-close {
    display: block;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .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-workflow-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .entity-dashboard-grid,
  .entity-stat-grid,
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .dashboard-header,
  .content-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid,
  .panel-grid,
  .panel-grid-equal,
  .dashboard-widget-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 {
    grid-template-columns: 1fr;
  }

  .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%;
  }

  .contacts-search {
    width: 100%;
  }

  .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: 16px;
  }

  .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;
  }

  .record-sheet [data-label] {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .record-sheet [data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
  }

  /* Users: card grid layout */
  .record-sheet-users .record-sheet-row {
    grid-template-areas:
      "avatar name"
      "avatar email"
      "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) {
    font-size: 13px;
    font-weight: 400;
    grid-area: email;
    min-height: 0;
    overflow: visible;
    padding: 0;
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
  }

  .record-sheet-users .record-sheet-row > :nth-child(4) {
    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;
  }

  /* 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:
      "role    role"
      "contact company"
      "email   email"
      "phone   phone"
      "actions actions";
    grid-template-columns: 1fr 1fr;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(1) { grid-area: role; }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(2) {
    font-size: 13px;
    grid-area: contact;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(3) {
    font-size: 13px;
    grid-area: company;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(4) {
    font-size: 13px;
    grid-area: email;
    min-height: 0;
    overflow: visible;
    padding: 0;
    word-break: break-all;
  }

  .record-sheet-project-contacts .record-sheet-row > :nth-child(5) {
    font-size: 13px;
    grid-area: phone;
    min-height: 0;
    padding: 0;
  }

  .record-sheet-project-contacts .record-sheet-actions {
    grid-area: actions;
  }

  /* Project task sheet (embedded in project show): card grid layout */
  .project-task-sheet .record-sheet-row {
    grid-template-areas:
      "dept desc"
      "fee  billing"
      "po   po"
      "actions actions";
    grid-template-columns: 1fr 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: billing; }

  .project-task-sheet .record-sheet-row > :nth-child(5) {
    grid-area: po;
    overflow: visible;
    white-space: normal;
  }

  .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;
  }
}

/* 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;
}