@import "tailwindcss";

:root {
  --background: #f3f6fb;
  --foreground: #131a24;
  --muted-foreground: #667287;
  --surface-primary: rgba(255, 255, 255, 0.97);
  --surface-primary-solid: #ffffff;
  --surface-elevated: #ffffff;
  --surface-secondary: #f2f5fa;
  --surface-tertiary: #e8eef7;
  --surface-overlay: rgba(255, 255, 255, 0.88);
  --border-subtle: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.32);
  --accent-primary: #1296ea;
  --accent-primary-strong: #0284c7;
  --accent-soft: rgba(14, 165, 233, 0.14);
  --accent-soft-strong: rgba(14, 165, 233, 0.24);
  --success-soft: rgba(16, 185, 129, 0.15);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --danger-foreground: #dc2626;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --warning-foreground: #b45309;
  --regulation-border: #a9822f;
  --regulation-soft: rgba(169, 130, 47, 0.1);
  --app-shell-gradient: radial-gradient(circle at top, rgba(125, 211, 252, 0.12), transparent 32%), linear-gradient(180deg, #f5f9ff 0%, #eef3fb 46%, #f4f7fb 100%);
  --header-surface: rgba(255, 255, 255, 0.84);
  --shadow-card: 0 12px 30px -22px rgba(15, 23, 42, 0.16), 0 3px 10px -8px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 18px 40px -24px rgba(15, 23, 42, 0.18), 0 8px 16px -12px rgba(15, 23, 42, 0.1);
}

/* Product management switches between cards and tables by the available
   module width, not by the browser width. This keeps the regular desktop
   three-column shell usable without forcing wide mode. */
.commerce-management-section {
  container-type: inline-size;
}

.commerce-management-mobile-list {
  display: block;
}

.commerce-management-table {
  display: none;
}

@container (min-width: 44rem) {
  .commerce-management-mobile-list {
    display: none;
  }

  .commerce-management-table {
    display: block;
  }
}

.commerce-connections {
  container-type: inline-size;
}

.commerce-connection-card {
  padding: 1rem;
}

.commerce-connection-metrics,
.commerce-connection-meta,
.commerce-planned-services {
  display: grid;
  gap: 0.75rem;
}

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

.commerce-connection-meta,
.commerce-planned-services {
  grid-template-columns: minmax(0, 1fr);
}

.commerce-connection-schedule,
.commerce-connection-form-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.commerce-connection-schedule-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.commerce-connection-actions,
.commerce-connection-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.commerce-connection-actions > button,
.commerce-connection-form-actions > button {
  width: 100%;
  justify-content: center;
}

.commerce-connection-auth-grid {
  display: grid;
  gap: 1.25rem;
}

