/* ============================================
   RailMediaOps — Design System v1.0
   Apple-style minimalism for PKP S.A.
   ============================================ */

/* === TOKENS === */
:root {
  --color-brand: #1E3A5F;
  --color-accent: #2563EB;
  --color-accent-soft: #DBEAFE;
  --color-success: #059669;
  --color-success-soft: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-soft: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-soft: #FEE2E2;
  --color-info: #0891B2;
  --color-info-soft: #CFFAFE;
  --color-purple: #7C3AED;

  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  --media-electricity: #F59E0B;
  --media-heat: #EF4444;
  --media-water: #3B82F6;
  --media-gas: #8B5CF6;

  --surface-base: #FFFFFF;
  --surface-sunken: #F8FAFC;
  --surface-nav: #0F172A;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --sidebar-w: 260px;
  --topbar-h: 60px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); background: var(--surface-sunken); color: var(--gray-700); min-height: 100vh; overflow-x: hidden; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button { cursor: pointer; font-family: inherit; }

/* === LAYOUT === */
#app { display: flex; min-height: 100vh; }

/* === SIDEBAR === */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-nav);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--transition);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar__brand-name { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; display: block; }
.sidebar__brand-client { font-size: 11px; color: var(--gray-400); font-weight: 500; display: block; letter-spacing: 0.5px; text-transform: uppercase; }

.sidebar__nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--gray-400);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.nav-item.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.15);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 3px 3px 0;
}

.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }

.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  color: var(--gray-400);
}
.nav-badge--alert { background: rgba(220, 38, 38, 0.2); color: #FCA5A5; }
.nav-badge--warn { background: rgba(217, 119, 6, 0.2); color: #FCD34D; }
.nav-badge--ai {
  background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(139,92,246,0.3));
  color: #A5B4FC;
}

.sidebar__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar__user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.sidebar__user-name { font-size: 13px; font-weight: 600; display: block; color: #fff; }
.sidebar__user-role { font-size: 11px; color: var(--gray-400); display: block; }
.sidebar__env { display: flex; align-items: center; gap: 8px; }
.env-badge {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: rgba(220, 38, 38, 0.2); color: #FCA5A5;
  letter-spacing: 1px;
}
.env-version { font-size: 11px; color: var(--gray-500); }

/* === MAIN === */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === TOPBAR === */
.topbar {
  height: var(--topbar-h);
  background: var(--surface-base);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__menu { display: none; background: none; border: none; width: 24px; height: 24px; color: var(--gray-600); }
.topbar__breadcrumb { font-size: 14px; color: var(--gray-500); white-space: nowrap; }
.breadcrumb__home { font-weight: 600; color: var(--gray-700); }
.breadcrumb__sep { margin: 0 6px; color: var(--gray-300); }
.breadcrumb__current { color: var(--gray-500); }

.topbar__search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--gray-400);
}
.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--gray-50);
  color: var(--gray-700);
  transition: all var(--transition);
  font-family: var(--font);
}
.search-input:focus { outline: none; border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.search-input::placeholder { color: var(--gray-400); }

.topbar__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__btn {
  position: relative; background: none; border: none;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500); transition: all var(--transition);
}
.topbar__btn:hover { background: var(--gray-100); color: var(--gray-700); }
.topbar__btn svg { width: 20px; height: 20px; }
.topbar__notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-danger); border: 2px solid #fff;
  animation: pulse 2s infinite;
}
.topbar__date { font-size: 13px; color: var(--gray-500); white-space: nowrap; }

/* === CONTENT === */
.content { flex: 1; padding: 24px; }

