/* ── EGIS Portal Shared UI/UX Polish ──────────────────────────
 * Press states, card shadows, sidebar backdrop, domain colours,
 * dark mode, reduced motion, responsive improvements.
 * Loaded by all user portals after tokens.css
 * ────────────────────────────────────────────────────────────── */

/* ── Press States ──────────────────────────────────────────── */
button:active,
.btn:active,
a:active,
.sidebar-nav a:active,
.int-brand-btn:active,
.rc-actions button:active,
.int-disconnect:active,
.toggle-switch:active .toggle-slider::before {
  transform: scale(0.97) !important;
}

button,
.btn,
.sidebar-nav a,
.int-brand-btn,
.rc-actions button,
.int-disconnect,
.toggle-switch {
  transition: all var(--duration-fast, 150ms) cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ── Card Elevation ────────────────────────────────────────── */
.stat-card,
.monitor-card,
.site-card,
.report-card,
.int-card,
.order-item,
.load-summary-item {
  transition: box-shadow var(--duration-fast, 200ms) ease, transform var(--duration-fast, 200ms) ease !important;
}

.stat-card:hover,
.monitor-card:hover,
.site-card:hover,
.report-card:hover,
.int-card:hover {
  box-shadow: var(--shadow-md, 0 8px 24px rgba(11,18,32,0.08)) !important;
}

/* ── Sidebar Backdrop Overlay (Mobile) ─────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(11, 18, 32, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop.open {
  display: block;
  opacity: 1;
}

/* ── Domain Colour Accents ─────────────────────────────────── */
[data-portal="portal"] .sidebar-nav a.active { background: var(--brand-600, #0A7B3E); }
[data-portal="supplier"] .sidebar-nav a.active { background: var(--solar, #F59E0B); }
[data-portal="supplier"] .sidebar-brand span { background: var(--solar, #F59E0B); }
[data-portal="investor"] .sidebar-nav a.active { background: var(--gold, #D4A017); }
[data-portal="investor"] .sidebar-brand span { background: var(--gold, #D4A017); }
[data-portal="staff"] .sidebar-nav a.active { background: var(--brand-600, #0A7B3E); }
[data-portal="staff"] .sidebar-brand span { background: var(--brand-600, #0A7B3E); }

/* ── Dark Mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0F1729;
    --surface-alt: #1A2337;
    --ink-900: #F1F5F9;
    --ink-700: #CBD5E1;
    --ink-500: #8896A6;
    --ink-300: #556070;
    --line: #2A3548;
    --line-light: #1F2A3D;
  }

  body { background: #0B1120; }
  .topbar { background: rgba(15, 23, 41, 0.95); }
  .stat-card, .monitor-card, .site-card, .report-card, .int-card,
  .load-table, .confirm-box, .gen-box, .int-connect-box,
  .order-detail-box, #add-site-modal > div {
    background: var(--surface) !important;
  }
  .sidebar { background: #080D1A !important; }
  .load-summary-item { background: var(--surface-alt) !important; }
  .int-card .int-devices { background: var(--surface-alt) !important; }
  .report-metric { background: var(--surface-alt) !important; }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sidebar { transition: none !important; }
  .sidebar-backdrop { transition: none !important; }
}

/* ── Responsive: Sidebar Backdrop ──────────────────────────── */
@media (max-width: 1024px) {
  .sidebar.open ~ .sidebar-backdrop {
    display: block;
    opacity: 1;
  }
}

/* ── Responsive: Table Horizontal Scroll ───────────────────── */
@media (max-width: 768px) {
  .load-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .load-table { min-width: 600px; }
}

/* ── Responsive: Touch Targets ≥ 44px ──────────────────────── */
@media (max-width: 768px) {
  .sidebar-nav a { padding: 14px 12px !important; min-height: 44px; }
  .sidebar-footer a { padding: 14px 12px !important; min-height: 44px; }
  .order-item { padding: 14px 0 !important; min-height: 44px; }
  .report-card .rc-actions button { padding: 10px 16px !important; min-height: 44px; }
}

/* ── Responsive: Content Padding ───────────────────────────── */
@media (max-width: 480px) {
  .content { padding: 16px !important; }
  .stats-grid { gap: 12px !important; }
  .monitor-grid { gap: 12px !important; }
}

/* ── Loading Skeleton Overrides ─────────────────────────────── */
.skeleton-card, .skeleton-bar {
  background: var(--line, #E6EAF0) !important;
  border-radius: var(--radius-md, 12px) !important;
}

/* ── Status Badge Base ─────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
}
.status-badge.online { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.status-badge.offline { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.status-badge.pending { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }

/* ── egis-offline indicator ────────────────────────────────── */
body.egis-offline .sidebar::after {
  content: '⚠ Offline';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--danger, #EF4444);
  color: white;
  z-index: 10;
}