/* UPOS FINANCE — дизайн-система в духе прежнего UI (shadcn / legacy globals.css) */

:root {
  --radius: 0.625rem;
  --radius-lg: calc(var(--radius) * 1.25);
  --radius-xl: calc(var(--radius) * 1.4);
  --brand-navy: #141d2e;
  --brand-box: #2d6cdf;
  --brand-accent: #5eb8ff;

  --background: oklch(0.985 0.004 264);
  --foreground: oklch(0.21 0.032 264);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.032 264);
  --muted: oklch(0.94 0.012 264);
  --muted-foreground: oklch(0.48 0.03 264);
  --accent: oklch(0.93 0.025 258);
  --accent-foreground: oklch(0.26 0.06 258);
  --primary: oklch(0.52 0.18 258);
  --primary-foreground: oklch(0.99 0.005 258);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0.012 264);
  --input: oklch(0.9 0.012 264);
  --ring: oklch(0.52 0.18 258);
  --sidebar: oklch(0.975 0.006 264);
  --sidebar-foreground: oklch(0.21 0.032 264);
  --sidebar-primary: oklch(0.52 0.18 258);
  --sidebar-primary-foreground: oklch(0.99 0.005 258);
  --sidebar-accent: oklch(0.93 0.02 258);
  --sidebar-accent-foreground: oklch(0.26 0.06 258);
  --sidebar-border: oklch(0.89 0.015 264);
  --sidebar-ring: oklch(0.52 0.18 258);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-md:
    0 4px 6px -1px oklch(0 0 0 / 0.07),
    0 2px 4px -2px oklch(0 0 0 / 0.05);
  --shadow-lg:
    0 10px 15px -3px oklch(0 0 0 / 0.08),
    0 4px 6px -4px oklch(0 0 0 / 0.05);
  --card-ring: color-mix(in oklch, var(--border), transparent 15%);

  /* Form controls: neutral surface + readable text (fixes light-blue autofill etc.) */
  --control-bg: #ffffff;
  --control-fg: #141d2e;
  --control-border: oklch(0.86 0.014 264);
  --control-placeholder: oklch(0.46 0.028 264);

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
}

html.dark {
  --background: oklch(0.195 0.045 264);
  --foreground: oklch(0.96 0.012 264);
  --card: oklch(0.235 0.042 264);
  --card-foreground: oklch(0.96 0.012 264);
  --muted: oklch(0.28 0.032 264);
  --muted-foreground: oklch(0.74 0.025 264);
  --accent: oklch(0.32 0.045 258);
  --accent-foreground: oklch(0.94 0.02 258);
  --primary: oklch(0.72 0.14 252);
  --primary-foreground: oklch(0.17 0.04 264);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.62 0.16 252);
  --sidebar: oklch(0.21 0.046 264);
  --sidebar-foreground: oklch(0.94 0.015 264);
  --sidebar-primary: oklch(0.72 0.14 252);
  --sidebar-primary-foreground: oklch(0.17 0.04 264);
  --sidebar-accent: oklch(0.29 0.038 264);
  --sidebar-accent-foreground: oklch(0.94 0.015 264);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.62 0.16 252);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md:
    0 4px 6px -1px oklch(0 0 0 / 0.35),
    0 2px 4px -2px oklch(0 0 0 / 0.25);
  --shadow-lg:
    0 10px 15px -3px oklch(0 0 0 / 0.4),
    0 4px 6px -4px oklch(0 0 0 / 0.3);
  --card-ring: oklch(1 0 0 / 14%);

  --control-bg: oklch(0.26 0.036 264);
  --control-fg: oklch(0.96 0.012 264);
  --control-border: oklch(1 0 0 / 18%);
  --control-placeholder: oklch(0.68 0.022 264);
}

html.emerald:not(.dark) {
  --background: oklch(0.985 0.008 175);
  --foreground: oklch(0.22 0.04 175);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.04 175);
  --muted: oklch(0.94 0.02 175);
  --muted-foreground: oklch(0.45 0.04 175);
  --accent: oklch(0.92 0.04 165);
  --accent-foreground: oklch(0.28 0.06 165);
  --primary: oklch(0.55 0.14 165);
  --primary-foreground: oklch(0.99 0.005 165);
  --border: oklch(0.9 0.02 175);
  --input: oklch(0.9 0.02 175);
  --ring: oklch(0.55 0.14 165);
  --sidebar: oklch(0.97 0.012 175);
  --sidebar-foreground: oklch(0.24 0.04 175);
  --sidebar-primary: oklch(0.55 0.14 165);
  --sidebar-primary-foreground: oklch(0.99 0.005 165);
  --sidebar-accent: oklch(0.92 0.045 165);
  --sidebar-accent-foreground: oklch(0.28 0.06 165);
  --sidebar-border: oklch(0.88 0.025 175);
  --sidebar-ring: oklch(0.55 0.14 165);

  --control-bg: #ffffff;
  --control-fg: oklch(0.18 0.045 175);
  --control-border: oklch(0.86 0.022 175);
  --control-placeholder: oklch(0.44 0.035 175);
}

html.emerald.dark {
  --background: oklch(0.22 0.028 175);
  --foreground: oklch(0.96 0.015 175);
  --card: oklch(0.26 0.03 175);
  --card-foreground: oklch(0.96 0.015 175);
  --muted: oklch(0.3 0.032 175);
  --muted-foreground: oklch(0.78 0.04 175);
  --accent: oklch(0.34 0.05 165);
  --accent-foreground: oklch(0.93 0.02 165);
  --primary: oklch(0.72 0.13 165);
  --primary-foreground: oklch(0.18 0.035 175);
  --destructive: oklch(0.65 0.2 25);
  --border: oklch(1 0 0 / 11%);
  --input: oklch(1 0 0 / 13%);
  --ring: oklch(0.72 0.13 165);
  --sidebar: oklch(0.2 0.03 175);
  --sidebar-foreground: oklch(0.94 0.018 175);
  --sidebar-primary: oklch(0.72 0.13 165);
  --sidebar-primary-foreground: oklch(0.18 0.035 175);
  --sidebar-accent: oklch(0.3 0.04 175);
  --sidebar-accent-foreground: oklch(0.94 0.018 175);
  --sidebar-border: oklch(1 0 0 / 11%);
  --sidebar-ring: oklch(0.72 0.13 165);

  --control-bg: oklch(0.29 0.032 175);
  --control-fg: oklch(0.96 0.015 175);
  --control-border: oklch(1 0 0 / 16%);
  --control-placeholder: oklch(0.7 0.035 175);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  color-scheme: light;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

html.dark {
  color-scheme: dark;
}

html.emerald.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  font-size: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.55;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* ——— Sidebar ——— */
.sidebar {
  width: 16rem;
  flex-shrink: 0;
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  display: flex;
  flex-direction: column;
  /* Остаёмся в окне просмотра: профиль внизу всегда виден, даже на длинных страницах (Настройки → Интеграции). */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

html.dark .sidebar {
}

.sidebar-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 86px;
  padding: 0 15px;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar);
}

.sidebar-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 49px;
  gap: 0.5rem;
}

.sidebar-rail-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 22%);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--sidebar-accent), transparent 62%);
  color: var(--sidebar-foreground);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.18s ease;
}

.sidebar-rail-toggle:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-rail-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--sidebar-ring), transparent 55%);
}

body.sidebar-rail .sidebar-rail-toggle-icon {
  transform: rotate(180deg);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 182px;
  height: 49px;
  min-height: 49px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  margin: -0.2rem;
  padding: 0.2rem;
  outline: none;
  transition: background 0.15s ease;
}

.brand-lockup:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring), transparent 55%);
}

.brand-lockup:hover .brand-lockup-fin {
  color: color-mix(in oklch, var(--brand-accent), var(--brand-box) 25%);
}

.brand-octopus {
  flex-shrink: 0;
  display: block;
}

.brand-lockup-text {
  min-width: 0;
  width: 124px;
  padding-top: 0;
}

.brand-lockup-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  width: 100%;
  line-height: 1;
}

.brand-lockup-upos {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 19px;
  white-space: nowrap;
  color: var(--foreground);
}

.brand-lockup-fin {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 19px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--brand-accent);
  transition: color 0.15s ease;
}

/* Сайдбар: знак и слово рядом одной «линией», без перегруза по высоте */
.sidebar-head .brand-octopus {
  width: 42px;
  height: 42px;
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 7px rgba(18, 35, 56, 0.16));
}

.sidebar-head .brand-octopus--raster {
  object-fit: contain;
}

.sidebar-head .brand-lockup-upos,
.sidebar-head .brand-lockup-fin {
  font-size: 18px;
  line-height: 19px;
}

.sidebar-head .brand-lockup-title {
  gap: 0.08rem;
}

.brand-lockup-sub {
  margin: 0.35rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--muted-foreground);
  max-width: 11.5rem;
}

.nav {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.workspace-switcher {
  margin: 0 0 0.75rem;
  border-radius: var(--radius-lg);
}

.workspace-switcher > summary {
  list-style: none;
}

.workspace-switcher > summary::-webkit-details-marker {
  display: none;
}

.workspace-switcher-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.75rem;
  padding: 0.62rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 18%);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--sidebar-accent), transparent 40%),
      color-mix(in oklch, var(--sidebar), transparent 0%) 58%
    );
  color: var(--sidebar-foreground);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.workspace-switcher-trigger:hover,
.workspace-switcher[open] .workspace-switcher-trigger {
  border-color: color-mix(in oklch, var(--sidebar-primary), transparent 48%);
  box-shadow: 0 10px 26px color-mix(in oklch, var(--sidebar-primary), transparent 90%);
}

.workspace-switcher-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--sidebar-ring), transparent 55%);
}

.workspace-switcher-mark,
.workspace-option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.72rem;
  background: color-mix(in oklch, var(--sidebar-primary), transparent 84%);
  color: color-mix(in oklch, var(--sidebar-primary), var(--sidebar-foreground) 18%);
  font-size: var(--text-base);
  font-weight: 600;
  flex-shrink: 0;
}

.workspace-switcher-current,
.workspace-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.workspace-switcher-kicker {
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 42%);
}

.workspace-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}

.workspace-switcher-chevrons {
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 42%);
  transition: transform 0.18s ease;
}

.workspace-switcher[open] .workspace-switcher-chevrons {
  transform: rotate(180deg);
}

.workspace-switcher-panel {
  margin-top: 0.35rem;
  padding: 0.45rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 14%);
  background: color-mix(in oklch, var(--sidebar), var(--card) 28%);
  box-shadow: var(--shadow-md);
}

.workspace-switcher-head {
  padding: 0 0.15rem 0.3rem;
}

.workspace-switcher-head-title {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 600;
}

.workspace-switcher-head-note {
  display: block;
  margin-top: 0.22rem;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 38%);
}

.workspace-search {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  height: 2.15rem;
  padding: 0 0.58rem;
  border: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 18%);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--sidebar), var(--muted) 24%);
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 34%);
}

.workspace-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sidebar-foreground);
  font: inherit;
  font-size: var(--text-sm);
}

.workspace-search input::placeholder {
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 48%);
}

.workspace-options {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  margin-top: 0.25rem;
  max-height: 18rem;
  overflow: auto;
  padding-right: 0.12rem;
}

.workspace-option-form {
  margin: 0;
}

.workspace-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--sidebar-foreground);
  padding: 0.35rem 0.45rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.workspace-option:hover {
  background: color-mix(in oklch, var(--sidebar-accent), transparent 45%);
}

.workspace-option.active {
  background: color-mix(in oklch, var(--sidebar-primary), transparent 86%);
  color: color-mix(in oklch, var(--sidebar-primary), var(--sidebar-foreground) 18%);
}

.workspace-option.active .workspace-option-mark {
  background: color-mix(in oklch, var(--sidebar-primary), transparent 72%);
}

.workspace-option-mark--general {
  color: var(--sidebar-foreground);
  background: color-mix(in oklch, var(--sidebar-accent), transparent 28%);
}

.workspace-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 600;
}

.workspace-option-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  line-height: 1.25;
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 40%);
}

.workspace-option-badge {
  align-self: center;
  padding: 0.16rem 0.38rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--sidebar-primary), transparent 82%);
  color: color-mix(in oklch, var(--sidebar-primary), var(--sidebar-foreground) 12%);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 600;
}

.workspace-switcher-empty {
  margin: 0;
  padding: 0.8rem 0.4rem;
  text-align: center;
  color: color-mix(in oklch, var(--sidebar-foreground), transparent 42%);
  font-size: var(--text-sm);
}

.workspace-switcher-manage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.3rem;
  min-height: 2rem;
  padding: 0.38rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 24%);
  color: var(--sidebar-foreground);
  text-decoration: none;
  font-size: var(--text-xs);
  line-height: 1.2;
  font-weight: 600;
  background: color-mix(in oklch, var(--sidebar), var(--muted) 18%);
}

.workspace-switcher-manage > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.workspace-switcher-manage svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.workspace-switcher-manage:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.nav-link:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-link.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 600;
  border-left: 3px solid var(--primary);
  padding-left: calc(0.75rem - 3px);
}

.nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.82;
}

.nav-link.active .nav-icon {
  opacity: 1;
}

.nav-folder {
  border-radius: var(--radius-lg);
}

.nav-folder-summary {
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  user-select: none;
}

.nav-folder-summary::-webkit-details-marker {
  display: none;
}

.nav-folder-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  color: inherit;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-folder:not([open]):hover .nav-folder-row {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-folder[open] .nav-folder-row {
  background: color-mix(in oklch, var(--sidebar-accent), transparent 72%);
  color: var(--sidebar-accent-foreground);
}

.nav-folder--pinned .nav-folder-row,
.nav-folder--pinned:hover .nav-folder-row {
  background: color-mix(in oklch, var(--sidebar-accent), transparent 72%);
  color: var(--sidebar-accent-foreground);
}

.nav-folder--active-branch .nav-folder-row {
  font-weight: 600;
}

.nav-folder-label {
  flex: 1;
  text-align: left;
}

.nav-folder-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.nav-folder[open] .nav-folder-chevron {
  transform: rotate(180deg);
}

.nav-folder-panel {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.15rem 0 0.45rem 0.45rem;
  margin: 0 0.35rem 0.15rem 1.35rem;
  border-left: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 35%);
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.42rem 0.65rem;
  border-radius: var(--radius);
  font-size: var(--text-base);
  line-height: 1.2;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-sublink-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.82;
}

.nav-sublink-ic svg {
  display: block;
}

.nav-sublink.active .nav-sublink-ic {
  opacity: 1;
}

.nav-sublink:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-sublink.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 600;
  border-left: 3px solid var(--primary);
  padding-left: calc(0.65rem - 3px);
}

.business-module-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workspace-module-root {
  --workspace-module-panel-shadow:
    0 16px 30px color-mix(in oklch, var(--primary), transparent 95%),
    0 1px 0 color-mix(in oklch, white, transparent 42%) inset;
  width: 100%;
  max-width: none;
  margin: 0;
}

.workspace-module-root .general-module-tabs {
  align-items: stretch;
  min-height: 2.84rem;
  padding: 0.45rem 0.55rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.workspace-module-root .general-module-tab {
  min-height: 2.18rem;
  height: 2.18rem;
}

.workspace-module-root .general-module-tab--report {
  min-width: 8.4rem;
}

.workspace-module-root .general-module-tab-activate,
.workspace-module-root .general-module-tab-close,
.workspace-module-root .general-module-tab-sync {
  min-height: 2.18rem;
  height: 2.18rem;
}

.workspace-module-root .general-report-launcher {
  padding: 0.95rem 0.95rem 0.85rem;
}

.workbench-launcher.general-report-launcher {
  border-top: 0;
  border-radius: 0 0 var(--workbench-radius-sm) var(--workbench-radius-sm);
}

.workbench-launcher .general-report-card {
  text-decoration: none;
}

.workbench-open-tabs.general-module-tabs {
  min-height: 3.08rem;
  padding-top: 0.56rem;
  border-top: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: var(--workbench-radius-sm) var(--workbench-radius-sm) 0 0;
}

.workbench-open-tabs .general-module-tab {
  border-radius: var(--workbench-radius-sm) var(--workbench-radius-sm) 0 0;
}

.business-module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.business-module-toolbar h2,
.business-module-logic h3,
.business-module-table h3 {
  margin: 0;
}

.business-module-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.business-module-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
}

.business-module-filters input {
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
}

.messenger-channel-filter-form {
  align-items: end;
}

.messenger-channel-tabs {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 0.34rem;
  min-height: 3.05rem;
  padding: 0.54rem 0.64rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 7px) var(--workbench-radius-sm, 7px) 0 0;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), white 93%), color-mix(in oklch, var(--background), var(--primary) 4%));
}

.messenger-channel-tab {
  --channel-brand: var(--primary);
  --channel-brand-strong: var(--primary);
  --channel-brand-soft: color-mix(in oklch, var(--primary), white 88%);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 9.35rem;
  min-height: 2.22rem;
  padding: 0.3rem 0.86rem 0.42rem;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground), var(--channel-brand) 24%);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0;
}

.messenger-channel-tab[data-channel-brand="telegram"] {
  --channel-brand: #229ed9;
  --channel-brand-strong: #0b76b7;
  --channel-brand-soft: #e4f5fe;
}

.messenger-channel-tab[data-channel-brand="instagram"] {
  --channel-brand: #e1306c;
  --channel-brand-strong: #833ab4;
  --channel-brand-soft: #fff0f6;
}

.messenger-channel-tab[data-channel-brand="whatsapp"] {
  --channel-brand: #25d366;
  --channel-brand-strong: #128c7e;
  --channel-brand-soft: #e7f9ef;
}

.messenger-channel-tab[data-channel-brand="facebook"] {
  --channel-brand: #1877f2;
  --channel-brand-strong: #0b5ecf;
  --channel-brand-soft: #e8f1ff;
}

.messenger-channel-tab[data-channel-brand="site"] {
  --channel-brand: #64748b;
  --channel-brand-strong: #1e293b;
  --channel-brand-soft: #eef2f7;
}

.messenger-channel-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in oklch, var(--channel-brand), white 58%);
  border-bottom-color: color-mix(in oklch, var(--channel-brand), white 72%);
  border-radius: 6px 6px 0 0;
  background: var(--channel-brand-soft);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 35%) inset;
  transform: skewX(18deg);
  transform-origin: bottom left;
}

.messenger-channel-label,
.messenger-channel-logo {
  position: relative;
  z-index: 1;
}

.messenger-channel-logo {
  display: inline-grid;
  place-items: center;
  width: 1.44rem;
  height: 1.44rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--channel-brand-strong);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.72) inset,
    0 0 0 1px rgb(255 255 255 / 0.5);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
}

.messenger-channel-tab[data-channel-brand="facebook"] .messenger-channel-logo {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
}

.messenger-channel-tab[data-channel-brand="site"] .messenger-channel-logo {
  width: 1.9rem;
  border-radius: 999px;
  font-size: 0.5rem;
}

.messenger-channel-tab b,
.messenger-dialog-side b {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--channel-brand, var(--primary)), white 78%);
  color: var(--channel-brand-strong, var(--primary));
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.messenger-channel-tab b {
  margin-left: 0.5rem;
}

.messenger-channel-tab:hover::before,
.messenger-channel-tab.active::before {
  border-color: color-mix(in oklch, var(--channel-brand), black 4%);
  background: linear-gradient(180deg, color-mix(in oklch, var(--channel-brand), white 15%), var(--channel-brand-strong));
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 45%) inset,
    0 10px 16px color-mix(in oklch, var(--channel-brand), transparent 78%);
}

.messenger-channel-tab:hover,
.messenger-channel-tab.active {
  color: white;
}

.messenger-channel-tab:hover b,
.messenger-channel-tab.active b {
  background: rgb(255 255 255 / 0.92);
  color: var(--channel-brand-strong);
}

.messenger-channel-overview {
  --channel-brand: var(--primary);
  --channel-brand-strong: var(--primary);
  --channel-brand-soft: color-mix(in oklch, var(--primary), white 90%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in oklch, var(--channel-brand), white 58%);
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--channel-brand-soft), white 15%), var(--card) 62%),
    var(--card);
  box-shadow: var(--workspace-module-panel-shadow, 0 12px 24px rgb(15 23 42 / 0.06));
}

.messenger-channel-overview[data-channel-brand="telegram"] {
  --channel-brand: #229ed9;
  --channel-brand-strong: #0b76b7;
  --channel-brand-soft: #e4f5fe;
}

.messenger-channel-overview[data-channel-brand="instagram"] {
  --channel-brand: #e1306c;
  --channel-brand-strong: #833ab4;
  --channel-brand-soft: #fff0f6;
}

.messenger-channel-overview[data-channel-brand="whatsapp"] {
  --channel-brand: #25d366;
  --channel-brand-strong: #128c7e;
  --channel-brand-soft: #e7f9ef;
}

.messenger-channel-overview[data-channel-brand="facebook"] {
  --channel-brand: #1877f2;
  --channel-brand-strong: #0b5ecf;
  --channel-brand-soft: #e8f1ff;
}

.messenger-channel-overview[data-channel-brand="site"] {
  --channel-brand: #64748b;
  --channel-brand-strong: #1e293b;
  --channel-brand-soft: #eef2f7;
}

.messenger-channel-overview-mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--channel-brand), white 8%), var(--channel-brand-strong));
  color: white;
  box-shadow: 0 12px 24px color-mix(in oklch, var(--channel-brand), transparent 78%);
  font-size: 0.78rem;
  font-weight: 950;
}

.messenger-channel-overview[data-channel-brand="facebook"] .messenger-channel-overview-mark {
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
}

.messenger-channel-overview[data-channel-brand="site"] .messenger-channel-overview-mark {
  font-size: 0.62rem;
}

.messenger-channel-overview-copy {
  min-width: 0;
}

.messenger-channel-overview-copy p,
.messenger-channel-overview-copy h2,
.messenger-channel-overview-copy span,
.messenger-channel-overview-stats strong,
.messenger-channel-overview-stats span {
  margin: 0;
}

.messenger-channel-overview-copy p {
  color: var(--channel-brand-strong);
  font-size: var(--text-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.messenger-channel-overview-copy h2 {
  margin-top: 0.12rem;
  color: var(--foreground);
  font-size: 1.1rem;
  line-height: 1.2;
}

.messenger-channel-overview-copy span {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.messenger-channel-overview-stats {
  display: grid;
  place-items: center;
  min-width: 5.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in oklch, var(--channel-brand), white 72%);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.74);
}

.messenger-channel-overview-stats strong {
  color: var(--channel-brand-strong);
  font-size: 1rem;
  line-height: 1;
}

.messenger-channel-overview-stats span {
  margin-top: 0.18rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.business-module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: start;
}

.business-module-table,
.business-module-logic {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}

.business-module-table header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}

.business-module-table header span {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
}

.business-module-table table {
  width: 100%;
  border-collapse: collapse;
}

.business-module-table th,
.business-module-table td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-sm);
}

.business-module-table th {
  color: var(--muted-foreground);
  font-weight: 700;
  background: color-mix(in oklch, var(--muted), transparent 45%);
}

.business-module-table td {
  color: var(--muted-foreground);
}

.business-module-logic {
  padding: 1rem;
}

.business-module-logic ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.products-workspace {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workspace-module-stack {
  display: grid;
  gap: 1rem;
}

.workspace-module-root [data-workspace-view][hidden],
.workspace-module-root .workspace-module-stack[hidden] {
  display: none !important;
}

.products-tabs,
.products-filter-bar,
.products-panel-head,
.product-kind-toggle,
.product-form-actions,
.products-chip-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.products-tabs {
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.products-tabs a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
}

.products-tabs a.active,
.products-tabs a:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.products-filter-bar,
.products-list-panel,
.product-form-panel,
.products-dictionaries article {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.workspace-module-root .products-filter-bar,
.workspace-module-root .products-list-panel,
.workspace-module-root .product-form-panel,
.workspace-module-root .products-dictionaries article,
.workspace-module-root .business-module-toolbar,
.workspace-module-root .business-module-table,
.workspace-module-root .business-module-logic,
.workspace-module-root .business-module-filters {
  border-color: var(--workbench-line);
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--card), white 10%), var(--card));
  box-shadow: var(--workspace-module-panel-shadow);
}

.products-filter-bar {
  padding: 0.85rem;
}

.workspace-module-root .business-module-filters {
  padding: 0.85rem;
}

.products-filter-bar label,
.product-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted-foreground);
}

.products-filter-bar input,
.products-filter-bar select,
.product-form input,
.product-form select,
.product-form textarea {
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

.workspace-module-root .products-filter-bar input,
.workspace-module-root .products-filter-bar select,
.workspace-module-root .product-form input,
.workspace-module-root .product-form select,
.workspace-module-root .product-form textarea,
.workspace-module-root .business-module-filters input {
  border-color: var(--control-border);
  background: var(--control-bg);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 44%) inset;
}

.products-filter-actions,
.products-filter-inline-form {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.products-filter-actions {
  margin-left: auto;
  flex-wrap: wrap;
}

.products-filter-bar .products-import-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  cursor: pointer;
}

.products-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.products-layout:has(> .products-list-panel:not([hidden])):has(> .product-form-panel:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 31rem);
}

.products-panel-head {
  display: grid;
  grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
  grid-template-areas:
    "title top"
    "filters filters";
  align-items: center;
  gap: 0.55rem 0.75rem;
  justify-content: space-between;
  padding: 0.72rem 1rem 0.62rem;
  border-bottom: 1px solid var(--border);
}

.products-panel-title {
  grid-area: title;
  min-width: 0;
}

.products-panel-stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.products-panel-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  color: var(--muted-foreground);
  white-space: nowrap;
}

.products-panel-top-actions {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
}

.products-catalog-filter {
  display: grid;
  grid-template-columns:
    minmax(14rem, 1.7fr)
    minmax(7rem, 0.8fr)
    repeat(4, minmax(7.5rem, 1fr))
    minmax(7.5rem, 0.9fr)
    2.2rem;
  grid-area: filters;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0.2rem 0;
}

.products-catalog-filter label {
  position: relative;
  display: block;
  min-width: 0;
}

.products-catalog-filter label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.products-catalog-filter input,
.products-catalog-filter select,
.products-page-size--footer select {
  width: 100%;
  height: 2.55rem;
  min-height: 2.55rem;
  border: 1px solid color-mix(in srgb, var(--control-border, var(--border)) 84%, #b9c4d3);
  border-radius: 5px;
  background: color-mix(in oklch, var(--control-bg, var(--background)), white 5%);
  color: var(--foreground);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 32%) inset,
    0 1px 2px color-mix(in oklch, var(--foreground), transparent 94%);
  font: inherit;
}

.products-multi-filter {
  position: relative;
  min-width: 0;
}

.products-multi-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 2.55rem;
  min-height: 2.55rem;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--control-border, var(--border)) 84%, #b9c4d3);
  border-radius: 5px;
  background: color-mix(in oklch, var(--control-bg, var(--background)), white 5%);
  color: var(--foreground);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 32%) inset,
    0 1px 2px color-mix(in oklch, var(--foreground), transparent 94%);
  cursor: pointer;
  list-style: none;
  font: inherit;
}

.products-multi-filter summary::-webkit-details-marker {
  display: none;
}

.products-multi-filter summary::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  width: 0.48rem;
  height: 0.48rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  opacity: 0.75;
}

.products-multi-filter[open] summary {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent),
    0 1px 0 color-mix(in oklch, white, transparent 28%) inset;
}

.products-multi-filter summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-multi-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  left: 0;
  right: auto;
  display: grid;
  gap: 0.12rem;
  width: max(100%, 18rem);
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: 17rem;
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 16px 36px rgb(15 23 42 / 0.18);
}

.products-catalog-status .products-multi-filter-menu {
  right: 0;
  left: auto;
}

.products-multi-filter-menu label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.32rem 0.38rem;
  border-radius: 4px;
  color: var(--foreground);
  font-weight: 650;
  cursor: pointer;
}

.products-multi-filter-menu .products-multi-filter-select-all {
  position: sticky;
  top: -0.45rem;
  z-index: 1;
  margin: -0.45rem -0.45rem 0.2rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--card) 94%, var(--primary));
  color: var(--foreground);
}

.products-multi-filter-menu label:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.products-multi-filter-menu input {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--primary);
  box-shadow: none;
}

.products-multi-filter-menu label > span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: hidden;
  clip: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
}

.products-multi-filter-menu p {
  margin: 0;
  padding: 0.4rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.products-catalog-filter input {
  padding: 0.45rem 2.35rem 0.45rem 2.15rem;
}

.products-catalog-filter select,
.products-page-size--footer select {
  padding: 0.45rem 2rem 0.45rem 0.75rem;
}

.products-catalog-filter input:focus,
.products-catalog-filter select:focus,
.products-page-size--footer select:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent),
    0 1px 0 color-mix(in oklch, white, transparent 28%) inset;
  outline: none;
}

.products-catalog-search::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--muted-foreground);
  border-radius: 999px;
  transform: translateY(-55%);
  pointer-events: none;
}

.products-catalog-search::after {
  content: "";
  position: absolute;
  top: calc(50% + 0.35rem);
  left: 1.42rem;
  width: 0.45rem;
  height: 2px;
  border-radius: 999px;
  background: var(--muted-foreground);
  transform: rotate(45deg);
  pointer-events: none;
}

.products-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.55rem;
  border-radius: 5px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.products-filter-clear {
  width: 2.2rem;
  border: 1px solid transparent;
  color: var(--muted-foreground);
  font-size: 1.55rem;
}

.products-filter-clear:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.products-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: nowrap;
  margin-left: 0;
  padding-top: 0;
}

.products-panel-actions .btn,
.products-panel-actions .products-import-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  min-height: 2.45rem;
  padding-inline: 0.85rem;
  white-space: nowrap;
}

.products-panel-actions > .btn {
  min-width: 7rem;
}

.products-panel-actions .products-import-trigger {
  cursor: pointer;
}

.products-page-size--footer {
  display: block;
  width: 7.4rem;
  min-width: 7.4rem;
}

.products-page-size--footer > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1500px) {
  .products-catalog-filter {
    grid-template-columns: minmax(14rem, 1.7fr) minmax(7rem, 0.8fr) repeat(3, minmax(7.5rem, 1fr)) 2.2rem;
  }
}

@media (max-width: 1180px) {
  .products-panel-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "top"
      "filters";
    align-items: stretch;
  }

  .products-catalog-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-catalog-filter .products-catalog-search {
    grid-column: 1 / -1;
  }

  .products-filter-clear {
    width: 100%;
  }

  .products-panel-actions {
    justify-self: start;
    flex-wrap: wrap;
  }

  .products-panel-top-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .products-catalog-filter {
    grid-template-columns: minmax(0, 1fr);
  }
}

.products-panel-head h2,
.products-dictionaries h2,
.product-form-section h3 {
  margin: 0;
}

.products-panel-head span,
.product-form-hint,
.products-dictionaries p,
.products-table small {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.products-panel-head .products-catalog-filter label > span {
  font-size: 1px;
}

.products-panel-head .products-catalog-filter .products-multi-filter-menu label > span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: hidden;
  clip: auto;
  color: var(--foreground);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-search-hit {
  padding: 0 0.08rem;
  border-radius: 3px;
  background: #fff176;
  color: inherit;
}

.products-table-wrap {
  overflow-x: auto;
}

.products-table-wrap--catalog {
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 22%, var(--workbench-line, var(--border)));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  height: clamp(34rem, calc(100vh - 17rem), 72rem);
  max-height: none;
  overflow: auto;
  scrollbar-gutter: stable;
}

.products-catalog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.62rem 0.75rem 0.75rem;
}

.products-catalog-footer-meta,
.products-catalog-footer .products-panel-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.products-pagination {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.products-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.48rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 5px;
  background: var(--card);
  color: var(--foreground);
  font-weight: 800;
  text-decoration: none;
}