/* === PAGE HEADER === */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.page-title { font-size: 24px; font-weight: 800; color: var(--gray-800); letter-spacing: -0.3px; }
.page-subtitle { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  border: none; transition: all var(--transition);
  font-family: var(--font);
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: #1D4ED8; }
.btn--outline { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn--outline:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn--ghost { background: none; color: var(--gray-500); padding: 4px 8px; }
.btn--ghost:hover { color: var(--gray-700); }
.btn--success { background: var(--color-success); color: #fff; }
.btn--success:hover { background: #047857; }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: #B91C1C; }
.btn-badge { background: rgba(255,255,255,0.25); padding: 1px 6px; border-radius: var(--radius-full); font-size: 11px; }
.btn svg { flex-shrink: 0; }

/* === SELECT === */
.select {
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--gray-700);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center no-repeat;
  appearance: none;
  font-family: var(--font);
  cursor: pointer;
}
.select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* === KPI GRID === */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }

.kpi-card {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex; gap: 14px; align-items: flex-start;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  border: 1px solid var(--gray-100);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.kpi-card--animate {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 500ms var(--spring) forwards;
  animation-delay: calc(var(--i) * 80ms);
}

.kpi-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon--blue { background: var(--color-accent-soft); color: var(--color-accent); }
.kpi-icon--orange { background: var(--color-warning-soft); color: var(--color-warning); }
.kpi-icon--red { background: var(--color-danger-soft); color: var(--color-danger); }
.kpi-icon--green { background: var(--color-success-soft); color: var(--color-success); }
.kpi-icon--purple { background: #EDE9FE; color: var(--color-purple); }

.kpi-content { flex: 1; min-width: 0; }
.kpi-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 4px; }
.kpi-value { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--gray-800); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-value--warn { color: var(--color-warning); }
.kpi-value--danger { color: var(--color-danger); }
.kpi-value--success { color: var(--color-success); }
.kpi-sub { display: block; font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* === CARDS === */
.card {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gray-100);
  overflow: hidden;
}
.card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.card__title { font-size: 14px; font-weight: 700; color: var(--gray-800); }
.card__subtitle { font-size: 12px; color: var(--gray-400); }
.card__link { font-size: 13px; font-weight: 500; color: var(--color-accent); white-space: nowrap; }
.card__body { padding: 16px 20px; }
.card__body--list { padding: 0; }
.card__body--table { padding: 0; }

.card--ai { border: 1px solid rgba(37,99,235,0.2); }
.card__header--ai { background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(139,92,246,0.05)); }

.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
.card--full { margin-bottom: 16px; }
.card--chart .card__body { padding: 16px 12px; }

/* === CHART STYLES === */
.chart-svg { width: 100%; height: auto; }
.chart-legend { display: flex; gap: 16px; justify-content: center; padding: 8px 0 4px; flex-wrap: wrap; }
.chart-legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
.chart-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.donut-container { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; }
.chart-donut { width: 180px; height: 180px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.donut-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend__label { color: var(--gray-600); min-width: 60px; }
.donut-legend__value { font-weight: 600; color: var(--gray-800); font-variant-numeric: tabular-nums; }

/* Bar Chart */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: grid; grid-template-columns: 200px 1fr 60px;
  align-items: center; gap: 12px; font-size: 13px;
  opacity: 0; animation: fadeSlideIn 400ms ease forwards;
  animation-delay: calc(var(--delay, 0));
}
.bar-label { color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 24px; background: var(--gray-100); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-sm); transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1); }
.bar-value { font-weight: 700; color: var(--gray-700); text-align: right; font-variant-numeric: tabular-nums; }

/* === ALERT ITEMS === */
.alert-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
  cursor: pointer;
}
.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: var(--gray-50); }
.alert-item--compact { padding: 10px 0; border-bottom-color: var(--gray-100); }
.alert-item__icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.alert-item__content { flex: 1; min-width: 0; }
.alert-item__content strong { display: block; font-size: 13px; color: var(--gray-800); }
.alert-item__loc { display: block; font-size: 12px; color: var(--color-accent); margin-top: 2px; }
.alert-item__msg { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.alert-item__time { font-size: 11px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }

/* === MINI TABLE === */
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table thead { background: var(--gray-50); }
.mini-table th { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); text-align: left; }
.mini-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
.mini-table tbody tr { transition: background var(--transition); cursor: pointer; }
.mini-table tbody tr:hover { background: var(--gray-50); }
.mini-table tbody tr:last-child td { border-bottom: none; }
.td-number { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.td-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.td-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === DATA TABLE (full) === */
.table-card { background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--gray-100); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: var(--gray-50); }
.data-table th { padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); text-align: left; border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
.data-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
.data-table tbody tr { transition: background var(--transition); cursor: pointer; }
.data-table tbody tr:hover { background: var(--gray-50); }
.table-row--anomaly { background: rgba(220, 38, 38, 0.03); }
.table-row--anomaly:hover { background: rgba(220, 38, 38, 0.06); }
.table-row--warning { background: rgba(217, 119, 6, 0.03); }

/* === STATUS BADGES === */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.status-badge--verified { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--pending { background: var(--color-accent-soft); color: var(--color-accent); }
.status-badge--anomaly { background: var(--color-danger-soft); color: var(--color-danger); }
.status-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.status-badge--rejected { background: var(--gray-100); color: var(--gray-500); text-decoration: line-through; }
.status-badge--ok { background: var(--color-success-soft); color: var(--color-success); }

/* AI Score */
.ai-score { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); }
.ai-score--good { background: var(--color-success-soft); color: var(--color-success); }
.ai-score--medium { background: var(--color-warning-soft); color: var(--color-warning); }
.ai-score--bad { background: var(--color-danger-soft); color: var(--color-danger); }