.commerce-planned-service-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@container (min-width: 28rem) {
  .commerce-connection-card {
    padding: 1.25rem;
  }

  .commerce-connection-actions,
  .commerce-connection-form-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .commerce-connection-actions > button,
  .commerce-connection-form-actions > button {
    width: auto;
  }

  .commerce-planned-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-connection-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 44rem) {
  .commerce-connection-card {
    padding: 1.5rem;
  }

  .commerce-connection-metrics-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-connection-metrics-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-connection-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-connection-schedule,
  .commerce-connection-form-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .commerce-connection-schedule-controls {
    flex-flow: row wrap;
    align-items: center;
  }

  .commerce-connection-auth-grid {
    grid-template-columns: minmax(15rem, 0.65fr) minmax(22.5rem, 1.35fr);
    align-items: end;
  }

  .commerce-planned-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-planned-service-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@container (min-width: 64rem) {
  .commerce-connection-metrics-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .commerce-connection-metrics-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html[data-bs-theme="dark"] {
  --background: #0b0f14;
  --foreground: #eef2f7;
  --muted-foreground: #97a3b7;
  --surface-primary: rgba(18, 24, 32, 0.92);
  --surface-primary-solid: #121820;
  --surface-elevated: #10161d;
  --surface-secondary: #1b212a;
  --surface-tertiary: #232c37;
  --surface-overlay: rgba(12, 18, 25, 0.88);
  --border-subtle: rgba(119, 140, 167, 0.18);
  --border-strong: rgba(119, 140, 167, 0.28);
  --accent-primary: #1ea7ff;
  --accent-primary-strong: #0b8ee5;
  --accent-soft: rgba(30, 167, 255, 0.18);
  --accent-soft-strong: rgba(30, 167, 255, 0.28);
  --success-soft: rgba(16, 185, 129, 0.17);
  --danger-soft: rgba(239, 68, 68, 0.16);
  --danger-foreground: #f87171;
  --warning-soft: rgba(245, 158, 11, 0.18);
  --warning-foreground: #fbbf24;
  --regulation-border: #d0ad58;
  --regulation-soft: rgba(208, 173, 88, 0.12);
  --app-shell-gradient: radial-gradient(circle at top, rgba(30, 167, 255, 0.08), transparent 24%), linear-gradient(180deg, #10161d 0%, #111922 38%, #0b1016 100%);
  --header-surface: rgba(14, 20, 28, 0.88);
  --shadow-card: 0 20px 48px -30px rgba(2, 6, 23, 0.72);
  --shadow-elevated: 0 36px 72px -40px rgba(2, 6, 23, 0.82);
}

html, body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}

a,
button,
input,
select,
textarea {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

::selection {
  background: rgba(14, 165, 233, 0.32);
}

.app-shell {
  background: var(--app-shell-gradient);
  color: var(--foreground);
}

.app-header {
  background: var(--header-surface);
  border-color: var(--border-subtle);
  color: var(--foreground);
}

.app-surface {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.app-surface-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevated);
}

.app-surface-muted {
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
}

.app-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.app-input,
.app-select {
  background: var(--surface-secondary);
  border: 1px solid var(--border-strong);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.app-field-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.app-choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  cursor: pointer;
}

.app-checkbox,
.app-radio {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--accent-primary);
  border: 1px solid var(--border-strong);
  background: var(--surface-secondary);
}

.app-checkbox {
  border-radius: 0.25rem;
}

.app-radio {
  border-radius: 9999px;
}

.app-color-input {
  width: 4.5rem;
  height: 2.5rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-secondary);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.app-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.app-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 0.625rem;
}

.app-input::placeholder {
  color: var(--muted-foreground);
}

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(--foreground);
  caret-color: var(--foreground);
  box-shadow:
    inset 0 0 0 1000px var(--surface-secondary),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 99999s ease-in-out 0s;
}

.app-input:hover,
.app-select:hover,
.app-color-input:hover {
  background: var(--surface-tertiary);
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-strong));
}

.app-input:focus,
.app-select:focus {
  background: var(--surface-elevated);
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.app-color-input:focus {
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.app-input[type="date"],
.app-input[type="datetime-local"],
.app-input[type="time"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] .app-input[type="date"],
html[data-bs-theme="dark"] .app-input[type="datetime-local"],
html[data-bs-theme="dark"] .app-input[type="time"] {
  color-scheme: dark;
}

html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
  filter: invert(0.92) saturate(0.2) brightness(1.05);
}

.app-chip {
  background: var(--surface-secondary);
  color: var(--muted-foreground);
}

.app-chip-active {
  background: var(--accent-primary);
  color: #ffffff;
}

.app-icon-button {
  color: var(--muted-foreground);
}

.app-icon-button:hover {
  background: var(--surface-secondary);
  color: var(--foreground);
}

.app-text-muted {
  color: var(--muted-foreground);
}

.app-text-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-card-caption {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.app-divider {
  border-color: var(--border-subtle);
}

.app-menu {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--foreground);
  box-shadow: var(--shadow-elevated);
}

.app-menu,
[role="menu"],
[role="listbox"] {
  max-width: calc(100vw - 1rem);
  max-width: calc(100dvw - 1rem);
}

.app-link-accent {
  color: var(--accent-primary-strong);
}

.app-link-accent:hover {
  color: var(--accent-primary);
}

.app-accent-text {
  color: var(--accent-primary-strong);
}

.app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.app-badge-accent {
  border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--accent-primary-strong);
}