.products-page-link:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.products-page-link.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.products-page-link.disabled {
  pointer-events: none;
  opacity: 0.45;
}

.products-page-count {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

@media (max-width: 860px) {
  .products-catalog-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .products-catalog-footer-meta {
    justify-content: flex-start;
  }
}

.products-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid color-mix(in srgb, #f0c74a 55%, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in srgb, #fff0b8 72%, var(--card));
}

.products-bulk-toolbar[hidden] {
  display: none !important;
}

.products-bulk-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.products-bulk-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.products-bulk-summary strong {
  font-size: var(--text-sm);
}

.products-bulk-summary small {
  color: var(--muted-foreground);
  line-height: 1.35;
}

.products-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.products-bulk-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

@media (max-width: 1440px) {
  .products-bulk-toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 980px) {
  .products-bulk-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

.products-bulk-dialog {
  width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
}

.products-bulk-dialog::backdrop {
  background: rgb(15 23 42 / 0.42);
}

.products-bulk-dialog-panel {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 4px;
  background: var(--card);
  box-shadow: 0 24px 64px rgb(15 23 42 / 0.22);
}

.products-bulk-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.products-bulk-dialog-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.products-bulk-dialog-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.products-bulk-dialog-body {
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem 1.35rem 1rem;
}

.products-bulk-dialog-row {
  display: grid;
  grid-template-columns: 1rem minmax(9rem, 1fr) minmax(15rem, 1.55fr);
  gap: 0.7rem;
  align-items: center;
  color: var(--foreground);
  font-weight: 600;
}

.products-bulk-dialog-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.products-bulk-dialog-row input[list] {
  min-height: 2.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: 5px;
  background: var(--control-bg, var(--background));
  color: var(--foreground);
  font: inherit;
}

.products-bulk-dialog-row input[list]:disabled {
  opacity: 0.58;
}

.products-bulk-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.35rem 1.1rem;
}

.products-table {
  width: 100%;
  border-collapse: collapse;
}

.products-catalog-table {
  --products-table-blue: var(--brand-accent, #5eb8ff);
  --products-table-blue-strong: var(--brand-box, #2d6cdf);
  --products-table-head-bg: color-mix(in srgb, var(--products-table-blue) 22%, var(--card));
  --products-table-row-alt-bg: color-mix(in srgb, var(--products-table-blue) 8%, var(--card));
  --products-table-row-hover-bg: color-mix(in srgb, var(--products-table-blue-strong) 10%, var(--card));
  min-width: 76rem;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 26%, var(--workbench-line, var(--border)));
  background: var(--card);
}

.products-table th,
.products-table td {
  padding: 0.72rem 0.85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
}

.products-table th {
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 45%);
}

.products-catalog-table th,
.products-catalog-table td {
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 18%, var(--workbench-line, var(--border)));
}

.products-catalog-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.48rem 0.78rem;
  background: var(--products-table-head-bg);
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 20%);
  font-size: var(--text-xs);
  font-weight: 820;
  text-transform: uppercase;
  white-space: nowrap;
}

.products-catalog-table td {
  height: 4.45rem;
  min-height: 4.45rem;
  padding-block: 0.52rem;
  background: var(--card);
  vertical-align: middle;
}

.products-check-col {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  text-align: center !important;
}

.products-photo-col {
  width: 4.2rem;
  min-width: 4.2rem;
  max-width: 4.2rem;
  padding-inline: 0.42rem !important;
  text-align: center !important;
}

.products-catalog-table th:nth-child(3),
.products-catalog-table td:nth-child(3) {
  min-width: 26rem;
}

.products-actions-head,
.products-row-actions {
  width: 6.5rem;
  min-width: 6.5rem;
  text-align: center;
}

.products-catalog-table tbody tr:nth-child(even) td {
  background: var(--products-table-row-alt-bg);
}

.products-catalog-table tbody tr:hover td {
  background: var(--products-table-row-hover-bg);
}

.products-catalog-table th:has(.products-sort-btn)::after,
.products-catalog-table .products-actions-head::after {
  content: none;
}

.products-sort-btn {
  justify-content: flex-start;
  gap: 0.35rem;
}

.products-sort-btn .org-shipments-sort-arrow {
  width: 1rem;
  min-width: 1rem;
}

.products-sort-btn.is-active .org-shipments-sort-arrow {
  font-weight: 900;
}

.products-actions-head .products-bulk-checkbox {
  vertical-align: middle;
}

.workspace-module-root .products-table th,
.workspace-module-root .business-module-table th {
  background: var(--workbench-muted-surface);
}

.workspace-module-root .products-table th,
.workspace-module-root .products-table td,
.workspace-module-root .business-module-table th,
.workspace-module-root .business-module-table td {
  border-bottom-color: var(--workbench-line);
}

.products-table td strong,
.products-table td small {
  display: block;
}

.messenger-telegram-workspace {
  display: grid;
  gap: 1rem;
}

.messenger-telegram-head,
.messenger-telegram-shell,
.messenger-telegram-subscribers,
.social-telegram-card {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 10%), var(--card));
  box-shadow: var(--workspace-module-panel-shadow, 0 12px 24px rgb(15 23 42 / 0.06));
}

.messenger-telegram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.messenger-telegram-head h2,
.messenger-telegram-chat-top h3,
.messenger-telegram-subscribers h3,
.social-telegram-card h3 {
  margin: 0;
}

.messenger-telegram-head [data-messenger-tg-status],
.social-telegram-head [data-social-tg-status] {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  margin-top: 0.45rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted), transparent 30%);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.messenger-telegram-token {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), white 90%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 750;
}

.messenger-telegram-head [data-variant="ok"],
.social-telegram-head [data-variant="ok"] {
  background: color-mix(in oklch, #20a36a, white 86%);
  color: #116241;
}

.messenger-telegram-head [data-variant="warn"],
.social-telegram-head [data-variant="warn"] {
  background: color-mix(in oklch, #f0b429, white 82%);
  color: #7a4d00;
}

.messenger-telegram-head [data-variant="err"],
.social-telegram-head [data-variant="err"] {
  background: color-mix(in oklch, var(--destructive), white 84%);
  color: var(--destructive);
}

.messenger-telegram-actions,
.social-telegram-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.messenger-telegram-shell {
  display: grid;
  grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
  min-height: clamp(34rem, 64vh, 54rem);
  overflow: hidden;
}

.messenger-telegram-list-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--workbench-line, var(--border));
  background: color-mix(in oklch, var(--muted), transparent 68%);
}

.messenger-telegram-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.messenger-telegram-panel-title small {
  display: inline-flex;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), white 84%);
  color: var(--primary);
  font-weight: 800;
}

.messenger-telegram-list {
  display: grid;
  align-content: start;
  overflow-y: auto;
}

.messenger-telegram-chat {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 4.15rem;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--workbench-line, var(--border));
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.messenger-telegram-chat:hover,
.messenger-telegram-chat.active {
  background: color-mix(in oklch, var(--primary), white 88%);
}

.messenger-telegram-chat-icon {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #2ea3f2, #1d74d8);
  color: white;
  font-size: 0.72rem;
  font-weight: 850;
}

.messenger-telegram-chat-main {
  min-width: 0;
}

.messenger-telegram-chat-main strong,
.messenger-telegram-chat-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-telegram-chat-main small,
.messenger-telegram-empty,
.messenger-telegram-placeholder {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.messenger-telegram-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--border);
}

.messenger-telegram-dot[data-enabled="1"] {
  background: #20a36a;
}

.messenger-telegram-empty {
  padding: 1rem;
  line-height: 1.45;
}

.messenger-telegram-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--card);
}

.messenger-telegram-chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.messenger-telegram-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  font-weight: 750;
}

.messenger-telegram-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.messenger-telegram-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 1rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--background), white 5%), var(--background));
}

.messenger-telegram-placeholder {
  max-width: 38rem;
  line-height: 1.55;
}

.messenger-telegram-message {
  display: grid;
  gap: 0.25rem;
  max-width: min(42rem, 78%);
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 0.55rem;
  background: var(--card);
}

.messenger-telegram-message strong {
  font-size: var(--text-xs);
}

.messenger-telegram-message span {
  white-space: pre-wrap;
  line-height: 1.45;
}

.messenger-telegram-message--out {
  align-self: flex-end;
  background: color-mix(in oklch, var(--primary), white 84%);
  border-color: color-mix(in oklch, var(--primary), white 62%);
}

.messenger-telegram-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.85rem;
  border-top: 1px solid var(--workbench-line, var(--border));
}

.messenger-telegram-composer textarea {
  resize: vertical;
  min-height: 4.3rem;
  max-height: 11rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--control-bg, var(--background));
  color: var(--foreground);
  font: inherit;
}

.messenger-telegram-subscribers header {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.social-telegram-card {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 1rem;
}

.social-telegram-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.social-telegram-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(14rem, 0.8fr);
  gap: 0.75rem;
  align-items: end;
}

.social-telegram-summary {
  display: grid;
  gap: 0.25rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--control-bg, var(--background));
}

.social-telegram-summary span {
  font-weight: 800;
}

.social-telegram-summary small {
  color: var(--muted-foreground);
}

@media (max-width: 980px) {
  .messenger-telegram-head,
  .social-telegram-head {
    align-items: stretch;
    flex-direction: column;
  }

  .messenger-telegram-actions,
  .social-telegram-actions {
    justify-content: flex-start;
  }

  .messenger-telegram-shell,
  .social-telegram-grid,
  .messenger-telegram-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .messenger-telegram-list-panel {
    border-right: 0;
    border-bottom: 1px solid var(--workbench-line, var(--border));
    max-height: 19rem;
  }
}

.messenger-inbox-workspace,
.messenger-workspace-grid {
  display: grid;
  gap: 1rem;
}

.messenger-inbox-shell,
.messenger-workspace-grid {
  display: grid;
  grid-template-columns: minmax(19rem, 0.46fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.messenger-inbox-shell {
  min-height: clamp(32rem, 66vh, 54rem);
}

.messenger-dialog-list-panel,
.messenger-dialog-chat-panel,
.messenger-telegram-settings-grid > *,
.messenger-workspace-grid > * {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 7px;
  background: var(--card);
  box-shadow: var(--workspace-module-panel-shadow, 0 12px 24px rgb(15 23 42 / 0.06));
}

.messenger-dialog-list-panel,
.messenger-dialog-chat-panel {
  min-height: clamp(32rem, 66vh, 54rem);
  overflow: hidden;
}

.messenger-dialog-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.messenger-dialog-list-head,
.messenger-dialog-chat-top,
.messenger-dialog-composer,
.messenger-telegram-settings-grid header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.messenger-dialog-list-head {
  align-items: stretch;
  flex-direction: column;
}

.messenger-dialog-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.messenger-dialog-list-head small {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  min-height: 1.55rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), white 84%);
  color: var(--primary);
  font-weight: 850;
}

.messenger-dialog-search {
  display: grid;
  gap: 0.35rem;
}

.messenger-dialog-search span {
  font-size: var(--text-xs);
  font-weight: 750;
  color: var(--muted-foreground);
}

.messenger-dialog-search input {
  min-height: 2.35rem;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--control-bg, var(--background));
  color: var(--foreground);
  font: inherit;
}

.messenger-dialog-list {
  display: grid;
  align-content: start;
  overflow-y: auto;
  max-height: clamp(24rem, 58vh, 47rem);
  overscroll-behavior: contain;
}

.messenger-dialog-item {
  display: grid;
  grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 4.6rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--workbench-line, var(--border));
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.messenger-dialog-item:hover,
.messenger-dialog-item.active {
  background: color-mix(in oklch, var(--primary), white 88%);
}

.messenger-dialog-avatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
}

.messenger-dialog-channel {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, #2ea3f2, #1d74d8);
  color: white;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.messenger-dialog-channel img,
.messenger-dialog-chat-avatar img,
.messenger-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.messenger-presence-dot {
  position: absolute;
  right: 0.08rem;
  bottom: 0.1rem;
  width: 0.68rem;
  height: 0.68rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: #94a3b8;
}

.messenger-presence-dot--online,
.messenger-thread-presence--online::before {
  background: #22c55e;
}

.messenger-presence-dot--recent,
.messenger-thread-presence--recent::before {
  background: #f59e0b;
}

.messenger-presence-dot--waiting,
.messenger-thread-presence--waiting::before {
  background: #3b82f6;
}

.messenger-dialog-main {
  min-width: 0;
}

.messenger-dialog-name-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.messenger-new-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.05rem;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #e11d48;
  color: white;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
}

.messenger-dialog-item strong,
.messenger-dialog-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-dialog-item small,
.messenger-dialog-item em,
.messenger-empty {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.messenger-dialog-item em {
  font-style: normal;
  font-weight: 750;
}

.messenger-dialog-side {
  display: grid;
  justify-items: end;
  gap: 0.34rem;
}

.messenger-dialog-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.messenger-dialog-chat-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.messenger-dialog-chat-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--primary), white 55%);
  border-radius: 50%;
  background: linear-gradient(180deg, #2ea3f2, #1d74d8);
  color: white;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.messenger-dialog-chat-top h3 {
  margin: 0;
}

.messenger-thread-presence {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 0.22rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.messenger-thread-presence::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #94a3b8;
}

.messenger-dialog-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  overflow-y: auto;
  padding: 1rem;
  background: color-mix(in oklch, var(--background), var(--primary) 2%);
}

.messenger-thread-message {
  display: grid;
  gap: 0.22rem;
  max-width: min(42rem, 78%);
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 0.55rem;
  background: var(--card);
}

.messenger-thread-message strong {
  font-size: var(--text-xs);
}

.messenger-thread-message span {
  white-space: pre-wrap;
  line-height: 1.45;
}

.messenger-message-photo {
  width: min(18rem, 100%);
  max-height: 16rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.messenger-thread-message--out {
  align-self: flex-end;
  background: color-mix(in oklch, var(--primary), white 84%);
  border-color: color-mix(in oklch, var(--primary), white 62%);
}

.messenger-thread-message--system {
  max-width: 100%;
  background: color-mix(in oklch, var(--muted), transparent 40%);
}

.messenger-dialog-composer {
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 1px solid var(--workbench-line, var(--border));
  border-bottom: 0;
}

.messenger-dialog-composer textarea {
  flex: 1 1 min(100%, 24rem);
}

.messenger-template-picker {
  flex: 1 0 100%;
  display: grid;
  gap: 0.45rem;
  max-height: 13rem;
  overflow-y: auto;
  padding: 0.55rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
}

.messenger-template-picker[hidden] {
  display: none;
}

.messenger-template-choice {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.messenger-template-choice:hover {
  border-color: color-mix(in oklch, var(--primary), white 30%);
  background: color-mix(in oklch, var(--primary), white 91%);
}

.messenger-template-choice strong,
.messenger-template-choice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-template-choice small {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.messenger-dialog-composer textarea,
.messenger-telegram-settings-grid textarea {
  width: 100%;
  resize: vertical;
  min-height: 4.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--control-bg, var(--background));
  color: var(--foreground);
  font: inherit;
}

.messenger-dialog-composer-actions {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.messenger-empty {
  padding: 1rem;
  line-height: 1.5;
}

.messenger-photo-dialog[hidden] {
  display: none;
}

.messenger-photo-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.messenger-photo-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(15 23 42 / 0.45);
}

.messenger-photo-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.15rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 24px 70px rgb(15 23 42 / 0.28);
  text-align: center;
}

.messenger-photo-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 6px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.messenger-photo-preview {
  display: inline-grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, #2ea3f2, #1d74d8);
  color: white;
  font-size: 2rem;
  font-weight: 900;
}

.messenger-photo-card span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.messenger-telegram-settings-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
}

.messenger-telegram-settings-grid form {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.messenger-telegram-settings-grid form > label:not(.business-module-check) {
  display: grid;
  gap: 0.38rem;
  padding: 0 1rem;
}

.messenger-telegram-settings-grid form > label span {
  font-size: var(--text-xs);
  font-weight: 750;
  color: var(--muted-foreground);
}

.messenger-telegram-settings-grid .business-module-check {
  margin: 0 1rem;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: 0;
}

.link-button:hover {
  text-decoration: underline;
}

.telephony-incoming-popup {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in oklch, var(--primary), white 55%);
  border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--primary), white 88%), var(--card));
  box-shadow: 0 18px 42px rgb(15 23 42 / 0.18);
}

.telephony-incoming-popup[hidden] {
  display: none;
}

.telephony-incoming-popup div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.telephony-incoming-popup small,
.telephony-incoming-popup span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.telephony-incoming-popup strong,
.telephony-incoming-popup span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .messenger-channel-overview {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .messenger-channel-overview-stats {
    grid-column: 1 / -1;
    justify-items: start;
    place-items: initial;
  }

  .messenger-inbox-shell,
  .messenger-workspace-grid,
  .messenger-telegram-settings-grid {
    grid-template-columns: 1fr;
  }

  .messenger-dialog-list-panel,
  .messenger-dialog-chat-panel {
    min-height: 24rem;
  }

  .messenger-dialog-composer,
  .messenger-dialog-composer-actions {
    flex-direction: column;
  }
}

.product-cell-main {
  display: block;
  min-height: 3.25rem;
}

.product-cell-meta {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.product-open-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.product-open-link:hover strong,
.product-open-link:focus-visible strong {
  color: var(--primary);
}

.client-open-link {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.client-open-link:hover strong,
.client-open-link:focus-visible strong {
  color: var(--primary);
}

.client-card-shell {
  display: grid;
  gap: 1rem;
}

.client-card-header,
.client-card-panel,
.client-card-metrics > div {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: var(--workspace-module-panel-shadow, 0 12px 24px rgb(15 23 42 / 0.06));
}

.client-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  box-shadow: none;
}

.client-card-header h2,
.client-card-panel h3 {
  margin: 0;
}

.client-card-header p,
.client-card-kicker,
.client-card-panel header span,
.client-card-info dt,
.client-card-conversation small,
.client-card-empty {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.client-card-kicker {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

.client-profile-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--foreground);
  font-size: 1.2rem;
  font-weight: 850;
}

.client-profile-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.client-profile-breadcrumb span {
  color: var(--muted-foreground);
  font-weight: 700;
}

.client-crm-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.client-crm-tag:hover {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.client-crm-tag[data-status="qualification"] {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.client-crm-tag[data-status="negotiation"],
.client-crm-tag[data-status="invoice"] {
  border-color: rgba(217, 119, 6, 0.25);
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}

.client-crm-tag[data-status="our_client"] {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.11);
  color: #15803d;
}

.client-crm-tag[data-status="in_work"] {
  border-color: rgba(217, 119, 6, 0.25);
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}

.client-crm-tag[data-status="paused"] {
  border-color: rgba(100, 116, 139, 0.22);
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.client-crm-tag[data-status="lost"] {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.client-profile-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.client-profile-side {
  position: sticky;
  top: 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.client-profile-photo {
  display: grid;
  place-items: center;
  height: 8rem;
  border-radius: 6px;
  background: #e5e7eb;
  overflow: hidden;
}

.client-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-profile-photo span {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 34%, #f8fafc 0 0.72rem, transparent 0.76rem),
    radial-gradient(circle at 50% 92%, #f8fafc 0 1.7rem, transparent 1.75rem),
    #c7cbd1;
}

.client-profile-photo--edit {
  width: 10rem;
  height: 8rem;
}

.client-edit-photo-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 1rem 0;
}

.client-program-picker {
  display: grid;
  gap: 0.45rem;
}

.client-program-picker > span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.client-program-picker > input {
  width: 100%;
}

.client-program-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 2.5rem;
  align-items: center;
  padding: 0.42rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
}

.client-program-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.07);
  color: var(--foreground);
  font-size: var(--text-xs);
  font-weight: 800;
  cursor: pointer;
}

.client-program-options input {
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--primary);
}

.client-program-options label:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.14);
  color: var(--primary);
}

.client-profile-menu {
  display: grid;
  gap: 0;
}

.client-profile-menu a {
  display: flex;
  align-items: center;
  min-height: 2.85rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
}

.client-profile-menu a.active {
  border-radius: 6px;
  border-bottom-color: transparent;
  background: var(--primary);
  color: #fff;
}

.client-profile-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.client-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.client-card-tabs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.55rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
}

.client-card-tabs a {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 74%);
  border-radius: 999px;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
  text-decoration: none;
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.client-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.client-card-metrics > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  box-shadow: none;
}

.client-card-metrics span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.client-card-metrics strong {
  font-size: var(--text-lg);
}

.client-balance-lines {
  display: grid;
  gap: 0.2rem;
}

.client-balance-lines--compact {
  justify-items: end;
}

.client-balance-line {
  color: var(--foreground);
  line-height: 1.2;
}

.client-balance-line--debt {
  color: #b91c1c;
}

.client-balance-line--advance {
  color: #047857;
}

.client-balance-line--zero {
  color: var(--foreground);
}

.client-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.client-card-grid--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-card-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.client-card-panel {
  overflow: hidden;
  box-shadow: none;
}

.client-card-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.client-card-info {
  display: grid;
  gap: 0;
  margin: 0;
}

.client-card-info div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.client-card-info div:last-child {
  border-bottom: 0;
}

.client-card-info dt,
.client-card-info dd {
  margin: 0;
}

.client-card-table {
  min-width: 38rem;
}

.client-card-location-card {
  min-height: 26rem;
}

.client-card-location-map {
  height: 24rem;
  border: 0;
  border-radius: 0;
}

.client-card-location-map .client-location-map-hint[hidden] {
  display: none;
}

.client-card-conversations {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}

.client-card-conversation {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in oklch, var(--muted), transparent 70%);
}

.client-card-conversation strong {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.client-platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 70%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 90%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
}

.client-card-empty {
  margin: 0;
}

.client-history-list {
  display: grid;
  padding: 0.75rem 1rem 1rem;
}

.client-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.client-history-item:last-child {
  border-bottom: 0;
}

.client-history-item::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary), transparent 86%);
  position: absolute;
  left: 8.9rem;
  top: 1.1rem;
}

.client-history-item time {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.client-history-item div {
  display: grid;
  gap: 0.2rem;
}

.client-history-item span,
.client-history-item small {
  color: var(--muted-foreground);
}

.client-history-item small {
  justify-self: end;
  white-space: nowrap;
  font-weight: 750;
}

.client-history-item--payment::before {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}

.client-history-item--crm::before {
  background: #2563eb;
}

.client-history-item--call::before,
.client-history-item--message::before {
  background: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.13);
}

.client-history-item--location::before {
  background: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.13);
}

.clients-table strong,
.clients-table small {
  display: block;
}

.client-id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.55rem;
  padding: 0 0.45rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 70%);
  border-radius: 0.35rem;
  color: var(--primary);
  font-weight: 850;
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.client-balance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 850;
  white-space: nowrap;
}

.client-balance-pill--debt {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.client-balance-pill--advance {
  color: #047857;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
}

.client-balance-pill--zero {
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 25%);
  border: 1px solid var(--workbench-line, var(--border));
}

.client-note-box {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.client-note-box textarea {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  padding: 0.75rem;
  background: var(--card);
  color: var(--foreground);
}

.client-location-panel {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in oklch, var(--muted), transparent 72%);
}

.client-location-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.client-location-status {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.client-location-map {
  width: 100%;
  height: 21rem;
  min-height: 21rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background:
    linear-gradient(135deg, rgba(226, 239, 255, 0.84), rgba(238, 247, 255, 0.96)),
    var(--card);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}

.client-location-map .leaflet-container,
.client-location-map.leaflet-container {
  font-family: inherit;
}

.client-location-map .leaflet-control-zoom {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  box-shadow: 0 0.7rem 1.4rem rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.client-location-map .leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  border-bottom-color: var(--workbench-line, var(--border));
}

.client-location-map .leaflet-control-attribution {
  border-top-left-radius: var(--workbench-radius-sm, 8px);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.client-location-map-grid,
.client-location-map-road,
.client-location-zone,
.client-location-map-hint {
  display: none;
  pointer-events: none;
}

.client-location-map--empty .client-location-map-grid,
.client-location-map--empty .client-location-map-road,
.client-location-map--empty .client-location-zone,
.client-location-map--empty .client-location-map-hint {
  display: block;
}

.client-location-map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.54;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
}

.client-location-map-road {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.client-location-map-road--main {
  width: 120%;
  height: 1.2rem;
  left: -10%;
  top: 48%;
  transform: rotate(-9deg);
}

.client-location-map-road--side {
  width: 1.05rem;
  height: 125%;
  left: 35%;
  top: -12%;
  transform: rotate(15deg);
}

.client-location-map-road--cross {
  width: 70%;
  height: 0.85rem;
  right: -8%;
  top: 24%;
  transform: rotate(24deg);
}

.client-location-zone {
  position: absolute;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.65rem;
  background: rgba(96, 165, 250, 0.15);
}

.client-location-zone--a {
  width: 18%;
  height: 24%;
  left: 12%;
  top: 14%;
}

.client-location-zone--b {
  width: 20%;
  height: 28%;
  right: 13%;
  bottom: 14%;
}

.client-location-map-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(24rem, calc(100% - 2rem));
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
  text-align: center;
  box-shadow: 0 0.75rem 1.7rem rgba(37, 99, 235, 0.12);
}

.client-leaflet-marker-wrap {
  background: transparent;
  border: 0;
}

.client-leaflet-marker {
  width: 32px;
  height: 40px;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.35));
}

.client-leaflet-marker-label {
  position: absolute;
  top: -8px;
  left: 50%;
  max-width: 7.5rem;
  transform: translateX(-50%);
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.12);
}

.clients-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
  gap: 1rem;
  padding: 1rem;
}

.clients-map-filter {
  display: grid;
  grid-template-columns: minmax(14rem, 1.35fr) repeat(4, minmax(9rem, 1fr)) auto;
  gap: 0.65rem;
  padding: 0.85rem 1rem 0;
  align-items: end;
}

.clients-map-filter label {
  display: grid;
  gap: 0.35rem;
}

.clients-map-filter span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.clients-map-filter input,
.clients-map-filter select {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  color: var(--foreground);
  padding: 0 0.7rem;
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
}

.clients-map-filter input:focus,
.clients-map-filter select:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 1120px) {
  .clients-map-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.clients-map-frame {
  min-height: 31rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in oklch, var(--muted), transparent 72%);
  overflow: hidden;
}

.clients-overview-map {
  width: 100%;
  height: 31rem;
  min-height: 31rem;
  background: var(--card);
}

.clients-overview-map--empty {
  background: var(--card);
}

.clients-overview-map .leaflet-control-zoom,
.clients-overview-map .leaflet-control-attribution {
  border-color: var(--workbench-line, var(--border));
}

.clients-overview-map .leaflet-popup-content strong,
.clients-overview-map .leaflet-popup-content span {
  display: block;
}

.clients-overview-map .leaflet-popup-content strong {
  margin-bottom: 0.25rem;
  color: var(--foreground);
  font-weight: 850;
}

.clients-overview-map .leaflet-popup-content span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.clients-overview-map:not(.clients-overview-map--empty) .clients-map-empty {
  display: none;
}

.clients-map-empty {
  display: none;
  place-items: center;
  min-height: auto;
  color: var(--muted-foreground);
  font-weight: 800;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 900;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: min(26rem, calc(100% - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--workbench-radius-sm, 8px);
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  box-shadow: 0 0.8rem 1.8rem rgba(15, 23, 42, 0.12);
}

.clients-overview-map--empty .clients-map-empty {
  display: grid;
}

.clients-map-list {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  max-height: 31rem;
  overflow: auto;
}

.clients-map-list article,
.clients-map-list p {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
}

.clients-map-list span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 650;
}

.clients-map-list a {
  color: var(--primary);
  font-weight: 850;
  text-decoration: none;
}

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

.crm-pipeline-shell {
  display: grid;
  gap: 1rem;
}

.crm-pipeline-head,
.crm-kanban-column,
.crm-kanban-card {
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: var(--workspace-module-panel-shadow, 0 12px 24px rgb(15 23 42 / 0.06));
}

.crm-pipeline-head {
  display: grid;
  grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding: 1rem;
}

.crm-pipeline-head--filters {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.75rem;
}

.crm-pipeline-head h2,
.crm-kanban-column h3 {
  margin: 0;
}

.crm-kanban-filters {
  display: grid;
  grid-template-columns: minmax(13rem, 1.35fr) repeat(3, minmax(10rem, 1fr)) auto auto auto;
  gap: 0.75rem;
  align-items: end;
}

.crm-kanban-filters label,
.crm-stage-settings label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.crm-kanban-filters input,
.crm-kanban-filters select,
.crm-stage-settings textarea {
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  background: var(--control-bg, var(--background));
  color: var(--foreground);
  font: inherit;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 44%) inset;
}

.crm-stage-settings textarea {
  min-height: 2.65rem;
  resize: vertical;
}

.crm-stage-settings--compact {
  position: relative;
  align-self: end;
}

.crm-stage-settings--compact summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius);
  color: var(--foreground);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, white), var(--card));
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.crm-stage-settings--compact[open] {
  z-index: 20;
}

.crm-stage-settings--compact form {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  gap: 0.75rem;
  width: min(34rem, 70vw);
  padding: 0.85rem;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: 0 18px 40px rgb(15 23 42 / 0.18);
}

.crm-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.crm-kanban-column {
  display: grid;
  grid-template-rows: auto auto minmax(15rem, 1fr);
  min-height: 24rem;
  overflow: hidden;
}

.crm-kanban-column > header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.crm-kanban-column > header span,
.crm-kanban-card-meta,
.crm-kanban-card-money small,
.crm-kanban-chat,
.crm-kanban-empty,
.crm-kanban-column-total {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.crm-kanban-column > header strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.crm-kanban-column-total {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
  font-weight: 800;
}

.crm-kanban-dropzone {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-height: 14rem;
  padding: 0.75rem;
  background: color-mix(in oklch, var(--muted), transparent 78%);
}

.crm-kanban-column.is-over .crm-kanban-dropzone {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: -4px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
}

.crm-kanban-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  cursor: grab;
}

.crm-kanban-card.is-dragging {
  opacity: 0.55;
}

.crm-kanban-card-top,
.crm-kanban-card-meta,
.crm-kanban-card-money,
.crm-kanban-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.crm-kanban-card-top span,
.crm-kanban-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card));
}

.crm-kanban-client {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.crm-kanban-chat {
  padding: 0.45rem 0.55rem;
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in srgb, #2aa8ff 8%, var(--card));
}

.crm-kanban-empty {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--workbench-line, var(--border)));
  border-radius: var(--workbench-radius-sm, 8px);
}

.settings-profile-modal.crm-record-dialog {
  width: min(62rem, 96vw);
  max-width: min(62rem, 96vw);
}

.crm-record-dialog .crm-record-dialog-surface {
  width: 100%;
  max-height: min(88vh, 58rem);
}

.crm-record-dialog .settings-profile-modal-scroll {
  max-height: calc(88vh - 5rem);
  overflow: auto;
}

.crm-record-form {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.crm-record-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-record-form-actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--workbench-line, var(--border));
  background: linear-gradient(180deg, transparent, var(--card) 24%);
}

.telephony-layout {
  grid-template-columns: 1fr;
}

.telephony-integrations-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: 1rem;
}

.telephony-sip-form,
.telephony-provider-table {
  min-width: 0;
}

.telephony-provider-table .inline-form {
  display: flex;
  justify-content: flex-end;
}

.settings-profile-modal.telephony-dialog {
  padding: 0;
}

.telephony-dialog .telephony-dialog-surface {
  max-width: min(58rem, calc(100vw - 2rem));
}

.warehouse-stock-critical td {
  background: color-mix(in srgb, #ef4444 10%, var(--card));
}

.warehouse-purchases-board {
  overflow: hidden;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 7px;
  background: var(--card);
  box-shadow: var(--workspace-module-panel-shadow);
}

.warehouse-purchases-head {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 0.65rem 0.75rem;
  align-items: center;
  padding: 0.72rem 0.78rem 0.62rem;
  border-bottom: 1px solid var(--border);
}

.warehouse-purchases-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.22rem;
  line-height: 1.2;
}

