/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  * {
    box-sizing: border-box;
  }
  body {
    @apply bg-[#f4f6fb] text-slate-900 antialiased;
    font-family:
      "Inter",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold;
  }
  input[type=date]::-webkit-calendar-picker-indicator {
    @apply opacity-40 cursor-pointer hover:opacity-70 transition-opacity;
  }
}
@layer components {
  .card {
    @apply bg-white rounded-2xl border border-slate-200/60 shadow-sm p-6;
  }
  .card-sm {
    @apply bg-white rounded-2xl border border-slate-200/60 shadow-sm p-4;
  }
  .card-hover {
    @apply card transition-all duration-200 hover:shadow-md hover:border-slate-300/60 hover:-translate-y-px;
  }
  .card-flat {
    @apply bg-white rounded-2xl border border-slate-100 p-5;
  }
  .stat-card {
    @apply bg-white rounded-2xl border border-slate-200/60 p-5 shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-px;
  }
  .stat-card-blue {
    @apply stat-card border-t-[3px] border-t-blue-500;
  }
  .stat-card-green {
    @apply stat-card border-t-[3px] border-t-emerald-500;
  }
  .stat-card-red {
    @apply stat-card border-t-[3px] border-t-red-500;
  }
  .stat-card-orange {
    @apply stat-card border-t-[3px] border-t-orange-500;
  }
  .stat-card-purple {
    @apply stat-card border-t-[3px] border-t-purple-500;
  }
  .btn-base {
    @apply inline-flex items-center gap-2 font-semibold px-4 py-2.5 rounded-xl text-sm transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-1 select-none;
  }
  .btn-primary {
    @apply btn-base bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm shadow-blue-600/20 focus:ring-blue-500 active:scale-[0.98];
  }
  .btn-secondary {
    @apply btn-base bg-white hover:bg-slate-50 active:bg-slate-100 text-slate-700 border border-slate-200 hover:border-slate-300 shadow-sm focus:ring-slate-400 active:scale-[0.98];
  }
  .btn-danger {
    @apply btn-base bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm shadow-red-600/20 focus:ring-red-500 active:scale-[0.98];
  }
  .btn-success {
    @apply btn-base bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white shadow-sm shadow-emerald-600/20 focus:ring-emerald-500 active:scale-[0.98];
  }
  .btn-ghost {
    @apply btn-base text-slate-600 hover:bg-slate-100 hover:text-slate-800 focus:ring-slate-400 active:scale-[0.98];
  }
  .btn-icon {
    @apply inline-flex items-center justify-center w-9 h-9 rounded-xl text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-slate-300 active:scale-95;
  }
  .btn-icon-sm {
    @apply inline-flex items-center justify-center w-7 h-7 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-all duration-150 focus:outline-none active:scale-95;
  }
  .btn-icon-danger {
    @apply btn-icon-sm hover:bg-red-50 hover:text-red-600;
  }
  .input {
    @apply block w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 hover:border-slate-300 transition-all duration-150;
  }
  .select {
    @apply block w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 hover:border-slate-300 transition-all duration-150 appearance-none cursor-pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.6rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    padding-right: 2.5rem;
  }
  .label {
    @apply block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider;
  }
  .input-search {
    @apply input pl-9;
  }
  .filter-bar {
    @apply bg-white rounded-2xl border border-slate-200/60 shadow-sm px-5 py-4;
  }
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold leading-none;
  }
  .badge-success {
    @apply badge bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200/60;
  }
  .badge-danger {
    @apply badge bg-red-50 text-red-700 ring-1 ring-red-200/60;
  }
  .badge-warning {
    @apply badge bg-amber-50 text-amber-700 ring-1 ring-amber-200/60;
  }
  .badge-info {
    @apply badge bg-blue-50 text-blue-700 ring-1 ring-blue-200/60;
  }
  .badge-gray {
    @apply badge bg-slate-100 text-slate-600 ring-1 ring-slate-200/60;
  }
  .badge-purple {
    @apply badge bg-purple-50 text-purple-700 ring-1 ring-purple-200/60;
  }
  .badge-orange {
    @apply badge bg-orange-50 text-orange-700 ring-1 ring-orange-200/60;
  }
  .badge-teal {
    @apply badge bg-teal-50 text-teal-700 ring-1 ring-teal-200/60;
  }
  .pill {
    @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold;
  }
  .pill-success {
    @apply pill bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200/50;
  }
  .pill-danger {
    @apply pill bg-red-50 text-red-700 ring-1 ring-red-200/50;
  }
  .pill-warning {
    @apply pill bg-amber-50 text-amber-700 ring-1 ring-amber-200/50;
  }
  .pill-info {
    @apply pill bg-blue-50 text-blue-700 ring-1 ring-blue-200/50;
  }
  .pill-gray {
    @apply pill bg-slate-100 text-slate-600 ring-1 ring-slate-200/50;
  }
  .table-wrapper {
    @apply overflow-x-auto rounded-xl border border-slate-100;
  }
  .table-base {
    @apply w-full text-sm;
  }
  .table-header {
    @apply text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap;
  }
  .table-row {
    @apply hover:bg-blue-50/30 transition-colors duration-100 cursor-default;
  }
  .table-row-danger {
    @apply bg-red-50/50 hover:bg-red-50/70;
  }
  .table-row-warning {
    @apply bg-amber-50/40 hover:bg-amber-50/60;
  }
  .td {
    @apply px-4 py-3.5;
  }
  .th {
    @apply px-4 py-3.5 text-left bg-slate-50 border-b border-slate-100;
  }
  .page-title {
    @apply text-2xl font-bold text-slate-900 tracking-tight;
  }
  .page-subtitle {
    @apply text-sm text-slate-500 mt-0.5;
  }
  .divider {
    @apply border-t border-slate-100;
  }
  .divider-dashed {
    @apply border-t border-dashed border-slate-200;
  }
  .icon-box {
    @apply w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0;
  }
  .icon-box-sm {
    @apply w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0;
  }
  .icon-box-blue {
    @apply icon-box bg-blue-50;
  }
  .icon-box-green {
    @apply icon-box bg-emerald-50;
  }
  .icon-box-red {
    @apply icon-box bg-red-50;
  }
  .icon-box-orange {
    @apply icon-box bg-orange-50;
  }
  .icon-box-purple {
    @apply icon-box bg-purple-50;
  }
  .icon-box-slate {
    @apply icon-box bg-slate-100;
  }
  .icon-box-amber {
    @apply icon-box bg-amber-50;
  }
  .icon-box-teal {
    @apply icon-box bg-teal-50;
  }
  .icon-box-indigo {
    @apply icon-box bg-indigo-50;
  }
  .section-header {
    @apply flex items-center justify-between px-5 py-4 border-b border-slate-100/80;
  }
  .section-title {
    @apply flex items-center gap-2.5;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-white/10 rounded-full;
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  @apply bg-slate-50;
}
::-webkit-scrollbar-thumb {
  @apply bg-slate-200 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-300;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-fast {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pulse-red {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.animate-fade-in {
  animation: fade-in 0.28s ease-out both;
}
.animate-fade-in-fast {
  animation: fade-in-fast 0.18s ease-out both;
}
.animate-slide-in {
  animation: slide-in 0.22s ease-out both;
}
.animate-slide-up {
  animation: slide-up 0.25s ease-out both;
}
.animate-scale-in {
  animation: scale-in 0.2s ease-out both;
}
.animate-pulse-red {
  animation: pulse-red 2s ease-in-out infinite;
}
.stagger > *:nth-child(1) {
  animation: fade-in 0.28s ease-out both 0ms;
}
.stagger > *:nth-child(2) {
  animation: fade-in 0.28s ease-out both 50ms;
}
.stagger > *:nth-child(3) {
  animation: fade-in 0.28s ease-out both 100ms;
}
.stagger > *:nth-child(4) {
  animation: fade-in 0.28s ease-out both 150ms;
}
.stagger > *:nth-child(5) {
  animation: fade-in 0.28s ease-out both 200ms;
}
.stagger > *:nth-child(6) {
  animation: fade-in 0.28s ease-out both 250ms;
}
.spinner {
  @apply inline-block w-5 h-5 border-2 border-blue-200 border-t-blue-600 rounded-full animate-spin;
}
.spinner-sm {
  @apply inline-block w-4 h-4 border-2 border-blue-100 border-t-blue-500 rounded-full animate-spin;
}
.bg-gradient-mesh {
  background:
    linear-gradient(
      135deg,
      #f4f6fb 0%,
      #eef2ff 50%,
      #f4f6fb 100%);
}
.bg-gradient-card {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fafc 100%);
}
.font-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.font-mono-num {
  font-feature-settings: "tnum", "kern";
  font-variant-numeric: tabular-nums;
}
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}
.custom-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}
.progress-bar {
  @apply w-full h-2 bg-slate-100 rounded-full overflow-hidden;
}
.progress-fill {
  @apply h-full rounded-full transition-all duration-700 ease-out;
}
.progress-bar-sm {
  @apply w-full h-1.5 bg-slate-100 rounded-full overflow-hidden;
}
.progress-bar-xs {
  @apply w-full h-1 bg-slate-100 rounded-full overflow-hidden;
}
.tooltip {
  @apply bg-slate-900 text-white text-[11px] px-2 py-1 rounded-lg shadow-xl whitespace-nowrap pointer-events-none;
}
.list-row {
  @apply flex items-center gap-3 px-4 py-3 hover:bg-slate-50/80 transition-colors duration-100;
}
.list-row-bordered {
  @apply list-row border-b border-slate-50 last:border-0;
}
.urgency-row {
  @apply flex items-center gap-3 px-4 py-3 rounded-xl border-l-[3px] transition-colors duration-100;
}
.urgency-overdue {
  @apply urgency-row border-l-red-500 bg-red-50/60;
}
.urgency-today {
  @apply urgency-row border-l-orange-500 bg-orange-50/60;
}
.urgency-tomorrow {
  @apply urgency-row border-l-amber-400 bg-amber-50/40;
}
.urgency-week {
  @apply urgency-row border-l-yellow-400 bg-yellow-50/30;
}
.urgency-normal {
  @apply urgency-row border-l-slate-200 bg-white;
}
.section-label {
  @apply text-[10px] font-bold text-slate-400 uppercase tracking-widest;
}
.metric-value-xl {
  @apply text-3xl font-bold text-slate-900 font-tabular leading-none;
}
.metric-value-lg {
  @apply text-2xl font-bold text-slate-900 font-tabular leading-tight;
}
.metric-value-md {
  @apply text-xl font-bold text-slate-900 font-tabular;
}
.metric-value-sm {
  @apply text-sm font-bold text-slate-800 font-tabular;
}
.metric-label {
  @apply text-[11px] font-semibold text-slate-400 uppercase tracking-wide;
}
.metric-sub {
  @apply text-xs text-slate-400 mt-0.5;
}
.alert-strip {
  @apply w-full flex items-center gap-3 px-5 py-3.5 text-left transition-colors duration-150 text-white;
}
.alert-strip-red {
  @apply alert-strip bg-red-600 hover:bg-red-700;
}
.alert-strip-amber {
  @apply alert-strip bg-amber-500 hover:bg-amber-600;
}
.alert-strip-warning {
  @apply alert-strip bg-amber-500 hover:bg-amber-600;
}
.action-btn-base {
  @apply inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-lg border transition-all duration-150 hover:scale-105 active:scale-95 select-none;
}
.action-btn-green {
  @apply action-btn-base border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100;
}
.action-btn-blue {
  @apply action-btn-base border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100;
}
.action-btn-amber {
  @apply action-btn-base border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100;
}
.action-btn-violet {
  @apply action-btn-base border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100;
}
.action-btn-pink {
  @apply action-btn-base border-pink-200 bg-pink-50 text-pink-700 hover:bg-pink-100;
}
.action-btn-slate {
  @apply action-btn-base border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100;
}
.action-btn-red {
  @apply action-btn-base border-red-200 bg-red-50 text-red-700 hover:bg-red-100;
}
.tab-bar {
  @apply flex gap-1 p-1 bg-slate-100 rounded-xl;
}
.tab-item {
  @apply flex-1 px-3 py-2 rounded-lg text-xs font-semibold transition-all duration-150 text-center cursor-pointer;
}
.tab-item-active {
  @apply bg-white text-slate-800 shadow-sm;
}
.tab-item-passive {
  @apply text-slate-500 hover:text-slate-700 hover:bg-white/60;
}
.tab-item-danger-active {
  @apply bg-red-600 text-white shadow-sm;
}
.tab-item-danger-passive {
  @apply text-red-600 hover:bg-red-50;
}
.risk-safe {
  @apply bg-emerald-500;
}
.risk-warning {
  @apply bg-amber-400;
}
.risk-critical {
  @apply bg-red-500;
}
.empty-state {
  @apply flex flex-col items-center justify-center py-14 text-slate-400;
}
.card-accent-blue {
  @apply border-t-[3px] border-t-blue-500;
}
.card-accent-green {
  @apply border-t-[3px] border-t-emerald-500;
}
.card-accent-red {
  @apply border-t-[3px] border-t-red-500;
}
.card-accent-orange {
  @apply border-t-[3px] border-t-orange-500;
}
.card-accent-purple {
  @apply border-t-[3px] border-t-purple-500;
}
.card-accent-teal {
  @apply border-t-[3px] border-t-teal-500;
}
.action-bar {
  @apply flex items-center gap-2 flex-wrap;
}
.sort-th {
  @apply th cursor-pointer select-none;
}
.sort-th:hover .sort-indicator {
  @apply text-slate-500;
}
.data-metric {
  @apply bg-slate-50 rounded-xl p-3;
}
.data-metric-label {
  @apply text-[10px] font-semibold text-slate-400 uppercase tracking-wide mb-1;
}
.data-metric-value {
  @apply text-[13px] font-bold text-slate-800 font-tabular;
}
.status-dot-green {
  @apply w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0;
}
.status-dot-red {
  @apply w-2 h-2 rounded-full bg-red-500 flex-shrink-0;
}
.status-dot-amber {
  @apply w-2 h-2 rounded-full bg-amber-400 flex-shrink-0;
}
.status-dot-gray {
  @apply w-2 h-2 rounded-full bg-slate-300 flex-shrink-0;
}
.skeleton {
  background:
    linear-gradient(
      90deg,
      #f1f5f9 25%,
      #e2e8f0 50%,
      #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.amount-positive {
  @apply text-emerald-600 font-bold font-tabular;
}
.amount-negative {
  @apply text-red-600 font-bold font-tabular;
}
.amount-neutral {
  @apply text-slate-700 font-bold font-tabular;
}
.branch-dot {
  @apply w-2 h-2 rounded-full flex-shrink-0;
}
.branch-dot-lg {
  @apply w-3 h-3 rounded-full flex-shrink-0;
}
@media (max-width: 640px) {
  .td,
  .th {
    @apply px-3 py-2.5;
  }
}
.report-table .td {
  @apply px-4 py-3;
}
.report-table .th {
  @apply px-4 py-3;
}
.zebra-row-even {
  background-color: rgba(248, 250, 252, 0.5);
}
.panel-header {
  @apply flex items-center justify-between px-5 py-3.5 border-b border-slate-100 bg-white;
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.kpi-value-sm {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.chart-wrapper {
  @apply px-5 pb-5 pt-4;
}
.chart-legend {
  @apply flex items-center justify-center gap-6 mt-3 pt-3 border-t border-slate-50;
}
.chart-legend-item {
  @apply flex items-center gap-2 text-[11px] text-slate-500 font-medium select-none;
}
.th-sort {
  @apply th cursor-pointer select-none transition-colors hover:bg-slate-100;
}
.cat-row {
  @apply flex items-center gap-3 px-5 py-3 border-b border-slate-50 last:border-0;
}
.yoy-positive {
  @apply text-emerald-600 text-[11px] font-bold;
}
.yoy-negative {
  @apply text-red-600 text-[11px] font-bold;
}
.leaderboard-card {
  @apply bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden;
}
.leaderboard-header {
  @apply px-5 py-3.5 border-b border-slate-100 bg-slate-50/40;
}
.leaderboard-row {
  @apply flex items-center gap-3 px-5 py-3 border-b border-slate-50 last:border-0 hover:bg-slate-50/60 transition-colors duration-100;
}
.table-totals-row {
  @apply bg-slate-900 text-white;
}
.table-totals-row .td {
  @apply py-3.5;
}
.preset-active {
  @apply bg-blue-600 text-white shadow-sm shadow-blue-600/25;
}
.preset-passive {
  @apply bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-700;
}
.report-page-icon {
  @apply w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center shadow-sm shadow-blue-600/30 flex-shrink-0;
}
.card-lift {
  @apply transition-all duration-200 hover:shadow-md hover:-translate-y-px;
}
.filter-chip {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-blue-50 text-blue-700 ring-1 ring-blue-200/60;
}
.net-positive {
  @apply text-emerald-600 font-bold font-tabular;
}
.net-negative {
  @apply text-red-600 font-bold font-tabular;
}
.net-neutral {
  @apply text-slate-500 font-bold font-tabular;
}
.section-rule {
  @apply border-t border-slate-100 my-1;
}