/* Media Badge */
.media-badge { font-size: 12px; font-weight: 500; white-space: nowrap; }
.media-badge--electricity { color: var(--media-electricity); }
.media-badge--heat { color: var(--media-heat); }
.media-badge--water { color: var(--media-water); }
.media-badge--gas { color: var(--media-gas); }

/* Status Dots */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot--ok { background: var(--color-success); }
.status-dot--warning { background: var(--color-warning); }
.status-dot--anomaly { background: var(--color-danger); animation: pulse 2s infinite; }
.status-dot--lg { width: 12px; height: 12px; }

/* === SPLIT VIEW (Properties) === */
.split-view { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--gray-100); overflow: hidden; min-height: 600px; }
.split-view__list { border-right: 1px solid var(--gray-200); overflow-y: auto; max-height: 75vh; }
.split-view__detail { overflow-y: auto; max-height: 75vh; padding: 0; }
.split-view__detail--active { padding: 0; }

.property-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
  cursor: pointer;
}
.property-row:hover { background: var(--gray-50); }
.property-row--selected { background: var(--color-accent-soft); }
.property-row--anomaly { border-left: 3px solid var(--color-danger); }
.property-row--warning { border-left: 3px solid var(--color-warning); }
.property-row__info { flex: 1; min-width: 0; }
.property-row__name { display: block; font-size: 14px; font-weight: 600; color: var(--gray-800); }
.property-row__meta { display: block; font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.property-row__alert { display: block; font-size: 11px; color: var(--color-danger); margin-top: 4px; font-weight: 500; }
.property-row__cost { text-align: right; flex-shrink: 0; }
.property-row__amount { display: block; font-size: 14px; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.property-row__period { display: block; font-size: 11px; color: var(--gray-400); }

.detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--gray-300); gap: 12px; font-size: 14px; }