.warehouse-purchases-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.warehouse-purchases-icon {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.warehouse-purchases-filter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(15rem, 1.35fr) minmax(9rem, 0.7fr) minmax(10rem, 0.75fr) minmax(10rem, 0.75fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.warehouse-purchases-filter label {
  position: relative;
  display: block;
  min-width: 0;
}

.warehouse-purchases-filter label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.warehouse-purchases-filter input,
.warehouse-purchases-filter select {
  width: 100%;
  height: 2.45rem;
  min-height: 2.45rem;
  border: 1px solid color-mix(in srgb, var(--control-border, var(--border)) 84%, #b9c4d3);
  border-radius: 5px;
  background: color-mix(in oklch, var(--control-bg, var(--background)), white 5%);
  color: var(--foreground);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 32%) inset,
    0 1px 2px color-mix(in oklch, var(--foreground), transparent 94%);
  font: inherit;
}

.warehouse-purchases-search input {
  padding-left: 2rem;
}

.warehouse-purchases-search::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.72rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--muted-foreground);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

.warehouse-purchases-search::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% + 0.38rem);
  left: 1.28rem;
  width: 0.45rem;
  height: 2px;
  border-radius: 999px;
  background: var(--muted-foreground);
  transform: rotate(45deg);
}

.warehouse-purchases-filter-btn {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.warehouse-purchases-table-wrap {
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 22%, var(--workbench-line, var(--border)));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  height: clamp(34rem, calc(100vh - 17rem), 72rem);
  overflow: auto;
  scrollbar-gutter: stable;
}

.warehouse-purchases-table {
  --products-table-blue: var(--brand-accent, #5eb8ff);
  --products-table-blue-strong: var(--brand-box, #2d6cdf);
  --products-table-head-bg: color-mix(in srgb, var(--products-table-blue) 22%, var(--card));
  --products-table-row-alt-bg: color-mix(in srgb, var(--products-table-blue) 8%, var(--card));
  --products-table-row-hover-bg: color-mix(in srgb, var(--products-table-blue-strong) 10%, var(--card));
  width: 100%;
  min-width: 76rem;
  border-collapse: collapse;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 26%, var(--workbench-line, var(--border)));
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-sm);
}

.warehouse-purchases-table th,
.warehouse-purchases-table td {
  height: 4.45rem;
  min-height: 4.45rem;
  padding: 0.52rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 18%, var(--workbench-line, var(--border)));
  background: var(--card);
  vertical-align: middle;
}

.warehouse-purchases-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--products-table-head-bg);
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 20%);
  font-size: var(--text-xs);
  font-weight: 820;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.warehouse-purchases-table tbody tr:nth-child(even) td {
  background: var(--products-table-row-alt-bg);
}

.warehouse-purchases-table tbody tr:hover td {
  background: var(--products-table-row-hover-bg);
}

.warehouse-purchases-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--products-table-blue) 8%, var(--card));
  border-top: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 22%, var(--workbench-line, var(--border)));
  font-weight: 800;
}

.warehouse-purchases-check {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  text-align: center !important;
}

.warehouse-purchases-check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--primary);
}

.warehouse-purchase-number {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--foreground);
  font-weight: 800;
  text-decoration: none;
}

.warehouse-purchase-number span {
  display: inline-grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 26%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--products-table-blue) 12%, var(--card));
  color: var(--products-table-blue-strong);
  font-weight: 900;
}

.warehouse-purchase-supplier {
  color: var(--foreground);
  font-weight: 800;
  text-decoration: none;
}

.warehouse-purchase-money {
  text-align: right;
  white-space: nowrap;
}

.warehouse-purchases-table tfoot td {
  background: color-mix(in srgb, var(--products-table-blue) 8%, var(--card));
  border-top: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 22%, var(--workbench-line, var(--border)));
  padding: 0.6rem 0.8rem;
}

.warehouse-purchase-total {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.warehouse-purchase-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 6.2rem;
  justify-content: center;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 22%, var(--border));
  background: color-mix(in srgb, var(--products-table-blue) 13%, var(--card));
  color: var(--products-table-blue-strong);
  font-weight: 850;
}

.warehouse-purchase-row-actions {
  width: 6.5rem;
  min-width: 6.5rem;
  padding-inline: 0.45rem !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
}

.warehouse-purchase-row-actions form {
  display: inline-flex;
  margin: 0;
  line-height: 1;
}

.warehouse-purchase-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 23, 42, 0.34);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.warehouse-purchase-detail-backdrop.is-open {
  opacity: 1;
}

.warehouse-purchase-detail {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 46;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(62rem, calc(100vw - 17rem));
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 24%, var(--workbench-line, var(--border)));
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.24);
  overflow: hidden;
  transform: translateX(calc(100% + 1.5rem));
  transition: transform 0.2s ease;
}

.warehouse-purchase-detail.is-open {
  transform: translateX(0);
}

.warehouse-purchase-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--products-table-blue) 14%, var(--card)), var(--card));
}

.warehouse-purchase-detail-head p {
  margin: 0.18rem 0 0;
  color: var(--muted-foreground);
  font-weight: 650;
}

.warehouse-purchase-detail-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.12rem;
  font-weight: 850;
}

.warehouse-purchase-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.warehouse-purchase-detail-actions .warehouse-purchases-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.warehouse-purchase-detail-close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}

.warehouse-purchase-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.95rem 1rem 0;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 16%, var(--workbench-line, var(--border)));
  border-radius: 6px;
  background: color-mix(in srgb, var(--products-table-blue) 5%, var(--card));
}

.warehouse-purchase-detail-summary div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.warehouse-purchase-detail-summary span,
.warehouse-purchase-detail-footer span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
  text-transform: uppercase;
}

.warehouse-purchase-detail-summary strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-purchase-detail-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.85rem 1rem 0;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.warehouse-purchase-detail-tabs button {
  min-height: 2.25rem;
  padding: 0 0.65rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-weight: 800;
}

.warehouse-purchase-detail-tabs button.active {
  border-color: var(--primary);
  color: var(--foreground);
}

.warehouse-purchase-detail-table-wrap {
  margin: 0.85rem 1rem;
  overflow: auto;
}

.warehouse-purchase-detail-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 22%, var(--workbench-line, var(--border)));
  background: var(--card);
}

.warehouse-purchase-detail-table th,
.warehouse-purchase-detail-table td {
  padding: 0.72rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong) 18%, var(--workbench-line, var(--border)));
  text-align: left;
  vertical-align: middle;
  font-size: var(--text-sm);
}

.warehouse-purchase-detail-table th {
  background: var(--products-table-head-bg);
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 20%);
  font-size: var(--text-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.warehouse-purchase-detail-table td:nth-child(1),
.warehouse-purchase-detail-table td:nth-child(3),
.warehouse-purchase-detail-table td:nth-child(4),
.warehouse-purchase-detail-table td:nth-child(5),
.warehouse-purchase-detail-table th:nth-child(1),
.warehouse-purchase-detail-table th:nth-child(3),
.warehouse-purchase-detail-table th:nth-child(4),
.warehouse-purchase-detail-table th:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

.warehouse-purchase-detail-table tbody tr:nth-child(even) td {
  background: var(--products-table-row-alt-bg);
}

.warehouse-purchase-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--workbench-line, var(--border));
  background: color-mix(in srgb, var(--products-table-blue) 6%, var(--card));
}

.warehouse-purchase-detail-footer div {
  display: grid;
  gap: 0.18rem;
  text-align: right;
}

.warehouse-purchase-detail-footer strong {
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 850;
}

.warehouse-purchase-detail-total strong {
  font-size: 1.05rem;
}

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

  .client-profile-side {
    position: static;
  }

  .client-profile-menu {
    display: flex;
    overflow-x: auto;
  }

  .client-profile-menu a {
    flex: 0 0 auto;
    border-bottom: 0;
    border-right: 1px solid var(--workbench-line, var(--border));
  }

  .warehouse-purchase-detail {
    left: 0.75rem;
    width: auto;
  }

  .warehouse-purchase-detail-summary {
    grid-template-columns: 1fr;
  }
}

.warehouse-purchases-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.62rem 0.75rem 0.75rem;
}

.warehouse-purchases-footer .products-catalog-footer-meta,
.warehouse-purchases-footer .products-panel-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.warehouse-purchases-footer .products-page-size {
  margin: 0;
}

.warehouse-operation-dialog {
  padding: 0;
}

.warehouse-operation-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.warehouse-operation-choice {
  display: grid;
  gap: 0.45rem;
  min-height: 8.5rem;
  align-content: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card));
}

.warehouse-operation-choice strong {
  font-size: 1rem;
}

.warehouse-operation-choice span {
  color: var(--muted-text);
  line-height: 1.35;
}

.business-module-check {
  align-items: center;
  grid-template-columns: auto auto;
  justify-content: start;
}

.business-module-check input {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 980px) {
  .client-card-header,
  .client-card-grid,
  .client-card-grid--even {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-card-header {
    display: grid;
  }

  .client-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-pipeline-head,
  .crm-kanban-filters,
  .crm-record-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-pipeline-head--filters {
    align-items: stretch;
  }

  .telephony-integrations-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-operation-choices {
    grid-template-columns: 1fr;
  }

  .telephony-provider-table .inline-form {
    justify-content: flex-start;
  }

  .crm-stage-settings--compact,
  .crm-stage-settings--compact summary {
    width: 100%;
  }

  .crm-stage-settings--compact form {
    position: static;
    width: auto;
    margin-top: 0.5rem;
  }
}

@media (max-width: 640px) {
  .client-card-metrics,
  .client-card-info div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.product-thumb-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  flex: 0 0 3.1rem;
  border: 1px solid color-mix(in srgb, var(--products-table-blue-strong, var(--primary)) 22%, var(--workbench-line, var(--border)));
  border-radius: 0.55rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--products-table-blue, #5eb8ff) 10%, var(--card)), var(--card));
  box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground), transparent 94%);
  overflow: hidden;
}

.product-thumb-button {
  padding: 0;
  cursor: zoom-in;
}

.product-thumb-button:hover,
.product-thumb-button:focus-visible {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent),
    0 2px 8px color-mix(in oklch, var(--foreground), transparent 90%);
  outline: none;
}

.product-thumb-frame svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 58%, var(--muted-foreground));
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-photo-dialog {
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(90vh, 48rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
}

.product-photo-dialog::backdrop {
  background: rgb(15 23 42 / 0.48);
}

.product-photo-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--workbench-line, var(--border));
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 24px 70px rgb(15 23 42 / 0.28);
}

.product-photo-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--workbench-line, var(--border));
}

.product-photo-dialog-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-photo-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.product-photo-dialog-close:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
}

.product-photo-dialog-body {
  display: grid;
  place-items: center;
  min-height: min(62vh, 34rem);
  padding: 1rem;
  background: color-mix(in srgb, var(--muted) 22%, var(--card));
}

.product-photo-dialog-body img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 40rem);
  object-fit: contain;
  border-radius: 5px;
}

.products-row-actions {
  padding-inline: 0.45rem !important;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
}

.products-row-actions form {
  display: inline-flex;
  margin: 0;
  line-height: 1;
}

.products-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
  margin: 0 0.12rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, white);
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.products-action-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.products-action-icon--edit {
  color: #1d6fe8;
}

.products-action-icon--delete {
  color: #f02d3a;
}

.products-action-icon:hover:not(:disabled) {
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  background: color-mix(in srgb, currentColor 10%, var(--card));
}

.products-action-icon:disabled {
  color: color-mix(in srgb, var(--muted-foreground) 58%, transparent);
  cursor: not-allowed;
  opacity: 0.48;
}

.products-dictionary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.products-dictionary-head h2 {
  margin: 0;
}

.products-dictionary-head p {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-weight: 650;
}

.products-dictionary-table {
  min-width: 42rem;
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 18%, var(--workbench-line, var(--border)));
  border-collapse: collapse;
  background: var(--card);
}

.products-dictionary-table th,
.products-dictionary-table td {
  height: 3.4rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 14%, var(--workbench-line, var(--border)));
  background: var(--card);
  vertical-align: middle;
}

.products-dictionary-table th {
  background: color-mix(in srgb, var(--brand-accent, var(--primary)) 12%, var(--card));
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 18%);
  font-size: var(--text-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.products-dictionary-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--brand-accent, var(--primary)) 5%, var(--card));
}

.products-dictionary-table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand-accent, var(--primary)) 9%, var(--card));
}

.products-dictionary-table td:nth-child(2),
.products-dictionary-table th:nth-child(2) {
  width: 8rem;
  text-align: center;
}

.products-dictionary-table th:last-child,
.products-dictionary-table td:last-child {
  width: 7.5rem;
  text-align: center;
}

.products-dictionary-table .products-row-actions {
  display: flex;
  width: auto;
  min-width: 0;
}

.products-category-dialog {
  max-width: min(32rem, 94vw);
}

.products-category-dialog::backdrop {
  background: rgba(15, 23, 42, 0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.products-category-dialog .settings-profile-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 18%, var(--workbench-line, var(--border)));
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.products-category-dialog .settings-profile-modal-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent, var(--primary)) 9%, var(--card)), var(--card));
}

.products-category-dialog .settings-profile-modal-head p {
  margin: 0 0 0.3rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.products-category-dialog .settings-profile-modal-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 850;
}

.products-category-dialog .products-bulk-dialog-body,
.products-category-dialog .products-bulk-dialog-actions {
  background: var(--card);
}

.products-category-dialog .product-category-dialog-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.products-category-dialog .product-category-dialog-field input {
  min-height: 2.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--control-border, var(--border));
  border-radius: 5px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}

.product-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.product-form--clean {
  gap: 0.8rem;
  padding: 0.85rem;
}

.product-form-hero {
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--brand-box, var(--primary)) 16%, var(--border));
  border-radius: var(--workbench-radius-sm, 8px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--card), white 9%), var(--card));
}

.product-kind-toggle {
  align-items: stretch;
}

.product-kind-toggle label {
  flex-direction: row;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
}

.product-kind-toggle--compact {
  gap: 0.5rem;
}

.product-kind-toggle--compact label {
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
}

.product-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-form-grid--identity {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.product-form-grid .wide {
  grid-column: 1 / -1;
}

.product-form-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.product-form-section--primary {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--workbench-radius-sm, 8px);
  background: color-mix(in oklch, var(--card), white 5%);
}

.product-form-section--details {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  overflow: hidden;
}

.product-form-section--details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.65rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  list-style: none;
  color: var(--foreground);
  font-weight: 800;
}

.product-form-section--details summary::-webkit-details-marker {
  display: none;
}

.product-form-section--details summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
}

.product-form-section--details[open] summary::after {
  content: "-";
}

.product-form-section--details summary small {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.product-form-section--details[open] {
  padding-bottom: 0.85rem;
}

.product-form-section--details[open] > :not(summary) {
  margin-inline: 0.85rem;
}

.product-form-section--details[open] > summary {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--primary), transparent 94%);
}

.product-form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-form-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 0.75rem;
}

.product-form-mini-block {
  display: grid;
  gap: 0.55rem;
}

.product-form-mini-block h4 {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.product-line-grid {
  display: grid;
  gap: 0.55rem;
}

.product-line-grid--price,
.product-line-grid--barcode {
  grid-template-columns: 1fr 8rem 5rem;
}

.product-line-grid--barcode {
  grid-template-columns: 1fr 9rem;
}

.product-line-grid--stock {
  grid-template-columns: 1fr 6rem 7rem 9rem;
}

.product-line-grid--variation {
  grid-template-columns: minmax(8rem, 0.65fr) minmax(12rem, 1fr) auto;
  align-items: center;
}

.product-variation-list {
  display: grid;
  gap: 0.55rem;
}

.product-purchase-table {
  display: grid;
  gap: 0.45rem;
}

.product-purchase-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(10rem, 1fr) 7rem 7rem minmax(10rem, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.product-purchase-row--head {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.product-purchase-row .btn,
.product-line-grid--variation .btn {
  min-width: 2.25rem;
  padding-inline: 0.55rem;
}

.products-dictionaries {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.products-dictionaries:has(> article:not([hidden]) + article:not([hidden])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.products-dictionaries article {
  padding: 1rem;
}

.workspace-module-root .products-panel-head,
.workspace-module-root .business-module-table header {
  border-bottom-color: var(--workbench-line);
}

.products-chip-row span {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
}

.sales-line-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 6.5rem 6.5rem;
  gap: 0.55rem;
}

.sales-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary), transparent 88%);
  font-size: var(--text-xs);
  font-weight: 800;
}

.sales-status--paid {
  color: #0f7b36;
  background: color-mix(in oklch, #2fb463, transparent 84%);
}

.sales-status--partial,
.sales-status--reserved {
  color: #8a5a00;
  background: color-mix(in oklch, #f1a500, transparent 84%);
}

.sales-status--debt,
.sales-status--return {
  color: #a62626;
  background: color-mix(in oklch, #e44d4d, transparent 86%);
}

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

  .business-module-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .products-layout,
  .products-dictionaries {
    grid-template-columns: 1fr;
  }

  .product-form-grid,
  .product-line-grid--price,
  .product-line-grid--barcode,
  .product-line-grid--stock,
  .product-line-grid--variation,
  .product-purchase-row,
  .sales-line-grid {
    grid-template-columns: 1fr;
  }

  .product-purchase-row--head {
    display: none;
  }
}

@media (min-width: 769px) {
  body.sidebar-rail .sidebar {
    width: 4.6rem;
  }

  body.sidebar-rail .sidebar-head {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  body.sidebar-rail .sidebar-head-row {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  body.sidebar-rail .brand-lockup {
    justify-content: center;
  }

  body.sidebar-rail .brand-lockup-text {
    display: none;
  }

  body.sidebar-rail .sidebar-head .brand-octopus {
    width: 2.35rem;
    height: 2.35rem;
  }

  body.sidebar-rail .sidebar-rail-toggle {
    margin-top: 0;
  }

  body.sidebar-rail .nav {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

body.sidebar-rail .nav-label,
body.sidebar-rail .nav-folder-label,
body.sidebar-rail .nav-folder-chevron {
    display: none !important;
  }

  body.sidebar-rail .nav-link {
    justify-content: center;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  body.sidebar-rail .nav-link.active {
    padding-left: calc(0.55rem - 3px);
  }

  body.sidebar-rail .nav-folder-row {
    justify-content: center;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  body.sidebar-rail .nav-folder-panel {
    margin-left: 0;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    border-left: none;
    align-items: center;
  }

  body.sidebar-rail .nav-sublink {
    justify-content: center;
    padding: 0.42rem 0.35rem;
  }

  body.sidebar-rail .nav-sublink.active {
    padding-left: calc(0.35rem - 3px);
  }

  body.sidebar-rail .nav-sublink .nav-label {
    display: none !important;
  }

  body.sidebar-rail .nav-sublink-ic {
    opacity: 1;
  }

  body.sidebar-rail .workspace-switcher-trigger {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: auto;
    padding: 0.5rem 0.35rem;
  }

  body.sidebar-rail .workspace-switcher-current,
  body.sidebar-rail .workspace-switcher-chevrons {
    display: none !important;
  }

  body.sidebar-rail .workspace-switcher {
    margin-bottom: 0.5rem;
  }

  body.sidebar-rail .sidebar-user {
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem;
    margin: 0;
  }

  body.sidebar-rail .sidebar-user-info {
    display: none !important;
  }

  body.sidebar-rail .sidebar-logout-form {
    margin: 0;
  }
}

.sidebar-foot {
  border-top: 1px solid var(--sidebar-border);
  padding: 0.75rem;
  margin-top: auto;
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin: 0 -0.5rem;
}

.sidebar-user:hover {
  background: color-mix(in oklch, var(--muted), transparent 40%);
}

.sidebar-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--primary), transparent 15%);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html.dark .sidebar-user {
}

.sidebar-team-hint {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sidebar-foot .who {
  font-weight: 650;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--foreground);
}

.sidebar-foot .mail {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sidebar-user-role {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 1.35rem;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 72%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
  color: color-mix(in oklch, var(--primary), var(--foreground) 18%);
  font-size: var(--text-xs);
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-ccy-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.05rem 0.25rem;
  border-radius: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
}

.sidebar-foot .admin-shortcut {
  margin: 0.5rem 0 0;
}

.sidebar-foot .admin-shortcut a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  margin-left: -0.35rem;
  border-radius: var(--radius);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.sidebar-foot .admin-shortcut a:hover {
  color: var(--foreground);
  background: var(--sidebar-accent);
}

.sidebar-logout-form {
  margin: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logout-btn-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: none !important;
  background: transparent !important;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  padding: 0;
  outline: none;
}

.logout-btn-icon:hover {
  color: var(--destructive);
  background: color-mix(in oklch, var(--destructive), transparent 85%) !important;
}

.logout-btn-icon:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ——— Main column (dashboard frame) ——— */
.main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1.5rem 2rem 1.45rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 22%);
  background: color-mix(in oklch, var(--background), transparent 8%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.page-header-inner {
  width: min(100%, var(--general-canvas-max, 1280px));
  margin-inline: auto;
}

.page-header-inner:has(.general-page-header),
.page-header-inner:has(.general-reports-header) {
  max-width: none;
  width: 100%;
}

.page-eyebrow {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground), var(--primary) 22%);
}

.page-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
  color: var(--foreground);
}

.page-desc {
  margin: 0.55rem 0 0;
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.58;
  max-width: 44rem;
}

.page-body {
  flex: 1;
  padding: 1.85rem 2rem 3rem;
  background-color: var(--background);
}

@media (max-width: 1024px) {
  .page-header {
    padding: 1.25rem 1.5rem 1.15rem;
  }

  .page-body {
    padding: 1.5rem 1.5rem 2.5rem;
  }

}

/* ——— Executive dashboard shell (главная / счёт) ——— */
/* Пустой контент рабочих экранов (до подключения данных) */
.workspace-placeholder {
  min-height: min(48vh, 18rem);
}

.dash-shell {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (max-width: 960px) {
  .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .dash-kpi-row {
    grid-template-columns: 1fr;
  }
}

.dash-kpi {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem 1.1rem 1.05rem;
  box-shadow: var(--shadow-sm);
}

.dash-kpi::before {
  display: none;
}

.dash-kpi-label {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.dash-kpi-value {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--foreground), var(--muted-foreground) 24%);
}

.dash-kpi-hint {
  margin: 0.35rem 0 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: 1.45;
}

.dash-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
  gap: 1.15rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .dash-main-grid {
    grid-template-columns: 1fr;
  }
}

.dash-hero-card {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  padding: 1.65rem 1.65rem 1.75rem;
  border-radius: calc(var(--radius-xl) + 2px);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

html.dark .dash-hero-card {
  background: var(--card);
}

.dash-hero-icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

html.dark .dash-hero-icon {
  box-shadow: var(--shadow-sm);
}

.dash-hero-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  opacity: 0.95;
}

.dash-hero-body {
  min-width: 0;
}

.dash-hero-kicker {
  margin: 0 0 0.4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground), var(--primary) 18%);
}

.dash-hero-title {
  margin: 0 0 0.55rem;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.22;
  color: var(--foreground);
}

.dash-hero-text {
  margin: 0 0 1.25rem;
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--muted-foreground);
  max-width: 38rem;
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.dash-hero-actions .btn-secondary {
  font-weight: 600;
}

.dash-aside-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card), var(--muted) 35%);
  padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.dash-aside-title {
  margin: 0 0 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.dash-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dash-step {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.dash-step-num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in oklch, var(--primary), transparent 82%);
  color: color-mix(in oklch, var(--foreground), var(--primary) 15%);
}

.dash-step p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.48;
  color: color-mix(in oklch, var(--foreground), var(--muted-foreground) 35%);
}

.dash-step a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--primary), transparent 58%);
}

.dash-step a:hover {
  border-bottom-color: color-mix(in oklch, var(--primary), transparent 22%);
}

.dash-step strong {
  font-weight: 600;
  color: var(--foreground);
}

/* Совместимость: старый класс */
.desc {
  color: var(--muted-foreground);
  font-size: var(--text-base);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

.desc-tight {
  margin-bottom: 0.75rem;
}

/* ——— Cards & surfaces ——— */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.card-tight {
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
}

.card-head {
  margin: 0 0 1rem;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card-settings-compact {
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.65rem;
}

.card-head-sm {
  margin: 0 0 0.45rem;
  font-size: var(--text-sm);
}

.card-head-icon-sm {
  width: 13px;
  height: 13px;
}

.card-lead-sm {
  margin: 0 0 0.55rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  max-width: 28rem;
}

.dashed-placeholder {
  border: 1px dashed color-mix(in oklch, var(--border), transparent 25%);
  border-radius: var(--radius-xl);
  padding: 3rem 1.75rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  line-height: 1.55;
  background: color-mix(in oklch, var(--muted), transparent 78%);
}

/* ——— Forms ——— */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--foreground);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
  width: 100%;
  max-width: 28rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--control-border);
  background-color: var(--control-bg);
  color: var(--control-fg);
  caret-color: var(--control-fg);
  font-size: var(--text-base);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--control-placeholder);
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--control-fg) !important;
  caret-color: var(--control-fg);
  box-shadow: 0 0 0 1000px var(--control-bg) inset !important;
  transition: background-color 99999s ease-out;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: transparent;
  box-shadow: none;
}

textarea {
  min-height: 4.5rem;
  max-width: 100%;
  resize: vertical;
}

select {
  width: 100%;
  max-width: 28rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--control-border);
  background-color: var(--control-bg);
  color: var(--control-fg);
  font-size: var(--text-base);
}

.pwd-wrap {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.pwd-wrap .pwd-input {
  width: 100%;
  padding-right: 2.55rem;
}

.pwd-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius) * 0.85);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.pwd-toggle:hover {
  color: var(--foreground);
  background: var(--accent);
}

.mini-form .pwd-wrap {
  max-width: 18rem;
}

.mini-form .pwd-wrap .pwd-input {
  padding-right: 2.4rem;
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.57rem 1.15rem;
  border-radius: var(--radius);
  border: none;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    filter 0.15s ease,
    transform 0.1s ease;
}

.btn:hover {
  filter: brightness(1.06);
}

.btn:active {
  transform: translateY(0.5px);
}

.btn-secondary {
  background: color-mix(in oklch, var(--muted), transparent 25%);
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--accent);
  filter: none;
}

.btn-xs {
  padding: 0.36rem 0.65rem;
  font-size: var(--text-sm);
}

.btn-danger-ghost {
  background: transparent;
  color: color-mix(in oklch, var(--destructive), oklch(0.4 0.15 27) 15%);
  border: 1px solid color-mix(in oklch, var(--destructive), transparent 72%);
  box-shadow: none;
}

.btn-danger-ghost:hover {
  background: color-mix(in oklch, var(--destructive), transparent 90%);
  filter: none;
}

html.dark .btn-danger-ghost {
  color: oklch(0.82 0.12 25);
  border-color: oklch(0.45 0.14 25);
}

html.dark .btn-danger-ghost:hover {
  background: oklch(0.28 0.06 25);
}

/* ——— Alerts ——— */
.flash {
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
  line-height: 1.45;
}

.flash.ok {
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent), transparent 35%);
  color: var(--accent-foreground);
}

.flash.err {
  border: 1px solid color-mix(in oklch, var(--destructive), transparent 55%);
  background: color-mix(in oklch, var(--destructive), transparent 88%);
  color: color-mix(in oklch, var(--destructive), oklch(0.25 0.1 27) 10%);
}

.settings-ios-flash,
.organizations-flash-group,
.employees-flash-group {
  display: none !important;
}

html.dark .flash.err {
  background: color-mix(in oklch, var(--destructive), transparent 82%);
  color: oklch(0.93 0.03 27);
}

/* ——— Tabs ——— */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.tabs-pill {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--muted), transparent 45%);
  border: 1px solid var(--border);
}

.tabs-pill .tabs-item {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
}

.tabs-pill .tabs-item.active {
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.tabs-note {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.tabs a {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--text-base);
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 500;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tabs a:hover {
  color: var(--foreground);
  background: var(--accent);
}

.tabs a.active {
  background: var(--accent);
  color: var(--accent-foreground);
  font-weight: 600;
}

/* ——— Компактные карточки интеграций (<details>) ——— */
.integr-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.integr-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: none;
  overflow: hidden;
}

.integr-card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.12s ease;
}

.integr-card > summary:hover {
  background: color-mix(in oklch, var(--muted), transparent 72%);
}

.integr-card > summary::-webkit-details-marker {
  display: none;
}

.integr-card > summary::marker {
  content: "";
}

.integr-card-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.9;
}

.integr-card-logo {
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 0.45rem;
  background: color-mix(in oklch, var(--background), white 45%);
  border: 1px solid color-mix(in oklch, var(--border), transparent 25%);
  padding: 0.18rem;
}

.integr-card-logo--smartup,
.integr-card-logo--wide {
  width: auto;
  max-width: 7.5rem;
  height: 1.65rem;
  padding: 0.12rem 0.35rem;
}

.integr-card-title {
  flex: 1;
  min-width: 0;
}

.integr-card > summary .integr-card-chevron {
  margin-inline-start: auto;
}

.integr-card-chevron {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted-foreground);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

details.integr-card:not(.integr-card--ios)[open] > summary .integr-card-chevron {
  transform: rotate(-180deg);
}

.integr-card-body {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.integr-card-body label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
}

.integr-card-body input {
  max-width: 100%;
  padding: 0.38rem 0.5rem;
  font-size: var(--text-sm);
}

/* ——— Auth page ——— */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  background: var(--background);
  background-image:
    radial-gradient(ellipse 100% 80% at 50% -40%, color-mix(in oklch, var(--primary), transparent 88%), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in oklch, var(--brand-box), transparent 92%), transparent);
}

.auth-shell {
  width: 100%;
  max-width: 26rem;
}

.auth-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.auth-brand-lockup .brand-octopus {
  width: 96px;
  height: 96px;
}

.auth-brand-lockup .brand-octopus--raster {
  object-fit: contain;
}

.auth-brand-titles {
  text-align: center;
}

.auth-brand-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem;
}

.auth-brand-upos {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--foreground);
}

.auth-brand-fin {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.auth-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-ring);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.45rem 1.6rem;
}

.auth-card-head {
  text-align: center;
  margin-bottom: 1.35rem;
}

.auth-card-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.auth-card-desc {
  margin: 0.4rem 0 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.5;
}

.auth-card .btn {
  width: 100%;
}

.auth-shell a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.auth-shell a:hover {
  text-decoration: underline;
}

@media (max-width: 380px) {
  .auth-brand-lockup .brand-octopus {
    width: 80px;
    height: 80px;
  }

  .auth-brand-upos,
  .auth-brand-fin {
    font-size: var(--text-lg);
  }

  .auth-card {
    padding: 1.2rem 1.05rem 1.3rem;
  }
}

.auth-muted {
  color: var(--muted-foreground);
}