.app-badge-danger {
  border-color: color-mix(in srgb, #ef4444 24%, var(--border-subtle));
  background: var(--danger-soft);
  color: #dc2626;
}

.app-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 1.75rem;
  flex-shrink: 1;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.guest-status-pill {
  min-height: 2rem;
  flex-shrink: 0;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
}

.app-avatar-frame {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.app-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-secondary));
  color: var(--accent-primary-strong);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.app-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--accent-primary);
  color: #ffffff;
}

.app-counter-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #ef4444;
  color: #ffffff;
}

.chat-list-unread-badge {
  min-height: 1.35rem;
  border: 2px solid var(--surface-primary);
  box-shadow: 0 4px 10px color-mix(in srgb, #ef4444 22%, transparent);
  letter-spacing: -0.01em;
}

.chat-unread-divider {
  color: var(--accent-primary-strong);
}

.chat-unread-divider__label {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-primary));
  color: var(--accent-primary-strong);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.app-action-primary {
  border: 1px solid transparent;
  background: var(--accent-primary);
  color: #ffffff;
}

.app-action-primary:hover {
  background: var(--accent-primary-strong);
}

.app-action-success {
  border: 1px solid color-mix(in srgb, #10b981 20%, var(--border-strong));
  background: var(--success-soft);
  color: #059669;
}

.app-action-success:hover {
  background: color-mix(in srgb, #10b981 18%, var(--surface-elevated));
  border-color: color-mix(in srgb, #10b981 30%, var(--border-strong));
}

.app-action-warning {
  border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-strong));
  background: var(--warning-soft);
  color: #d97706;
}

.app-action-warning:hover {
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-elevated));
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border-strong));
}

.app-action-approval {
  border: 1px solid color-mix(in srgb, #f97316 28%, var(--border-strong));
  background: color-mix(in srgb, #f97316 16%, transparent);
  color: #ea580c;
}

.app-action-approval:hover {
  background: color-mix(in srgb, #f97316 22%, transparent);
  border-color: color-mix(in srgb, #f97316 40%, var(--border-strong));
}

.app-action-notify {
  border: 1px solid color-mix(in srgb, #8b5cf6 28%, var(--border-strong));
  background: color-mix(in srgb, #8b5cf6 16%, transparent);
  color: #7c3aed;
}

.app-action-notify:hover {
  background: color-mix(in srgb, #8b5cf6 22%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 40%, var(--border-strong));
}

.app-action-secondary {
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--foreground);
}

.app-action-secondary:hover {
  background: var(--surface-secondary);
}

.app-action-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
}

.app-action-ghost:hover {
  background: var(--surface-secondary);
}

.app-menu-danger-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--danger-foreground);
}

.app-menu-danger-item:hover {
  background: var(--danger-soft);
}

.app-action-danger {
  border: 1px solid color-mix(in srgb, var(--danger-foreground) 18%, var(--border-strong));
  background: var(--surface-elevated);
  color: #dc2626;
}

.app-action-danger:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
}

.app-action-approve {
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-strong));
  background: var(--surface-elevated);
  color: #10b981;
}

.app-action-approve:hover {
  background: var(--success-soft);
  border-color: color-mix(in srgb, #10b981 24%, var(--border-strong));
}

.document-card {
  container-type: inline-size;
}

.payroll-admin-records-responsive {
  container-type: inline-size;
}

.procurement-detail-layout {
  container-type: inline-size;
}

.procurement-detail-layout-grid {
  display: grid;
  grid-auto-flow: dense;
  align-items: start;
  gap: 0.75rem;
}

.procurement-detail-layout-full {
  grid-column: 1 / -1;
}

.procurement-detail-support-grid {
  display: grid;
  align-items: start;
  gap: 0.75rem;
}

.procurement-items-table-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 0.7fr)
    minmax(0, 0.7fr)
    minmax(0, 0.9fr)
    minmax(0, 1fr)
    minmax(0, 1.15fr)
    minmax(0, 0.9fr);
}

.procurement-items-table-row > * {
  min-width: 0;
  border-right: 1px solid var(--border-subtle);
}