/* Property Detail */
.property-detail { padding: 20px; }
.detail-header { margin-bottom: 20px; }
.detail-header__top { display: flex; align-items: center; gap: 10px; }
.detail-header h2 { font-size: 20px; font-weight: 700; color: var(--gray-800); }
.detail-id { font-size: 12px; color: var(--gray-400); font-family: monospace; }
.detail-address { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag { padding: 3px 10px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 500; }

.anomaly-banner { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.anomaly-banner--critical { background: var(--color-danger-soft); border: 1px solid rgba(220,38,38,0.2); }
.anomaly-banner--critical strong { color: var(--color-danger); font-size: 13px; }
.anomaly-banner--warning { background: var(--color-warning-soft); border: 1px solid rgba(217,119,6,0.2); }
.anomaly-banner--warning strong { color: var(--color-warning); font-size: 13px; }
.anomaly-banner span { font-size: 12px; color: var(--gray-500); }

.detail-section-title { font-size: 13px; font-weight: 700; color: var(--gray-800); margin: 20px 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }

.consumption-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.consumption-card { padding: 12px; border-radius: var(--radius-md); background: var(--gray-50); border-left: 3px solid var(--gray-300); }
.consumption-card__media { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.consumption-card__value { font-size: 18px; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.consumption-card__cost { font-size: 13px; color: var(--gray-600); }
.consumption-card__change { font-size: 12px; font-weight: 600; margin-top: 4px; }
.change--up { color: var(--color-danger); }
.change--down { color: var(--color-success); }
.change--neutral { color: var(--gray-400); }

.detail-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detail-info-grid--2col { grid-template-columns: repeat(2, 1fr); }
.info-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--gray-50); border-radius: var(--radius-sm); }
.info-label { font-size: 11px; color: var(--gray-400); font-weight: 500; }
.info-value { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.info-value--danger { color: var(--color-danger); }

/* === INVOICE DETAIL === */
.invoice-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.divider { border: none; border-top: 1px solid var(--gray-100); margin: 16px 0; }
.invoice-positions h4 { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 10px; }
.position-row { display: flex; justify-content: space-between; padding: 8px 0; }
.position-label { font-weight: 600; font-size: 14px; }
.position-detail { font-size: 13px; color: var(--gray-500); }
.position-alert { background: var(--color-warning-soft); color: var(--color-warning); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; margin-top: 6px; }
.invoice-summary { background: var(--gray-50); border-radius: var(--radius-md); padding: 12px; }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.summary-row--total { border-top: 2px solid var(--gray-200); margin-top: 6px; padding-top: 10px; font-size: 16px; }
.summary-row--total strong { color: var(--gray-800); }

/* AI Analysis */
.ai-analysis { min-height: 60px; position: relative; }
.ai-analysis__text { font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.ai-typing { display: flex; gap: 4px; padding: 8px 0; }
.ai-typing__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  animation: typingDot 1.4s infinite;
}
.ai-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing__dot:nth-child(3) { animation-delay: 0.4s; }
.ai-thinking-text { display: block; font-size: 12px; color: var(--gray-400); margin-top: 4px; }

.ai-checks { margin-top: 20px; border-top: 1px solid var(--gray-100); padding-top: 16px; }
.ai-checks h4 { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 10px; }
.check-item { padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.overcharge-banner { background: var(--color-danger-soft); border: 1px solid rgba(220,38,38,0.2); padding: 10px; border-radius: var(--radius-md); margin-top: 12px; }
.overcharge-banner strong { display: block; color: var(--color-danger); font-size: 14px; }
.overcharge-banner span { font-size: 12px; color: var(--gray-500); }

/* === CONTRACTS === */
.contracts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.contract-card {
  background: var(--surface-base); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border: 1px solid var(--gray-100);
  padding: 20px; transition: transform var(--transition), box-shadow var(--transition);
  opacity: 0; animation: slideUp 400ms var(--spring) forwards;
  animation-delay: calc(var(--i) * 60ms);
}
.contract-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.contract-card--critical { border-left: 4px solid var(--color-danger); }
.contract-card--expiring { border-left: 4px solid var(--color-warning); }
.contract-card--active { border-left: 4px solid var(--color-success); }
.contract-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.contract-card__supplier { font-size: 16px; font-weight: 700; color: var(--gray-800); }
.contract-card__id { font-size: 12px; color: var(--gray-400); font-family: monospace; margin-bottom: 12px; }
.contract-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contract-detail { display: flex; flex-direction: column; gap: 2px; }
.contract-detail span { font-size: 11px; color: var(--gray-400); }
.contract-detail strong { font-size: 13px; color: var(--gray-700); }
.contract-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); }
.contract-status--active { background: var(--color-success-soft); color: var(--color-success); }
.contract-status--expiring { background: var(--color-warning-soft); color: var(--color-warning); }
.contract-status--critical { background: var(--color-danger-soft); color: var(--color-danger); animation: pulse 2s infinite; }
.contract-card__expiry-bar { height: 4px; background: var(--gray-100); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.expiry-fill { height: 100%; background: linear-gradient(90deg, var(--color-warning), var(--color-danger)); border-radius: 2px; }
.contract-card__notes { font-size: 12px; color: var(--gray-500); margin-top: 12px; line-height: 1.5; }
.text-danger { color: var(--color-danger) !important; font-weight: 700; }
.text-warn { color: var(--color-warning) !important; }

/* === AI ASSISTANT === */
.ai-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; height: calc(100vh - 180px); }
.ai-chat {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gray-100);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.ai-chat::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(139,92,246,0.3), rgba(8,145,178,0.3));
  z-index: -1;
  opacity: 0.5;
}
.ai-chat__messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ai-message { display: flex; gap: 10px; }
.ai-message--user { flex-direction: row-reverse; }
.ai-message__avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  background: var(--gray-100);
}
.ai-message--user .ai-message__avatar { background: linear-gradient(135deg, var(--color-accent), var(--color-purple)); color: #fff; font-size: 11px; font-weight: 700; }
.ai-message__content {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px; line-height: 1.6;
}
.ai-message--system .ai-message__content { background: linear-gradient(135deg, #EFF6FF, #F0F9FF); border: 1px solid #BFDBFE; color: var(--gray-700); }
.ai-message--user .ai-message__content { background: var(--color-accent); color: #fff; border-radius: 16px 4px 16px 16px; }
.ai-response { font-size: 14px; line-height: 1.6; }
.ai-response p { margin-bottom: 8px; }
.ai-response ul { margin: 8px 0; padding-left: 20px; }
.ai-response li { margin-bottom: 4px; }
.ai-response strong { color: var(--gray-800); }
.ai-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.ai-table th { background: var(--gray-50); padding: 6px 8px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--gray-200); }
.ai-table td { padding: 6px 8px; border-bottom: 1px solid var(--gray-100); }

.ai-chat__presets { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 12px; }
.preset-btn {
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: 12px; color: var(--gray-600);
  transition: all var(--transition);
  font-family: var(--font);
}
.preset-btn:hover { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }

.ai-chat__input {
  display: flex; gap: 8px; padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.ai-input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); font-size: 14px;
  background: #fff; color: var(--gray-700);
  font-family: var(--font);
}
.ai-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.ai-send-btn { padding: 10px 14px; }

.ai-sidebar { display: flex; flex-direction: column; gap: 16px; }
.ai-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.ai-stat:last-child { border-bottom: none; }
.ai-stat__label { font-size: 13px; color: var(--gray-500); }
.ai-stat__value { font-size: 14px; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.ai-stat__value--warn { color: var(--color-warning); }
.ai-stat__value--success { color: var(--color-success); }
.ai-model-info { display: flex; flex-direction: column; gap: 6px; }
.ai-model-badge { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(139,92,246,0.1)); color: var(--color-accent); font-size: 12px; font-weight: 600; align-self: flex-start; }
.ai-model-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.ai-model-region { font-size: 12px; color: var(--gray-400); }
.ai-model-status { font-size: 12px; color: var(--color-success); font-weight: 500; }

/* === ALERTS VIEW === */
.alerts-list { display: flex; flex-direction: column; gap: 8px; }
.alert-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-base); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100);
  padding: 16px 20px; cursor: pointer;
  transition: all var(--transition);
  opacity: 0; animation: slideUp 400ms ease forwards;
  animation-delay: calc(var(--i) * 50ms);
}
.alert-card:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.alert-card--critical { border-left: 4px solid var(--color-danger); }
.alert-card--warning { border-left: 4px solid var(--color-warning); }
.alert-card--info { border-left: 4px solid var(--color-info); }
.alert-card__icon { font-size: 20px; flex-shrink: 0; }
.alert-card__content { flex: 1; min-width: 0; }
.alert-card__header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.alert-card__header strong { font-size: 14px; color: var(--gray-800); }
.alert-card__type { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.5px; }
.alert-card__type--critical { background: var(--color-danger-soft); color: var(--color-danger); }
.alert-card__type--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.alert-card__type--info { background: var(--color-info-soft); color: var(--color-info); }
.alert-card__location { font-size: 12px; color: var(--color-accent); margin-top: 2px; }
.alert-card__message { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.alert-card__time { font-size: 12px; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }

/* === TOAST === */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  font-size: 13px; color: var(--gray-700);
  transform: translateX(120%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 400px;
}
.toast--visible { transform: translateX(0); }
.toast--critical { border-left: 4px solid var(--color-danger); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--success { border-left: 4px solid var(--color-success); }
.toast--info { border-left: 4px solid var(--color-info); }
.toast__icon { font-size: 16px; flex-shrink: 0; }

/* === ANIMATIONS === */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.fade-in { animation: fadeIn 300ms ease; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === RESPONSIVE === */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .invoice-layout { grid-template-columns: 1fr; }
  .ai-layout { grid-template-columns: 1fr; }
  .ai-sidebar { display: none; }
}

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar--open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .main { margin-left: 0; }
  .topbar__menu { display: block; }
  .split-view { grid-template-columns: 1fr; }
  .split-view__detail { display: none; }
  .split-view__detail--active { display: block; position: fixed; inset: 0; z-index: 200; background: #fff; overflow-y: auto; padding: 20px; }
}

@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 16px; }
  .page-title { font-size: 20px; }
  .contracts-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 120px 1fr 50px; }
  .bar-label { font-size: 11px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .topbar__search { display: none; }
  .topbar__date { display: none; }
}