.billing-result {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.billing-result label {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.billing-result input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
}

.billing-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.billing-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.billing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.billing-topbar .auth-brand-lockup {
  flex-direction: row;
  gap: 12px;
  margin: 0;
}

.billing-topbar .auth-brand-title-row {
  font-size: 1rem;
}

.billing-title {
  margin-bottom: 18px;
}

.billing-title h1,
.billing-title p {
  margin: 0;
}

.billing-title h1 {
  font-size: 1.75rem;
  line-height: 1.15;
}

.billing-title p {
  margin-top: 6px;
  color: var(--muted-foreground);
}

.billing-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.billing-client-list {
  display: grid;
  gap: 10px;
}

.billing-client-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(72px, auto) auto;
  gap: 6px 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.billing-client-row div {
  display: grid;
  gap: 2px;
}

.billing-client-edit {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.billing-client-edit label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-client-edit-line {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.billing-client-edit-line input {
  min-width: 0;
}

.billing-client-row span,
.billing-client-row small {
  color: var(--muted-foreground);
}

.billing-client-row code {
  justify-self: end;
  align-self: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--foreground);
}

.billing-client-info-btn {
  align-self: center;
  justify-self: end;
}

.billing-client-row small {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.billing-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
}

.billing-modal {
  position: relative;
  width: min(920px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  box-shadow: var(--shadow-lg);
}

.billing-password-toast {
  position: sticky;
  top: 0;
  z-index: 2;
  justify-self: end;
  width: max-content;
  margin: -4px 0 10px auto;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, #16a34a 44%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #dcfce7 86%, white);
  color: #14532d;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.2);
  animation: billingPushIn 520ms cubic-bezier(0.2, 0.85, 0.2, 1), billingPushPulse 900ms ease-out 520ms;
}

@keyframes billingPushIn {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes billingPushPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.28), 0 16px 34px rgba(22, 163, 74, 0.2);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(22, 163, 74, 0), 0 16px 34px rgba(22, 163, 74, 0.2);
  }
}

.billing-modal-head,
.billing-detail-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.billing-modal-head h2,
.billing-modal-head p,
.billing-detail-section h3,
.billing-detail-muted {
  margin: 0;
}

.billing-modal-head {
  margin-bottom: 14px;
}

.billing-modal-head h2 {
  margin-top: 4px;
  font-size: 1.35rem;
}

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

.billing-detail-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.billing-detail-card span,
.billing-detail-muted {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

.billing-detail-card strong {
  overflow-wrap: anywhere;
}

.billing-detail-section {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.billing-password-form {
  display: grid;
  gap: 6px;
}

.billing-password-form label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-password-line {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.billing-detail-users {
  display: grid;
  gap: 8px;
}

.billing-detail-user-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.8fr) minmax(160px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.billing-detail-user-row div {
  display: grid;
  gap: 2px;
}

.billing-detail-user-row span {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .billing-header-row,
  .billing-topbar,
  .billing-grid,
  .billing-client-row {
    grid-template-columns: 1fr;
  }

  .billing-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .billing-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .billing-client-row code {
    justify-self: start;
  }

  .billing-client-info-btn {
    justify-self: start;
  }

  .billing-client-edit-line {
    grid-template-columns: 1fr;
  }

  .billing-detail-grid,
  .billing-detail-user-row,
  .billing-password-line {
    grid-template-columns: 1fr;
  }

  .billing-modal-head,
  .billing-detail-section-head {
    flex-direction: column;
  }
}

.error-card-actions {
  margin: 0;
  font-size: var(--text-base);
  text-align: center;
  line-height: 1.5;
}

.error-card-actions .auth-muted {
  margin: 0 0.35rem;
}

.card .section-label:first-of-type {
  margin-top: 0;
}

/* ——— Admin users ——— */
.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  margin: 0 0 0.45rem;
}

.section-label-spaced {
  margin-top: 1.15rem;
}

.user-tile-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

details.user-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  font-size: var(--text-sm);
  box-shadow: none;
  overflow: hidden;
}

details.user-tile-add {
  border-style: dashed;
  background: color-mix(in oklch, var(--muted), transparent 82%);
}

details.user-tile > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  transition: background 0.12s ease;
}

details.user-tile > summary:hover {
  background: color-mix(in oklch, var(--muted), transparent 75%);
}

details.user-tile > summary::-webkit-details-marker {
  display: none;
}

details.user-tile > summary::marker {
  content: "";
}

.user-tile-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.user-tile-login {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.user-tile-sep,
.user-tile-meta {
  color: var(--muted-foreground);
}

.user-tile-email {
  color: var(--muted-foreground);
  word-break: break-all;
}

.user-tile-pwd {
  font-family: ui-monospace, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  user-select: none;
}

.user-tile-edit-hint {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
}

.tag {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
}

.tag-main {
  background: color-mix(in oklch, oklch(0.75 0.12 85), transparent 78%);
  color: oklch(0.38 0.09 85);
}

html.dark .tag-main {
  background: oklch(0.35 0.06 85);
  color: oklch(0.93 0.04 85);
}

.user-tile-form {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.mini-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 18rem;
}

.mini-form label {
  margin-bottom: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.mini-form input,
.mini-form select {
  width: 100%;
  max-width: 18rem;
  padding: 0.42rem 0.55rem;
  font-size: var(--text-sm);
}

.mini-form-actions {
  margin-top: 0.25rem;
}

.mini-form-hint {
  margin: -0.15rem 0 0.25rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--muted-foreground);
}

.mini-form-delete {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
}

.empty-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

/* ——— Settings: спокойный стиль в духе системных настроек Apple ——— */
.settings-page-wrap,
.employees-page-wrap {
  --settings-ios-radius: 13px;
  --settings-ios-radius-sm: 10px;
  --settings-ios-hairline: color-mix(in oklch, var(--foreground), transparent 91%);
  --settings-ios-canvas: color-mix(in oklch, var(--background), var(--muted) 38%);
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

html.dark .settings-page-wrap,
html.dark .employees-page-wrap {
  --settings-ios-hairline: color-mix(in oklch, var(--foreground), transparent 78%);
  --settings-ios-canvas: color-mix(in oklch, var(--background), var(--card) 28%);
}

.page-header-inner:has(.settings-ios-page-title) {
  max-width: none;
  margin-inline: 0;
  width: 100%;
  text-align: center;
}

.settings-ios-page-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.settings-ios-flash {
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
}

.settings-form-shell {
  width: 100%;
  margin: 0;
}

.settings-page-wrap {
  position: relative;
}

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

.settings-business-meta {
  margin: 0 0 0.45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.settings-pref-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 10050;
  margin: 0;
  padding: 0.65rem 1.1rem;
  min-width: min(18rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  border-radius: var(--settings-ios-radius-sm);
  background: color-mix(in oklch, var(--success, oklch(0.62 0.17 145)), transparent 88%);
  color: color-mix(in oklch, var(--success, oklch(0.45 0.14 145)), var(--foreground) 25%);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 28px color-mix(in oklch, var(--foreground), transparent 88%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.5rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

.settings-pref-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Учётная запись: превью + редактор — выезжающая панель как на «Счёт» */
.settings-account-showcase {
  margin-top: 1rem;
}

.settings-account-showcase-label {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.settings-account-showcase-card {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--settings-ios-radius, 1rem);
  border: 1px solid color-mix(in oklch, var(--settings-ios-hairline), var(--primary) 35%);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--card), var(--primary) 4%) 0%,
      var(--card) 48%,
      color-mix(in oklch, var(--card), var(--muted) 12%) 100%
    );
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--foreground), transparent 94%),
    0 12px 40px color-mix(in oklch, var(--foreground), transparent 94%);
}

.settings-account-showcase-avatar {
  flex-shrink: 0;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--primary), white 12%),
    color-mix(in oklch, var(--primary), black 8%)
  );
  color: var(--primary-foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white, transparent 40%);
}

.settings-account-showcase-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.settings-account-showcase-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
}

.settings-account-showcase-name {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.settings-account-showcase-role {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--primary), var(--muted-foreground) 15%);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 90%);
  border: 1px solid color-mix(in oklch, var(--primary), transparent 75%);
}

.settings-account-showcase-facts {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  align-items: start;
}

@media (max-width: 640px) {
  .settings-account-showcase-facts {
    grid-template-columns: 1fr;
  }
}

.settings-account-fact {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.settings-account-fact--wide {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .settings-account-fact--wide {
    grid-column: auto;
  }
}

.settings-account-fact-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.settings-account-fact-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-account-actions {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 9.5rem;
}

.settings-account-showcase-edit,
.settings-account-devices-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 650;
  white-space: nowrap;
  padding: 0.55rem 0.9rem;
  border-radius: var(--settings-ios-radius-sm, 0.65rem);
}

.settings-account-showcase-edit {
  box-shadow: 0 2px 10px color-mix(in oklch, var(--primary), transparent 72%);
}

.settings-account-devices-ic,
.settings-account-edit-ic {
  flex-shrink: 0;
  opacity: 0.92;
}

.settings-devices-modal {
  padding: 0;
  border: none;
  margin: auto;
  max-width: min(38rem, 94vw);
  width: 100%;
  background: transparent;
  box-shadow: none;
}

.settings-devices-modal::backdrop {
  background: oklch(0.16 0.045 264 / 58%);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
}

.settings-devices-modal-surface {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 40rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--border), transparent 18%);
  background: var(--card);
  box-shadow: 0 24px 48px color-mix(in oklch, var(--foreground), transparent 88%);
  overflow: hidden;
}

.settings-devices-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.65rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
}

.settings-devices-modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.settings-devices-modal-sub {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.45;
}

.settings-devices-modal-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted), transparent 55%);
  color: var(--muted-foreground);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.settings-devices-modal-body {
  padding: 0.75rem 1.1rem 1.1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.device-session-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius-sm);
  background: color-mix(in oklch, var(--muted), transparent 82%);
}

.device-session-row.is-current {
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.device-session-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: color-mix(in oklch, var(--card), var(--muted) 35%);
  color: var(--primary);
}

.device-session-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.device-session-main {
  flex: 1;
  min-width: 0;
}

.device-session-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.device-session-top strong {
  font-size: var(--text-base);
}

.device-session-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

.device-session-badge--online {
  background: color-mix(in oklch, #0f8a5f, transparent 82%);
  color: #0f8a5f;
}

.device-session-badge--current {
  background: color-mix(in oklch, var(--primary), transparent 86%);
  color: var(--primary);
}

.device-session-meta,
.device-session-last {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.4;
}

.device-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.device-session-empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--text-base);
}

.device-session-empty--err {
  color: var(--destructive);
}

@media (max-width: 720px) {
  .settings-account-showcase-card {
    flex-wrap: wrap;
  }

  .settings-account-actions {
    width: 100%;
    min-width: 0;
  }

  .settings-account-showcase-edit,
  .settings-account-devices-btn {
    width: 100%;
    justify-content: center;
  }
}

.settings-profile-modal {
  padding: 0;
  border: none;
  margin: auto;
  max-width: min(30rem, 94vw);
  width: 100%;
  background: transparent;
  box-shadow: none;
}

.settings-profile-modal::backdrop {
  background: oklch(0.16 0.045 264 / 58%);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
}

.settings-profile-modal-surface {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(90vh, 44rem);
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow:
    0 24px 48px color-mix(in oklch, var(--foreground), transparent 88%),
    0 0 0 1px color-mix(in oklch, var(--foreground), transparent 96%);
  overflow: hidden;
  animation: settingsProfileModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes settingsProfileModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.settings-profile-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
  flex-shrink: 0;
}

.settings-profile-modal-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.settings-profile-modal-sub {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted-foreground);
  line-height: 1.4;
  max-width: 26rem;
}

.settings-profile-modal-close {
  flex-shrink: 0;
  border: none;
  background: color-mix(in oklch, var(--muted), transparent 55%);
  color: var(--foreground);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-profile-modal-close:hover {
  background: color-mix(in oklch, var(--muted), transparent 25%);
}

.settings-profile-modal-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.settings-profile-modal-body {
  padding: 0.85rem 1.15rem 1rem;
}

.settings-profile-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid var(--settings-ios-hairline);
  background: color-mix(in oklch, var(--muted), transparent 90%);
  flex-shrink: 0;
}

.settings-profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 540px) {
  .settings-profile-form-grid {
    grid-template-columns: 1fr;
  }
}

.settings-profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.settings-profile-field--full {
  grid-column: 1 / -1;
}

.settings-profile-field-label {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.settings-profile-input {
  min-height: 2.35rem;
  border-radius: var(--settings-ios-radius-sm);
  border: 1px solid color-mix(in oklch, var(--border), var(--settings-ios-hairline) 40%);
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: var(--text-base);
  background: var(--card);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-profile-input:hover {
  border-color: color-mix(in oklch, var(--primary), var(--border) 65%);
}

.settings-profile-input:focus {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), var(--border) 35%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%);
}

html.dark .settings-profile-input {
  background: color-mix(in oklch, var(--card), transparent 15%);
}

select.settings-profile-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem 1rem;
}

select.settings-profile-input:hover {
  border-color: color-mix(in oklch, var(--primary), var(--border) 65%);
}

select.settings-profile-input:focus,
select.settings-profile-input:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), var(--border) 35%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%);
}

html.dark select.settings-profile-input {
  background-color: color-mix(in oklch, var(--card), transparent 15%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

#employee-add-dialog .employees-role-select,
#employee-edit-dialog .employees-role-select {
  min-height: 2.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 2.15rem 0.4rem 0.65rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--settings-ios-hairline) 40%);
  border-radius: var(--settings-ios-radius-sm);
  background: var(--card);
  background-image: none;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-base);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#employee-add-dialog .employees-role-select:hover,
#employee-edit-dialog .employees-role-select:hover {
  border-color: color-mix(in oklch, var(--primary), var(--border) 65%);
}

#employee-add-dialog .employees-role-select:focus,
#employee-edit-dialog .employees-role-select:focus,
#employee-add-dialog .employees-role-select:focus-visible,
#employee-edit-dialog .employees-role-select:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), var(--border) 35%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%);
}

html.dark #employee-add-dialog .employees-role-select,
html.dark #employee-edit-dialog .employees-role-select {
  background: color-mix(in oklch, var(--card), transparent 15%);
}

.employees-role-select-wrap .settings-select-chevron {
  right: 0.65rem;
}

.settings-profile-pwd-wrap.pwd-wrap {
  max-width: 100%;
}

.settings-profile-inline-err {
  margin: 0.1rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--destructive, oklch(0.55 0.2 25));
}

.settings-profile-password-panel {
  margin-top: 0.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--settings-ios-radius-sm);
  border: 1px solid var(--settings-ios-hairline);
  background: color-mix(in oklch, var(--muted), transparent 92%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-profile-password-hint {
  margin: 0 0 0.1rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.35;
}

.settings-profile-form-error {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--settings-ios-radius-sm);
  background: color-mix(in oklch, var(--destructive, oklch(0.55 0.2 25)), transparent 88%);
  color: var(--destructive, oklch(0.5 0.18 25));
  font-size: var(--text-sm);
}

.settings-pw-strength {
  margin-top: 0.35rem;
}

.settings-pw-strength-track {
  height: 0.28rem;
  border-radius: 999px;
  background: var(--settings-ios-hairline);
  overflow: hidden;
}

.settings-pw-strength-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--destructive, oklch(0.55 0.2 25));
  transition: width 0.2s ease, background 0.2s ease;
}

.settings-pw-strength-bar[data-level='fair'] {
  background: oklch(0.72 0.14 85);
}

.settings-pw-strength-bar[data-level='good'] {
  background: oklch(0.68 0.14 145);
}

.settings-pw-strength-bar[data-level='strong'] {
  background: oklch(0.62 0.17 145);
}

.settings-pw-strength-label {
  margin: 0.3rem 0 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-foreground);
}

.settings-pw-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.settings-pw-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.settings-pw-check-ic {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--muted-foreground), transparent 35%);
  background: transparent;
  position: relative;
}

.settings-pw-check.is-met .settings-pw-check-ic {
  border-color: color-mix(in oklch, var(--success, oklch(0.55 0.17 145)), transparent 10%);
  background: color-mix(in oklch, var(--success, oklch(0.55 0.17 145)), transparent 82%);
}

.settings-pw-check.is-met .settings-pw-check-ic::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.12rem;
  width: 0.28rem;
  height: 0.48rem;
  border: solid color-mix(in oklch, var(--success, oklch(0.45 0.14 145)), var(--foreground) 10%);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.settings-pw-check-text {
  color: var(--muted-foreground);
}

.settings-pw-check.is-met .settings-pw-check-text {
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 25%);
}

.settings-pw-check.is-pending .settings-pw-check-text {
  color: var(--foreground);
}

.settings-integrations-save-row {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.settings-layout-split {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .settings-layout-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.settings-rail {
  position: sticky;
  top: 5.35rem;
}

@media (max-width: 900px) {
  .settings-rail {
    position: static;
  }
}

.settings-tablist--rail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  width: 100%;
}

@media (max-width: 900px) {
  .settings-tablist--rail {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-tablist--rail::-webkit-scrollbar {
    display: none;
  }
}

.settings-tab.settings-tab--rail {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--muted-foreground);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (max-width: 900px) {
  .settings-tab.settings-tab--rail {
    flex: 0 0 auto;
    min-width: auto;
  }
}

.settings-tab.settings-tab--rail:hover {
  background: color-mix(in oklch, var(--muted), transparent 50%);
  color: var(--foreground);
}

.settings-tab.settings-tab--rail.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

html.dark .settings-tab.settings-tab--rail.active {
  background: color-mix(in oklch, var(--card), transparent 10%);
}

.settings-tab-icon--rail {
  flex-shrink: 0;
  opacity: 0.8;
}

.settings-tab.settings-tab--rail.active .settings-tab-icon--rail {
  color: var(--primary);
  opacity: 1;
}

.settings-tab.settings-tab--rail .settings-tab-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.settings-main-surface,
.employees-main-surface {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.settings-general-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-general-business {
  display: grid;
  gap: 1rem;
}

.settings-business-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.78fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.settings-business-hero-copy {
  min-width: 0;
}

.settings-business-eyebrow {
  margin: 0 0 0.45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--primary);
}

.settings-business-hero h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: 0;
}

.settings-business-hero p {
  max-width: 44rem;
  margin: 0.55rem 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  line-height: 1.55;
}

.settings-business-snapshot {
  display: grid;
  gap: 0.5rem;
  align-content: center;
}

.settings-snapshot-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 2.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 28%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--background), var(--card) 45%);
}

.settings-snapshot-item span {
  min-width: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.25;
}

.settings-snapshot-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
}

.settings-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.settings-business-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.settings-business-panel--wide {
  grid-column: 1 / -1;
}

.settings-business-panel .settings-ios-footnote {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--foreground);
}

.settings-business-panel .settings-ios-footnote + .settings-ios-footnote,
.settings-business-note {
  margin: 0 0 0.8rem;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  color: var(--muted-foreground);
}

.settings-business-panel .settings-ios-plate {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-business-panel .settings-ios-plate--field.settings-ios-plate--flush,
.settings-business-panel .settings-ios-plate--flush {
  padding: 0;
}

.settings-business-panel .settings-ios-select {
  min-height: 2.65rem;
  border-radius: 8px;
}

.settings-business-panel .theme-picker-ios {
  border: 1px solid color-mix(in oklch, var(--border), transparent 25%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--muted), transparent 55%);
}

.settings-business-panel .theme-picker-ios .theme-chip-face {
  border-radius: 6px;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .settings-business-hero,
  .settings-business-grid {
    grid-template-columns: 1fr;
  }

  .settings-business-panel--wide {
    grid-column: auto;
  }
}

.settings-business-grid--compact {
  grid-template-columns: minmax(0, min(48rem, 100%));
  justify-content: start;
  gap: 0.85rem;
}

.settings-business-grid--compact .settings-business-panel--wide {
  grid-column: 1;
}

.settings-pref-card {
  padding: 0;
  overflow: hidden;
}

.settings-pref-list {
  display: flex;
  flex-direction: column;
}

.settings-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.4rem;
  padding: 0.72rem 0.85rem;
  background: color-mix(in oklch, var(--card), var(--background) 12%);
}

.settings-pref-row + .settings-pref-row {
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 24%);
}

.settings-pref-row:hover {
  background: color-mix(in oklch, var(--muted), var(--card) 70%);
}

.settings-pref-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 11rem;
  margin: 0;
  color: var(--foreground);
}

.settings-pref-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 76%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--primary), transparent 91%);
  color: var(--primary);
}

.settings-pref-icon svg {
  width: 1rem;
  height: 1rem;
}

.settings-pref-title {
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1.25;
}

.settings-pref-control {
  display: flex;
  justify-content: flex-end;
  width: min(100%, 20rem);
  min-width: 0;
}

.settings-pref-control--select {
  width: min(100%, 18rem);
}

.settings-pref-control--timezone {
  width: min(100%, 24rem);
}

.settings-pref-control--language {
  width: min(100%, 18rem);
}

.settings-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.settings-compact-select {
  min-height: 2.32rem;
  padding: 0.5rem 2.15rem 0.5rem 0.75rem;
  border-radius: 8px;
  border-color: color-mix(in oklch, var(--border), transparent 18%);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}

.settings-compact-select:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 58%);
}

.settings-compact-select:focus {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), transparent 30%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 82%);
}

.settings-select-chevron {
  position: absolute;
  top: 50%;
  right: 0.68rem;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--muted-foreground);
  pointer-events: none;
  transform: translateY(-50%);
}

.settings-lang-select {
  position: relative;
  width: 100%;
}

.settings-lang-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.32rem;
  padding: 0.5rem 2.15rem 0.5rem 0.72rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 18%);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--control-fg);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.settings-lang-trigger:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 58%);
}

.settings-lang-trigger:focus-visible,
.settings-lang-trigger[aria-expanded="true"] {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), transparent 30%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 82%);
}

.settings-lang-current {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.settings-lang-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  display: grid;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 18%);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.settings-lang-menu[hidden] {
  display: none;
}

.settings-lang-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.settings-lang-option:hover,
.settings-lang-option:focus-visible,
.settings-lang-option[aria-selected="true"] {
  outline: none;
  background: color-mix(in oklch, var(--primary), transparent 90%);
  color: var(--foreground);
}

.settings-flag {
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 0.88rem;
  flex: 0 0 1.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--foreground), transparent 84%);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.2);
}

.settings-flag--ru {
  background: linear-gradient(to bottom, #fff 0 33.33%, #1c57a5 33.33% 66.66%, #d52b1e 66.66% 100%);
}

.settings-flag--gb {
  background:
    linear-gradient(33deg, transparent 0 42%, #fff 42% 47%, #c8102e 47% 53%, #fff 53% 58%, transparent 58%),
    linear-gradient(147deg, transparent 0 42%, #fff 42% 47%, #c8102e 47% 53%, #fff 53% 58%, transparent 58%),
    linear-gradient(to bottom, transparent 0 37%, #fff 37% 43%, #c8102e 43% 57%, #fff 57% 63%, transparent 63%),
    linear-gradient(to right, transparent 0 37%, #fff 37% 43%, #c8102e 43% 57%, #fff 57% 63%, transparent 63%),
    #012169;
}

.settings-flag--uz {
  background: linear-gradient(to bottom, #0099b5 0 31%, #ce1126 31% 34%, #fff 34% 63%, #ce1126 63% 66%, #1eb53a 66% 100%);
}

.settings-theme-picker-compact {
  width: min(100%, 20rem);
  min-width: 0;
  border-color: color-mix(in oklch, var(--border), transparent 22%);
}

.settings-theme-picker-compact .theme-chip-face {
  min-height: 2.18rem;
  padding: 0.42rem 0.45rem;
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-theme-picker-compact .theme-chip-icon {
  width: 0.86rem;
  height: 0.86rem;
}

html.dark .settings-pref-row {
  background: color-mix(in oklch, var(--card), var(--background) 16%);
}

html.dark .settings-pref-row:hover {
  background: color-mix(in oklch, var(--muted), var(--card) 58%);
}

html.dark .settings-compact-select {
  background: var(--control-bg);
  color: var(--control-fg);
}

@media (max-width: 680px) {
  .settings-business-grid--compact {
    grid-template-columns: 1fr;
  }

  .settings-pref-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
    padding: 0.78rem;
  }

  .settings-pref-label {
    min-width: 0;
  }

  .settings-pref-control,
  .settings-pref-control--select,
  .settings-pref-control--timezone,
  .settings-theme-picker-compact {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .settings-theme-picker-compact .theme-chip-face {
    gap: 0.25rem;
    padding-inline: 0.32rem;
    font-size: var(--text-xs);
  }
}

.settings-ios-group {
  margin: 0;
}

.settings-ios-footnote {
  margin: 0 0 0.65rem;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.settings-ios-plate {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

html.dark .settings-ios-plate {
  box-shadow: none;
}

.settings-ios-plate--flush {
  padding: 0.75rem;
}

.settings-ios-plate--field.settings-ios-plate--flush {
  padding: 1rem;
}

.settings-ios-plate--field {
  padding: 1.25rem;
}

.settings-ios-field-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--muted-foreground);
}

.settings-ios-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: var(--settings-ios-radius-sm);
  border: 1px solid var(--settings-ios-hairline);
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: var(--text-base);
}

html.dark .settings-ios-select {
  background: color-mix(in oklch, var(--muted), transparent 20%);
}

.settings-ios-token-wrap {
  max-width: none;
}

.settings-ios-token-wrap .pwd-input {
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.65rem 2.5rem 0.65rem 0.85rem;
  color: var(--control-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-base);
}

html.dark .settings-ios-token-wrap .pwd-input {
  background: color-mix(in oklch, var(--muted), transparent 20%);
}

.settings-ios-plate--list {
  padding: 0;
  overflow: hidden;
}

.settings-ios-plate--list .integr-card--ios {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  transition: background 0.15s ease;
}

.settings-ios-plate--list .integr-card--ios > summary {
  list-style: none;
  min-height: 3.5rem;
  padding: 0.85rem 1.25rem;
  gap: 0.75rem;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--foreground);
}

.settings-ios-plate--list .integr-card--ios + .integr-card--ios {
  border-top: 1px solid var(--border);
}

.settings-ios-plate--list .integr-card--ios > summary:hover {
  background: color-mix(in oklch, var(--muted), transparent 50%);
}

.settings-ios-plate--list .integr-card--ios[open] > summary {
  background: color-mix(in oklch, var(--muted), transparent 70%);
  border-bottom: 1px solid var(--border);
}

.settings-ios-plate--list .integr-card--ios .integr-card-body {
  padding: 1.25rem;
  border-top: none;
  background: transparent;
  gap: 0.75rem;
}

html.dark .settings-ios-plate--list .integr-card--ios .integr-card-body {
  background: transparent;
}

.integr-card-chevron--ios {
  margin-left: auto;
  font-size: 0;
  color: var(--muted-foreground);
  opacity: 0.7;
}

.integr-card-chevron--ios svg {
  display: block;
  transition: transform 0.2s ease;
}

details.integr-card--ios[open] > summary .integr-card-chevron--ios svg {
  transform: rotate(180deg);
}

.settings-ios-plate--list .integr-card--ios .integr-card-body label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0.25rem;
}

.settings-ios-plate--list .integr-card--ios .integr-card-body input {
  max-width: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  padding: 0.6rem 0.75rem;
  color: var(--control-fg);
  box-shadow: none;
  font-size: var(--text-base);
}

.settings-ios-plate--list .integr-card--ios .integr-card-body .integr-check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.45rem;
  color: var(--foreground);
}

.settings-ios-plate--list .integr-card--ios .integr-card-body .integr-check-row input {
  width: 1rem;
  height: 1rem;
  padding: 0;
  accent-color: var(--primary);
}

.integr-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.integr-sync-status {
  min-height: 1.2rem;
  margin: 0.15rem 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.integr-sync-status[data-variant="ok"] {
  color: oklch(0.52 0.13 160);
}

.integr-sync-status[data-variant="err"] {
  color: var(--destructive);
}

html.dark .settings-ios-plate--list .integr-card--ios .integr-card-body input {
  background: color-mix(in oklch, var(--muted), transparent 20%);
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.settings-main-surface .settings-panel input[type="text"],
.settings-main-surface .settings-panel input[type="password"],
.settings-main-surface .settings-panel input[type="url"],
.settings-main-surface .settings-panel textarea {
  max-width: none;
}

.settings-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.btn-settings-save {
  min-height: 2.75rem;
  min-width: 12rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 520px) {
  .btn-settings-save {
    width: 100%;
    min-width: 0;
  }
}

.settings-panel[hidden] {
  display: none !important;
}

.settings-employees-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.8fr);
  gap: 1rem;
  align-items: start;
}

.settings-employees-create {
  display: grid;
  gap: 1rem;
}

.settings-employees-card,
.settings-employees-table-card {
  margin: 0;
}

.settings-employees-add-main,
.settings-employees-small-add {
  min-height: 2.45rem;
}

.settings-employees-add-main {
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.65rem 0 0.55rem;
}

.settings-employee-presets {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.settings-employee-preset {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  min-height: 3.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius-sm);
  background: var(--card);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.settings-employee-preset:hover {
  border-color: color-mix(in oklch, var(--primary), var(--border) 45%);
  background: color-mix(in oklch, var(--primary), transparent 94%);
  transform: translateY(-1px);
}

.settings-employee-preset-title {
  font-size: var(--text-base);
  font-weight: 600;
}

.settings-employee-preset-sub {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.settings-employees-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.settings-employees-title {
  margin: 0.15rem 0 0;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 650;
}

.settings-employees-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius);
  background: var(--card);
}

.settings-employees-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.settings-employees-table th,
.settings-employees-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-base);
}

.settings-employees-table th {
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 55%);
  font-size: var(--text-sm);
  font-weight: 650;
}

.settings-employees-table tbody tr:last-child td {
  border-bottom: 0;
}

.settings-employee-person {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.settings-employee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.65rem;
  background: color-mix(in oklch, var(--primary), transparent 82%);
  color: var(--primary);
  font-size: var(--text-base);
  font-weight: 650;
}

.settings-employee-person strong,
.settings-employee-person small {
  display: block;
  min-width: 0;
}

.settings-employee-person strong {
  font-size: var(--text-base);
  font-weight: 650;
}

.settings-employee-person small {
  margin-top: 0.1rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.settings-employee-chipline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 18rem;
}

.settings-employee-muted,
.settings-employees-empty {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.settings-employee-actions {
  display: inline-flex;
  gap: 0.35rem;
}

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

.settings-page-wrap:has(#panel-employees:not([hidden])) {
  max-width: none;
}

.settings-main-surface:has(#panel-employees:not([hidden])) {
  max-width: none;
}

.settings-employees-workspace {
  display: grid;
  gap: 0.9rem;
}

.settings-employees-toolbar {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius);
  background: color-mix(in oklch, var(--card), transparent 8%);
}

.settings-employees-toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-employees-toolbar-main .settings-business-note {
  max-width: none;
}

.settings-employee-presets--inline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.settings-employee-presets--inline .settings-employee-preset {
  min-height: 3rem;
  padding: 0.55rem 0.65rem;
}

.settings-employees-table-card {
  padding: 0;
  overflow: visible;
}

.settings-employees-table-card .settings-employees-table-head {
  padding: 0.85rem 1rem 0;
}

.settings-employees-table-wrap {
  border-radius: 0 0 var(--settings-ios-radius) var(--settings-ios-radius);
}

.settings-employees-table {
  min-width: 980px;
}

.settings-employees-table th,
.settings-employees-table td {
  padding: 0.72rem 0.85rem;
  vertical-align: middle;
}

.settings-employees-table tbody tr:nth-child(even) {
  background: color-mix(in oklch, var(--muted), transparent 78%);
}

.settings-employee-index {
  width: 3.25rem;
  color: var(--muted-foreground);
  font-weight: 600;
}

.settings-employee-login-cell span,
.settings-employee-login-cell small {
  display: block;
}

.settings-employee-login-cell span {
  font-weight: 600;
}

.settings-employee-login-cell small {
  margin-top: 0.1rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.settings-employee-row-dropdown {
  position: relative;
  width: min(12.75rem, 100%);
}

.settings-employee-row-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in oklch, var(--primary), var(--border) 48%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 90%);
  color: color-mix(in oklch, var(--primary), var(--foreground) 15%);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.settings-employee-row-dropdown > summary::-webkit-details-marker {
  display: none;
}

.settings-employee-row-dropdown[open] > summary svg {
  transform: rotate(180deg);
}

