/* TASTE_DESIGN_SYSTEM_V1 */

:root {
  --taste-radius-control: 10px;
  --taste-radius-panel: 14px;
  --taste-line: #dfe3eb;
  --taste-line-soft: #ebedf3;
  --taste-shadow-float: 0 18px 46px rgba(35, 38, 55, .10);
}

html { color-scheme: light; }
body {
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.topbar {
  border-bottom-color: var(--taste-line) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.sidebar { border-right: 1px solid rgba(255,255,255,.055); }
.nav-link, .nav a, .nav button {
  min-height: 40px;
  border-radius: var(--taste-radius-control) !important;
}
.nav-link:not(.active):hover, .nav a:not(.active):hover, .nav button:not(.active):hover {
  background: rgba(255,255,255,.075) !important;
}
.content { width: 100%; }
.page-heading, .hero { margin-bottom: 18px; }
.page-title, .hero h1 { letter-spacing: -.035em; text-wrap: balance; }
.page-description, .hero p { max-width: 72ch; line-height: 1.5; }

.card, .metric-card, .stat, .section, .source-panel, .table-wrap,
.analytics-v2-table-wrap, .rnp-table-wrap, .promotion-table-wrap,
.planning-table-wrap, .abc-table-wrap, .opiu-table-wrap, .spp-table-wrap,
.exports-table-wrap {
  border-color: var(--taste-line) !important;
  border-radius: var(--taste-radius-panel) !important;
}
.card, .metric-card, .stat, .section { box-shadow: none !important; }
.dashboard-kpi-grid .metric-card:nth-child(-n+4) {
  border-color: #d8d3ea !important;
  border-top-color: var(--accent, #6847d9) !important;
  background: var(--surface, #fff) !important;
  box-shadow: none !important;
}
.metric-grid, .grid, .stats { gap: 10px !important; }
.metric-card, .stat, .card { min-width: 0; }
.metric-label, .card h3, .stat span { line-height: 1.35; }
.metric-value, .value, .stat strong, .num, td, th { font-variant-numeric: tabular-nums; }

.button, .btn, button.segment, .filter, .source-button,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-radius: var(--taste-radius-control) !important;
}
.button, .btn, button.segment, .filter, .source-button {
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease, transform 80ms ease-out, box-shadow 140ms ease;
}
.button:hover:not(:disabled), .btn:hover:not(:disabled),
.filter:hover:not(:disabled), .source-button:hover:not(:disabled) { border-color: #b8afcf; }
.button:active:not(:disabled), .btn:active:not(:disabled),
button.segment:active:not(:disabled), .filter:active:not(:disabled),
.source-button:active:not(:disabled) { transform: scale(.98); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--taste-line) !important;
  min-height: 40px;
}
input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: #c7cbd5 !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible, textarea:focus-visible {
  border-color: var(--accent, var(--blue, var(--purple, #6847d9))) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--blue, var(--purple, #6847d9))) 16%, transparent) !important;
  outline: none;
}
::placeholder { color: #777e8e; opacity: 1; }

.table-wrap, .analytics-v2-table-wrap, .rnp-table-wrap,
.promotion-table-wrap, .promotion-matrix-scroll, .planning-table-wrap,
.abc-table-wrap, .opiu-table-wrap, .spp-table-wrap, .exports-table-wrap {
  background: var(--surface, var(--panel, #fff));
  box-shadow: inset -16px 0 16px -22px rgba(35,38,55,.46) !important;
}
table { font-variant-numeric: tabular-nums; }
th { color: #606778 !important; font-weight: 680 !important; letter-spacing: .005em !important; }
tbody tr { transition: background-color 110ms ease; }
tbody tr:hover td { background-color: rgba(104,71,217,.028); }
td { border-bottom-color: var(--taste-line-soft) !important; }
.badge { letter-spacing: 0; }
.notice, .feedback, .inline-error, .form-error { border-radius: var(--taste-radius-control) !important; }
.empty, .empty-state, .chart-empty { color: #686f7f !important; }

.screen-loader { background: #f4f6fa; }
.loader-ring {
  width: 124px !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#e6e8ef 20%,#f8f9fb 50%,#e6e8ef 80%) !important;
  background-size: 220% 100% !important;
  animation: taste-skeleton 1.15s ease-in-out infinite !important;
}
@keyframes taste-skeleton { to { background-position: -220% 0; } }

.login-page {
  background: radial-gradient(circle at 18% 8%, rgba(104,71,217,.10), transparent 34%), #f3f5f8 !important;
}
.login-card {
  border-color: var(--taste-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--taste-shadow-float) !important;
}
.login-intro h1 { text-wrap: balance; }
.login-note { color: #747b89 !important; }
.account-popover, .drawer, .period-popover, .metadata-combobox-popover {
  border-color: var(--taste-line) !important;
  box-shadow: var(--taste-shadow-float) !important;
}

@media (max-width: 900px) {
  .content { padding-left: 18px !important; padding-right: 18px !important; }
  .page-heading, .hero { align-items: flex-start; }
}
@media (max-width: 620px) {
  .content { padding-left: 14px !important; padding-right: 14px !important; }
  .metric-grid, .grid, .stats { grid-template-columns: 1fr !important; }
  .button, .btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .account-popover, .drawer, .period-popover,
  .metadata-combobox-popover { background: #fff !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  :root { --taste-line: #aeb4c0; --taste-line-soft: #cbd0d9; }
  .metric-card, .card, .table-wrap, input, select, textarea { border-color: var(--taste-line) !important; }
}