/*
 * Teryvo UI 2.0
 * Unified visual language layered over the existing Bootstrap-based interface.
 * Business templates, routes and API contracts remain unchanged.
 */
:root {
  --ty-primary: #3157d5;
  --ty-primary-hover: #294bc0;
  --ty-primary-active: #213fa7;
  --ty-primary-soft: #eef2ff;
  --ty-primary-softer: #f6f7ff;
  --ty-bg: #f4f6f9;
  --ty-surface: #ffffff;
  --ty-surface-subtle: #f9fafc;
  --ty-surface-raised: #ffffff;
  --ty-sidebar: #151c2c;
  --ty-sidebar-raised: #1b2437;
  --ty-sidebar-text: #cbd3e3;
  --ty-sidebar-muted: #818ca3;
  --ty-text: #182033;
  --ty-text-secondary: #536077;
  --ty-text-muted: #778297;
  --ty-border: #e1e5ec;
  --ty-border-strong: #cfd6e2;
  --ty-success: #238354;
  --ty-success-soft: #eaf7f0;
  --ty-warning: #a76a0b;
  --ty-warning-soft: #fff6df;
  --ty-danger: #c73b4b;
  --ty-danger-soft: #fff0f2;
  --ty-info: #2478a8;
  --ty-info-soft: #eaf6fb;
  --ty-radius-xs: 6px;
  --ty-radius-sm: 8px;
  --ty-radius-md: 12px;
  --ty-radius-lg: 16px;
  --ty-shadow-1: 0 1px 2px rgba(20, 31, 55, .04), 0 3px 10px rgba(20, 31, 55, .035);
  --ty-shadow-2: 0 10px 28px rgba(20, 31, 55, .08);
  --ty-shadow-3: 0 22px 52px rgba(20, 31, 55, .16);
  --ty-fast: 140ms;
  --ty-normal: 210ms;
  --ty-panel: 270ms;
  --ty-ease: cubic-bezier(.2, .72, .2, 1);
  --ty-sidebar-width: 248px;
  --ty-sidebar-collapsed: 76px;

  --app-sidebar: var(--ty-sidebar-width);
  --app-bg: var(--ty-bg);
  --app-surface: var(--ty-surface);
  --app-text: var(--ty-text);
  --app-muted: var(--ty-text-muted);
  --app-line: var(--ty-border);
  --app-primary: var(--ty-primary);
  --app-primary-dark: var(--ty-primary-hover);
  --app-primary-soft: var(--ty-primary-soft);
  --app-danger-soft: var(--ty-danger-soft);
  --app-radius: var(--ty-radius-md);
  --app-shadow: var(--ty-shadow-1);
  --bs-primary: #3157d5;
  --bs-primary-rgb: 49, 87, 213;
  --bs-link-color: #3157d5;
  --bs-link-color-rgb: 49, 87, 213;
  --bs-link-hover-color: #294bc0;
  --bs-link-hover-color-rgb: 41, 75, 192;
  --bs-body-color: var(--ty-text);
  --bs-body-bg: var(--ty-bg);
  --bs-border-color: var(--ty-border);
  --bs-border-radius: var(--ty-radius-sm);
  --bs-border-radius-lg: var(--ty-radius-md);
  --bs-border-radius-sm: var(--ty-radius-xs);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body.teryvo-ui {
  min-height: 100vh;
  color: var(--ty-text);
  background: var(--ty-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .925rem;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--ty-text);
  background: #dbe4ff;
}

a {
  text-underline-offset: 3px;
}

a:not(.btn):not(.app-nav__link):not(.list-group-item):not(.dropdown-item):focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(49, 87, 213, .22);
  outline-offset: 2px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
}

/* Application shell */
.app-shell {
  min-height: 100dvh;
  align-items: stretch;
  background: var(--ty-bg);
}

.app-sidebar {
  width: var(--ty-sidebar-width);
  flex: 0 0 var(--ty-sidebar-width);
  height: 100dvh;
  min-height: 100dvh;
  padding: 14px 12px 12px;
  overflow: hidden auto;
  color: var(--ty-sidebar-text);
  background:
    radial-gradient(circle at 15% 0, rgba(78, 108, 205, .13), transparent 28%),
    var(--ty-sidebar);
  border-right: 1px solid rgba(255, 255, 255, .055);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
  transition: width var(--ty-panel) var(--ty-ease), flex-basis var(--ty-panel) var(--ty-ease);
}

.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }

.app-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 4px 5px 8px;
}

.app-sidebar__brand-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.app-sidebar__brand-name {
  display: flex;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: -.02em;
  transition: opacity var(--ty-fast) ease, width var(--ty-panel) var(--ty-ease);
}

.app-sidebar__brand-name strong { font-size: 1.04rem; font-weight: 760; }
.app-sidebar__brand-name span { color: #9aa8c3; font-size: .78rem; font-weight: 680; letter-spacing: .04em; }
.app-sidebar .app-brand-mark { width: 31px; height: 31px; flex-basis: 31px; }

.app-sidebar__collapse {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 0;
  color: #9ca9c0;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--ty-radius-sm);
  transition: color var(--ty-fast) ease, background var(--ty-fast) ease, transform var(--ty-panel) var(--ty-ease);
}

.app-sidebar__collapse:hover { color: #fff; background: rgba(255,255,255,.1); }
.app-sidebar__collapse .app-nav__icon-svg { width: 16px; height: 16px; }

.app-nav { gap: 2px; }
.app-nav__caption {
  margin: 8px 0 4px;
  padding: 4px 11px;
  color: var(--ty-sidebar-muted);
  font-size: .64rem;
  font-weight: 760;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-nav__caption--section { margin-top: 14px; }

.app-nav__company {
  margin: 0 3px 9px;
  padding: 9px 10px;
  color: #d6ddec;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--ty-radius-sm);
  font-size: .76rem;
}

.company-identity { gap: 7px; }
.company-identity__logo { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }

.app-nav__link,
.app-logout {
  position: relative;
  min-height: 39px;
  gap: 11px;
  padding: 8px 10px;
  color: var(--ty-sidebar-text);
  border: 1px solid transparent;
  border-radius: var(--ty-radius-sm);
  font-size: .875rem;
  font-weight: 560;
  transition: color var(--ty-fast) ease, background var(--ty-fast) ease, border-color var(--ty-fast) ease, transform var(--ty-fast) ease;
}

.app-nav__link:hover,
.app-logout:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.035);
}

.app-nav__link.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(83, 115, 218, .34), rgba(83, 115, 218, .16));
  border-color: rgba(132, 155, 236, .17);
  box-shadow: inset 3px 0 0 #8298ed;
  font-weight: 650;
}