.settings-employee-row-menu {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 0.35rem);
  display: grid;
  gap: 0.25rem;
  width: max-content;
  min-width: 12.75rem;
  max-width: 18rem;
  max-height: 13rem;
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.settings-employee-row-menu span {
  display: block;
  padding: 0.42rem 0.55rem;
  border-radius: 0.45rem;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: normal;
}

.settings-employee-row-menu span:hover {
  background: color-mix(in oklch, var(--muted), transparent 58%);
}

.employees-access-dropdown {
  position: relative;
  width: 100%;
}

.employees-access-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 2.55rem;
  padding: 0.58rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--control-fg);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
}

.employees-access-dropdown > summary [data-access-summary] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employees-access-chevron,
.settings-employee-row-dropdown > summary svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  transition: transform 0.15s ease;
}

.employees-access-dropdown > summary::-webkit-details-marker {
  display: none;
}

.employees-access-dropdown[open] > summary {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 84%);
}

.employees-access-dropdown[open] .employees-access-chevron {
  transform: rotate(180deg);
}

.employees-access-menu {
  margin-top: 0.35rem;
  max-height: 13.5rem;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.employees-access-menu--accounts {
  max-height: 18rem;
  padding: 0.45rem;
  background: color-mix(in oklch, var(--muted), transparent 88%);
}

.employees-access-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
  background: color-mix(in oklch, var(--muted), transparent 48%);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 650;
  text-transform: uppercase;
}

.employees-access-menu .employees-access-check {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.48rem 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--settings-ios-hairline);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-base);
}

.employees-access-menu .employees-access-check:hover {
  background: color-mix(in oklch, var(--muted), transparent 62%);
}

.employees-access-menu .employees-access-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  justify-self: center;
  accent-color: var(--primary);
}

.employees-access-menu .employees-access-check span {
  min-width: 0;
}

.employees-access-account-group[hidden] {
  display: none;
}

.employees-access-account-group {
  border-bottom: 1px solid var(--settings-ios-hairline);
}

.employees-access-account-group:last-of-type {
  border-bottom: 0;
}

.employees-access-account-group .employees-access-check:last-child {
  border-bottom: 0;
}

.employees-access-org-name {
  display: block;
  padding: 0.55rem 0.75rem;
  background: color-mix(in oklch, var(--muted), transparent 70%);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.employees-access-filter-empty {
  margin: 0;
  padding: 0.85rem;
  border: 0;
}

@media (max-width: 980px) {
  .settings-employee-presets--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .settings-employees-toolbar-main {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-employee-presets--inline {
    grid-template-columns: 1fr;
  }
}

/* ——— Сотрудники (карточки + модалки) ——— */
.employees-main-surface {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.employees-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.employees-section-head .settings-ios-footnote {
  margin: 0;
}

.employees-add-btn {
  flex-shrink: 0;
  font-weight: 650;
  padding: 0.5rem 1.1rem;
  border-radius: var(--settings-ios-radius-sm, 0.65rem);
}

.employees-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.employee-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  min-height: 3.35rem;
  border-radius: var(--settings-ios-radius, 1rem);
  border: 1px solid color-mix(in oklch, var(--settings-ios-hairline), var(--primary) 22%);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--card), var(--primary) 2%) 0%,
      var(--card) 55%,
      color-mix(in oklch, var(--card), var(--muted) 8%) 100%
    );
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--foreground), transparent 96%),
    0 4px 14px color-mix(in oklch, var(--foreground), transparent 96%);
}

.employee-card-avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--primary), white 10%),
    color-mix(in oklch, var(--primary), black 8%)
  );
  color: var(--primary-foreground);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.employee-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  justify-content: center;
}

.employee-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

.employee-card-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.employee-card-role {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--primary), var(--muted-foreground) 15%);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 92%);
  border: 1px solid color-mix(in oklch, var(--primary), transparent 80%);
}

.employee-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--muted-foreground);
}

.employee-card-meta-item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-card-meta-email {
  max-width: min(14rem, 42vw);
}

.employee-wallets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.employee-wallet-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.72);
  color: #1e3a8a;
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.2;
  padding: 0.18rem 0.5rem;
}

.employee-wallets-empty {
  margin: 0.45rem 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.employees-wallet-create {
  justify-content: flex-end;
}

.employees-wallet-create-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  color: var(--foreground);
  font-size: var(--text-base);
}

.employees-wallet-create-row input {
  width: 1rem;
  height: 1rem;
}

.employees-access-field--wide {
  grid-column: 1 / -1;
}

.employees-access-list,
.employees-access-account-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.employees-access-account-groups {
  flex-direction: column;
}

.employees-access-account-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--muted), transparent 72%);
}

.employees-access-org-name {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.employees-access-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.employees-access-account-text {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.employees-access-account-title {
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 550;
}

.employees-access-check input {
  width: auto;
  accent-color: var(--primary);
}

.employees-access-empty {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.employees-access-menu .employees-access-account-group {
  display: block;
  gap: 0;
  padding: 0;
  margin: 0 0 0.55rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--primary), var(--settings-ios-hairline) 64%);
  border-radius: 0.65rem;
  background: var(--card);
  box-shadow:
    inset 3px 0 0 color-mix(in oklch, var(--primary), transparent 35%),
    0 1px 2px color-mix(in oklch, var(--foreground), transparent 95%);
}

.employees-access-menu .employees-access-account-group[hidden] {
  display: none;
}

.employees-access-menu .employees-access-account-group:last-of-type {
  margin-bottom: 0;
}

.employees-access-menu .employees-access-org-name {
  display: block;
  padding: 0.55rem 0.85rem 0.55rem 0.95rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
  background: color-mix(in oklch, var(--primary), transparent 94%);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.employees-access-menu .employees-access-list {
  display: block;
}

.employees-access-menu .employees-access-check {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.48rem 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--settings-ios-hairline);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-base);
}

.employees-access-menu .employees-access-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  justify-self: center;
}

.employees-access-menu .employees-access-check:hover {
  background: color-mix(in oklch, var(--muted), transparent 62%);
}

.employees-access-table-head--accounts,
.employees-access-menu .employees-access-check--account,
.employees-access-account-groups .employees-access-check--account {
  grid-template-columns: 2.25rem minmax(12rem, 1fr) minmax(18rem, 1.35fr);
}

.employees-access-table-head--accounts {
  z-index: 2;
  margin: -0.45rem -0.45rem 0.45rem;
}

.employees-access-account-groups .employees-access-list--accounts {
  display: block;
}

.employees-access-account-groups .employees-access-check--account {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 2.65rem;
  border-radius: 0;
}

.employees-access-check--account:has(input:checked) {
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.employees-access-check--account:has(input:checked):hover {
  background: color-mix(in oklch, var(--primary), transparent 88%);
}

.employees-access-check--account:has(input:checked) .employees-access-account-title {
  color: var(--primary);
  font-weight: 650;
}

.employees-access-check--account:has(input:checked) .employees-access-account-title::after {
  content: "выбран";
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 84%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.25;
  vertical-align: middle;
}

.employees-access-assignees-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

.employees-access-assignee {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.45rem;
  padding: 0.12rem 0.48rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 76%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 90%);
  color: color-mix(in oklch, var(--primary), var(--foreground) 22%);
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}

.employees-access-muted {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.employee-card-meta-sep {
  flex-shrink: 0;
  opacity: 0.45;
  user-select: none;
}

@media (max-width: 760px) {
  .employees-access-table-head--accounts,
  .employees-access-menu .employees-access-check--account,
  .employees-access-account-groups .employees-access-check--account {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .employees-access-table-head--accounts span:last-child {
    display: none;
  }

  .employees-access-assignees-cell {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .employee-card-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  .employee-card-meta-item,
  .employee-card-meta-sep {
    display: inline;
    white-space: normal;
  }
}

.employee-card-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.employee-card-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--settings-ios-radius-sm, 0.65rem);
  background: transparent;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.employee-card-icon-btn:hover {
  background: color-mix(in oklch, var(--muted), transparent 55%);
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--border), transparent 20%);
}

.employee-card-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%);
}

.employee-card-icon-btn svg {
  flex-shrink: 0;
  display: block;
}

.employees-modal-delete {
  display: none;
}

.employees-modal-freeze {
  display: none;
}

.employees-modal-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-right: auto;
}

#employee-add-dialog .settings-profile-modal-surface,
#employee-edit-dialog .settings-profile-modal-surface {
  max-width: none;
  max-height: min(92vh, 56rem);
}

#employee-add-dialog,
#employee-edit-dialog {
  width: min(88rem, 96vw);
  max-width: min(88rem, 96vw);
}

#employee-add-dialog .settings-profile-modal-scroll,
#employee-edit-dialog .settings-profile-modal-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#employee-add-dialog .settings-profile-modal-body,
#employee-edit-dialog .settings-profile-modal-body {
  padding: 1rem 1.25rem 1.15rem;
}

#employee-add-dialog .settings-profile-form-grid,
#employee-edit-dialog .settings-profile-form-grid {
  margin-bottom: 0;
  align-items: start;
}

#employee-add-dialog .employees-form-layout,
#employee-edit-dialog .employees-form-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem 1rem;
  align-items: stretch;
}

#employee-add-dialog .employees-form-main,
#employee-edit-dialog .employees-form-main,
#employee-add-dialog .employees-form-permissions,
#employee-edit-dialog .employees-form-permissions {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.65rem;
}

#employee-add-dialog .employees-form-main,
#employee-edit-dialog .employees-form-main {
  align-self: stretch;
  padding: 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--muted), transparent 91%);
}

#employee-add-dialog .employees-form-permissions,
#employee-edit-dialog .employees-form-permissions {
  min-height: 0;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  #employee-add-dialog .settings-profile-modal-surface,
  #employee-edit-dialog .settings-profile-modal-surface {
    height: min(92vh, 56rem);
  }

  #employee-add-dialog .settings-profile-modal-scroll,
  #employee-edit-dialog .settings-profile-modal-scroll {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  #employee-add-dialog .settings-profile-modal-body,
  #employee-edit-dialog .settings-profile-modal-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  #employee-add-form,
  #employee-edit-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #employee-add-dialog .employees-form-layout,
  #employee-edit-dialog .employees-form-layout {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  #employee-add-dialog .employees-form-main,
  #employee-edit-dialog .employees-form-main,
  #employee-add-dialog .employees-form-permissions,
  #employee-edit-dialog .employees-form-permissions {
    min-height: 0;
    overflow: hidden;
  }

  #employee-add-dialog .employees-form-main,
  #employee-edit-dialog .employees-form-main {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  #employee-add-dialog .employees-form-permissions,
  #employee-edit-dialog .employees-form-permissions {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    align-content: stretch;
  }

  #employee-add-dialog .employees-role-permissions-field,
  #employee-edit-dialog .employees-role-permissions-field {
    grid-template-rows: auto auto minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }

  #employee-add-dialog .employees-role-permissions-field .employees-permission-dropdown--main,
  #employee-edit-dialog .employees-role-permissions-field .employees-permission-dropdown--main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
  }

  #employee-add-dialog .employees-role-permissions-field .employees-role-permissions-grid,
  #employee-edit-dialog .employees-role-permissions-field .employees-role-permissions-grid {
    min-height: 0;
    height: auto;
    max-height: min(12rem, 25vh);
  }

  #employee-add-dialog .employees-category-access-field,
  #employee-edit-dialog .employees-category-access-field {
    grid-template-rows: auto auto minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #employee-add-dialog .employees-category-access-list,
  #employee-edit-dialog .employees-category-access-list {
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 899px) {
  #employee-add-dialog .employees-form-layout,
  #employee-edit-dialog .employees-form-layout {
    grid-template-columns: 1fr;
  }

  #employee-add-dialog .employees-form-main,
  #employee-edit-dialog .employees-form-main,
  #employee-add-dialog .employees-form-permissions,
  #employee-edit-dialog .employees-form-permissions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  #employee-add-dialog,
  #employee-edit-dialog {
    width: min(24rem, 96vw);
  }

  #employee-add-dialog .settings-profile-modal-body,
  #employee-edit-dialog .settings-profile-modal-body {
    padding-inline: 0.85rem;
  }
}

.employees-flash-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.employees-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-ios-plate--list > .user-tile--ios {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.settings-ios-plate--list > .user-tile-add {
  background: transparent;
}

.settings-ios-plate--list > .user-tile--ios + .user-tile--ios > summary {
  box-shadow: inset 0 1px 0 var(--settings-ios-hairline);
}

.settings-ios-plate--list > .user-tile--ios > summary {
  align-items: center;
  min-height: 3rem;
  padding: 0.68rem 1rem;
  gap: 0.65rem;
}

.settings-ios-plate--list > .user-tile--ios > summary:hover {
  background: color-mix(in oklch, var(--muted), transparent 58%);
}

.settings-ios-plate--list .user-tile--ios .user-tile-form {
  padding: 0 1rem 1rem;
  border-top: none;
  background: color-mix(in oklch, var(--muted), transparent 76%);
}

html.dark .settings-ios-plate--list .user-tile--ios .user-tile-form {
  background: color-mix(in oklch, var(--background), transparent 35%);
}

.settings-ios-plate--list .user-tile--ios .user-tile-login {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
}

.user-tile-leading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
}

.user-tile-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--muted-foreground);
}

.user-tile-dot {
  opacity: 0.55;
  user-select: none;
}

.user-tile-add-label {
  flex: 1;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
}

.user-tile-chevron--ios {
  flex-shrink: 0;
  margin-left: auto;
  color: color-mix(in oklch, var(--muted-foreground), transparent 18%);
}

.user-tile-chevron--ios svg {
  display: block;
  transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
}

details.user-tile--ios[open] > summary .user-tile-chevron--ios svg {
  transform: rotate(90deg);
}

.employees-main-surface .mini-form {
  max-width: none;
  gap: 0.55rem;
}

.employees-main-surface .mini-form input,
.employees-main-surface .mini-form select {
  max-width: none;
  border: none;
  border-radius: var(--settings-ios-radius-sm);
  background: var(--card);
  padding: 0.52rem 0.72rem;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--settings-ios-hairline), transparent 0%);
}

html.dark .employees-main-surface .mini-form input,
html.dark .employees-main-surface .mini-form select {
  background: color-mix(in oklch, var(--card), var(--background) 22%);
}

.employees-main-surface .mini-form .pwd-wrap {
  max-width: none;
}

.employees-main-surface .mini-form-actions {
  margin-top: 0.35rem;
}

.employees-main-surface .mini-form-actions .btn {
  width: 100%;
  min-height: 2.5rem;
  border-radius: var(--settings-ios-radius-sm);
  font-weight: 600;
  font-size: var(--text-md);
}

.employees-main-surface .mini-form-delete {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--settings-ios-hairline);
}

.employees-main-surface .mini-form-delete .btn {
  width: 100%;
  min-height: 2.35rem;
  border-radius: var(--settings-ios-radius-sm);
}

.employees-empty {
  margin: 0;
  padding: 1.35rem 1rem;
  text-align: center;
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.5;
}

.employees-flash-group .flash {
  margin: 0;
  border-radius: var(--settings-ios-radius-sm);
}

.general-page-header {
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  text-align: center;
}

.general-page-header .page-desc {
  margin-top: 0.35rem;
}

.general-reports-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 901px) {
  .general-reports-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .general-reports-header .general-page-header {
    margin: 0 auto;
  }
  
  .general-reports-header .general-reports-tabs {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
  }
}

.general-workspace {
  width: min(100%, var(--general-canvas-max, 1280px));
  margin-inline: auto;
}

.general-workspace--fluid,
.organizations-page-wrap--fluid {
  --general-canvas-max: none;
  width: 100%;
  max-width: none;
}

.general-page-kicker {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  margin-inline: auto;
}

.organizations-page-wrap {
  --settings-ios-radius: 13px;
  --settings-ios-radius-sm: 10px;
  --settings-ios-hairline: color-mix(in oklch, var(--foreground), transparent 91%);
  --general-canvas-max: 1280px;
  width: min(100%, var(--general-canvas-max));
  margin-inline: auto;
}

html.dark .organizations-page-wrap {
  --settings-ios-hairline: color-mix(in oklch, var(--foreground), transparent 78%);
}

.organizations-flash-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.general-home-shell {
  display: grid;
  gap: 1rem;
}

.general-home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--settings-ios-radius);
  background: color-mix(in oklch, var(--muted), transparent 58%);
}

.general-home-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
}

.general-home-tab.active {
  border-color: color-mix(in oklch, var(--primary), transparent 78%);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.general-home-tab-icon,
.organizations-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.65rem;
  background: color-mix(in oklch, var(--primary), transparent 86%);
  color: var(--primary);
}

.general-home-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.general-home-overview,
.organizations-create-panel,
.organizations-board {
  border: 1px solid var(--border);
  border-radius: var(--settings-ios-radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.general-home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.general-home-overview-copy h2,
.organizations-panel-head h2,
.organizations-section-head h2 {
  margin: 0.12rem 0 0;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.18;
}

.general-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

.general-metric {
  min-width: 0;
  min-height: 4.1rem;
  padding: 0.72rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 25%);
  border-radius: var(--settings-ios-radius-sm);
  background: color-mix(in oklch, var(--muted), transparent 64%);
}

.general-metric span {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-metric small {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.2;
}

.organizations-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.organizations-create-panel,
.organizations-board {
  overflow: hidden;
}

.organizations-panel-head,
.organizations-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1rem 0.75rem;
}

.organizations-panel-head {
  justify-content: flex-start;
  border-bottom: 1px solid var(--settings-ios-hairline);
}

.organizations-create-card {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  padding: 0.9rem 1rem 1rem;
}

.organizations-create-card label,
.organization-edit-form label span {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted-foreground);
}

.organizations-create-card input,
.organizations-create-card textarea,
.organization-edit-form input,
.organization-edit-form textarea {
  width: 100%;
  max-width: none;
  border: 1px solid var(--input);
  border-radius: var(--settings-ios-radius-sm);
  background: var(--control-bg);
  color: var(--control-fg);
  padding: 0.62rem 0.72rem;
  font: inherit;
  font-size: var(--text-base);
  box-shadow: none;
}

.organizations-create-card input,
.organization-edit-form input {
  min-height: 2.55rem;
}

.organizations-create-card textarea,
.organization-edit-form textarea {
  min-height: 4.4rem;
  resize: vertical;
}

.organizations-create-btn {
  width: 100%;
  min-height: 2.55rem;
  margin-top: 0.18rem;
  border-radius: var(--settings-ios-radius-sm);
  font-weight: 600;
}

.organizations-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.45rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.organizations-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  padding: 0 1rem 1rem;
}

.organization-card {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--border), transparent 15%);
  border-radius: var(--settings-ios-radius);
  background: color-mix(in oklch, var(--card), var(--muted) 10%);
  overflow: hidden;
}

.organization-card--selected,
.organization-card[open] {
  border-color: color-mix(in oklch, var(--primary), transparent 62%);
}

.organization-card[open] {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 92%);
}

.organization-card > summary {
  list-style: none;
  display: flex;
  min-height: 11.25rem;
  flex-direction: column;
  gap: 0.72rem;
  padding: 0.92rem;
  cursor: pointer;
}

.organization-card > summary::-webkit-details-marker {
  display: none;
}

.organization-card > summary:hover {
  background: color-mix(in oklch, var(--muted), transparent 68%);
}

.org-card-topline,
.org-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

.org-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  border-radius: 0.78rem;
  background: color-mix(in oklch, var(--primary), transparent 84%);
  color: var(--primary);
  font-size: var(--text-md);
  font-weight: 600;
}

.org-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.org-card-name {
  overflow: hidden;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card-meta,
.org-card-note {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.org-card-note {
  min-height: 2.2rem;
  max-height: 2.2rem;
  overflow: hidden;
}

.org-card-note--empty {
  color: color-mix(in oklch, var(--muted-foreground), transparent 34%);
}

.org-dot {
  margin: 0 0.35rem;
  opacity: 0.65;
}

.org-card-bottom {
  justify-content: space-between;
  margin-top: auto;
}

.org-card-integrations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}

.org-card-integration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 0.62rem;
  background: var(--card);
}

.org-card-integration img {
  display: block;
  width: 1.22rem;
  height: 1.22rem;
  object-fit: contain;
}

.org-card-integration.is-active {
  border-color: color-mix(in oklch, #16a34a, transparent 55%);
  background: color-mix(in oklch, #16a34a, transparent 91%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, #16a34a, transparent 80%);
}

.org-card-integration.is-muted {
  opacity: 0.42;
  filter: grayscale(1) saturate(0.35);
}

.org-card-actions {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: auto;
}

.org-card-open-form {
  display: flex;
  align-items: center;
}

.org-card-open-btn {
  min-height: 2.1rem;
  border-radius: 0.62rem;
  white-space: nowrap;
}

.org-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 0.58rem;
  color: var(--muted-foreground);
  background: var(--card);
}

.org-card-chevron svg {
  transition: transform 0.22s ease;
}

.organization-card[open] > summary .org-card-chevron svg {
  transform: rotate(90deg);
}

.organization-edit-form {
  display: grid;
  gap: 0.72rem;
  padding: 0.9rem;
  border-top: 1px solid var(--settings-ios-hairline);
  background: color-mix(in oklch, var(--muted), transparent 72%);
}

html.dark .organization-edit-form {
  background: color-mix(in oklch, var(--background), transparent 35%);
}

.organization-edit-grid {
  display: grid;
  gap: 0.62rem;
}

.organization-edit-form label {
  display: grid;
  gap: 0.34rem;
}

.organization-edit-form .btn {
  justify-self: start;
  min-height: 2.35rem;
  border-radius: var(--settings-ios-radius-sm);
}

.organizations-empty {
  padding: 1.5rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--settings-ios-radius);
  color: var(--muted-foreground);
  font-size: var(--text-base);
  text-align: center;
}

@media (min-width: 1400px) {
  .organizations-page-wrap:not(.organizations-page-wrap--fluid) .organizations-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .general-home-overview,
  .organizations-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .organizations-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .general-home-tab {
    width: 100%;
  }

  .general-metric-grid {
    grid-template-columns: 1fr;
  }

  .organizations-panel-head,
  .organizations-section-head {
    align-items: flex-start;
  }

  .org-card-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .org-card-actions,
  .org-card-open-btn {
    width: 100%;
  }

  .org-card-actions {
    justify-content: space-between;
  }

  .org-card-open-form {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* General organizations director panel */
.director-org-workspace {
  --director-blue: oklch(0.52 0.16 255);
  --director-green: oklch(0.49 0.14 150);
  --director-red: oklch(0.55 0.16 28);
  --director-gold: oklch(0.62 0.13 78);
  --director-line: color-mix(in oklch, var(--border), var(--primary) 12%);
}

.director-org-hero,
.director-org-actions,
.director-org-directory {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--director-line);
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 64%),
    var(--card);
  box-shadow:
    0 18px 42px color-mix(in oklch, var(--primary), transparent 92%),
    0 1px 0 color-mix(in oklch, white, transparent 58%) inset;
}

.director-org-hero::before,
.director-org-actions::before,
.director-org-directory::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--director-blue), var(--director-green));
}

.director-org-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(28rem, 0.95fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1.1rem;
}

.director-org-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.58rem;
  min-width: 0;
}

.director-org-hero-main h2,
.director-action-head h2,
.director-section-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
}

.director-org-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.62rem;
}

.director-org-metric {
  min-width: 0;
  min-height: 5.25rem;
  padding: 0.78rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--primary), transparent 94%), transparent 56%),
    color-mix(in oklch, var(--card), var(--muted) 5%);
  box-shadow: 0 10px 22px color-mix(in oklch, black, transparent 96%);
}

.director-org-metric span {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-org-metric small {
  display: block;
  margin-top: 0.48rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.director-org-metric--active {
  border-color: color-mix(in oklch, var(--director-green), transparent 62%);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--director-green), transparent 91%), transparent 58%),
    var(--card);
}

.org-balance-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  min-width: 0;
}

.org-balance-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.72rem;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 73%);
  border-radius: 999px;
  color: color-mix(in oklch, var(--foreground), var(--primary) 12%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.15;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 62%) inset;
}

.org-balance-chip--empty {
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 56%);
  border-color: color-mix(in oklch, var(--border), transparent 20%);
}

.org-balance-table-wrap {
  width: 100%;
  min-width: 0;
}

.org-balance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.34rem;
  font-variant-numeric: tabular-nums;
}

.org-balance-table th,
.org-balance-table td {
  min-height: 2.02rem;
  padding: 0.46rem 0.62rem;
  border-block: 1px solid color-mix(in oklch, var(--primary), transparent 73%);
  background: color-mix(in oklch, var(--primary), transparent 93%);
  line-height: 1.14;
}

.org-balance-table th {
  width: 4.6rem;
  border-left: 1px solid color-mix(in oklch, var(--primary), transparent 73%);
  border-radius: 10px 0 0 10px;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
}

.org-balance-table td {
  overflow: hidden;
  border-right: 1px solid color-mix(in oklch, var(--primary), transparent 73%);
  border-radius: 0 10px 10px 0;
  color: color-mix(in oklch, var(--foreground), var(--primary) 10%);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-balance-table-empty td {
  border-inline: 1px solid color-mix(in oklch, var(--border), transparent 20%);
  border-radius: 10px;
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 56%);
  text-align: left;
}

.org-balance-table td.org-balance-table-amount {
  border-inline: 1px solid color-mix(in oklch, var(--primary), transparent 73%);
  border-radius: 10px;
  text-align: right;
}

.org-balance-table-value {
  font-weight: 760;
}

.org-balance-table-currency {
  margin-left: 0.28rem;
  color: color-mix(in oklch, var(--foreground), var(--primary) 20%);
  font-size: var(--text-sm);
  font-weight: 820;
}

.director-org-actions {
  display: grid;
  grid-template-columns: minmax(27rem, 1.35fr) repeat(3, minmax(12rem, 0.65fr));
  gap: 0.72rem;
  padding: 0.9rem;
}

.director-create-card,
.director-nav-card {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 60%),
    color-mix(in oklch, var(--card), var(--muted) 4%);
}

.director-create-card {
  padding: 0.92rem;
}

.director-action-head,
.director-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.director-action-head {
  justify-content: flex-start;
  margin-bottom: 0.82rem;
}

.director-create-form,
.director-create-fields {
  display: grid;
  gap: 0.62rem;
}

.director-create-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0;
}

.director-create-fields {
  grid-template-columns: minmax(12rem, 0.9fr) minmax(15rem, 1.1fr);
}

.director-create-fields label,
.organization-edit-form label {
  display: grid;
  gap: 0.32rem;
}

.director-create-fields label span,
.organization-edit-form label span,
.director-card-label {
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 12%);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.director-create-form input,
.director-create-form textarea,
.organization-edit-form input,
.organization-edit-form textarea {
  min-height: 2.72rem;
  border-color: color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 88%), transparent),
    color-mix(in oklch, var(--background), var(--primary) 3%);
  font-weight: 650;
}

.director-create-form textarea,
.organization-edit-form textarea {
  min-height: 2.72rem;
  resize: vertical;
}

.director-create-form .organizations-create-btn {
  width: auto;
  min-width: 8.5rem;
  min-height: 2.72rem;
  margin: 0;
  border-radius: 11px;
}

.director-nav-card {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-height: 8rem;
  padding: 0.9rem;
  color: var(--foreground);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.director-nav-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--primary), transparent 91%), transparent 62%),
    var(--card);
}

.director-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 72%);
  border-radius: 11px;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary), transparent 90%);
}

.director-nav-card strong {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
}

.director-nav-card small {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
}

.director-org-directory {
  padding: 1rem;
}

.general-module-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.32rem;
  min-height: 3.08rem;
  padding: 0.56rem 0.7rem 0;
  overflow-x: auto;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 7px 7px 0 0;
  background: color-mix(in oklch, var(--primary), var(--background) 92%);
}

.general-module-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.6rem;
  min-height: 2.28rem;
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-bottom-color: color-mix(in oklch, var(--border), transparent 22%);
  border-radius: 7px 7px 0 0;
  color: color-mix(in oklch, var(--foreground), var(--muted-foreground) 16%);
  background: color-mix(in oklch, var(--card), white 7%);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.general-module-tab:hover {
  color: var(--primary);
  background: color-mix(in oklch, var(--card), var(--primary) 5%);
}

.general-module-tab.active {
  border-color: var(--primary);
  color: white;
  background: var(--primary);
}

.general-module-sync,
.general-module-tab-sync {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.28rem;
  min-width: 2.28rem;
  min-height: 2.28rem;
  margin-left: 0.35rem;
  margin-bottom: 0;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-bottom-color: color-mix(in oklch, var(--border), transparent 22%);
  border-radius: 7px 7px 0 0;
  color: var(--primary);
  background: color-mix(in oklch, var(--card), white 8%);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 48%) inset;
  cursor: pointer;
}

.general-module-tab-sync {
  width: 2rem;
  min-width: 2rem;
  min-height: 2.28rem;
  margin-left: 0;
  border-width: 0 1px 0 0;
  border-color: color-mix(in oklch, currentColor, transparent 78%);
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  opacity: 0.78;
}

.general-module-sync:hover,
.general-module-tab-sync:hover {
  color: white;
  border-color: var(--primary);
  background: var(--primary);
  opacity: 1;
}

.general-module-sync svg,
.general-module-tab-sync svg,
.general-module-tab-sync-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.general-module-sync.is-syncing svg,
.general-module-tab-sync.is-syncing svg {
  animation: module-sync-spin 0.72s linear infinite;
}

.general-module-tab-sync-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  min-width: 2rem;
  align-self: stretch;
  margin: -0.5rem 0 -0.5rem -0.65rem;
  border-right: 1px solid color-mix(in oklch, currentColor, transparent 78%);
  color: inherit;
  opacity: 0.78;
  cursor: pointer;
}

.general-module-tab-sync-icon:hover {
  opacity: 1;
  background: color-mix(in oklch, currentColor, transparent 88%);
}

@keyframes module-sync-spin {
  to {
    transform: rotate(360deg);
  }
}

.director-section-head {
  padding: 0 0 0.92rem;
}

.director-org-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0;
}

.director-org-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border-color: color-mix(in oklch, var(--border), var(--primary) 14%);
  background:
    linear-gradient(160deg, color-mix(in oklch, var(--primary), transparent 94%), transparent 42%),
    var(--card);
  box-shadow: 0 14px 30px color-mix(in oklch, black, transparent 96%);
}

.director-org-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--primary), var(--director-green));
}

.director-org-card.organization-card--selected {
  border-color: color-mix(in oklch, var(--primary), transparent 50%);
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--primary), transparent 91%),
    0 18px 34px color-mix(in oklch, var(--primary), transparent 91%);
}

.director-org-card-top {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

.director-org-status {
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 14%);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 52%);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.director-org-status.is-on {
  border-color: color-mix(in oklch, var(--director-green), transparent 62%);
  color: var(--director-green);
  background: color-mix(in oklch, var(--director-green), transparent 90%);
}

.director-org-card-body {
  display: grid;
  gap: 0.78rem;
}

.director-org-balance,
.director-org-integrations {
  display: grid;
  gap: 0.42rem;
}

.director-org-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.director-org-card-stats span {
  min-width: 0;
  padding: 0.58rem 0.65rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 11px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
}

.director-org-card-stats b {
  display: block;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.1;
}

.director-org-card-stats small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
}

.director-org-card .org-card-note {
  min-height: auto;
  max-height: 2.8rem;
  margin: 0;
}

.director-org-card-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding-top: 0.72rem;
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 20%);
}

.director-org-card-actions .btn {
  min-height: 2.28rem;
  border-radius: 10px;
  font-weight: 600;
}

.director-org-edit {
  position: relative;
}

.director-org-edit > summary {
  list-style: none;
  cursor: pointer;
}

.director-org-edit > summary::-webkit-details-marker {
  display: none;
}