/* ============================================
   VIEWS-EXTRA STYLES
   ============================================ */

/* === MAP VIEW === */
.map-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.map-sidebar { display: flex; flex-direction: column; gap: 16px; }
.map-container { padding: 16px; display: flex; align-items: center; justify-content: center; }
.poland-map { width: 100%; height: auto; max-height: calc(100vh - 220px); }
.map-pin { cursor: pointer; transition: r 200ms ease, filter 200ms ease; }
.map-pin:hover { filter: drop-shadow(0 0 6px rgba(0,0,0,0.3)); }
.map-pin-label { pointer-events: none; font-family: var(--font); }
.map-filter-label { display: block; font-size: 11px; font-weight: 600; color: var(--gray-500); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); padding: 4px 0; }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* === RANKING VIEW === */
.view-ranking .data-table tbody tr { transition: background var(--transition); cursor: pointer; }
.view-ranking .data-table tbody tr:hover { background: var(--gray-50); }

/* === SUPPLIER RADAR === */
.view-supplier-radar .data-table td { vertical-align: middle; }

/* === CONTRACT TIMELINE === */
.timeline-container { font-family: var(--font); }

@media (max-width: 1024px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-sidebar { flex-direction: row; flex-wrap: wrap; }
  .map-sidebar .card { flex: 1; min-width: 220px; }
}