.app-nav__link.is-active::after {
  content: "";
  position: absolute;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9db0f4;
  box-shadow: 0 0 0 3px rgba(157,176,244,.12);
}

.app-nav__icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
}

.app-nav__icon-svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.app-nav__label,
.app-logout > span:last-child,
.app-nav__caption,
.app-nav__company .company-identity__name {
  transition: opacity var(--ty-fast) ease, transform var(--ty-normal) var(--ty-ease);
}

.app-nav__divider { margin: 12px 8px; background: rgba(255,255,255,.08); }
.app-sidebar__footer { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.app-sidebar__notifications { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; color: var(--ty-sidebar-text); font-size: .8rem; }
.app-shell.is-sidebar-collapsed .app-sidebar__notifications { justify-content: center; padding-inline: 0; }

.app-main {
  width: calc(100% - var(--ty-sidebar-width));
  min-width: 0;
  flex: 1 1 auto;
  padding: 24px 28px 40px;
  overflow: clip;
  transition: width var(--ty-panel) var(--ty-ease), padding var(--ty-panel) var(--ty-ease);
}

.app-shell.is-sidebar-collapsed .app-sidebar {
  width: var(--ty-sidebar-collapsed);
  flex-basis: var(--ty-sidebar-collapsed);
}
.app-shell.is-sidebar-collapsed .app-main { width: calc(100% - var(--ty-sidebar-collapsed)); }
.app-shell.is-sidebar-collapsed .app-sidebar__brand { justify-content: center; padding-inline: 0; }
.app-shell.is-sidebar-collapsed .app-sidebar__brand-link { gap: 0; }
.app-shell.is-sidebar-collapsed .app-sidebar__brand-name,
.app-shell.is-sidebar-collapsed .app-nav__label,
.app-shell.is-sidebar-collapsed .app-nav__caption,
.app-shell.is-sidebar-collapsed .app-nav__company .company-identity__name,
.app-shell.is-sidebar-collapsed .app-logout > span:last-child {
  width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
}
.app-shell.is-sidebar-collapsed .app-sidebar__collapse {
  position: absolute;
  top: 56px;
  right: -14px;
  z-index: 4;
  color: var(--ty-primary);
  background: var(--ty-surface);
  border-color: var(--ty-border);
  box-shadow: var(--ty-shadow-1);
  transform: rotate(180deg);
}
.app-shell.is-sidebar-collapsed .app-nav__company {
  display: grid;
  min-height: 40px;
  place-items: center;
  padding: 7px;
}
.app-shell.is-sidebar-collapsed .app-nav__link,
.app-shell.is-sidebar-collapsed .app-logout { justify-content: center; padding-inline: 8px; }
.app-shell.is-sidebar-collapsed .app-nav__link.is-active::after { display: none; }
.app-shell.is-sidebar-collapsed .company-identity__logo { margin: 0; }

/* Compact top bar */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: 62px;
  margin: 0 -28px 24px;
  padding: 8px 28px;
  background: rgba(244, 246, 249, .9);
  border-bottom: 1px solid rgba(211, 217, 227, .7);
  backdrop-filter: blur(14px) saturate(130%);
}

.app-topbar__context,
.app-topbar__actions { gap: 10px; }
.app-topbar__page { display: grid; min-width: 0; gap: 0; }
.app-topbar__eyebrow { color: var(--ty-text-muted); font-size: .67rem; font-weight: 690; letter-spacing: .04em; }
.app-topbar__page-title { overflow: hidden; color: var(--ty-text); font-size: .93rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }

.app-company-pill {
  max-width: 260px;
  padding: 5px 9px;
  color: var(--ty-text-secondary);
  background: rgba(255,255,255,.74);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-radius-sm);
  box-shadow: 0 1px 2px rgba(24,32,51,.03);
}

.notification-bell {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--ty-text-secondary);
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-radius-sm);
  box-shadow: var(--ty-shadow-1);
  transition: color var(--ty-fast) ease, border-color var(--ty-fast) ease, transform var(--ty-fast) ease;
}
.notification-bell:hover { color: var(--ty-primary); border-color: #bdc9ef; transform: translateY(-1px); }
.notification-bell__icon { width: 18px; height: 18px; }
.notification-bell__count {
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  background: var(--ty-danger);
  border: 2px solid var(--ty-bg);
  font-size: .62rem;
  line-height: 14px;
}

.app-user-chip {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  color: var(--ty-text);
  text-decoration: none;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-radius-sm);
  box-shadow: var(--ty-shadow-1);
  transition: border-color var(--ty-fast) ease, background var(--ty-fast) ease;
}
.app-user-chip:hover { color: var(--ty-text); background: var(--ty-surface); border-color: #c9d1df; }
.app-user-chip__avatar {
  display: inline-grid;
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  flex: 0 0 30px;
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--ty-primary), #6b82df);
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 760;
  line-height: 1;
}
.app-user-chip__body { display: grid; min-width: 0; line-height: 1.2; }
.app-user-chip__body strong { max-width: 180px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.app-user-chip__body small { max-width: 180px; overflow: hidden; color: var(--ty-text-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

.app-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2000;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.app-progress span {
  display: block;
  width: 34%;
  height: 100%;
  opacity: 0;
  background: var(--ty-primary);
  transform: translateX(-120%);
}
.app-progress.is-active span {
  opacity: 1;
  animation: ty-progress 1.15s infinite var(--ty-ease);
}
@keyframes ty-progress { 0% { transform: translateX(-120%); } 70% { transform: translateX(235%); } 100% { transform: translateX(330%); } }

/* Page hierarchy */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  color: var(--ty-text);
  font-weight: 710;
  letter-spacing: -.025em;
}

h1, .h1, .h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); }
h2, .h2, .h4 { font-size: 1.16rem; }
h3, .h3, .h5 { font-size: 1rem; }

.app-page-header,
.client-list-page > .d-flex:first-child {
  position: relative;
  align-items: center !important;
  margin-bottom: 18px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ty-border);
}
.app-page-header h1,
.client-list-page > .d-flex:first-child h1 { margin-bottom: 3px !important; }
.app-page-header p,
.client-list-page > .d-flex:first-child p { max-width: 760px; color: var(--ty-text-secondary) !important; }