.director-org-edit[open] > summary {
  color: var(--primary);
  border-color: color-mix(in oklch, var(--primary), transparent 62%);
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.director-org-edit .organization-edit-form {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 20;
  width: min(28rem, calc(100vw - 2rem));
  padding: 0.85rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 20px 42px color-mix(in oklch, black, transparent 86%);
}

.director-org-edit .organization-edit-form .btn {
  justify-self: start;
}

@media (min-width: 1500px) {
  .director-org-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .director-org-hero,
  .director-org-actions {
    grid-template-columns: 1fr;
  }

  .director-org-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .director-create-form,
  .director-create-fields {
    grid-template-columns: 1fr;
  }

  .director-create-form .organizations-create-btn {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .director-org-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .director-org-hero-metrics,
  .director-org-card-stats {
    grid-template-columns: 1fr;
  }

  .director-org-card-actions .org-card-open-form,
  .director-org-card-actions .btn,
  .director-org-edit {
    width: 100%;
  }

  .director-org-edit .organization-edit-form {
    position: static;
    width: 100%;
    margin-top: 0.55rem;
  }
}

/* Organizations panel focused revision */
.director-org-hero--focused {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
  padding: 1rem;
}

.director-org-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.director-org-titlebar h2 {
  margin: 0.12rem 0 0;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.director-create-drawer {
  position: relative;
  min-width: min(100%, 18rem);
}

.director-create-drawer > summary {
  list-style: none;
}

.director-create-drawer > summary::-webkit-details-marker {
  display: none;
}

.director-create-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  width: 100%;
  border-radius: 11px;
  font-weight: 600;
  cursor: pointer;
}

.director-create-summary span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.45rem;
  background: color-mix(in oklch, white, transparent 82%);
}

.director-create-panel {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1fr) auto;
  gap: 0.62rem;
  align-items: end;
  margin-top: 0.65rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 96%), transparent),
    color-mix(in oklch, var(--card), var(--muted) 4%);
  box-shadow: 0 12px 28px color-mix(in oklch, black, transparent 94%);
}

.director-create-panel label {
  display: grid;
  gap: 0.32rem;
}

.director-create-panel label span {
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 12%);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.director-create-panel input,
.director-create-panel textarea {
  min-height: 2.55rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 10px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
  color: var(--foreground);
  padding: 0.58rem 0.68rem;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 650;
}

.director-create-panel textarea {
  resize: vertical;
}

.director-create-panel .btn {
  min-height: 2.55rem;
  border-radius: 10px;
  font-weight: 600;
}

.director-signal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(10rem, 0.75fr) minmax(10rem, 0.75fr);
  gap: 0.68rem;
}

.director-signal-card {
  min-width: 0;
  min-height: 6rem;
  padding: 0.78rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 56%),
    color-mix(in oklch, var(--card), var(--muted) 4%);
}

.director-signal-card small {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.director-signal-card strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-signal-card > span {
  display: block;
  margin-top: 0.42rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.director-pnl-lines {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.38rem 0.58rem;
  align-items: center;
}

.director-pnl-lines > span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
}

.director-org-directory--focused {
  padding: 0.95rem;
}

.director-org-grid--focused {
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 0.82rem;
}

.director-org-card--focused {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.72rem;
  height: 100%;
  min-height: 22.8rem;
  padding: 0.88rem;
}

.director-org-card--focused .org-card-name {
  max-width: 100%;
}

.director-org-snapshot {
  display: grid;
  align-content: start;
  gap: 0.62rem;
}

.director-org-data-block {
  display: grid;
  gap: 0.36rem;
  min-width: 0;
}

.director-org-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.director-org-mini-stats span {
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 10px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
}

.director-org-mini-stats b {
  display: block;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.05;
}

.director-org-mini-stats small {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
}

.director-org-card--focused .director-org-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-self: end;
  padding-top: 0.65rem;
}

.director-org-card--focused .director-org-card-actions .btn,
.director-org-card--focused .org-card-open-form {
  width: 100%;
}

.director-org-card--focused .director-org-card-actions .btn {
  justify-content: center;
  min-height: 2.54rem;
  padding: 0.48rem 0.62rem;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

.director-history-btn--all {
  color: color-mix(in oklch, var(--primary), var(--foreground) 16%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 88%), transparent),
    color-mix(in oklch, var(--card), var(--primary) 6%);
}

.director-history-btn--expense {
  color: color-mix(in oklch, #b42318, var(--foreground) 24%);
  background:
    linear-gradient(180deg, color-mix(in oklch, #f97316, transparent 91%), transparent),
    color-mix(in oklch, var(--card), #fee2e2 8%);
}

.director-history-btn--income {
  color: color-mix(in oklch, var(--director-green), var(--foreground) 18%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--director-green), transparent 90%), transparent),
    color-mix(in oklch, var(--card), var(--director-green) 5%);
}

.director-org-edit--inline {
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 22%);
  padding-top: 0.35rem;
}

.director-org-edit--inline > summary {
  width: fit-content;
  padding: 0.28rem 0;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.director-org-edit--inline .organization-edit-form {
  position: static;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 12px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
  box-shadow: none;
}

.director-org-edit--inline .organization-edit-form .btn {
  justify-self: stretch;
  min-height: 2.38rem;
  border-radius: 10px;
  font-weight: 600;
}

@media (max-width: 1260px) {
  .director-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 720px) {
  .director-org-titlebar {
    flex-direction: column;
  }

  .director-create-drawer {
    width: 100%;
  }

  .director-signal-grid,
  .director-org-grid--focused {
    grid-template-columns: 1fr;
  }

  .director-org-card--focused .director-org-card-actions {
    grid-template-columns: 1fr;
  }
}

/* Organizations capital panel and modal workflow */
.director-capital-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--director-line);
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 62%),
    var(--card);
  box-shadow:
    0 18px 42px color-mix(in oklch, var(--primary), transparent 92%),
    0 1px 0 color-mix(in oklch, white, transparent 58%) inset;
}

.director-capital-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--director-blue), var(--director-green));
}

.director-capital-main {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
}

.director-capital-copy {
  min-width: 0;
}

.director-capital-copy h2 {
  margin: 0.12rem 0 0;
  color: var(--foreground);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.director-capital-copy > span {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  font-weight: 600;
}

.director-currency-form {
  display: grid;
  gap: 0.32rem;
  min-width: 9.5rem;
}

.director-currency-form label {
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 12%);
  font-size: var(--text-xs);
  font-weight: 600;
}

.director-currency-form select {
  min-height: 2.55rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 11px;
  padding: 0.5rem 0.65rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 88%), transparent),
    color-mix(in oklch, var(--background), var(--primary) 3%);
  color: var(--foreground);
  font: inherit;
  font-weight: 600;
}

.director-capital-breakdown {
  display: grid;
  gap: 0.4rem;
  max-width: 56rem;
}

.director-capital-signals {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(9rem, 0.55fr);
  gap: 0.68rem;
}

.director-capital-signals article {
  min-width: 0;
  min-height: 5.2rem;
  padding: 0.78rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 58%),
    color-mix(in oklch, var(--card), var(--muted) 4%);
}

.director-capital-signals small {
  display: block;
  margin-bottom: 0.42rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
}

.director-capital-signals strong {
  display: block;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.05;
}

.director-section-head--with-action {
  align-items: center;
}

.director-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.director-create-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  border-radius: 11px;
  font-weight: 600;
}

.director-create-inline-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.42rem;
  background: color-mix(in oklch, white, transparent 84%);
}

.director-org-card--focused {
  padding-right: 3.1rem;
}

.director-org-icon-btn {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary), transparent 92%);
  cursor: pointer;
}

.director-org-icon-btn:hover {
  background: color-mix(in oklch, var(--primary), transparent 86%);
}

.director-org-modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 2rem));
  padding: 0;
  border: 0;
  border-radius: 15px;
  color: var(--foreground);
  background: transparent;
}

.director-org-modal::backdrop {
  background: color-mix(in oklch, black, transparent 58%);
  backdrop-filter: blur(5px);
}

.director-modal-card {
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 15px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 95%), transparent 40%),
    var(--card);
  box-shadow: 0 28px 70px color-mix(in oklch, black, transparent 76%);
}

.director-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 14%);
}

.director-modal-head h2 {
  margin: 0.1rem 0 0;
  color: var(--foreground);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.director-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 14%);
  border-radius: 10px;
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 58%);
  cursor: pointer;
}

.director-modal-form {
  display: grid;
  gap: 0.72rem;
  padding: 0.95rem 1rem 1rem;
}

.director-modal-form label {
  display: grid;
  gap: 0.34rem;
}

.director-modal-form label span {
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 12%);
  font-size: var(--text-sm);
  font-weight: 600;
}

.director-modal-form input,
.director-modal-form textarea {
  width: 100%;
  min-height: 2.72rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 11px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
  color: var(--foreground);
  padding: 0.62rem 0.72rem;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 650;
}

.director-modal-form textarea {
  min-height: 5.4rem;
  resize: vertical;
}

.director-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.director-modal-actions .btn {
  min-height: 2.45rem;
  border-radius: 10px;
  font-weight: 600;
}

@media (max-width: 920px) {
  .director-capital-main {
    flex-direction: column;
  }

  .director-currency-form {
    width: 100%;
  }

  .director-capital-signals {
    grid-template-columns: 1fr;
  }

  .director-capital-copy h2 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 560px) {
  .director-section-head--with-action,
  .director-section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .director-section-actions,
  .director-create-inline-btn {
    width: 100%;
  }

  .director-modal-actions {
    flex-direction: column-reverse;
  }
}

.integrations-intro {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.45;
  max-width: 36rem;
}

/* Компактный выбор темы (иконка + короткая подпись) */
.theme-picker-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: stretch;
}

.theme-chip {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.theme-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}

.theme-chip-face {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.theme-chip:hover .theme-chip-face {
  border-color: color-mix(in oklch, var(--primary), transparent 58%);
}

.theme-chip input:focus-visible + .theme-chip-face {
  outline: none;
  box-shadow:
    var(--shadow-sm),
    0 0 0 2px color-mix(in oklch, var(--ring), transparent 72%);
}

.theme-chip input:checked + .theme-chip-face {
  border-color: color-mix(in oklch, var(--primary), transparent 28%);
  background: color-mix(in oklch, var(--primary), transparent 89%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary), transparent 68%);
}

.theme-chip-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--primary);
}

/* UISegmentedControl-подобный выбор темы (настройки) */
.theme-picker-ios {
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 3px;
  border-radius: 11px;
  background: color-mix(in oklch, var(--muted), transparent 38%);
}

.theme-picker-ios .theme-chip {
  flex: 1 1 0;
  min-width: 0;
}

.theme-picker-ios .theme-chip-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.52rem 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted-foreground);
  transition:
    background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

.theme-picker-ios .theme-chip:hover .theme-chip-face {
  color: var(--foreground);
}

.theme-picker-ios .theme-chip input:focus-visible + .theme-chip-face {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring), transparent 55%);
}

.theme-picker-ios .theme-chip input:checked + .theme-chip-face {
  background: var(--card);
  color: var(--foreground);
  box-shadow:
    0 1px 3px oklch(0 0 0 / 0.07),
    0 1px 2px oklch(0 0 0 / 0.05);
}

html.dark .theme-picker-ios .theme-chip input:checked + .theme-chip-face {
  background: color-mix(in oklch, var(--card), var(--background) 18%);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.35),
    inset 0 1px 0 oklch(1 1 1 / 0.05);
}

.theme-picker-ios .theme-chip-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  opacity: 0.88;
}

.theme-picker-ios .theme-chip input:checked + .theme-chip-face .theme-chip-icon {
  color: var(--primary);
  opacity: 1;
}

.card-head-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.card-head-row .card-head {
  margin: 0;
}

.card-head-row.card-head-row-sm {
  margin-bottom: 0.35rem;
  gap: 0.4rem;
}

.card-head-icon {
  flex-shrink: 0;
  color: var(--muted-foreground);
  opacity: 0.9;
}

.card-lead {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.55;
  max-width: 36rem;
}

.form-actions {
  margin-top: 0.25rem;
}

/* ——— Admin shell marker ——— */
body[data-shell="admin"] .sidebar {
  border-left: 3px solid color-mix(in oklch, var(--primary), transparent 52%);
}

/* ——— Empty states (dashboard) ——— */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.25rem 0 1.5rem;
}

.empty-state-card {
  width: 100%;
  max-width: 26rem;
  text-align: center;
  padding: 2.25rem 1.75rem 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card), var(--muted) 22%);
  box-shadow: var(--shadow-sm);
}

.empty-state-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.15rem;
  color: color-mix(in oklch, var(--primary), var(--muted-foreground) 35%);
}

.empty-state-title {
  margin: 0 0 0.5rem;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.empty-state-text {
  margin: 0 0 1.25rem;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.empty-state-action {
  display: inline-flex;
}

.forbidden-card .forbidden-lead {
  margin: 0 0 1rem;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--foreground);
}

.forbidden-card .forbidden-actions {
  margin: 0;
}

/* ——— Mobile sidebar drawer ——— */
.sidebar-backdrop {
  display: none;
}

.mobile-topbar {
  display: none;
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.35rem 0 -0.35rem -0.35rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease;
}

.mobile-nav-toggle:hover {
  background: color-mix(in oklch, var(--muted), transparent 35%);
}

.mobile-nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring), transparent 55%);
}

.mobile-topbar-brand {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mobile-topbar-upos {
  color: var(--foreground);
}

.mobile-topbar-fin {
  margin-left: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-sm);
  color: var(--brand-accent);
}

@media (max-width: 768px) {
  .sidebar-rail-toggle {
    display: none !important;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: calc(0.65rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.65rem calc(1rem + env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--background), transparent 10%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  @media (hover: none) and (pointer: coarse) {
    .mobile-nav-toggle {
      min-width: 2.75rem;
      min-height: 2.75rem;
    }
  }

  body.layout-nav-open {
    overflow: hidden;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 180;
    background: oklch(0.15 0.02 264 / 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.2s ease;
  }

  html.emerald .sidebar-backdrop {
    background: oklch(0.15 0.04 175 / 0.4);
  }

  .sidebar-backdrop[hidden] {
    display: none !important;
  }

  .layout {
    display: block;
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(17.5rem, calc(92vw - env(safe-area-inset-left, 0px)));
    z-index: 190;
    transform: translateX(-104%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--sidebar-border);
    border-bottom: none;
    border-left: none;
    box-shadow: var(--shadow-lg);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  body[data-shell="admin"] .sidebar {
    border-left: none;
    border-top: 3px solid color-mix(in oklch, var(--primary), transparent 52%);
  }

  body.layout-nav-open .sidebar {
    transform: translateX(0);
  }

  .main-column {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .page-header {
    position: relative;
    top: auto;
    z-index: 1;
    padding: 1rem calc(1.25rem + env(safe-area-inset-right, 0px)) 1rem calc(1.25rem + env(safe-area-inset-left, 0px));
  }

  .page-body {
    padding: 1.25rem calc(1.25rem + env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) calc(1.25rem + env(safe-area-inset-left, 0px));
  }

  .dash-hero-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.35rem 1.25rem 1.45rem;
  }

  .dash-hero-icon {
    width: 3rem;
    height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-backdrop {
    transition: none !important;
  }
}

/* Сайдбар: итог казны загружается скриптом; кастомные селекты валют */

.upos-ccy-select {
  position: relative;
  width: 100%;
  z-index: 1;
}

.upos-ccy-select.is-open {
  z-index: 50;
}

.upos-ccy-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.upos-ccy-select-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--input, #ccc);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--control-bg, var(--card));
  color: var(--control-fg, var(--foreground));
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upos-ccy-select-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--muted) !important;
  border-color: var(--border) !important;
}

.upos-ccy-select-btn:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary), transparent 80%);
}

.upos-ccy-select-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.upos-ccy-select-btn-code {
  margin-left: 0.15rem;
  font-weight: 650;
  opacity: 0.88;
}

.upos-ccy-select-btn-sub {
  margin-left: 0.35rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.upos-ccy-select-btn-plain,
.upos-ccy-select-btn-ph {
  font-size: var(--text-base);
}

.upos-ccy-chevron {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
}

.upos-ccy-select-panel {
  position: absolute;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(24rem, calc(100vw - 2rem));
  top: calc(100% + 4px);
  max-height: min(16rem, 45vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.upos-ccy-select-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: var(--text-base);
  min-width: 0;
  white-space: nowrap;
}

.upos-ccy-select-item:hover {
  background: color-mix(in oklch, var(--muted), transparent 45%);
}

.upos-ccy-select-item.is-placeholder {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  cursor: default;
}

.upos-ccy-select-item.is-selected {
  background: color-mix(in oklch, var(--primary), transparent 90%);
}

.upos-ccy-select-item-code {
  flex: 1 1 auto;
  min-width: 0;
}

.upos-ccy-select-item-balance {
  flex: 0 0 auto;
  margin-left: 0.45rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: right;
}

.upos-ccy-select-item-sub {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  padding-left: 0.35rem;
}

.upos-ccy-ic-wrap {
  flex-shrink: 0;
  display: inline-flex;
  vertical-align: middle;
}

.upos-ccy-ic-svg {
  display: block;
}

/* Settings: Dictionary & Currencies */
.settings-dict-section + .settings-dict-section {
  margin-top: 1.5rem;
}

.settings-dict-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.settings-dict-head .settings-ios-footnote {
  margin-bottom: 0.2rem;
}

.settings-dict-note {
  max-width: 48rem;
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.settings-dict-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
  font-weight: 600;
  font-size: var(--text-base);
}

.ccy-visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  padding: 0.25rem;
}

.ccy-add-panel {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--settings-ios-hairline);
  border-radius: var(--settings-ios-radius-sm);
  background: color-mix(in oklch, var(--card), var(--muted) 18%);
}

.ccy-add-label {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 650;
}

.ccy-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.ccy-add-input {
  text-transform: uppercase;
  letter-spacing: 0;
}

.ccy-add-btn {
  min-height: 2.35rem;
  white-space: nowrap;
}

.ccy-add-status {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.ccy-add-status[data-variant="ok"] {
  color: color-mix(in oklch, var(--success, oklch(0.45 0.14 145)), var(--foreground) 20%);
}

.ccy-add-status[data-variant="err"] {
  color: var(--danger, oklch(0.58 0.18 25));
}

.ccy-check-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  min-height: 3.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: color-mix(in oklch, var(--muted), transparent 70%);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.ccy-check-item:hover {
  background: color-mix(in oklch, var(--muted), transparent 45%);
}

.ccy-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
}

.ccy-check-item input:checked + .ccy-check-box {
  background: var(--primary);
  border-color: var(--primary);
}

.ccy-check-item input:checked + .ccy-check-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ccy-check-item input {
  display: none;
}

.ccy-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ccy-check-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--foreground);
}

.ccy-check-sub {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.ccy-check-sub:empty {
  display: none;
}

@media (max-width: 520px) {
  .ccy-add-row {
    grid-template-columns: 1fr;
  }
}

/* Categories in Settings */
.settings-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.settings-cat-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem;
  background: color-mix(in oklch, var(--muted), transparent 82%);
  border: 1px solid color-mix(in oklch, var(--border), transparent 30%);
  border-radius: var(--radius-md);
}

.settings-cat-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
}

.cat-type-icon,
.settings-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.65rem;
  font-weight: 600;
  font-size: var(--text-md);
}

button.settings-cat-icon {
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

button.settings-cat-icon:hover {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 84%);
}

.settings-cat-subcat-toggle[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary), transparent 55%);
}

.cat-type-icon--income,
.settings-cat-icon--income {
  background: color-mix(in oklch, oklch(0.62 0.16 150), transparent 84%);
  color: oklch(0.46 0.15 150);
}

.cat-type-icon--expense,
.settings-cat-icon--expense {
  background: color-mix(in oklch, var(--destructive), transparent 86%);
  color: var(--destructive);
}

.cat-type-icon--transfer,
.settings-cat-icon--transfer {
  background: color-mix(in oklch, var(--primary), transparent 86%);
  color: var(--primary);
}

.cat-type-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.cat-type-desc {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
}

.cat-type-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted), transparent 35%);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.settings-cat-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--card), transparent 8%);
  padding: 0.48rem 0.55rem;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--border), transparent 65%);
}

.settings-cat-name-input:focus {
  outline: none;
  border-color: color-mix(in oklch, var(--primary), transparent 45%);
  background: var(--control-bg);
}

.settings-cat-name-input:disabled {
  cursor: default;
  color: var(--muted-foreground);
  background: color-mix(in oklch, var(--muted), transparent 78%);
  box-shadow: none;
}

.settings-cat-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-cat-del,
.btn-cat-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.btn-cat-save {
  color: var(--primary);
}

.btn-cat-save:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn-cat-del:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn-cat-del:not(:disabled):hover {
  background: color-mix(in oklch, var(--destructive), transparent 88%);
  color: var(--destructive);
}

.btn-cat-save:not(:disabled):hover {
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--primary);
}

.settings-cat-add-row {
  display: flex;
  gap: 0.5rem;
}

.settings-cat-subcats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.42rem;
  width: 100%;
  padding-left: 2.6rem;
}

.settings-cat-subcats[hidden] {
  display: none !important;
}

.settings-cat-subcat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0.4rem;
}

.settings-cat-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.22rem 0.28rem 0.22rem 0.55rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 70%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), transparent 92%);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.settings-cat-subcat-chip button {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.settings-cat-subcat-chip button:hover {
  background: color-mix(in oklch, var(--destructive), transparent 88%);
  color: var(--destructive);
}

.settings-cat-subcat-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.settings-cat-subcat-input {
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--control-bg);
  color: var(--control-fg);
  padding: 0.46rem 0.6rem;
  font-size: var(--text-sm);
}

.settings-cat-input {
  flex: 1;
  background: var(--control-bg);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  font-size: var(--text-base);
  color: var(--control-fg);
}

@media (max-width: 560px) {
  .settings-dict-head {
    flex-direction: column;
  }

  .settings-cat-add-row {
    flex-direction: column;
  }
}

/* Reports Dashboard */
.reports-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.reports-tabs {
  display: flex;
  background: var(--surface-bg);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.reports-tab {
  padding: 6px 16px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.reports-tab.active {
  background: var(--card-bg);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.report-panel {
  width: 100%;
}

.report-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.report-card-header {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-card-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.report-period {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pnl-section {
  margin-bottom: 24px;
}

.pnl-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.pnl-section-title.income { color: var(--green-strong); }
.pnl-section-title.expense { color: var(--red-strong); }

.pnl-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pnl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-md);
}

.pnl-cat-name {
  color: var(--text-main);
}

.pnl-amount {
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

.pnl-amount.positive { color: var(--green-strong); }
.pnl-amount.negative { color: var(--red-strong); }

.empty-report-hint {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-style: italic;
  padding: 12px 0;
}

.balance-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.balance-item {
  padding: 16px;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.balance-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.balance-item-name {
  font-weight: 600;
  font-size: var(--text-md);
}

.balance-item-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  background: var(--accent-muted);
  color: var(--accent-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.balance-item-vals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.balance-val-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
}

.balance-val-ccy {
  color: var(--text-muted);
  font-weight: 500;
}

.balance-val-amt {
  font-weight: 600;
  font-family: ui-monospace, monospace;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* Desktop form constraints */
.settings-main-surface,
.employees-main-surface {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

/* Settings — integration rows */
.integr-row-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s;
}

.integr-row-card:hover {
  background: color-mix(in oklch, var(--muted), transparent 55%);
}

.integr-row-card + .integr-row-card,
.cat-row-card + .cat-row-card {
  border-top: 1px solid var(--border);
}

.integr-row-card .integr-card-title,
.integr-row-card-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.integr-row-card .integr-card-logo {
  flex: 0 0 auto;
}

.integr-row-card-trail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.integr-status-pill {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.integr-status-pill[data-variant="ok"] {
  border-color: color-mix(in oklch, var(--green-strong, #0a7a3e), transparent 65%);
  color: var(--green-strong, #0a7a3e);
  background: color-mix(in oklch, var(--green-strong, #0a7a3e), transparent 92%);
}

.integr-status-pill[data-variant="err"] {
  border-color: color-mix(in oklch, var(--red-strong, #c0392b), transparent 65%);
  color: var(--red-strong, #c0392b);
  background: color-mix(in oklch, var(--red-strong, #c0392b), transparent 92%);
}

.settings-integr-modal .settings-profile-modal-surface {
  max-width: 32rem;
}

.settings-integr-modal-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.integr-card-logo--modal {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.integr-card-logo--wide.integr-card-logo--modal {
  width: auto;
  max-width: 8rem;
  height: 2rem;
}

.settings-integr-modal .integr-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-integr-modal .integr-card-body[hidden] {
  display: none !important;
}

/* Dictionary — compact currencies */
.dict-ccy-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
}

.dict-ccy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
}

.dict-ccy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted), transparent 70%);
  font-size: var(--text-sm);
  font-weight: 600;
}

.dict-ccy-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dict-ccy-edit-btn {
  flex: 0 0 auto;
}

.ccy-check-item--inactive {
  opacity: 0.55;
}

.ccy-check-item--inactive .ccy-check-text,
.ccy-check-item--inactive .ccy-check-sub {
  color: var(--muted-foreground);
}

.ccy-check-item--inactive .ccy-check-icon {
  filter: grayscale(0.85);
}

/* Category compact rows */
.cat-row-card .cat-type-main {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-row-card .cat-type-count {
  flex: 0 0 auto;
}

.settings-cat-form-panel[hidden] {
  display: none !important;
}

.roles-permission-wrap {
  overflow-x: auto;
}

.roles-permission-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.roles-permission-table th,
.roles-permission-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--settings-ios-hairline);
  text-align: center;
}

.roles-permission-table th:first-child,
.roles-permission-table td:first-child {
  text-align: left;
}

.roles-permission-table tbody tr:last-child td {
  border-bottom: 0;
}

.roles-permission-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.roles-permission-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.roles-permission-check span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in oklch, var(--primary), white 25%);
  background: var(--card);
}

.roles-permission-check input:checked + span {
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--card);
}

.employees-role-permissions-field {
  display: grid;
  gap: 0.55rem;
  align-self: start;
  min-height: 0;
  padding: 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--muted), transparent 88%);
}

.employees-role-permissions-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem;
  min-height: 1.1rem;
}

.employees-role-permissions-note {
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.15;
}

.employees-permission-dropdown {
  border: 1px solid color-mix(in oklch, var(--border), transparent 16%);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}

.employees-permission-dropdown-summary,
.employees-category-subcat-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 2.45rem;
  padding: 0.52rem 0.65rem;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}

.employees-permission-dropdown-summary::-webkit-details-marker,
.employees-category-subcat-summary::-webkit-details-marker {
  display: none;
}

.employees-role-permission-summary::-webkit-details-marker {
  display: none;
}

.employees-permission-dropdown-summary span,
.employees-category-subcat-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  font-weight: 700;
}

.employees-permission-dropdown-summary small,
.employees-category-subcat-summary small {
  flex: 0 0 auto;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 650;
}

.employees-permission-chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}

.employees-permission-dropdown[open] > .employees-permission-dropdown-summary .employees-permission-chevron,
.employees-role-action-dropdown[open] > .employees-role-permission-summary .employees-permission-chevron,
.employees-category-subcat-dropdown[open] > .employees-category-subcat-summary .employees-permission-chevron {
  transform: rotate(180deg);
}

.employees-permission-dropdown-menu {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem;
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 30%);
  background: color-mix(in oklch, var(--muted), transparent 92%);
}

.employees-role-permissions-grid {
  display: grid;
  align-items: stretch;
  max-height: min(19rem, 34vh);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.employees-role-permission-group {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.2rem;
  border-radius: calc(var(--radius-md) - 0.18rem);
  background: color-mix(in oklch, var(--card), transparent 18%);
}

.employees-role-permission-check {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 0.2rem);
  background: color-mix(in oklch, var(--card), transparent 16%);
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  list-style: none;
}

.employees-role-permission-summary {
  grid-template-columns: 1rem minmax(0, 1fr) auto 1rem;
}

.employees-role-permission-summary .employees-permission-chevron {
  justify-self: end;
}

.employees-role-permission-check small {
  justify-self: end;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}

.employees-role-permission-check input {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--primary);
}

.employees-role-permission-check:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 72%);
  background: color-mix(in oklch, var(--primary), transparent 94%);
}

.employees-role-permissions-all {
  margin: 0 0.55rem;
  font-weight: 700;
}

.employees-button-permissions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.28rem;
  padding: 0.32rem 0.15rem 0.35rem 1.65rem;
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 52%);
}

.employees-button-permission-check {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  min-height: 1.75rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 50%);
  border-radius: calc(var(--radius-md) - 0.28rem);
  background: color-mix(in oklch, var(--muted), transparent 94%);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.employees-button-permission-check input {
  width: 0.82rem;
  height: 0.82rem;
  margin: 0;
  accent-color: var(--primary);
}

.employees-button-permission-check span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.employees-role-permission-group.is-permission-off .employees-button-permissions-list {
  opacity: 0.48;
}

.employees-role-permission-group.is-permission-off .employees-button-permission-check {
  cursor: not-allowed;
}

.employees-category-access-field {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.62rem;
  min-height: 0;
  max-height: min(18rem, 34vh);
  overflow: hidden;
  scrollbar-gutter: stable;
  padding: 0.7rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 15%);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--muted), transparent 86%);
}

.employees-category-access-all {
  font-weight: 700;
}

.employees-category-access-list {
  display: grid;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.15rem;
}

.employees-category-access-type {
  min-width: 0;
}

.employees-category-access-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: calc(var(--radius-md) - 0.22rem);
  background: color-mix(in oklch, var(--card), transparent 10%);
}

.employees-category-subcat-dropdown {
  margin-left: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--border), transparent 26%);
  border-radius: calc(var(--radius-md) - 0.18rem);
  background: color-mix(in oklch, var(--muted), transparent 94%);
  overflow: hidden;
}

.employees-category-subcat-summary {
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
}

.employees-category-subcat-summary span {
  font-size: var(--text-sm);
  font-weight: 700;
}

.employees-category-access-subcats {
  display: grid;
  gap: 0.22rem;
  padding: 0.35rem 0.5rem 0.45rem;
  border-top: 1px solid color-mix(in oklch, var(--border), transparent 34%);
}

.employees-category-subcat-check {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
}

.employees-category-subcat-check input {
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  accent-color: var(--primary);
}

.employees-category-access-empty {
  margin: 0;
  padding: 0.35rem 0.5rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

@media (max-width: 540px) {
  .employees-role-permissions-field,
  .employees-category-access-field {
    padding: 0.6rem;
  }

  .employees-category-subcat-dropdown {
    margin-left: 0;
  }

  .employees-button-permissions-list {
    grid-template-columns: 1fr;
    padding-left: 1.25rem;
  }

  .employees-role-permission-check {
    grid-template-columns: 1rem minmax(0, 1fr);
  }

  .employees-role-permission-summary {
    grid-template-columns: 1rem minmax(0, 1fr) 1rem;
  }

  .employees-role-permission-check small {
    grid-column: 2;
    justify-self: start;
  }

  .employees-role-permission-summary .employees-permission-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

.general-management-settings-page {
  --settings-ios-radius: 13px;
  --settings-ios-radius-sm: 10px;
  --settings-ios-hairline: color-mix(in oklch, var(--foreground), transparent 91%);
}

.general-management-settings-shell {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 14px 30px color-mix(in oklch, black, transparent 95%);
}

.general-management-settings-title {
  margin: 0.2rem 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.general-management-users-page {
  max-width: min(1560px, calc(100vw - 2.5rem));
  margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 1.4rem) 2.4rem;
}

.general-management-users-page .settings-employees-toolbar,
.general-management-users-page .settings-employees-table-card {
  background: var(--card);
}

.general-management-users-page .settings-employees-table-wrap {
  overflow: visible;
}

.general-management-users-page .employees-flash-group {
  margin-bottom: 0.75rem;
}

.settings-cat-modal .settings-profile-modal-surface {
  max-width: 28rem;
}

.org-ops-root {
  display: grid;
  gap: 1rem;
}

.org-ops-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.org-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
}

.org-ops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem;
}