.procurement-items-table-row > :last-child {
  border-right: 0;
}

.procurement-item-wide-rowgroup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.procurement-item-wide-main {
  grid-row: 1;
}

.procurement-item-wide-processing {
  grid-row: 1;
}

.procurement-item-wide-details {
  display: grid;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
}

.procurement-item-wide-description {
  grid-row: 2;
}

.procurement-item-wide-comments {
  grid-row: 3;
}

@container (min-width: 44rem) {
  .procurement-detail-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-detail-support-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@container (min-width: 74rem) {
  .procurement-detail-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .procurement-detail-support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .procurement-detail-support-comments {
    grid-column: span 2 / span 2;
  }
}

.payroll-admin-toolbar-responsive {
  container-type: inline-size;
}

.payroll-readiness-responsive {
  container-type: inline-size;
}

.payroll-readiness-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (min-width: 38rem) {
  .payroll-readiness-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container (min-width: 52rem) {
  .payroll-readiness-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  }
}

.payroll-admin-toolbar-layout {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.payroll-admin-toolbar-main,
.payroll-admin-toolbar-actions {
  width: 100%;
}

.payroll-admin-toolbar-search {
  flex: 1 1 0%;
}

@container (min-width: 42rem) {
  .payroll-admin-toolbar-layout {
    flex-direction: row;
  }

  .payroll-admin-toolbar-main {
    width: auto;
    flex: 1 1 0%;
  }

  .payroll-admin-toolbar-actions {
    width: auto;
    flex-shrink: 0;
  }

  .payroll-admin-toolbar-actions > .app-action-primary {
    flex: none;
  }
}

.payroll-admin-records-table {
  display: none;
}

@container (min-width: 58rem) {
  .payroll-admin-records-compact {
    display: none;
  }

  .payroll-admin-records-table {
    display: block;
  }
}

.document-card-detail-action {
  display: none;
}

@container (min-width: 20rem) {
  .document-card-detail-action {
    display: inline-flex;
  }
}

@container (min-width: 32rem) {
  .document-card-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .document-card-acknowledge {
    width: auto;
  }
}

.app-action-reject {
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--danger-foreground);
}

.app-action-reject:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
}

.app-selected {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.app-selected-soft {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-secondary));
  color: var(--foreground);
}

.app-pill {
  border: 1px solid transparent;
  background: var(--surface-secondary);
  color: var(--foreground);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.app-pill:hover {
  background: var(--surface-tertiary);
}

.app-pill-active {
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--foreground);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.app-pill-count {
  background: color-mix(in srgb, var(--foreground) 8%, var(--surface-secondary));
  color: var(--muted-foreground);
}

.app-pill-count-active {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  color: var(--accent-primary-strong);
}

.app-unread-surface {
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-primary));
}

.app-dot-accent {
  background: var(--accent-primary);
}

.app-feedback-danger {
  border: 1px solid color-mix(in srgb, #ef4444 20%, var(--border-subtle));
  background: var(--danger-soft);
  color: #b91c1c;
}

.app-feedback-success {
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-subtle));
  background: var(--success-soft);
  color: #047857;
}

.app-feedback-warning {
  border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-subtle));
  background: var(--warning-soft);
  color: var(--warning-foreground);
}