.text-muted { color: var(--ty-text-muted) !important; }
.text-secondary { color: var(--ty-text-secondary) !important; }
.small, small { line-height: 1.42; }
.text-preserve-lines { white-space: pre-wrap; }

/* Surfaces and cards */
.card {
  color: var(--ty-text);
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-radius-md);
  box-shadow: var(--ty-shadow-1);
}
.card:not(.modal-content) { overflow: clip; }
.card-header {
  min-height: 48px;
  padding: 13px 16px;
  color: var(--ty-text);
  background: var(--ty-surface);
  border-bottom-color: var(--ty-border);
  font-size: .88rem;
  font-weight: 690;
}
.card-body { padding: 16px; }
.card-footer { padding: 12px 16px; background: var(--ty-surface-subtle); border-top-color: var(--ty-border); }

.card-stat {
  position: relative;
  min-height: 112px;
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
}
.card-stat::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--metric-accent, var(--ty-primary));
}
.dashboard-grid__item:nth-child(4n + 1) .card-stat { --metric-accent: #3157d5; }
.dashboard-grid__item:nth-child(4n + 2) .card-stat { --metric-accent: #298464; }
.dashboard-grid__item:nth-child(4n + 3) .card-stat { --metric-accent: #a66b13; }
.dashboard-grid__item:nth-child(4n) .card-stat { --metric-accent: #6c59bf; }
.card-stat .card-body { display: flex; height: 100%; flex-direction: column; justify-content: space-between; gap: 10px; }
.metric-card__label { color: var(--ty-text-secondary); font-size: .75rem; font-weight: 620; letter-spacing: .01em; }
.metric-card__value { color: var(--ty-text); font-size: clamp(1.48rem, 1.2rem + .55vw, 1.9rem); font-weight: 760; letter-spacing: -.04em; line-height: 1.05; }

.analytics-card,
.admin-summary-card,
.role-summary-card,
.plan-option-card {
  background: var(--ty-surface);
  border-color: var(--ty-border);
  box-shadow: var(--ty-shadow-1);
}

.list-group { --bs-list-group-border-color: var(--ty-border); }
.list-group-item {
  padding: 12px 16px;
  color: var(--ty-text);
  background: transparent;
  border-color: var(--ty-border);
  transition: background var(--ty-fast) ease, border-color var(--ty-fast) ease;
}
.list-group-item-action:hover,
.list-group-item-action:focus { color: var(--ty-text); background: var(--ty-surface-subtle); }
.app-list-meta { color: var(--ty-text-secondary); font-size: .73rem; }

.empty-state {
  display: grid;
  min-height: 132px;
  place-content: center;
  gap: 6px;
  padding: 28px 20px;
  color: var(--ty-text-muted);
  background: var(--ty-surface-subtle);
  border: 1px dashed var(--ty-border-strong);
  border-radius: var(--ty-radius-md);
  text-align: center;
}
.list-group > .empty-state { min-height: 120px; margin: 14px; }
.empty-state--chart { min-height: 250px; }
.empty-state__icon { color: var(--ty-primary); }

/* Buttons */
.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .46rem .78rem;
  border-radius: var(--ty-radius-sm);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.2;
  box-shadow: none;
  transition: color var(--ty-fast) ease, background var(--ty-fast) ease, border-color var(--ty-fast) ease, box-shadow var(--ty-fast) ease, transform var(--ty-fast) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 32px; padding: .34rem .58rem; border-radius: var(--ty-radius-xs); font-size: .76rem; }
.btn-lg { min-height: 44px; padding: .62rem 1rem; }
.btn-primary {
  color: #fff;
  background: var(--ty-primary);
  border-color: var(--ty-primary);
  box-shadow: 0 4px 10px rgba(49,87,213,.16);
}
.btn-primary:hover,
.btn-primary:focus { color: #fff; background: var(--ty-primary-hover); border-color: var(--ty-primary-hover); box-shadow: 0 6px 14px rgba(49,87,213,.2); }
.btn-primary:active { background: var(--ty-primary-active) !important; border-color: var(--ty-primary-active) !important; }
.btn-light {
  color: var(--ty-text-secondary);
  background: var(--ty-surface);
  border-color: var(--ty-border);
}
.btn-light:hover { color: var(--ty-text); background: var(--ty-surface-subtle); border-color: var(--ty-border-strong); }
.btn-outline-primary { color: var(--ty-primary); background: var(--ty-surface); border-color: #bac8ef; }
.btn-outline-primary:hover { color: #fff; background: var(--ty-primary); border-color: var(--ty-primary); }
.btn-outline-secondary { color: var(--ty-text-secondary); background: var(--ty-surface); border-color: var(--ty-border-strong); }
.btn-outline-secondary:hover { color: var(--ty-text); background: var(--ty-surface-subtle); border-color: #bfc7d4; }
.btn-outline-danger { color: var(--ty-danger); background: var(--ty-surface); border-color: #ebbdc3; }
.btn-outline-danger:hover { color: #fff; background: var(--ty-danger); border-color: var(--ty-danger); }
.btn-danger { background: var(--ty-danger); border-color: var(--ty-danger); }
.btn-link { color: var(--ty-primary); text-decoration: none; }
.btn-link:hover { color: var(--ty-primary-hover); text-decoration: underline; }
.btn:disabled, .btn.disabled { transform: none; cursor: not-allowed; opacity: .58; }
.btn.is-submitting,
form.is-submitting button[type="submit"] { position: relative; cursor: wait; }
.btn.is-submitting::before,
form.is-submitting button[type="submit"]::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ty-spin .65s linear infinite;
}
@keyframes ty-spin { to { transform: rotate(360deg); } }

.app-actions-trigger {
  min-height: 38px;
  padding: .44rem .72rem .44rem .52rem;
  background: var(--ty-surface);
  border-color: var(--ty-border-strong);
  border-radius: var(--ty-radius-sm);
  box-shadow: none;
}
.app-actions-trigger__icon { width: 21px; height: 21px; border-radius: 6px; }

/* Forms */
.form-label {
  margin-bottom: 5px;
  color: var(--ty-text-secondary);
  font-size: .78rem;
  font-weight: 650;
}
.form-control,
.form-select {
  min-height: 39px;
  padding: .48rem .68rem;
  color: var(--ty-text);
  background-color: var(--ty-surface);
  border: 1px solid var(--ty-border-strong);
  border-radius: var(--ty-radius-sm);
  box-shadow: inset 0 1px 1px rgba(24,32,51,.02);
  font-size: .875rem;
  transition: border-color var(--ty-fast) ease, box-shadow var(--ty-fast) ease, background var(--ty-fast) ease;
}
textarea.form-control { min-height: 88px; resize: vertical; }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: #b9c2d2; }
.form-control:focus,
.form-select:focus {
  color: var(--ty-text);
  background: var(--ty-surface);
  border-color: #7f98e8;
  box-shadow: 0 0 0 3px rgba(49, 87, 213, .11);
}
.form-control::placeholder { color: #9ba4b5; opacity: 1; }
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] { color: #6e788b; background: var(--ty-surface-subtle); border-color: #e0e4ea; opacity: 1; }
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid { border-color: var(--ty-danger); box-shadow: 0 0 0 3px rgba(199,59,75,.08); }
.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid { border-color: var(--ty-success); box-shadow: 0 0 0 3px rgba(35,131,84,.07); }
.invalid-feedback { color: var(--ty-danger); font-size: .75rem; }
.valid-feedback { color: var(--ty-success); font-size: .75rem; }
.form-text { margin-top: 5px; color: var(--ty-text-muted); font-size: .73rem; line-height: 1.42; }
.form-check-input { border-color: #bfc7d3; }
.form-check-input:checked { background-color: var(--ty-primary); border-color: var(--ty-primary); }
.form-check-input:focus { border-color: #8098e7; box-shadow: 0 0 0 3px rgba(49,87,213,.11); }
.input-group-text { color: var(--ty-text-secondary); background: var(--ty-surface-subtle); border-color: var(--ty-border-strong); }
.form-control-color { width: 100%; min-height: 42px; padding: 5px; }

fieldset { min-width: 0; }
legend { color: var(--ty-text); font-size: .93rem; font-weight: 700; }

.multi-autocomplete__control,
.related-object-selector,
.client-form-builder__field,
.client-form-layout-row {
  border-color: var(--ty-border-strong);
  border-radius: var(--ty-radius-sm);
}
.multi-autocomplete__control:focus-within { border-color: #7f98e8; box-shadow: 0 0 0 3px rgba(49,87,213,.11); }
.multi-autocomplete__chip { color: #29479d; background: var(--ty-primary-soft); border-color: #cbd6fb; border-radius: 6px; }
.multi-autocomplete__menu { border-color: var(--ty-border); border-radius: var(--ty-radius-md); box-shadow: var(--ty-shadow-2); }

.client-form-card { padding-bottom: 70px; }
.client-form-actions {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  border-top-color: var(--ty-border);
  box-shadow: 0 -10px 25px rgba(20,31,55,.07);
  backdrop-filter: blur(12px);
}

/* Tables */
.table-responsive,
.finance-table-wrap,
.client-list-table-wrap {
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-radius-md);
  box-shadow: var(--ty-shadow-1);
  scrollbar-color: #c4ccda transparent;
  scrollbar-width: thin;
}
.table-responsive > .table { border: 0; }
.table { color: var(--ty-text); font-size: .84rem; }
.table > :not(caption) > * > * {
  padding: .72rem .8rem;
  border-bottom-color: var(--ty-border);
  vertical-align: middle;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--ty-text-secondary);
  background: var(--ty-surface-subtle);
  border-bottom: 1px solid var(--ty-border-strong);
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody tr { transition: background var(--ty-fast) ease, box-shadow var(--ty-fast) ease; }
.table-hover > tbody > tr:hover > * { background: var(--ty-surface-subtle); }
.table tbody tr:focus-within > * { background: var(--ty-primary-softer); }
.table tbody tr:last-child td { border-bottom: 0; }
.table a:not(.btn) { color: var(--ty-primary); font-weight: 600; text-decoration: none; }
.table a:not(.btn):hover { text-decoration: underline; }
.table .text-end .dropdown { display: inline-block; }
.table .btn-sm.btn-light,
.table .dropdown > .btn { min-width: 32px; padding-inline: .4rem; }

/* Navigation, tabs and filters */
.nav-tabs,
.settings-tabs,
.finance-tabs,
.pipeline-tabs {
  gap: 4px;
  padding: 4px;
  background: #eceff4;
  border: 1px solid #e0e4ea;
  border-radius: 10px;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar,
.finance-tabs::-webkit-scrollbar,
.pipeline-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link,
.settings-tabs .nav-link,
.finance-tabs .nav-link {
  min-height: 34px;
  padding: .4rem .68rem;
  color: var(--ty-text-secondary);
  border: 0 !important;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 620;
  white-space: nowrap;
}
.nav-tabs .nav-link:hover,
.settings-tabs .nav-link:hover,
.finance-tabs .nav-link:hover { color: var(--ty-text); background: var(--ty-surface-subtle); }
.nav-tabs .nav-link.active,
.settings-tabs .nav-link.active,
.finance-tabs .nav-link.active {
  color: var(--ty-primary);
  background: var(--ty-surface);
  box-shadow: 0 1px 4px rgba(20,31,55,.08);
}

.segmented-control,
.view-toggle { padding: 3px; background: #eef0f4; border: 1px solid var(--ty-border); border-radius: 9px; }
.segmented-control__item,
.view-toggle__button { color: var(--ty-text-secondary); border-radius: 6px; }
.segmented-control__item.is-active,
.view-toggle__button.is-active { color: var(--ty-primary); background: var(--ty-surface); box-shadow: 0 1px 4px rgba(20,31,55,.1); }

/* Statuses */
.badge {
  padding: .32rem .5rem;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 690;
  letter-spacing: .01em;
}
.text-bg-primary { color: #27459e !important; background: #e9eeff !important; }
.text-bg-secondary { color: #4e596d !important; background: #edf0f4 !important; }
.text-bg-success { color: #1d6843 !important; background: var(--ty-success-soft) !important; }
.text-bg-warning { color: #855406 !important; background: var(--ty-warning-soft) !important; }
.text-bg-danger { color: #a32e3c !important; background: var(--ty-danger-soft) !important; }
.text-bg-info { color: #1f678d !important; background: var(--ty-info-soft) !important; }
.text-bg-light { color: var(--ty-text-secondary) !important; background: #f2f4f7 !important; }
.status-badge,
.priority-badge { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.priority-badge > span:first-child { font-size: .62em; }
.status-select--danger { color: #9f303e; background: #fff7f8; border-color: #e5afb7; }
.status-select--success { color: #226a46; background: #f2fbf6; border-color: #9ecab0; }

/* Dashboard */
.dashboard-grid { gap: 14px; }
.dashboard-grid__item > .card { transition: transform var(--ty-normal) var(--ty-ease), box-shadow var(--ty-normal) var(--ty-ease), border-color var(--ty-normal) ease; }
.dashboard-grid__item > .card:hover { border-color: #d3d9e5; box-shadow: 0 8px 22px rgba(20,31,55,.07); transform: translateY(-1px); }
.dashboard-grid .list-group-item strong { font-size: .82rem; }
.dashboard-layout-editor__tile,
.dashboard-layout-editor__group,
.dashboard-layout-editor__canvas {
  border-color: var(--ty-border);
  border-radius: var(--ty-radius-md);
}
.dashboard-layout-editor__tile { transition: transform var(--ty-normal) var(--ty-ease), border-color var(--ty-fast) ease, box-shadow var(--ty-fast) ease; }
.dashboard-layout-editor__tile.is-dragging { opacity: .65; transform: scale(.985); }
.dashboard-layout-editor__tile.is-drop-target { border-color: #8199e7; box-shadow: 0 0 0 3px rgba(49,87,213,.1); }

/* Client list and profile */
.client-list-page { min-height: calc(100dvh - 108px); }
.client-list-page > .card.mb-3 { box-shadow: none; }
.client-list-actions { justify-content: flex-end; }
.client-name-link { color: var(--ty-text) !important; }
.client-name-link:hover { color: var(--ty-primary) !important; }
.client-name-link__hint { color: var(--ty-text-muted); }
.client-row-actions .btn,
.client-list-table__actions .btn { min-width: 32px; }
.client-columns-modal__form,
.client-form-builder,
.client-form-layout-editor { background: var(--ty-surface); }
.client-form-builder__field:hover,
.client-form-layout-row:hover { border-color: #aebddd; box-shadow: 0 3px 10px rgba(20,31,55,.05); }
.client-form-builder__field.is-dragging,
.client-form-layout-row.is-dragging { opacity: .58; transform: scale(.99); }
.client-form-layout-row.is-drop-target { border-color: var(--ty-primary); background: var(--ty-primary-softer); }

.client-profile-header,
.client-detail-header {
  background: linear-gradient(135deg, var(--ty-surface), var(--ty-primary-softer));
  border-color: #dce2ef;
}
.client-profile-card .card-body { padding-block: 6px 14px; }
.client-profile-layout { gap: 0; }
.client-profile-row {
  gap: 0;
  border-bottom: 1px solid var(--ty-border);
}
.client-profile-row:last-child { border-bottom: 0; }
.client-profile-field {
  padding: 13px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.client-profile-row--two .client-profile-field + .client-profile-field { border-left: 1px solid var(--ty-border); }
.client-profile-field__label { margin-bottom: 4px; color: var(--ty-text-muted); font-size: .7rem; letter-spacing: .015em; text-transform: none; }
.client-profile-field__value { font-weight: 590; }
.client-history-entry { position: relative; padding-left: 30px; }
.client-history-entry::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 13px;
  width: 8px;
  height: 8px;
  background: var(--ty-primary);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #cbd6f7;
}
.client-history-entry:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -1px;
  left: 16px;
  width: 1px;
  background: #dfe4ec;
}
.client-history-details { background: var(--ty-surface-subtle); border-color: var(--ty-border); border-radius: var(--ty-radius-sm); }
.client-history-change__old { color: #8b4650; background: #fff0f2; border-radius: 4px; text-decoration: line-through; }
.client-file-row { gap: 14px; }
.client-file-row__main { min-width: 0; }

/* Kanban */
.pipeline-tabs { margin-bottom: 14px; padding: 4px; background: #eceff4; }
.pipeline-tabs__scroll { gap: 3px; }
.pipeline-tab {
  min-height: 34px;
  padding: .39rem .64rem;
  color: var(--ty-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 620;
  transition: color var(--ty-fast) ease, background var(--ty-fast) ease, box-shadow var(--ty-fast) ease;
}
.pipeline-tab:hover { color: var(--ty-text); background: var(--ty-surface-subtle); }
.pipeline-tab.is-active { color: var(--ty-primary); background: var(--ty-surface); box-shadow: 0 1px 4px rgba(20,31,55,.1); }
.pipeline-tab__drag,
.kanban-stage-drag-handle,
.kanban-drag-handle { color: #929caf; cursor: grab; }
.pipeline-tab__budget { color: var(--ty-text-muted); font-size: .68rem; }

.leads-workspace-header { box-shadow: none; }
.leads-toolbar { min-height: 62px; }
.kanban-scroll { padding-bottom: 36px; }
.kanban-viewport { scrollbar-width: thin; scrollbar-color: #bfc7d5 transparent; }
.kanban { gap: 12px; padding: 1px 1px 14px; }
.kanban-column {
  min-width: 286px;
  max-width: 316px;
  padding: 10px;
  background: #eef1f5;
  border: 1px solid #dde2e9;
  border-top: 3px solid var(--stage-accent, #8998b6);
  border-radius: 10px;
  box-shadow: none;
  transition: background var(--ty-fast) ease, border-color var(--ty-fast) ease, transform var(--ty-normal) var(--ty-ease);
}
.kanban-column.is-drop-target {
  background: #e8edff;
  border-color: #8ea3e8;
  box-shadow: 0 0 0 3px rgba(49,87,213,.1);
}
.kanban-column__header { position: sticky; top: 0; z-index: 3; padding: 3px 2px 10px; background: #eef1f5; }
.kanban-column.is-drop-target .kanban-column__header { background: #e8edff; }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; }
.kanban-stage-description { color: var(--ty-text-muted); }
.kanban-stage-budget { color: var(--ty-text-secondary); font-size: .72rem; }
.kanban-stage-cards { min-height: 72px; }
.kanban-card {
  position: relative;
  margin-bottom: 8px;
  padding: 11px;
  background: var(--ty-surface);
  border: 1px solid #dce1e9;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(20,31,55,.04);
  cursor: grab;
  transition: transform var(--ty-normal) var(--ty-ease), box-shadow var(--ty-normal) var(--ty-ease), border-color var(--ty-fast) ease, opacity var(--ty-fast) ease;
}
.kanban-card:hover { border-color: #cbd3e0; box-shadow: 0 7px 17px rgba(20,31,55,.09); transform: translateY(-2px); }
.kanban-card.is-dragging { opacity: .58; box-shadow: var(--ty-shadow-2); transform: rotate(.35deg) scale(1.015); }
.kanban-card.is-moving { opacity: .7; pointer-events: none; }
.kanban-card.is-move-failed { animation: ty-shake .28s ease; }
@keyframes ty-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kanban-card__header { gap: 8px; }
.kanban-card__meta { padding-top: 8px; border-top: 1px solid #edf0f4; color: var(--ty-text-muted); font-size: .72rem; }
.kanban-card__meta strong { color: var(--ty-text); }
.kanban-column__drop-help { color: #8490a4; border-color: #c8d0dd; border-radius: 8px; }
.kanban-scroll-control { background: rgba(255,255,255,.94); border-color: var(--ty-border); border-radius: 10px; box-shadow: var(--ty-shadow-2); backdrop-filter: blur(10px); }

/* Tasks */
.task-card {
  border-color: var(--ty-border);
  box-shadow: var(--ty-shadow-1);
  transition: border-color var(--ty-fast) ease, transform var(--ty-normal) var(--ty-ease), box-shadow var(--ty-normal) ease;
}
.task-card:hover { border-color: #d1d8e5; box-shadow: 0 8px 20px rgba(20,31,55,.07); transform: translateY(-1px); }
.task-card.is-completed { animation: ty-complete .34s var(--ty-ease); }
@keyframes ty-complete { 50% { transform: scale(.988); opacity: .65; } }
.task-card__status-select { min-width: 122px; min-height: 34px; font-size: .76rem; }
.task-templates-panel > summary { list-style: none; cursor: pointer; }
.task-templates-panel > summary::-webkit-details-marker { display: none; }
.task-templates-panel__hint { color: var(--ty-primary); font-size: .73rem; }
.task-templates-panel[open] .task-templates-panel__hint { font-size: 0; }
.task-templates-panel[open] .task-templates-panel__hint::after { content: "Свернуть"; font-size: .73rem; }

/* Calendar */
.calendar-shell {
  border-color: var(--ty-border);
  border-radius: var(--ty-radius-md);
  box-shadow: var(--ty-shadow-1);
}
.calendar-toolbar { gap: 10px; }
.calendar-range-title { color: var(--ty-text-secondary); font-size: .88rem; }
.calendar-time-axis,
.calendar-day__header,
.calendar-month__weekday { background: var(--ty-surface-subtle); }
.calendar-time-axis__hour { color: #8b95a7; }
.calendar-day__header.is-today strong { background: var(--ty-primary); box-shadow: 0 3px 8px rgba(49,87,213,.22); }
.calendar-day__body { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, #edf0f4 59px, #edf0f4 60px); }
.calendar-event {
  border-radius: 7px;
  box-shadow: none;
  transition: transform var(--ty-fast) ease, box-shadow var(--ty-fast) ease, filter var(--ty-fast) ease;
}
.calendar-event:hover { z-index: 8; filter: saturate(1.06); box-shadow: 0 7px 16px rgba(20,31,55,.13); transform: translateY(-1px); }
.calendar-month__day { transition: background var(--ty-fast) ease; }
.calendar-month__day:hover { background: var(--ty-surface-subtle); }
.calendar-month__day.is-today { box-shadow: inset 0 0 0 2px rgba(49,87,213,.35); }
.calendar-month-event { border-radius: 5px; }
.calendar-events-summary .list-group-item { scroll-margin-top: 76px; }

/* Finance */
.finance-summary-grid .card,
.finance-metric-card { box-shadow: none; }
.finance-tabs { margin-bottom: 14px; }
.finance-filter-field { min-width: 0; }
.finance-filter-action { align-self: end; }
.finance-icon-button { color: var(--ty-text-secondary); background: var(--ty-surface); border-color: var(--ty-border); border-radius: 7px; }
.finance-icon-button:hover { color: var(--ty-primary); border-color: #b8c5eb; background: var(--ty-primary-softer); }
.catalog-cost-list__row,
.payment-product-row,
.product-sale-row { border-color: var(--ty-border); border-radius: var(--ty-radius-sm); background: var(--ty-surface-subtle); }
.payment-product-row { animation: ty-row-in var(--ty-normal) var(--ty-ease); }
.payment-product-row.is-removing { opacity: 0; transform: translateX(8px); }
@keyframes ty-row-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.money-positive { color: var(--ty-success); }
.money-negative { color: var(--ty-danger); }
.money-neutral { color: var(--ty-text-secondary); }

/* Settings, admin and audit */
.settings-shell,
.company-settings-layout { gap: 16px; }
.settings-tabs { position: sticky; top: 72px; z-index: 5; }
.settings-section,
.company-settings-section { scroll-margin-top: 86px; }
.audit-log-row,
.notification-item { transition: background var(--ty-fast) ease; }
.audit-log-row:hover,
.notification-item:hover { background: var(--ty-surface-subtle); }
.admin-summary-card { border-top: 3px solid var(--admin-accent, #7d8daa); }
.admin-summary-card:nth-child(4n + 1) { --admin-accent: #3157d5; }
.admin-summary-card:nth-child(4n + 2) { --admin-accent: #298464; }
.admin-summary-card:nth-child(4n + 3) { --admin-accent: #a66b13; }
.admin-summary-card:nth-child(4n) { --admin-accent: #6c59bf; }
.admin-action-menu,
.floating-action-menu { z-index: 1060; }

/* Dropdowns, menus and details */
.dropdown-menu,
.client-page-actions__menu,
.floating-action-menu,
.admin-action-menu {
  min-width: 210px;
  padding: 5px;
  color: var(--ty-text);
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: 10px;
  box-shadow: var(--ty-shadow-2);
  animation: ty-menu-in var(--ty-fast) var(--ty-ease);
}
@keyframes ty-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.dropdown-item,
.client-page-actions__menu .dropdown-item {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .42rem .58rem;
  color: var(--ty-text-secondary);
  border-radius: 6px;
  font-size: .8rem;
}
.dropdown-item:hover,
.dropdown-item:focus,
.client-page-actions__menu .dropdown-item:hover,
.client-page-actions__menu .dropdown-item:focus { color: var(--ty-text); background: var(--ty-surface-subtle); }
.dropdown-item.active,
.dropdown-item:active { color: var(--ty-primary); background: var(--ty-primary-soft); }
.dropdown-item.text-danger { color: var(--ty-danger) !important; }
.dropdown-divider { margin: 4px 2px; border-top-color: var(--ty-border); }
.client-page-actions[open] > summary { box-shadow: 0 0 0 3px rgba(49,87,213,.1); }

/* Modals and offcanvas */
.modal { --bs-modal-zindex: 1080; }
.modal-backdrop { --bs-backdrop-opacity: .44; background: #101625; backdrop-filter: blur(2px); }
.modal.fade .modal-dialog { transform: translateY(8px) scale(.985); transition: transform var(--ty-panel) var(--ty-ease); }
.modal.show .modal-dialog { transform: none; }
.modal-content {
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  background: var(--ty-surface);
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: var(--ty-radius-lg);
  box-shadow: var(--ty-shadow-3) !important;
}
.modal-header { min-height: 58px; padding: 14px 18px; border-bottom-color: var(--ty-border); }
.modal-title { font-weight: 720; }
.modal-body { padding: 17px 18px; overflow-y: auto; }
.modal-footer { padding: 11px 18px; background: var(--ty-surface-subtle); border-top-color: var(--ty-border); }
.modal-footer .btn { min-width: 86px; }
.btn-close { width: 30px; height: 30px; padding: 0; background-size: 11px; border-radius: 7px; opacity: .58; }
.btn-close:hover { background-color: #eef0f4; opacity: .9; }
.offcanvas { background: var(--ty-surface); border-right-color: var(--ty-border); box-shadow: var(--ty-shadow-3); }
.offcanvas-header { min-height: 58px; border-bottom: 1px solid var(--ty-border); }
.offcanvas .app-nav { padding: 10px; }
.offcanvas .app-nav__link { color: var(--ty-text-secondary); }
.offcanvas .app-nav__link:hover { color: var(--ty-text); background: var(--ty-surface-subtle); }
.offcanvas .app-nav__link.is-active { color: var(--ty-primary); background: var(--ty-primary-soft); border-color: #dce4ff; box-shadow: inset 3px 0 0 var(--ty-primary); }
.offcanvas .app-nav__caption { color: var(--ty-text-muted); }
.offcanvas .app-nav__company { color: var(--ty-text); background: var(--ty-surface-subtle); border-color: var(--ty-border); }

/* Alerts and toasts */
.alert {
  color: var(--ty-text-secondary);
  border: 1px solid transparent;
  border-radius: var(--ty-radius-md);
  font-size: .84rem;
}
.alert-success { color: #1f6744; background: var(--ty-success-soft); border-color: #c6e7d5; }
.alert-warning { color: #82530b; background: var(--ty-warning-soft); border-color: #f0ddb0; }
.alert-danger { color: #9c2f3b; background: var(--ty-danger-soft); border-color: #edc4c9; }
.alert-info { color: #1f6487; background: var(--ty-info-soft); border-color: #c7e3ee; }
.alert-light { color: var(--ty-text-secondary); background: var(--ty-surface-subtle); border-color: var(--ty-border); }
.app-flash { margin-bottom: 14px; box-shadow: none; }

.app-toast-container {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 2100;
  display: grid;
  width: min(380px, calc(100vw - 24px));
  gap: 9px;
  pointer-events: none;
}
.app-toast {
  --toast-accent: var(--ty-info);
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 12px 12px 13px;
  overflow: hidden;
  color: var(--ty-text);
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-left: 3px solid var(--toast-accent);
  border-radius: 10px;
  box-shadow: var(--ty-shadow-2) !important;
  pointer-events: auto;
  animation: ty-toast-in var(--ty-normal) var(--ty-ease);
}
.app-toast.alert-success { --toast-accent: var(--ty-success); }
.app-toast.alert-warning { --toast-accent: var(--ty-warning); }
.app-toast.alert-danger { --toast-accent: var(--ty-danger); }
.app-toast.alert-info { --toast-accent: var(--ty-info); }
.app-toast__icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--toast-accent);
  background: color-mix(in srgb, var(--toast-accent) 10%, white);
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 800;
}
.app-toast__message { min-width: 0; padding-top: 2px; line-height: 1.38; }
.app-toast__close { width: 28px; height: 28px; padding: 0; color: #7d8799; background: transparent; border: 0; border-radius: 6px; }
.app-toast__close:hover { color: var(--ty-text); background: var(--ty-surface-subtle); }
.app-toast__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: color-mix(in srgb, var(--toast-accent) 16%, transparent); }
.app-toast__progress::after { content: ""; display: block; width: 100%; height: 100%; background: var(--toast-accent); transform-origin: left; animation: ty-toast-time var(--toast-duration, 4200ms) linear forwards; }
.app-toast.is-leaving { animation: ty-toast-out var(--ty-fast) ease forwards; }
@keyframes ty-toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes ty-toast-out { to { opacity: 0; transform: translateX(10px); } }
@keyframes ty-toast-time { to { transform: scaleX(0); } }

/* Loading and HTMX states */
.skeleton,
.htmx-indicator .skeleton-line {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: #e9edf3 !important;
  border-color: transparent !important;
  border-radius: 6px;
}
.skeleton::after,
.htmx-indicator .skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  transform: translateX(-100%);
  animation: ty-shimmer 1.3s infinite;
}
@keyframes ty-shimmer { to { transform: translateX(100%); } }
.htmx-indicator { opacity: 0; transition: opacity var(--ty-fast) ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: .45; transition: opacity var(--ty-fast) ease; }
.htmx-settling { animation: ty-content-in var(--ty-normal) var(--ty-ease); }
[data-ui-enter] { animation: ty-content-in var(--ty-normal) var(--ty-ease); }
@keyframes ty-content-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Authentication */
.auth-page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--ty-text);
  background:
    radial-gradient(circle at 10% 10%, rgba(49,87,213,.13), transparent 26%),
    linear-gradient(135deg, #f3f5fa 0%, #f8f9fb 50%, #eef2f9 100%);
}
.auth-page__brand {
  width: max-content;
  margin: 22px 28px 0;
  color: var(--ty-text);
  font-size: .92rem;
}
.auth-page__brand .app-brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
.auth-page > .container { display: grid; place-items: center; width: 100%; max-width: 100%; padding: 28px 16px 70px !important; }
.auth-page .row { width: min(100%, 520px); }
.auth-page .row > [class*="col-"] { width: 100%; max-width: none; flex: none; }
.auth-page .card {
  overflow: hidden;
  border-color: rgba(208,215,227,.9);
  border-radius: 15px;
  box-shadow: 0 24px 70px rgba(27,38,64,.12);
}
.auth-page .card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--ty-primary), #6a7ed3);
}
.auth-page .card-body { padding: 28px !important; }
.auth-page h1 { font-size: 1.45rem; }
.auth-page .btn-primary { min-height: 43px; }
.captcha-card { background: var(--ty-surface-subtle); border-color: var(--ty-border); border-radius: var(--ty-radius-md); }

/* Mobile header */
.app-mobile-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 58px;
  padding: 0 14px;
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--ty-border);
  backdrop-filter: blur(12px);
}
.app-mobile-header__brand { color: var(--ty-text); font-size: .9rem; }
.app-mobile-header .app-brand-mark { width: 29px; height: 29px; flex-basis: 29px; }
.app-mobile-header__actions { display: flex; align-items: center; gap: 8px; }
.app-mobile-header__menu { width: 39px; min-width: 39px; height: 39px; padding: 0; }
.app-mobile-header__menu .app-nav__icon-svg { width: 20px; height: 20px; }

/* Responsive layout */
@media (max-width: 1199.98px) {
  .app-main { padding-inline: 22px; }
  .app-topbar { margin-inline: -22px; padding-inline: 22px; }
  .app-user-chip__body small { display: none; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .app-sidebar {
    display: flex !important;
    width: var(--ty-sidebar-collapsed) !important;
    max-width: var(--ty-sidebar-collapsed) !important;
    flex: 0 0 var(--ty-sidebar-collapsed) !important;
    padding-inline: 9px;
  }
  .app-main { width: calc(100% - var(--ty-sidebar-collapsed)) !important; padding-inline: 18px; }
  .app-topbar { margin-inline: -18px; padding-inline: 18px; }
  .app-sidebar__brand { justify-content: center; padding-inline: 0; }
  .app-sidebar__brand-name,
  .app-sidebar__collapse,
  .app-sidebar .app-nav__label,
  .app-sidebar .app-nav__caption,
  .app-sidebar .company-identity__name,
  .app-sidebar .app-logout > span:last-child { display: none !important; }
  .app-sidebar .app-nav__link,
  .app-sidebar .app-logout { justify-content: center; padding-inline: 8px; }
  .app-sidebar .app-nav__company { display: grid; place-items: center; padding: 7px; }
  .app-sidebar .app-nav__link.is-active::after { display: none; }
  .app-company-pill { display: none; }
  .app-user-chip__body { display: none; }
  .app-user-chip { padding-right: 5px; }
}

@media (max-width: 767.98px) {
  body.teryvo-ui { font-size: .89rem; }
  .app-shell { display: block; }
  .app-main {
    width: 100% !important;
    min-height: calc(100dvh - 58px);
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
    overflow: visible;
  }
  .app-topbar { display: none; }
  .app-page-header,
  .client-list-page > .d-flex:first-child {
    align-items: stretch !important;
    margin-bottom: 14px !important;
    padding-bottom: 13px;
  }
  .app-page-header > div:last-child,
  .client-list-page > .d-flex:first-child > div:last-child { width: 100%; }
  .app-page-header > div:last-child .btn,
  .client-list-actions .btn { min-height: 42px; }
  h1, .h1, .h3 { font-size: 1.42rem; }
  .card-header, .card-body, .card-footer { padding-left: 13px; padding-right: 13px; }
  .btn, .form-control, .form-select { min-height: 43px; }
  .btn-sm { min-height: 36px; }
  .form-label { font-size: .79rem; }
  .nav-tabs,
  .settings-tabs,
  .finance-tabs,
  .pipeline-tabs { margin-inline: -1px; overflow-x: auto; }
  .dashboard-grid { gap: 11px; }
  .card-stat { min-height: 102px; }
  .metric-card__value { font-size: 1.55rem; }
  .client-list-page { min-height: auto; }
  .client-list-table-wrap { border: 0; overflow: visible; box-shadow: none; }
  .client-list-table tr {
    padding: 11px;
    border-color: var(--ty-border);
    border-radius: 10px;
    box-shadow: var(--ty-shadow-1);
  }
  .client-list-table td { grid-template-columns: minmax(92px, .65fr) minmax(0, 1.35fr); gap: 8px; }
  .client-list-table td::before { color: var(--ty-text-secondary); font-size: .72rem; }
  .client-profile-row--two .client-profile-field + .client-profile-field { border-left: 0; border-top: 1px solid var(--ty-border); }
  .client-form-actions { gap: 8px; }
  .kanban-column { min-width: min(86vw, 300px); }
  .kanban-scroll-control { right: 10px; bottom: 10px; left: 10px; width: auto; }
  .calendar-toolbar > * { width: 100%; }
  .calendar-toolbar form { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .calendar-toolbar form .form-control,
  .calendar-toolbar form .form-select { width: 100%; }
  .calendar-toolbar form .btn { grid-column: 1 / -1; }
  .modal-dialog:not(.modal-fullscreen) {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }
  .modal-dialog:not(.modal-fullscreen) > .modal-content {
    height: 100dvh;
    max-height: 100dvh;
    border: 0 !important;
    border-radius: 0;
  }
  .modal-header { min-height: 56px; padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .modal-footer .btn { width: 100%; }
  .app-toast-container { top: 68px; right: 8px; left: 8px; width: auto; }
  .app-toast { grid-template-columns: 22px minmax(0, 1fr) 28px; }
  .auth-page__brand { margin: 16px 18px 0; }
  .auth-page > .container { padding: 20px 12px 48px !important; }
  .auth-page .card-body { padding: 22px 18px !important; }
  .client-page-actions__menu {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    max-height: calc(100dvh - 90px);
    border-radius: 12px;
  }
}

@media (max-width: 389.98px) {
  .app-main { padding-inline: 10px; }
  .app-mobile-header { padding-inline: 10px; }
  .calendar-shell { margin-inline: -10px; }
  .kanban-scroll { margin-right: -10px; padding-right: 10px; }
  .client-list-actions,
  .app-page-header > div:last-child { display: grid !important; grid-template-columns: 1fr; }
  .client-list-actions > *,
  .client-list-actions .btn,
  .app-page-header > div:last-child > * { width: 100%; }
  .app-page-header .d-flex.gap-2 { display: grid !important; grid-template-columns: 1fr; }
  .calendar-toolbar form { grid-template-columns: 1fr; }
  .calendar-toolbar form .btn { grid-column: auto; }
  .modal-footer { grid-template-columns: 1fr; }
}

@media (min-width: 1600px) {
  .app-main { padding-inline: 34px; }
  .app-topbar { margin-inline: -34px; padding-inline: 34px; }
  .dashboard-grid { gap: 16px; }
  .kanban-column { min-width: 300px; max-width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .btn:hover,
  .kanban-card:hover,
  .dashboard-grid__item > .card:hover { transform: none !important; }
}