.org-ops-kpi {
  min-width: 0;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--background), var(--primary) 3%);
}

.org-ops-kpi span,
.org-ops-kpi small {
  display: block;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-ops-kpi strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--foreground);
  font-size: var(--text-xl);
  font-weight: 850;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.org-ops-inline-form,
.org-ops-form-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.org-ops-inline-form label,
.org-ops-form-toolbar label {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-ops-inline-form select,
.org-ops-inline-form input,
.org-ops-form-toolbar input,
.org-hr-form input,
.org-ops-table input,
.org-ops-table select {
  min-height: 2.32rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

.org-ops-inline-form select,
.org-ops-inline-form input,
.org-ops-form-toolbar input {
  padding: 0.45rem 0.65rem;
}

.org-ops-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.org-ops-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.org-ops-table th,
.org-ops-table td {
  padding: 0.68rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.org-ops-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in oklch, var(--muted) 34%, var(--card));
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.org-ops-table tr:last-child td {
  border-bottom: 0;
}

.org-ops-table input,
.org-ops-table select {
  width: 100%;
  min-width: 8rem;
  padding: 0.42rem 0.55rem;
}

.org-ops-table input.org-ops-input-locked,
.org-ops-table input[readonly].org-ops-input-locked {
  background: color-mix(in oklch, var(--muted), transparent 70%);
  color: var(--foreground);
  cursor: not-allowed;
  font-weight: 700;
}

.org-ops-table-wrap--excel {
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 16%);
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: none;
}

.org-ops-table--shipments-entry {
  min-width: 66rem;
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 16%);
  border-collapse: collapse;
  background: var(--card);
  box-shadow: none;
}

.org-ops-table--shipments-entry th,
.org-ops-table--shipments-entry td {
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 10%) !important;
}

.org-ops-table--shipments-entry th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--workbench-table-head-height, 41px);
  padding-right: 1.6rem;
  background: color-mix(in oklch, var(--primary), var(--card) 88%);
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 20%);
  font-size: var(--text-xs);
  font-weight: 820;
  text-transform: uppercase;
  white-space: nowrap;
}

.org-ops-table--shipments-entry th::after {
  content: "\25BE";
  position: absolute;
  right: 0.62rem;
  top: 50%;
  color: color-mix(in oklch, var(--muted-foreground), transparent 18%);
  font-size: 0.72rem;
  transform: translateY(-50%);
}

.org-ops-table--shipments-entry td {
  height: 48px;
  min-height: 48px;
  padding: 0;
  background: var(--card);
}

.org-ops-table--shipments-entry tbody tr:nth-child(even) td {
  background: color-mix(in oklch, var(--muted), transparent 86%);
}

.org-ops-table--shipments-entry tbody tr:hover td {
  background: color-mix(in oklch, var(--primary), transparent 93%);
}

.org-ops-table--shipments-entry input,
.org-ops-table--shipments-entry select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 650;
  padding: 0.42rem 0.72rem;
}

.org-ops-table--shipments-entry input:focus,
.org-ops-table--shipments-entry select:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--card);
}

.org-ops-table--shipments-entry input.org-ops-input-locked,
.org-ops-table--shipments-entry input[readonly].org-ops-input-locked {
  background: color-mix(in oklch, var(--muted), transparent 68%);
}

.org-ops-table strong {
  font-variant-numeric: tabular-nums;
}

.org-ops-empty {
  color: var(--muted-foreground);
  text-align: center;
}

.org-hr-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.org-hr-form label {
  display: grid;
  gap: 0.32rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-hr-form input,
.org-hr-form select,
.org-hr-form textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
}

.org-hr-form select,
.org-hr-form textarea {
  min-height: 2.55rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 7px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 650;
}

.org-hr-form textarea {
  resize: vertical;
}

.org-hr-form-wide {
  grid-column: 1 / -1;
}

.org-hr-form .org-hr-checkline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in oklch, var(--card), var(--muted) 18%);
  color: var(--foreground);
  font-weight: 800;
}

.org-hr-form .org-hr-checkline--wide {
  grid-column: 1 / -1;
}

.org-hr-form .org-hr-checkline input {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  accent-color: var(--primary);
}

.org-hr-form-actions {
  display: flex;
  justify-content: flex-end;
}

.org-hr-staff-frame {
  padding: 1.15rem;
}

.org-hr-tabs {
  margin-bottom: 0.85rem;
}

.org-hr-tabs .general-module-tab {
  cursor: pointer;
  font-family: inherit;
}

.org-hr-launcher {
  margin-bottom: 0;
}

.org-hr-panels-root {
  display: grid;
  gap: 0.85rem;
}

.adjustments-empty-state {
  display: grid;
  gap: 0.45rem;
  min-height: 13rem;
  place-items: center;
  padding: 2rem;
  border: 1px dashed color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 12px;
  background: color-mix(in oklch, var(--card), var(--primary) 3%);
  color: var(--muted-foreground);
  text-align: center;
}

.adjustments-empty-state strong {
  color: var(--foreground);
  font-size: var(--text-lg);
}

.adjustments-empty-state span {
  max-width: 34rem;
}

.adjustments-table .adjustments-input {
  width: 100%;
  min-width: 8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.48rem 0.6rem;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}

.adjustments-table .adjustments-input:focus {
  border-color: color-mix(in oklch, var(--primary), white 10%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%);
  outline: none;
}

.adjustments-table .is-positive {
  color: var(--success);
  font-weight: 800;
}

.adjustments-table .is-negative {
  color: var(--danger);
  font-weight: 800;
}

.org-hr-staff-frame[hidden],
.org-hr-calendar-panel[hidden],
.org-hr-salary-panel[hidden] {
  display: none;
}

.org-hr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.85rem 0 1rem;
}

.org-hr-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.org-hr-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.org-hr-staff-search {
  flex: 1 1 18rem;
  max-width: 28rem;
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-hr-staff-search input {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--foreground);
  padding: 0.48rem 0.72rem;
  font: inherit;
  font-weight: 600;
  outline: none;
}

.org-hr-staff-search input:focus {
  border-color: color-mix(in oklch, var(--primary), transparent 35%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 86%);
}

.org-hr-toolbar .org-ops-inline-form {
  margin-left: auto;
}

.org-hr-staff-search + .org-ops-inline-form {
  margin-left: 0;
}

.org-hr-archive-btn {
  gap: 0.45rem;
}

.org-hr-archive-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.32rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 72%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 8%), transparent 76%),
    color-mix(in oklch, var(--primary), transparent 89%);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  line-height: 1;
}

.org-hr-staff-frame .org-ops-table-wrap {
  border-color: color-mix(in oklch, var(--border), var(--primary) 16%);
  box-shadow: inset 0 1px 0 color-mix(in oklch, white, transparent 42%);
}

.org-hr-table {
  min-width: 72rem;
}

.org-hr-table th,
.org-hr-table td {
  white-space: nowrap;
}

.org-hr-table td:nth-child(2) {
  min-width: 12rem;
  white-space: normal;
}

.org-hr-employee-name-btn {
  display: inline-flex;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.org-hr-employee-name-btn strong {
  color: var(--foreground);
}

.org-hr-employee-name-btn:hover strong,
.org-hr-employee-name-btn:focus-visible strong {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.org-hr-employee-name-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 5px;
}

.org-hr-salary-name-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.org-hr-salary-name-link:hover,
.org-hr-salary-name-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.org-hr-salary-name-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 5px;
}

.org-hr-actions-col,
.org-hr-actions-cell {
  width: 4.4rem;
  min-width: 4.4rem;
  text-align: right;
}

.org-hr-edit-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 8%), transparent 74%),
    color-mix(in oklch, var(--card), var(--primary) 4%);
  color: var(--primary);
  cursor: pointer;
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 30%) inset,
    0 8px 18px color-mix(in oklch, var(--primary), transparent 94%);
}

.org-hr-edit-btn:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 34%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
}

.org-hr-photo {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 8px;
  object-fit: cover;
  background: color-mix(in oklch, var(--primary) 12%, var(--card));
  color: var(--primary);
  font-weight: 850;
}

.org-hr-modal#hr-employee-card-modal {
  width: min(72rem, calc(100vw - 2rem));
}

.org-hr-employee-card {
  width: min(72rem, calc(100vw - 2rem));
}

.org-hr-card-body {
  display: grid;
  gap: 1rem;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.org-hr-card-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--muted), transparent 82%);
}

.org-hr-card-filter label {
  display: grid;
  gap: 0.35rem;
  min-width: 12rem;
}

.org-hr-card-filter label > span:first-child,
.org-hr-card-ledger h3,
.org-hr-card-balance span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 820;
  text-transform: uppercase;
}

.org-hr-card-filter input {
  min-height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 800;
  padding: 0 0.75rem;
}

.org-hr-card-date-range .upos-date-trigger {
  min-height: 2.6rem;
}

.org-hr-card-filter p {
  margin: 0;
  color: var(--foreground);
  font-weight: 850;
}

.org-hr-card-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 1.05fr) minmax(15rem, 1fr) minmax(15rem, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
}

.org-hr-card-profile,
.org-hr-card-ledger {
  min-width: 0;
}

.org-hr-card-profile {
  display: grid;
  gap: 0.75rem;
}

.org-hr-card-person {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 10%), transparent 78%),
    color-mix(in oklch, var(--muted), transparent 76%);
}

.org-hr-card-avatar {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in oklch, var(--primary) 12%, var(--card));
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
}

.org-hr-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.org-hr-card-person strong,
.org-hr-card-person span {
  display: block;
}

.org-hr-card-person strong {
  font-size: 1.1rem;
  font-weight: 900;
}

.org-hr-card-person span {
  margin-top: 0.2rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 750;
}

.org-hr-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.org-hr-card-stats div,
.org-hr-card-details div {
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 8px;
  background: var(--card);
}

.org-hr-card-stats span,
.org-hr-card-details span {
  display: block;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 760;
}

.org-hr-card-stats strong,
.org-hr-card-details strong {
  display: block;
  margin-top: 0.28rem;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-weight: 900;
}

.org-hr-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.org-hr-card-ledger {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 8px;
  background: var(--card);
}

.org-hr-card-ledger h3 {
  margin: 0;
  color: var(--foreground);
  font-size: var(--text-sm);
}

.org-hr-card-ledger-list {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-height: 14rem;
  max-height: 22rem;
  overflow: auto;
}

.org-hr-card-ledger-month {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.org-hr-card-ledger-month h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.38rem 0.48rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 8%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--card), var(--primary) 4%);
  color: var(--foreground);
  font-size: var(--text-xs);
  font-weight: 920;
}

.org-hr-card-ledger-month-body {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.org-hr-card-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
  padding: 0.62rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 8%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--muted), transparent 88%);
}

.org-hr-card-ledger-row strong,
.org-hr-card-ledger-row span,
.org-hr-card-ledger-row small {
  display: block;
}

.org-hr-card-ledger-row strong {
  color: var(--foreground);
  font-weight: 900;
}

.org-hr-card-ledger-row span,
.org-hr-card-ledger-row small {
  margin-top: 0.12rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-hr-card-ledger-row b {
  color: var(--foreground);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.org-hr-card-ledger-row.is-negative b {
  color: var(--destructive);
}

.org-hr-card-ledger-row.is-positive b,
.org-hr-card-ledger-row.is-payment b {
  color: var(--director-green);
}

.org-hr-card-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--muted), transparent 84%);
}

.org-hr-card-balance strong {
  font-size: 1rem;
  font-weight: 950;
}

.org-hr-card-balance.is-due strong {
  color: var(--destructive);
}

.org-hr-card-balance.is-overpaid strong {
  color: oklch(0.56 0.14 72);
}

.org-hr-card-balance.is-closed strong {
  color: var(--director-green);
}

.org-hr-card-state {
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--primary), transparent 93%);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 760;
}

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

  .org-hr-card-ledger-list {
    max-height: none;
  }
}

.org-hr-table td small {
  display: block;
  margin-top: 0.14rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 650;
}

.org-hr-calendar-panel .director-section-head {
  align-items: flex-start;
  gap: 0.8rem;
}

.org-hr-calendar-summary {
  margin: 0.8rem 0 0.7rem;
  padding: 0.6rem 0.72rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--muted), transparent 78%);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 700;
}

.org-hr-calendar-wrap {
  max-height: 58vh;
  overflow: auto;
}

.org-hr-calendar-table {
  min-width: max-content;
}

.org-hr-calendar-table th:first-child,
.org-hr-calendar-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 14rem;
  box-shadow: 1px 0 0 var(--workbench-line);
}

.org-hr-calendar-table th:first-child {
  z-index: 4;
}

.org-hr-calendar-day {
  min-width: 2.25rem;
  width: 2.25rem;
  text-align: center;
  font-weight: 850;
}

.org-hr-calendar-day.is-present {
  color: #087a45;
  background: color-mix(in oklch, #19a463 13%, var(--card));
}

.org-hr-calendar-day.is-absent {
  color: #c62828;
  background: color-mix(in oklch, #ef4444 12%, var(--card));
}

.org-hr-calendar-panel {
  min-height: calc(100vh - 11rem);
}

.org-hr-calendar-panel > .org-hr-calendar-summary,
.org-hr-calendar-panel > .org-hr-calendar-wrap {
  display: none;
}

.org-hr-calendar-head {
  align-items: center;
}

.org-hr-calendar-toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.org-hr-reasons-head-btn {
  min-height: 2rem;
  padding: 0.38rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 850;
  white-space: nowrap;
}

.org-hr-calendar-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.org-hr-calendar-head-actions strong {
  min-width: 9.5rem;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 900;
}

.org-hr-rollcall-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 22.5rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  margin-top: 1rem;
  min-width: 0;
}

.org-hr-rollcall-left {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
  max-width: 100%;
}

.org-hr-month-board,
.org-hr-rollcall-form,
.org-hr-rollcall-picked {
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 30%) inset;
}

.org-hr-month-board {
  align-self: start;
  min-width: 0;
  padding: 0.9rem;
}

.org-hr-weekdays,
.org-hr-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.org-hr-weekdays {
  margin: 0.75rem 0 0.45rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 850;
  text-align: center;
}

.org-hr-month-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.4rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 8%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--card), var(--primary) 2%);
  color: var(--foreground);
  font: inherit;
  font-weight: 850;
}

button.org-hr-month-day {
  cursor: pointer;
}

button.org-hr-month-day:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 42%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
}

.org-hr-month-day.is-selected {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 10px 22px color-mix(in oklch, var(--primary), transparent 82%);
}

.org-hr-month-day.is-past:not(.is-selected) {
  background: color-mix(in oklch, var(--muted), transparent 42%);
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 18%);
}

.org-hr-month-day.is-marked {
  border-color: color-mix(in oklch, #16a34a, var(--primary) 18%);
}

.org-hr-month-day-check {
  position: absolute;
  top: 0.28rem;
  right: 0.32rem;
  display: inline-grid;
  place-items: center;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 999px;
  background: #16a34a;
  color: white;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.org-hr-month-day-missing {
  position: absolute;
  top: 0.28rem;
  right: 0.32rem;
  display: inline-grid;
  place-items: center;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted-foreground), white 64%);
  color: white;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
}

.org-hr-month-day.is-selected .org-hr-month-day-missing {
  background: color-mix(in oklch, white, var(--primary) 14%);
  color: color-mix(in oklch, var(--muted-foreground), var(--foreground) 28%);
}

.org-hr-month-day.is-empty {
  border-color: transparent;
  background: transparent;
}

.org-hr-rollcall-form {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: calc(100vh - 17rem);
  padding: 0.9rem;
}

.org-hr-rollcall-title,
.org-hr-rollcall-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.org-hr-rollcall-title h3 {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
}

.org-hr-rollcall-stats {
  display: inline-flex;
  gap: 0.45rem;
  white-space: nowrap;
}

.org-hr-rollcall-stats span {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted), transparent 72%);
  font-size: var(--text-xs);
  font-weight: 850;
}

.org-hr-rollcall-filters {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.62fr);
  gap: 0.65rem;
  margin: 0.8rem 0 0;
  align-items: stretch;
}

.org-hr-rollcall-search,
.org-hr-rollcall-position-filter {
  position: relative;
  display: grid;
  grid-template-rows: 1rem 2.45rem;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 850;
  line-height: 1;
}

.org-hr-rollcall-searchbox,
.org-hr-position-trigger,
.org-hr-position-menu-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.45rem;
  min-height: 2.45rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 7px;
  background: var(--card);
  color: var(--foreground);
}

.org-hr-rollcall-searchbox {
  padding: 0 0.55rem;
}

.org-hr-rollcall-searchbox input,
.org-hr-position-menu-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.org-hr-rollcall-searchbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.org-hr-rollcall-filter-icon {
  color: var(--primary);
}

.org-hr-position-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 0 0.58rem 0 0.72rem;
  cursor: pointer;
}

.org-hr-position-trigger strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-weight: 850;
}

.org-hr-position-clear-marks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.org-hr-position-clear-marks:hover,
.org-hr-position-clear-marks:focus-visible {
  outline: 0;
  background: color-mix(in oklch, var(--destructive), transparent 90%);
  color: var(--destructive);
}

.org-hr-position-trigger[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary), transparent 82%);
}

.org-hr-position-menu {
  position: absolute;
  z-index: 1700;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(22rem, 86vw);
  padding: 0.45rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 7px;
  background: var(--card);
  box-shadow: 0 18px 45px color-mix(in oklch, var(--foreground), transparent 88%);
}

.org-hr-position-menu-search {
  padding: 0 0.55rem;
  margin-bottom: 0.45rem;
}

.org-hr-position-options {
  display: grid;
  max-height: 15rem;
  overflow: auto;
}

.org-hr-position-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
  padding: 0.38rem 0.48rem;
  border-radius: 5px;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 780;
  cursor: pointer;
}

.org-hr-position-option--all {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  background: color-mix(in oklch, var(--primary), transparent 94%);
  font-weight: 930;
}

.org-hr-position-option:hover {
  background: color-mix(in oklch, var(--primary), transparent 88%);
}

.org-hr-position-option input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
}

.org-hr-rollcall-filter-empty {
  margin: 0.7rem 0 0;
}

.org-hr-rollcall-picked {
  display: grid;
  gap: 0.65rem;
  min-height: 20rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.8rem;
}

.org-hr-picked-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.org-hr-picked-head h3 {
  margin: 0.1rem 0 0;
  font-size: var(--text-base);
  line-height: 1.25;
}

.org-hr-picked-metrics {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  white-space: nowrap;
}

.org-hr-picked-metrics > span:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary), white 86%);
  color: color-mix(in oklch, var(--primary), black 14%);
  font-size: var(--text-xs);
  font-weight: 900;
  padding: 0.35rem 0.7rem;
}

.org-hr-picked-metrics > span:last-child {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: var(--text-sm);
  font-weight: 900;
}

.org-hr-picked-table-wrap {
  min-height: 0;
  max-height: calc(100vh - 42rem);
  overflow: auto;
  max-width: 100%;
}

.org-hr-picked-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.org-hr-picked-table th:first-child,
.org-hr-picked-table td:first-child {
  width: 33%;
}

.org-hr-picked-table th:nth-child(2),
.org-hr-picked-table td:nth-child(2) {
  width: 28%;
}

.org-hr-picked-table th:nth-child(3),
.org-hr-picked-table td:nth-child(3) {
  width: 28%;
}

.org-hr-picked-table th:last-child,
.org-hr-picked-table td:last-child {
  width: 2.9rem;
  text-align: center;
}

.org-hr-picked-table th,
.org-hr-picked-table td {
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  padding: 0.42rem 0.45rem;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.org-hr-picked-table th {
  background: color-mix(in oklch, var(--primary), transparent 88%);
  color: var(--foreground);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.org-hr-picked-table td strong,
.org-hr-picked-table td small {
  display: block;
  min-width: 0;
}

.org-hr-picked-table td small {
  margin-top: 0.1rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-hr-picked-table input,
.org-hr-picked-table select {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 6px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 700;
  padding: 0.3rem 0.45rem;
}

.org-hr-picked-no-reason {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--muted-foreground);
  font-weight: 850;
}

.org-hr-picked-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.6rem;
  border-radius: 999px;
  padding: 0.2rem 0.35rem;
  color: white;
  font-size: var(--text-xs);
  font-weight: 900;
  white-space: nowrap;
}

.org-hr-picked-table tr.is-present .org-hr-picked-status {
  background: var(--primary);
}

.org-hr-picked-table tr.is-absent .org-hr-picked-status {
  background: #dc2626;
}

.org-hr-picked-remove {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid color-mix(in oklch, #dc2626, transparent 45%);
  border-radius: 6px;
  background: color-mix(in oklch, #dc2626, transparent 91%);
  color: #b91c1c;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.org-hr-picked-remove:hover {
  background: #dc2626;
  color: white;
}

.org-hr-reasons-card {
  max-width: min(42rem, calc(100vw - 2rem));
}

.org-hr-employee-picker input[type="search"] {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 7px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
  padding: 0.45rem 2.55rem 0.45rem 0.6rem;
}

.org-hr-employee-picker input.org-ops-employee-selected {
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.org-hr-employee-menu {
  z-index: 1500;
}

.org-hr-reasons-tools {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.org-hr-reasons-tools {
  margin-bottom: 0.75rem;
}

.org-hr-reasons-list {
  max-height: min(46vh, 28rem);
  overflow: auto;
}

.org-hr-reasons-table-wrap {
  max-height: inherit;
  overflow: auto;
}

.org-hr-reasons-tools input,
.org-hr-reasons-table input,
.org-hr-reason-input {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-radius: 7px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 650;
  padding: 0.45rem 0.6rem;
}

.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table {
  min-width: 0;
  width: 100%;
}

.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table th:first-child,
.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table td:first-child {
  width: auto;
}

.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table th:last-child,
.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table td:last-child {
  width: 12.5rem;
}

.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table td {
  height: 44px;
  padding: 0.28rem;
  vertical-align: middle;
}

.org-ops-table.org-ops-table--shipments-entry.org-hr-reasons-table input {
  min-height: 2.2rem;
  font-size: var(--text-sm);
}

.org-hr-reason-actions {
  white-space: nowrap;
}

.org-hr-reason-actions .btn,
.org-hr-reason-actions .org-hr-reason-delete {
  margin: 0 0.14rem;
  vertical-align: middle;
}

.org-hr-reason-delete {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid color-mix(in oklch, var(--destructive), transparent 38%);
  border-radius: 6px;
  background: color-mix(in oklch, var(--destructive), transparent 92%);
  color: var(--destructive);
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1;
}

.org-hr-reason-delete:hover,
.org-hr-reason-delete:focus-visible {
  outline: 0;
  border-color: var(--destructive);
  background: var(--destructive);
  color: white;
}

.org-hr-reasons-feedback {
  min-height: 1.2rem;
  margin: 0.7rem 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.org-hr-reasons-feedback[data-state="error"] {
  color: var(--destructive);
}

.org-hr-rollcall-list {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 0.45rem;
  max-height: calc(100vh - 26rem);
  overflow: auto;
  padding-right: 0.25rem;
}

.org-hr-rollcall-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  padding: 0.5rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 10%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--card), var(--primary) 1.5%);
}

.org-hr-rollcall-row > .org-hr-reason-input {
  display: none;
}

.org-hr-rollcall-row[hidden] {
  display: none !important;
}

.org-hr-rollcall-person strong,
.org-hr-rollcall-person small {
  display: block;
}

.org-hr-rollcall-person small {
  margin-top: 0.12rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-hr-radio-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 5.5rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--text-xs);
  font-weight: 850;
  cursor: pointer;
}

.org-hr-radio-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.org-hr-radio-pill.is-present {
  border-color: color-mix(in oklch, var(--primary), transparent 45%);
  color: var(--primary);
}

.org-hr-radio-pill.is-absent {
  border-color: color-mix(in oklch, #dc2626, transparent 45%);
  color: #dc2626;
}

.org-hr-radio-pill.is-present:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 8px 16px color-mix(in oklch, var(--primary), transparent 82%);
}

.org-hr-radio-pill.is-absent:has(input:checked) {
  border-color: #dc2626;
  background: #dc2626;
  color: white;
  box-shadow: 0 8px 16px color-mix(in oklch, #dc2626, transparent 84%);
}

.org-hr-rollcall-actions {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-hr-salary-act {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.9rem;
}

.org-hr-salary-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--card), var(--primary) 2%);
}

.org-hr-salary-toolbar .org-hr-checkline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 850;
}

.org-hr-salary-toolbar input[type="checkbox"],
.org-hr-salary-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.org-hr-salary-total {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  color: var(--muted-foreground);
  font-weight: 800;
}

.org-hr-salary-total strong {
  color: var(--foreground);
}

.org-hr-salary-table-wrap {
  max-height: calc(100vh - 19rem);
  overflow: auto;
}

.org-hr-salary-table {
  min-width: 64rem;
}

.org-hr-salary-detail-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.org-hr-salary-detail-summary > div {
  padding: 0.75rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 14%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--card), var(--primary) 2%);
}

.org-hr-salary-detail-summary span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.org-hr-salary-detail-summary strong {
  color: var(--foreground);
  font-size: var(--text-base);
}

.org-hr-salary-detail-balance--due strong {
  color: #b42318;
}

.org-hr-salary-detail-balance--overpaid strong {
  color: #027a48;
}

.org-hr-salary-detail-balance--closed strong {
  color: var(--primary);
}

.org-hr-salary-detail-block {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

#hr-salary-employee-act-panel .director-section-head {
  justify-content: center;
  text-align: center;
}

#hr-salary-employee-act-panel .director-section-head > div {
  margin-inline: auto;
}

#hr-salary-employee-act-panel .org-hr-salary-detail-summary > div {
  text-align: center;
}

#hr-salary-employee-act-panel .org-ops-table th,
#hr-salary-employee-act-panel .org-ops-table td {
  text-align: center;
  vertical-align: middle;
}

#hr-salary-employee-act-panel .org-ops-empty {
  text-align: center;
}

@media (max-width: 1100px) {
  .org-hr-rollcall-shell,
  .org-hr-rollcall-row,
  .org-hr-rollcall-filters {
    grid-template-columns: 1fr;
  }

  .org-hr-rollcall-actions,
  .org-hr-rollcall-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

.org-hr-table tr.is-muted {
  opacity: 0.62;
}

.org-hr-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.55rem;
  margin: 0.08rem 0.12rem 0.08rem 0;
  padding: 0.16rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted) 24%, var(--card));
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-hr-pill.is-present {
  border-color: color-mix(in oklch, var(--director-green), transparent 58%);
  color: var(--director-green);
  background: color-mix(in oklch, var(--director-green), transparent 90%);
}

.org-hr-pill.is-absent {
  border-color: color-mix(in oklch, oklch(0.52 0.16 25), transparent 58%);
  color: oklch(0.42 0.14 25);
  background: color-mix(in oklch, oklch(0.52 0.16 25), transparent 91%);
}

.org-hr-attendance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.org-hr-attendance-actions form,
.org-hr-dismiss-form {
  margin: 0;
}

.org-hr-attendance-actions .btn.is-active {
  border-color: var(--director-green);
  color: white;
  background: var(--director-green);
}

.org-hr-attendance-actions .btn.is-danger {
  border-color: oklch(0.52 0.16 25);
  background: oklch(0.52 0.16 25);
}

.org-hr-modal {
  width: min(47.5rem, calc(100vw - 2rem));
  max-height: min(45rem, calc(100vh - 2rem));
  overflow: visible;
}

.org-hr-archive-modal {
  width: min(66rem, calc(100vw - 2rem));
}

.org-hr-modal .org-hr-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(45rem, calc(100vh - 2rem));
  overflow: hidden;
}

.org-hr-archive-card {
  max-height: min(44rem, calc(100vh - 2rem));
}

.org-hr-archive-body {
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.org-hr-archive-body .org-ops-table-wrap {
  margin: 0;
}

.org-hr-archive-table {
  min-width: 60rem;
}

.org-hr-archive-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.org-hr-archive-actions form {
  margin: 0;
}

.org-hr-modal .director-modal-head {
  flex: 0 0 auto;
}

.org-hr-modal .org-hr-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  min-width: 0;
  padding: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.org-hr-modal .org-hr-form label,
.org-hr-modal .org-position-select {
  min-width: 0;
  max-width: none;
}

.org-hr-modal .org-hr-form input,
.org-hr-modal .org-hr-form select,
.org-hr-modal .org-hr-form textarea,
.org-hr-modal .org-position-select-btn,
.org-hr-modal .org-position-menu {
  max-width: 100%;
}

.org-hr-modal .director-modal-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card);
}

@media (max-width: 960px) {
  .org-ops-grid,
  .org-hr-form {
    grid-template-columns: 1fr;
  }

  .org-hr-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .org-hr-toolbar-left,
  .org-hr-staff-search,
  .org-hr-toolbar .org-ops-inline-form,
  .org-hr-toolbar .btn,
  .org-hr-head-actions,
  .org-hr-head-actions .org-ops-inline-form,
  .org-hr-head-actions .btn {
    width: 100%;
  }

  .org-hr-staff-search {
    max-width: none;
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .org-hr-toolbar .btn,
  .org-hr-head-actions .btn {
    justify-content: center;
  }

  .org-hr-modal .org-hr-form {
    grid-template-columns: 1fr;
  }
}

:root {
  --workspace-blue: var(--primary);
  --workspace-navy: var(--brand-navy);
  --workspace-panel: color-mix(in oklch, var(--card), var(--primary) 2%);
  --workspace-line: color-mix(in oklch, var(--border), var(--primary) 14%);
  --workspace-shadow:
    0 18px 42px color-mix(in oklch, var(--primary), transparent 92%),
    0 1px 0 color-mix(in oklch, white, transparent 54%) inset;
}

.page-body {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 97%), transparent 18rem),
    var(--background);
}

.organizations-page-wrap,
.general-workspace,
.general-management-users-page {
  width: 100%;
  max-width: none;
}

.organizations-page-wrap--general,
.organizations-page-wrap--fluid,
.director-org-workspace,
.org-ops-root {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.general-home-shell,
.org-ops-root {
  align-content: start;
  gap: 0.85rem;
}

.general-module-tabs {
  width: 100%;
  min-height: 2.9rem;
  align-items: flex-end;
  padding: 0.48rem 0.55rem 0;
  border-color: var(--workspace-line);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 22%), transparent 62%),
    color-mix(in oklch, var(--primary), var(--background) 90%);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 40%) inset,
    0 10px 24px color-mix(in oklch, var(--primary), transparent 94%);
}

.general-module-tab {
  min-width: 8.85rem;
  min-height: 2.18rem;
  border-color: color-mix(in oklch, var(--workspace-line), transparent 8%);
  border-bottom-color: color-mix(in oklch, var(--border), transparent 18%);
  color: var(--workspace-navy);
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 8%), color-mix(in oklch, var(--card), var(--primary) 3%));
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 22%) inset,
    0 1px 2px color-mix(in oklch, black, transparent 94%);
  font-weight: 650;
}

.general-module-tab:hover {
  color: var(--workspace-blue);
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 5%), color-mix(in oklch, var(--card), var(--primary) 6%));
}

.general-module-tab.active {
  border-color: color-mix(in oklch, var(--workspace-blue), transparent 8%);
  color: white;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--workspace-blue), white 12%), color-mix(in oklch, var(--workspace-blue), var(--workspace-navy) 20%));
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 38%) inset,
    0 10px 20px color-mix(in oklch, var(--workspace-blue), transparent 78%);
}

.org-ops-panel,
.org-ops-table-wrap,
.director-org-hero,
.director-org-actions,
.director-org-directory {
  border-color: var(--workspace-line);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 96%), transparent 64%),
    var(--workspace-panel);
  box-shadow: var(--workspace-shadow);
}