.app-feedback-approval {
  border: 1px solid color-mix(in srgb, #f97316 24%, var(--border-subtle));
  background: color-mix(in srgb, #f97316 14%, var(--surface-primary));
  color: #c2410c;
}

.app-feedback-notify {
  border: 1px solid color-mix(in srgb, #8b5cf6 24%, var(--border-subtle));
  background: color-mix(in srgb, #8b5cf6 14%, var(--surface-primary));
  color: #7c3aed;
}

.attendance-matrix-cell--technical {
  background: color-mix(in srgb, #ef4444 14%, var(--surface-primary));
  color: #b91c1c;
}

.attendance-matrix-cell--technical:hover {
  background: color-mix(in srgb, #ef4444 20%, var(--surface-primary));
}

.attendance-matrix-cell--issue {
  background: color-mix(in srgb, #f59e0b 20%, var(--surface-primary));
  color: #92400e;
}

.attendance-matrix-cell--issue:hover {
  background: color-mix(in srgb, #f59e0b 28%, var(--surface-primary));
}

.attendance-matrix-cell--overtime {
  background: color-mix(in srgb, #10b981 16%, var(--surface-primary));
  color: #047857;
}

.attendance-matrix-cell--overtime:hover {
  background: color-mix(in srgb, #10b981 22%, var(--surface-primary));
}

.attendance-matrix-cell--non-working {
  background: color-mix(in srgb, #64748b 14%, var(--surface-primary));
  color: #475569;
}

.attendance-matrix-cell--non-working:hover {
  background: color-mix(in srgb, #64748b 20%, var(--surface-primary));
}

.attendance-matrix-cell--normal {
  background: var(--surface-primary);
  color: var(--foreground);
}

.attendance-matrix-cell--normal:hover,
.attendance-matrix-cell--empty:hover {
  background: var(--surface-tertiary);
}

.attendance-matrix-cell--empty {
  background: transparent;
  color: var(--muted-foreground);
}

.attendance-matrix-date--weekend {
  background: color-mix(in srgb, #64748b 10%, var(--surface-secondary));
  color: #64748b;
}

.attendance-matrix-issue-pill {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--border-subtle));
  background: color-mix(in srgb, #f59e0b 16%, var(--surface-primary));
  color: #92400e;
}

.attendance-matrix-manual-pill {
  border: 1px solid color-mix(in srgb, #8b5cf6 26%, var(--border-subtle));
  background: color-mix(in srgb, #8b5cf6 12%, var(--surface-primary));
  color: #6d28d9;
}

html[data-bs-theme="dark"] .attendance-matrix-cell--technical {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #fecaca;
}

html[data-bs-theme="dark"] .attendance-matrix-cell--technical:hover {
  background: color-mix(in srgb, #ef4444 24%, transparent);
}

html[data-bs-theme="dark"] .attendance-matrix-cell--issue {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #fde68a;
}

html[data-bs-theme="dark"] .attendance-matrix-cell--issue:hover {
  background: color-mix(in srgb, #f59e0b 24%, transparent);
}

html[data-bs-theme="dark"] .attendance-matrix-cell--overtime {
  background: color-mix(in srgb, #10b981 17%, transparent);
  color: #a7f3d0;
}

html[data-bs-theme="dark"] .attendance-matrix-cell--overtime:hover {
  background: color-mix(in srgb, #10b981 23%, transparent);
}

html[data-bs-theme="dark"] .attendance-matrix-cell--non-working {
  background: color-mix(in srgb, #64748b 18%, transparent);
  color: #cbd5e1;
}

html[data-bs-theme="dark"] .attendance-matrix-cell--non-working:hover {
  background: color-mix(in srgb, #64748b 24%, transparent);
}

html[data-bs-theme="dark"] .attendance-matrix-date--weekend {
  background: color-mix(in srgb, #64748b 16%, var(--surface-secondary));
  color: #cbd5e1;
}

html[data-bs-theme="dark"] .attendance-matrix-issue-pill {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border-subtle));
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #fde68a;
}

html[data-bs-theme="dark"] .attendance-matrix-manual-pill {
  border-color: color-mix(in srgb, #a78bfa 34%, var(--border-subtle));
  background: color-mix(in srgb, #8b5cf6 16%, transparent);
  color: #ddd6fe;
}

.reaction-picker-surface {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.reaction-picker-modal .EmojiPickerReact,
.reaction-picker-modal aside.EmojiPickerReact {
  --epr-bg-color: var(--surface-secondary);
  --epr-picker-border-color: var(--border-subtle);
  --epr-text-color: var(--muted-foreground);
  --epr-search-input-bg-color: var(--surface-primary);
  --epr-search-input-bg-color-active: var(--surface-primary);
  --epr-search-border-color: var(--border-strong);
  --epr-search-border-color-active: var(--accent-primary);
  --epr-search-input-text-color: var(--foreground);
  --epr-search-input-placeholder-color: var(--muted-foreground);
  --epr-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  --epr-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --epr-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  --epr-highlight-color: var(--accent-primary);
  --epr-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  --epr-category-label-text-color: var(--muted-foreground);
  --epr-category-icon-active-color: var(--accent-primary-strong);
  --epr-emoji-variation-picker-bg-color: var(--surface-secondary);
  --epr-preview-border-color: var(--border-subtle);
  --epr-dark-bg-color: var(--surface-secondary);
  --epr-dark-picker-border-color: var(--border-subtle);
  --epr-dark-text-color: var(--muted-foreground);
  --epr-dark-search-input-bg-color: var(--surface-primary);
  --epr-dark-search-input-bg-color-active: var(--surface-primary);
  --epr-dark-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  --epr-dark-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  --epr-dark-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --epr-dark-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  --epr-dark-highlight-color: var(--accent-primary);
  --epr-dark-category-icon-active-color: var(--accent-primary-strong);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reaction-picker-modal .EmojiPickerReact * {
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif !important;
}

.reaction-picker-modal .epr-search-container input {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--foreground) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.reaction-picker-modal .epr-search-container input::placeholder {
  color: var(--muted-foreground) !important;
}

.reaction-picker-modal .epr-category-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.app-overlay {
  background: rgba(2, 6, 23, 0.56);
  backdrop-filter: blur(12px);
}

html[data-bs-theme="dark"] {
  color-scheme: dark;
}

html[data-bs-theme="light"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] .bg-white {
  background-color: var(--surface-primary) !important;
}

html[data-bs-theme="dark"] .bg-gray-50,
html[data-bs-theme="dark"] .bg-slate-50 {
  background-color: var(--surface-secondary) !important;
}

html[data-bs-theme="dark"] .bg-gray-100,
html[data-bs-theme="dark"] .bg-slate-100 {
  background-color: var(--surface-tertiary) !important;
}

html[data-bs-theme="dark"] .text-gray-900,
html[data-bs-theme="dark"] .text-slate-900,
html[data-bs-theme="dark"] .text-gray-800 {
  color: var(--foreground) !important;
}

html[data-bs-theme="dark"] .text-gray-700,
html[data-bs-theme="dark"] .text-gray-600,
html[data-bs-theme="dark"] .text-gray-500,
html[data-bs-theme="dark"] .text-gray-400,
html[data-bs-theme="dark"] .text-slate-600,
html[data-bs-theme="dark"] .text-slate-500,
html[data-bs-theme="dark"] .text-slate-400 {
  color: var(--muted-foreground) !important;
}

html[data-bs-theme="dark"] .border-gray-100,
html[data-bs-theme="dark"] .border-gray-200,
html[data-bs-theme="dark"] .border-gray-300,
html[data-bs-theme="dark"] .border-slate-100,
html[data-bs-theme="dark"] .border-slate-200 {
  border-color: var(--border-subtle) !important;
}

html[data-bs-theme="dark"] .ring-gray-100,
html[data-bs-theme="dark"] .ring-gray-200,
html[data-bs-theme="dark"] .ring-slate-100,
html[data-bs-theme="dark"] .ring-slate-200 {
  --tw-ring-color: var(--border-subtle) !important;
}

html[data-bs-theme="dark"] .shadow-sm,
html[data-bs-theme="dark"] .shadow-lg,
html[data-bs-theme="dark"] .shadow-xl {
  box-shadow: var(--shadow-card) !important;
}

html[data-bs-theme="dark"] .tasks-board-column-header,
html[data-bs-theme="dark"] .tasks-board-subcolumn-header {
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .tasks-board-column-header-sticky {
  background: var(--surface-elevated);
}

html[data-bs-theme="dark"] .tasks-board-group-header-sticky {
  background: var(--surface-elevated);
}


/* Скрытые полосы прокрутки везде */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.app-tabs-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 45%, var(--surface-tertiary)) transparent;
  -ms-overflow-style: auto;
}

.app-tabs-scroll::-webkit-scrollbar {
  display: block;
  height: 6px;
}

.app-tabs-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.app-tabs-scroll::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent-primary) 42%, var(--surface-tertiary));
}

.app-tabs-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.app-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 48%, var(--surface-tertiary)) var(--surface-secondary);
  -ms-overflow-style: auto;
}

.app-table-scroll::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

.app-table-scroll::-webkit-scrollbar-track {
  background: var(--surface-secondary);
}

.app-table-scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--surface-secondary);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent-primary) 48%, var(--surface-tertiary));
}

.app-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.tasks-board-scroll,
.tasks-column-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 42%, var(--surface-tertiary)) transparent;
  -ms-overflow-style: auto;
}

/* Карточка остаётся в DOM с полной высотой для стабильного скролла, но браузер
   может не выполнять её layout/paint далеко за пределами видимой области. */
.tasks-task-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 10rem;
}

.tasks-board-scroll::-webkit-scrollbar,
.tasks-column-scroll::-webkit-scrollbar {
  display: block;
}

.tasks-board-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tasks-column-scroll::-webkit-scrollbar {
  width: 6px;
}

.tasks-board-scroll::-webkit-scrollbar-track,
.tasks-column-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.tasks-board-scroll::-webkit-scrollbar-thumb,
.tasks-column-scroll::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent-primary) 38%, var(--surface-tertiary));
}

.tasks-board-scroll::-webkit-scrollbar-thumb:hover,
.tasks-column-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* На мобильной доске каждая колонка, подколонка и ячейка дорожки имеет
   собственную область прокрутки. contain не передаёт скролл всей странице,
   когда пользователь дошёл до начала или конца конкретной ленты. */
@media (max-width: 79.999rem) {
  .tasks-task-card,
  .tasks-board-column-header,
  .tasks-board-subcolumn-header {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .tasks-task-card img,
  .tasks-board-column-header img,
  .tasks-board-subcolumn-header img {
    -webkit-user-drag: none;
  }

  .tasks-board-column-header,
  .tasks-board-subcolumn-header {
    box-shadow: none !important;
  }

  .tasks-mobile-lane-viewport {
    height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
    min-height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
    max-height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
  }

  .tasks-mobile-lane-scroll {
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

}

@media (min-width: 80rem) {
  .tasks-board-column-group {
    --tasks-board-stack-gap: 0.5rem;
    --tasks-board-column-header-height: 4rem;
    --tasks-board-subcolumn-header-height: 4rem;
    --tasks-board-group-header-stack-height: calc(
      var(--tasks-board-column-header-height, 4rem)
      + var(--tasks-board-stack-gap, 0.5rem)
      + var(--tasks-board-subcolumn-header-height, 4rem)
      + 1rem
      + 1px
    );
  }

  .tasks-board-column-header-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-bottom: var(--tasks-board-stack-gap, 0.5rem);
    background: var(--background);
  }

  .tasks-board-column-header-sticky-standalone {
    padding-bottom: 0;
  }

  .tasks-board-column-header {
    min-height: var(--tasks-board-column-header-height, 4rem);
    background: var(--surface-elevated);
  }

  .tasks-board-group-header-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--background);
  }

  .tasks-board-subcolumn-header-row {
    min-height: var(--tasks-board-subcolumn-header-height, 4rem);
  }

  .tasks-board-subcolumn-header-surface::after {
    position: absolute;
    right: -1px;
    bottom: -0.75rem;
    left: -1px;
    height: 0.75rem;
    border: 1px solid transparent;
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    pointer-events: none;
    background: transparent;
    content: "";
  }

  .tasks-board-column-group[data-content-bottom-reached="true"] .tasks-board-subcolumn-header-surface::after {
    border-color: var(--border-subtle);
    border-top-color: transparent;
    background: var(--surface-secondary);
  }

  .tasks-board-lane-header {
    position: sticky;
    top: var(--tasks-board-group-header-stack-height, calc(9.5rem + 1px));
    z-index: 15;
    background: var(--surface-secondary);
  }

  .tasks-board-content-section-continuous {
    margin-bottom: -3.9375rem;
  }

  .tasks-board-content-section-continuous::after {
    display: block;
    height: 3.9375rem;
    content: "";
  }

}