.org-ops-panel {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
}

.org-ops-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--workspace-navy), var(--workspace-blue));
}

.org-ops-panel > * {
  position: relative;
  z-index: 1;
}

.org-ops-table th {
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 16%), transparent 68%),
    color-mix(in oklch, var(--primary), var(--card) 91%);
  color: color-mix(in oklch, var(--workspace-navy), var(--muted-foreground) 18%);
}

/* Product-wide finance workbench standardization. */
:root {
  --app-font-sans:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --workbench-radius: 13px;
  --workbench-radius-sm: 8px;
  --workbench-field-height: 36px;
  --workbench-table-head-height: 41px;
  --workbench-table-row-height: 64px;
  --workbench-line: color-mix(in oklch, var(--border), var(--primary) 10%);
  --workbench-surface: var(--card);
  --workbench-muted-surface: color-mix(in oklch, var(--muted), transparent 64%);
  --workbench-shadow:
    0 12px 30px color-mix(in oklch, var(--primary), transparent 93%),
    0 1px 0 color-mix(in oklch, white, transparent 46%) inset;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--app-font-sans);
  letter-spacing: 0;
}

body {
  font-size: var(--text-base);
  line-height: 1.45;
}

.page-header {
  padding: 1.25rem 1.75rem 1.18rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 26%), transparent 76%),
    color-mix(in oklch, var(--background), var(--card) 18%);
}

.page-body {
  padding: 1.55rem 1.75rem 2.35rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), transparent 97%), transparent 17rem),
    var(--background);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 680;
  line-height: 1.16;
  letter-spacing: 0;
}

.page-eyebrow,
.general-page-kicker,
.reports-eyebrow,
.settings-ios-footnote {
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0;
}

input,
select,
textarea,
button,
table,
.btn,
.nav-link,
.nav-sublink,
.general-module-tab,
.reports-tab,
.kassa-table,
.general-kassa-table,
.org-ops-table,
.reports-data-table,
.schet-list-item,
.schet-ccy-line {
  font-variant-numeric: tabular-nums lining-nums;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.settings-profile-input,
.settings-ios-select,
.settings-compact-select,
.upos-ccy-select-btn {
  min-height: var(--workbench-field-height);
  border-radius: var(--workbench-radius-sm);
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: var(--text-base);
  line-height: 1.25;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 42%) inset;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklch, var(--control-placeholder), var(--foreground) 8%);
}

.btn,
.btn-secondary,
.kassa-btn,
.schet-btn,
.gk-page-nav-btn,
.kassa-page-nav-btn,
.reports-period-tab,
.reports-period-apply,
.general-module-tab {
  min-height: var(--workbench-field-height);
  border-radius: var(--workbench-radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.btn {
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 84%), transparent 70%),
    var(--primary);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 42%) inset,
    0 8px 18px color-mix(in oklch, var(--primary), transparent 86%);
}

.btn-secondary {
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 10%), transparent 76%),
    color-mix(in oklch, var(--muted), transparent 38%);
  border-color: var(--workbench-line);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 40%) inset;
}

.card,
.settings-employees-table-card,
.director-org-hero,
.director-org-actions,
.director-org-directory,
.org-ops-panel,
.org-ops-table-wrap,
.gk-table-board,
.gk-filters-shell,
.gk-kpi-strip,
.gk-schet-hero,
.reports-panel,
.reports-flow,
.reports-balance-card,
.reports-data-table,
.schet-overview-shell,
.kassa-filters-shell,
.kassa-data-panel,
.kassa-overview-grid {
  border-color: var(--workbench-line);
  border-radius: var(--workbench-radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 16%), transparent 70%),
    var(--workbench-surface);
  box-shadow: var(--workbench-shadow);
}

.org-ops-root,
.general-home-shell,
.general-kassa-root,
.general-schet-root,
.general-reports-root,
.reports-root,
.schet-root,
.kassa-root {
  gap: 0.85rem;
}

.settings-employees-table,
.org-ops-table,
.general-kassa-table,
.reports-data-table,
.kassa-table,
.org-balance-table,
.roles-permission-table,
.pnl-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-base);
  line-height: 1.32;
}

.settings-employees-table th,
.settings-employees-table td,
.org-ops-table th,
.org-ops-table td,
.general-kassa-table th,
.general-kassa-table td,
.reports-data-table th,
.reports-data-table td,
.kassa-table th,
.kassa-table td,
.org-balance-table th,
.org-balance-table td,
.roles-permission-table th,
.roles-permission-table td,
.pnl-table th,
.pnl-table td {
  border-color: var(--workbench-line);
  vertical-align: middle;
}

.settings-employees-table th,
.org-ops-table th,
.general-kassa-table th,
.reports-data-table th,
.kassa-table th,
.org-balance-table th,
.roles-permission-table th,
.pnl-table th {
  height: var(--workbench-table-head-height);
  padding: 0.48rem 0.78rem;
  background: var(--workbench-muted-surface);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-employees-table td,
.org-ops-table td,
.general-kassa-table td,
.reports-data-table td,
.kassa-table td,
.org-balance-table td,
.roles-permission-table td,
.pnl-table td {
  min-height: var(--workbench-table-row-height);
  height: var(--workbench-table-row-height);
  padding: 0.64rem 0.78rem;
  background: var(--card);
}

.settings-employees-table tbody tr:hover td,
.org-ops-table tbody tr:hover td,
.general-kassa-table tbody tr:hover td,
.reports-data-table tbody tr:hover td,
.kassa-table tbody tr:hover td,
.org-balance-table tbody tr:hover td,
.roles-permission-table tbody tr:hover td,
.pnl-table tbody tr:hover td {
  background: color-mix(in oklch, var(--muted), transparent 78%);
}

.schet-ccy-line-amt,
.schet-pocket-sum,
.kassa-col-amount,
.kassa-overview-values .kassa-ccy-chip-amt,
.general-kassa-chip,
.general-reports-num,
.gk-col-num,
.gk-reports-kpi-value,
.reports-kpi-value,
.reports-category-main strong,
.reports-balance-entry strong,
.reports-balance-total b,
.org-ops-kpi strong,
.org-ops-table strong,
.dash-kpi-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 780;
  letter-spacing: 0;
}

.general-report-card {
  width: 238px;
  height: 147px;
  min-width: 238px;
  min-height: 147px;
  max-width: 238px;
  max-height: 147px;
  flex: 0 0 238px;
  border-radius: var(--workbench-radius-sm);
  font-size: var(--text-base);
  letter-spacing: 0;
}

.general-report-card > span:not(.general-report-card-icon) {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0;
}

.general-report-card small {
  font-size: var(--text-base);
  letter-spacing: 0;
}

button.general-module-tab {
  font: inherit;
  cursor: pointer;
}

.general-module-tab--report {
  min-width: 8.6rem;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0;
  overflow: hidden;
}

.general-module-tab-activate,
.general-module-tab-close {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.general-module-tab-activate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.28rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-module-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.28rem;
  flex: 0 0 auto;
  border-left: 1px solid color-mix(in oklch, currentColor, transparent 78%);
  font-size: var(--text-md);
  line-height: 1;
  opacity: 0.78;
}

.general-module-tab-close:hover {
  opacity: 1;
  background: color-mix(in oklch, currentColor, transparent 88%);
}

.general-report-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fill, 238px);
  align-items: start;
  justify-content: start;
  gap: 0.78rem;
  width: 100%;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 20%), transparent 60%),
    color-mix(in oklch, var(--background), var(--primary) 2%);
  box-shadow:
    0 12px 28px color-mix(in oklch, var(--primary), transparent 94%),
    0 1px 0 color-mix(in oklch, white, transparent 48%) inset;
}

.general-report-launcher[hidden],
.general-reports-root[hidden],
.general-home-shell[hidden] {
  display: none !important;
}

.general-report-card {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.44rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 35%);
  color: white;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--primary), white 16%), color-mix(in oklch, var(--primary), var(--brand-navy) 18%));
  box-shadow:
    0 14px 24px color-mix(in oklch, var(--primary), transparent 80%),
    0 1px 0 color-mix(in oklch, white, transparent 38%) inset;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.general-report-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 15px 28px color-mix(in oklch, var(--primary), transparent 74%);
}

.general-report-card.active,
.general-report-card[aria-selected="true"] {
  background: linear-gradient(180deg, var(--primary), color-mix(in oklch, var(--primary), var(--brand-navy) 22%));
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--primary), transparent 82%),
    0 15px 30px color-mix(in oklch, var(--primary), transparent 72%);
}

.general-report-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  color: currentColor;
}

.general-report-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.general-report-card > span:not(.general-report-card-icon) {
  line-height: 1.15;
  text-align: center;
}

.general-report-card small {
  color: color-mix(in oklch, white, transparent 10%);
  font-weight: 500;
  line-height: 1.18;
  text-align: center;
}

.general-module-tabs {
  border-color: var(--workbench-line);
  border-radius: var(--workbench-radius-sm) var(--workbench-radius-sm) 0 0;
}

.general-module-tab {
  min-width: 8.85rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .page-header {
    padding: 1rem 1rem 0.95rem;
  }

  .page-body {
    padding: 1rem 1rem 1.75rem;
  }

  .general-report-card {
    width: min(238px, 100%);
    max-width: 100%;
    flex-basis: min(238px, 100%);
  }
}

.org-hr-modal .org-hr-form input,
.org-hr-modal .org-position-select-btn,
.org-hr-modal .org-position-menu,
.org-hr-modal .org-position-inline input,
.org-hr-modal .org-position-save,
.org-hr-modal .director-modal-actions .btn {
  border-radius: 7px;
}

.org-position-select {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.org-position-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--workbench-field-height);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-fg);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 42%) inset;
}

.org-position-select-btn:hover,
.org-position-select-btn[aria-expanded="true"] {
  border-color: color-mix(in oklch, var(--primary), transparent 38%);
  background: color-mix(in oklch, var(--card), var(--primary) 3%);
}

.org-position-select-btn svg {
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.org-position-menu {
  position: absolute;
  z-index: 80;
  inset: calc(100% + 0.32rem) 0 auto;
  overflow: hidden;
  border: 1px solid var(--workbench-line);
  background: var(--card);
  box-shadow:
    0 18px 42px color-mix(in oklch, black, transparent 88%),
    0 1px 0 color-mix(in oklch, white, transparent 44%) inset;
}

.org-position-menu[hidden],
.org-position-inline[hidden] {
  display: none !important;
}

.org-position-options {
  max-height: 12rem;
  overflow-y: auto;
  background: var(--card);
}

.org-position-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem 2rem;
  align-items: center;
  min-height: 2.35rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 36%);
}

.org-position-row.is-selected {
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.org-position-option,
.org-position-action,
.org-position-add-row,
.org-position-save {
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  cursor: pointer;
}

.org-position-option {
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.52rem 0.7rem;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-position-option:hover,
.org-position-row:has(.org-position-action:hover) {
  background: color-mix(in oklch, var(--muted), transparent 72%);
}

.org-position-action {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  font-weight: 750;
}

.org-position-action:hover {
  color: var(--primary);
}

.org-position-action[data-position-delete]:hover {
  color: var(--destructive);
}

.org-position-add-row {
  width: 100%;
  min-height: 2.45rem;
  padding: 0.56rem 0.7rem;
  border-top: 1px solid var(--workbench-line);
  color: var(--primary);
  text-align: left;
  font-size: var(--text-base);
  font-weight: 750;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 12%), transparent 78%),
    color-mix(in oklch, var(--primary), transparent 96%);
}

.org-position-add-row:hover {
  background: color-mix(in oklch, var(--primary), transparent 91%);
}

.org-position-inline {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border-top: 1px solid var(--workbench-line);
  background: color-mix(in oklch, var(--muted), transparent 78%);
}

.org-position-inline > span {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 780;
}

.org-position-inline-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.15rem;
  gap: 0.35rem;
  align-items: center;
}

.org-position-inline input {
  width: 100%;
  min-height: 2.15rem;
  max-width: none;
  padding: 0.42rem 0.55rem;
  font-size: var(--text-base);
}

.org-position-save {
  display: grid;
  place-items: center;
  width: 2.15rem;
  min-height: 2.15rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 850;
  box-shadow: var(--shadow-sm);
}

.org-position-save:disabled,
.org-position-action:disabled {
  opacity: 0.55;
  cursor: progress;
}

.org-position-select.is-error .org-position-select-btn,
.org-position-select.is-error .org-position-inline input {
  border-color: color-mix(in oklch, var(--destructive), transparent 36%);
}

.org-ops-table-wrap--excel {
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 16%);
  border-radius: var(--workbench-radius-sm, 8px);
  background: var(--card);
  box-shadow: none;
}

.org-ops-table.org-ops-table--shipments-entry {
  --shipments-table-blue: var(--brand-accent, #5eb8ff);
  --shipments-table-blue-strong: var(--brand-box, #2d6cdf);
  --shipments-table-head-bg: color-mix(in srgb, var(--shipments-table-blue) 22%, var(--card));
  --shipments-table-row-alt-bg: color-mix(in srgb, var(--shipments-table-blue) 8%, var(--card));
  --shipments-table-row-hover-bg: color-mix(in srgb, var(--shipments-table-blue-strong) 10%, var(--card));
  min-width: 66rem;
  border: 1px solid color-mix(in srgb, var(--shipments-table-blue-strong) 26%, var(--workbench-line, var(--border)));
  border-collapse: collapse;
  background: var(--card);
  box-shadow: none;
}

.org-ops-table.org-ops-table--shipments-entry th,
.org-ops-table.org-ops-table--shipments-entry td {
  border: 1px solid color-mix(in srgb, var(--shipments-table-blue-strong) 18%, var(--workbench-line, var(--border))) !important;
}

.org-ops-table.org-ops-table--shipments-entry th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--workbench-table-head-height, 41px);
  padding: 0.48rem 1.6rem 0.48rem 0.78rem;
  background: var(--shipments-table-head-bg);
  color: color-mix(in oklch, var(--brand-navy), var(--muted-foreground) 20%);
  font-size: var(--text-xs);
  font-weight: 820;
  text-transform: uppercase;
  white-space: nowrap;
}

.org-ops-table.org-ops-table--shipments-entry th::after {
  content: "\25BE";
  position: absolute;
  right: 0.62rem;
  top: 50%;
  color: color-mix(in oklch, var(--muted-foreground), transparent 18%);
  font-size: 0.72rem;
  transform: translateY(-50%);
}

.org-ops-table.org-ops-table--shipments-entry td {
  height: 48px;
  min-height: 48px;
  padding: 0;
  background: var(--card);
}

.org-ops-table.org-ops-table--shipments-entry tbody tr:nth-child(even) td {
  background: var(--shipments-table-row-alt-bg);
}

.org-ops-table.org-ops-table--shipments-entry tbody tr:hover td {
  background: var(--shipments-table-row-hover-bg);
}

.org-ops-table.org-ops-table--shipments-entry input,
.org-ops-table.org-ops-table--shipments-entry select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: 650;
  padding: 0.42rem 0.72rem;
}

.org-ops-table.org-ops-table--shipments-entry input:focus,
.org-ops-table.org-ops-table--shipments-entry select:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--card);
}

.org-ops-table.org-ops-table--shipments-entry input.org-ops-input-locked,
.org-ops-table.org-ops-table--shipments-entry input[readonly].org-ops-input-locked {
  background: color-mix(in oklch, var(--muted), transparent 68%);
}

.org-ops-table.org-ops-table--shipments-entry .org-ops-row-actions-head {
  width: 6.8rem;
  text-align: center;
}

.org-ops-table.org-ops-table--shipments-entry .org-ops-row-actions-head::after {
  content: none;
}

.org-ops-table.org-ops-table--shipments-entry .org-ops-row-actions {
  width: 6.8rem;
  padding: 0.34rem;
}

.org-ops-row-actions {
  text-align: center;
  white-space: nowrap;
}

.org-ops-row-action {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  margin: 0 0.12rem;
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 12%);
  border-radius: 6px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 8%), transparent 76%),
    var(--card);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 42%) inset;
}

.org-ops-row-action:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 38%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
  color: var(--primary);
}

.org-ops-row-action--remove:hover {
  border-color: color-mix(in oklch, var(--destructive), transparent 32%);
  background: color-mix(in oklch, var(--destructive), transparent 91%);
  color: var(--destructive);
}

.org-ops-row-action--open {
  text-decoration: none;
}

.org-ops-table.org-ops-table--shipments-entry input[type="search"][data-shipment-employee-search] {
  font-weight: 760;
  padding-right: 2.55rem;
}

.org-ops-table.org-ops-table--shipments-entry input.org-ops-employee-selected {
  background: color-mix(in oklch, var(--primary), transparent 92%);
  color: var(--foreground);
}

.org-shipments-order-templates {
  position: sticky;
  top: 0.5rem;
  z-index: 8;
  display: grid;
  gap: 0.55rem;
  padding: 0.72rem;
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 14%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 8%), transparent 76%),
    color-mix(in oklch, var(--card), var(--primary) 3%);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.org-shipments-order-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.org-shipments-order-title strong {
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 850;
}

.org-shipments-order-title span,
.org-shipments-order-status {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-shipments-order-controls {
  display: grid;
  grid-template-columns: minmax(12rem, 1.15fr) auto minmax(13rem, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
}

.org-shipments-order-controls select,
.org-shipments-order-controls input {
  min-height: 2.32rem;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 10%);
  border-radius: 7px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.org-shipments-order-status[data-status="ok"] {
  color: color-mix(in oklch, var(--success), black 18%);
}

.org-shipments-order-status[data-status="err"] {
  color: var(--destructive);
}

.shipment-employee-picker {
  position: relative;
  min-height: 47px;
}

.shipment-employee-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.65rem;
  min-width: 1.65rem;
  height: 1.65rem;
  min-height: 1.65rem;
  border: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), var(--primary) 16%);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.shipment-employee-toggle:hover {
  border-color: color-mix(in oklch, var(--primary), transparent 34%);
  background: color-mix(in oklch, var(--primary), transparent 91%);
  color: var(--primary);
}

.shipment-employee-menu {
  position: fixed;
  z-index: 1200;
  max-height: 15rem;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--primary), transparent 42%);
  border-radius: 0 0 8px 8px;
  background: var(--card);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.shipment-employee-menu.is-open-above {
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -18px 34px rgba(15, 23, 42, 0.14);
}

.shipment-employee-option {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0.48rem 0.72rem;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--workbench-line, var(--border)), transparent 34%);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.shipment-employee-option:hover,
.shipment-employee-option:focus {
  outline: 0;
  background: color-mix(in oklch, var(--primary), transparent 91%);
}

.shipment-employee-option-text {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.shipment-employee-option-text strong,
.shipment-employee-option-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-employee-option-text small,
.shipment-employee-empty {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

.shipment-employee-empty {
  padding: 0.72rem;
  font-weight: 700;
}

.org-shipments-journal {
  margin-top: 0.85rem;
}

.org-shipments-tabs,
.org-hr-tabs,
.org-reports-page .general-module-tabs {
  margin-bottom: 0.85rem;
}

.org-shipments-tabs .general-module-tab {
  cursor: pointer;
  font-family: inherit;
}

.org-shipments-panel[hidden] {
  display: none;
}

.org-shipments-journal-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.org-shipments-journal-filter {
  display: inline-flex;
  min-width: 0;
}

.org-shipments-journal-filter .upos-date-trigger {
  min-height: 2.15rem;
}

.org-shipments-journal-tools {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(14rem, 1.4fr) minmax(8rem, 0.7fr);
  gap: 0.7rem;
  align-items: end;
  margin: 0.75rem 0 0.8rem;
}

.org-shipments-journal-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 800;
}

.org-shipments-journal-field select,
.org-shipments-journal-field input {
  width: 100%;
  min-height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.45rem 0.65rem;
}

.org-shipments-journal-field--search {
  min-width: 16rem;
}

.org-shipments-journal-table,
.org-shipments-day-summary,
.org-shipments-day-table {
  min-width: 82rem;
}

.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table th,
.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table td,
.org-ops-table.org-ops-table--shipments-entry.org-shipments-day-summary th,
.org-ops-table.org-ops-table--shipments-entry.org-shipments-day-summary td,
.org-ops-table.org-ops-table--shipments-entry.org-shipments-day-table th,
.org-ops-table.org-ops-table--shipments-entry.org-shipments-day-table td {
  text-align: center;
  vertical-align: middle;
}

.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table th:nth-child(2),
.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table td:nth-child(2) {
  width: 5.8rem;
  min-width: 5.8rem;
  max-width: 5.8rem;
  font-size: var(--text-xs);
  line-height: 1.15;
  white-space: normal;
}

.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table th:nth-child(5),
.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table td:nth-child(5) {
  text-align: center;
}

.org-ops-table.org-ops-table--shipments-entry.org-shipments-journal-table th:has(.org-shipments-sort-btn)::after {
  content: none;
}

.org-shipments-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  min-height: 1.4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1.1;
  padding: 0;
  cursor: pointer;
}

.org-shipments-sort-btn:hover,
.org-shipments-sort-btn.is-active {
  color: var(--primary);
}

.org-shipments-sort-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  min-width: 0.9rem;
  color: var(--primary);
  font-size: var(--text-sm);
  line-height: 1;
}

.org-shipments-money-line {
  display: block;
  white-space: nowrap;
}

.org-shipments-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 900;
  white-space: nowrap;
}

.org-shipments-status--open {
  background: color-mix(in srgb, #f97316 15%, var(--card));
  color: #9a3412;
}

.org-shipments-status--partial {
  background: color-mix(in srgb, #0ea5e9 14%, var(--card));
  color: #0369a1;
}

.org-shipments-status--paid {
  background: color-mix(in srgb, #22c55e 14%, var(--card));
  color: #15803d;
}

.org-shipments-doc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 900;
  white-space: nowrap;
}

.org-shipments-doc-status--new {
  background: color-mix(in srgb, var(--brand-accent, #5eb8ff) 18%, var(--card));
  color: color-mix(in srgb, var(--brand-box, #2d6cdf) 82%, var(--brand-navy));
}

.org-shipments-doc-status--confirmed {
  background: color-mix(in srgb, #22c55e 15%, var(--card));
  color: #15803d;
}

.org-shipments-document-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.org-shipments-document-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 850;
  white-space: nowrap;
}

.org-shipments-confirm-form {
  margin: 0;
}

.org-shipments-confirm-btn {
  min-height: 2.15rem;
  padding-inline: 0.9rem;
}

.org-shipments-journal-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  padding: 0.78rem 0 0.1rem;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 800;
}

.org-shipments-journal-total {
  color: var(--foreground);
}

.org-shipments-journal-pages {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.org-shipments-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 900;
}

.org-shipments-page-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.org-shipments-back-link {
  justify-self: end;
  text-decoration: none;
}

@media (max-width: 980px) {
  .org-shipments-order-title {
    display: grid;
  }

  .org-shipments-order-controls {
    grid-template-columns: 1fr 1fr;
  }

  .org-shipments-order-controls select,
  .org-shipments-order-controls input {
    grid-column: 1 / -1;
  }

  .org-shipments-journal-tools {
    grid-template-columns: 1fr 1fr;
  }

  .org-shipments-journal-field--search {
    min-width: 0;
  }

  .org-shipments-journal-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Unified workspace chrome: pages start directly from the working tabs/panels. */
.page-header {
  display: none;
}

.page-body {
  padding: 20px 28px 28px;
}

.general-module-tabs {
  min-height: 2.9rem;
  height: 47px;
}

.general-module-tab {
  min-height: 2.18rem;
  height: 35px;
}

.org-reports-page .general-module-tab,
.org-shipments-tabs .general-module-tab,
.general-management-settings-page .general-module-tab,
.general-management-users-page .general-module-tab {
  font-size: 13px;
  font-weight: 700;
  line-height: 14.95px;
}

.org-reports-page .general-report-card > span:not(.general-report-card-icon),
.org-shipments-launcher .general-report-card > span:not(.general-report-card-icon),
.general-settings-launcher .general-report-card > span:not(.general-report-card-icon) {
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.org-reports-page .general-report-card small,
.org-shipments-launcher .general-report-card small,
.general-settings-launcher .general-report-card small {
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0;
}

.general-management-settings-page,
.general-management-users-page,
.settings-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
}

.general-management-settings-page .general-report-launcher,
.general-management-users-page .settings-ios-group {
  width: 100%;
  box-sizing: border-box;
}

.general-management-users-page .settings-ios-group {
  margin-top: 0;
}

.general-management-users-page {
  padding-block: 0 28px;
}

.settings-page-wrap .settings-layout-split {
  width: 100%;
  box-sizing: border-box;
  gap: 28px;
}

.settings-page-wrap .settings-rail {
  top: 20px;
}

.settings-tab.settings-tab--rail {
  min-height: 35px;
  font-size: 13px;
  line-height: 15px;
}

.settings-page-wrap .settings-layout-split {
  display: block;
}

.settings-page-wrap .settings-rail {
  display: none;
}

.settings-page-wrap .settings-tablist--rail {
  display: none;
}

.settings-page-wrap .settings-tablist--rail::-webkit-scrollbar {
  display: none;
}

.settings-page-wrap .settings-tab.settings-tab--rail {
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 8.85rem;
  max-width: max-content;
  min-height: 35px;
  height: 35px;
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-bottom-color: color-mix(in oklch, var(--border), transparent 22%);
  border-radius: 7px 7px 0 0;
  background: color-mix(in oklch, var(--card), white 8%);
  color: var(--foreground);
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 48%) inset;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 14.95px;
  white-space: nowrap;
}

.settings-page-wrap .settings-tab.settings-tab--rail[data-settings-tab="telegram"] {
  min-width: 11.4rem;
}

.settings-page-wrap .settings-tab.settings-tab--rail.active {
  border-color: var(--primary);
  color: white;
  background: var(--primary);
  box-shadow: none;
}

.settings-page-wrap .settings-tab-icon--rail {
  display: none;
}

.settings-page-wrap .settings-main-surface {
  width: 100%;
}

.settings-module-tabs .general-module-tab,
.settings-module-tabs .general-module-tab-activate,
.settings-module-tabs .general-module-tab-close {
  text-decoration: none;
}

.org-settings-panel-page .settings-module-tabs {
  margin-bottom: 0;
}

.org-settings-panel-surface {
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 12%);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(180deg, color-mix(in oklch, white, transparent 20%), transparent 62%),
    color-mix(in oklch, var(--background), var(--primary) 2%);
  box-shadow:
    0 12px 28px color-mix(in oklch, var(--primary), transparent 94%),
    0 1px 0 color-mix(in oklch, white, transparent 48%) inset;
}

.org-settings-panel-surface > .settings-ios-group,
.org-settings-panel-surface > .tg-settings {
  margin-top: 0;
}

.org-settings-direct-panel {
  width: 100%;
  box-sizing: border-box;
}

.org-ops-panel,
.director-org-hero,
.director-org-actions,
.director-org-directory,
.kassa-filters-shell,
.kassa-table-card,
.kassa-data-panel,
.kassa-overview-grid,
.kassa-overview-card,
.reports-panel,
.reports-flow,
.reports-balance-card,
.schet-overview-shell,
.schet-balance-card,
.settings-ios-card {
  border-radius: 8px !important;
}

.upos-table-column-hidden {
  display: none !important;
}

.org-ops-table .upos-table-column-control-cell,
.org-ops-table.org-ops-table--shipments-entry .upos-table-column-control-cell,
.products-table[data-upos-column-controls] .upos-table-column-control-cell {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  padding: 0.3rem !important;
  text-align: center;
  vertical-align: middle;
  position: sticky;
  right: 0;
  z-index: 4;
  background: color-mix(in oklch, var(--card), var(--primary) 6%);
}

.org-ops-table thead .upos-table-column-control-cell,
.org-ops-table.org-ops-table--shipments-entry thead .upos-table-column-control-cell,
.products-table[data-upos-column-controls] thead .upos-table-column-control-cell {
  z-index: 8;
  background: color-mix(in oklch, var(--primary), var(--card) 82%);
}

.products-catalog-table .upos-table-column-control-cell {
  background: var(--products-table-row-alt-bg);
}

.products-catalog-table thead .upos-table-column-control-cell {
  background: var(--products-table-head-bg);
}

.org-ops-table .upos-table-column-control-cell::after,
.org-ops-table.org-ops-table--shipments-entry .upos-table-column-control-cell::after,
.products-table[data-upos-column-controls] .upos-table-column-control-cell::after {
  content: none !important;
}

.upos-table-column-control {
  display: inline-grid;
  place-items: center;
}

.upos-table-column-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 22%);
  border-radius: 8px;
  background: color-mix(in oklch, var(--card), var(--primary) 8%);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 35%) inset;
}

.upos-table-column-btn:hover,
.upos-table-column-control.is-column-menu-open .upos-table-column-btn {
  border-color: color-mix(in oklch, var(--primary), transparent 26%);
  background: color-mix(in oklch, var(--primary), transparent 88%);
}

.upos-table-column-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upos-table-column-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 18%);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  box-shadow:
    0 16px 32px color-mix(in oklch, var(--foreground), transparent 88%),
    0 1px 0 color-mix(in oklch, white, transparent 24%) inset;
  text-align: left;
  text-transform: none;
}

.upos-table-column-menu[hidden] {
  display: none;
}

.upos-table-column-menu-title {
  padding: 0.15rem 0.2rem 0.35rem;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 850;
}

.upos-table-column-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.35rem;
  border-radius: 7px;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 760;
  line-height: 1.25;
  cursor: pointer;
}

.upos-table-column-choice:hover {
  background: color-mix(in oklch, var(--primary), transparent 92%);
}

.upos-table-column-choice input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.upos-table-column-reset {
  min-height: 2rem;
  margin-top: 0.25rem;
  border: 1px solid color-mix(in oklch, var(--border), var(--primary) 16%);
  border-radius: 7px;
  background: color-mix(in oklch, var(--muted), transparent 62%);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 820;
  cursor: pointer;
}

.upos-table-column-reset:hover {
  background: color-mix(in oklch, var(--primary), transparent 90%);
}

@media (max-width: 1024px) {
  .page-body {
    padding: 16px;
  }
}
/* Price lists */
.price-type-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}
.price-type-card {
  border: 1px solid rgba(24, 119, 242, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(31, 86, 140, 0.08);
}
.price-type-card.active {
  border-color: #0d7cff;
  box-shadow: inset 0 0 0 1px #0d7cff, 0 14px 30px rgba(13, 124, 255, 0.12);
}
.price-type-card-main {
  display: grid;
  gap: 4px;
  color: #102033;
  text-decoration: none;
}
.price-type-card-main strong {
  font-size: 14px;
}
.price-type-card-main span,
.price-type-card-main small,
.price-type-card-meta {
  color: #5a6b82;
  font-size: 12px;
}
.price-type-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.price-type-card-meta span {
  border: 1px solid #b9d5ff;
  background: #eaf4ff;
  border-radius: 999px;
  padding: 4px 8px;
  color: #0b63ce;
  font-weight: 700;
}
.price-type-card-meta .is-muted {
  color: #7a8798;
  background: #f3f6fa;
  border-color: #d8e0ea;
}
.price-type-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}
.price-type-products-panel {
  border: 1px solid #b7d1f3;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.price-type-products-panel > .products-dictionary-head {
  padding: 14px;
}
.price-type-filter {
  border-top: 1px solid #d8e7fb;
  border-bottom: 1px solid #d8e7fb;
  border-radius: 0;
  box-shadow: none;
}
.price-type-products-table th {
  background: #dceeff;
}
.price-type-price-input {
  min-width: 120px;
  width: 100%;
  border: 1px solid #b7d1f3;
  border-radius: 6px;
  padding: 8px 10px;
}
.price-type-dialog-grid {
  margin-top: 12px;
}
.price-type-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.price-type-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c9d9ef;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f7fbff;
  font-weight: 700;
  color: #1f3b57;
}