/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --primary-color: #4f46e5;
  --primary-hover: #4338ca;
  --secondary-color: #0f172a;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-color: #334155;
  --text-light: #64748b;
  --accent-color: #3b82f6;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --border-radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page-wrapper {
  flex: 1 0 auto;
}

/* Custom Premium Navbar */
.navbar-premium {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--secondary-color) !important;
  letter-spacing: -0.5px;
}

.nav-link {
  font-weight: 500;
  color: var(--text-light) !important;
  border-radius: 8px;
  padding: 0.5rem 1rem !important;
  transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-color) !important;
  background: rgba(79, 70, 229, 0.08);
}

/* Premium Dashboard Cards */
.card-premium {
  background: var(--card-bg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  overflow: hidden;
}

.card-premium:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: rgba(79, 70, 229, 0.2);
}

/* Custom Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  transition: var(--transition);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  transition: var(--transition);
}

.btn-danger:hover {
  transform: translateY(-1px);
}

/* Tables Styling */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: none;
  padding: 1rem;
}

.table tbody td {
  padding: 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
}

.table-hover tbody tr:hover {
  background-color: rgba(79, 70, 229, 0.02) !important;
}

/* Form Controls */
.form-control, .form-select {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.6rem 1rem;
  transition: var(--transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

/* Footer - shrinks to content, always at bottom */
footer {
  flex-shrink: 0;
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 1.2rem 0;
  width: 100%;
}

/* PWA install button - floating, does not disturb page layout */
.pwa-install-btn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* PWA install is a mobile (Add to Home screen) feature only - hide on desktop */
@media (min-width: 768px) {
  .pwa-install-btn {
    display: none !important;
  }
}

/* PWA install help overlay (shown when the browser has no native prompt) */
.pwa-help-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pwa-help-box {
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: var(--border-radius);
  max-width: 360px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pwa-help-box h4 {
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
}

.pwa-help-box ol {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.pwa-help-box li {
  margin-bottom: 0.35rem;
}

.pwa-help-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════════════════════
   Performance Dashboard (Views/Dashboard/Index.cshtml)
   Mirrors the approved dashboard-demo.html design.
   ═══════════════════════════════════════════════════════════════════════ */
.dash-topbar {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.06);
}
.dash-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success-color); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
.dash-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.dash-role-chip { background: rgba(79, 70, 229, 0.1); color: #4f46e5; font-weight: 600; border-radius: 999px; padding: 0.25rem 0.9rem; font-size: 0.72rem; }
.dash-date-pill { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.45rem 0.9rem; font-size: 0.83rem; }
.dash-btn-refresh { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 0.45rem 0.9rem; font-size: 0.83rem; color: #64748b; }
.dash-btn-refresh:hover { border-color: #4f46e5; color: #4f46e5; }
.dash-auto-sel { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 0.3rem 0.4rem; font-size: 0.75rem; color: #475569; cursor: pointer; }
.dash-auto-sel:hover { border-color: #4f46e5; }
.dash-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-color); display: inline-block; animation: dashpulse 1.6s infinite; }
@keyframes dashpulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

.dash-sec-head { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0 0.8rem; }
.dash-sec-head h5 { font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.2px; }
.dash-sec-head .dash-sec-sub { font-size: 0.76rem; color: #64748b; }

.dash-flash { animation: dashflashbg 1.4s ease; }
@keyframes dashflashbg { 0% { background: #eef2ff; } 100% { background: transparent; } }

.dash-pkpi { background: #fff; border: 1px solid rgba(226, 232, 240, 0.85); border-radius: 14px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; overflow: hidden; }
.dash-pkpi:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.12); border-color: rgba(79, 70, 229, 0.25); }
.dash-pkpi .dash-pk-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem 0; }
.dash-pk-title { font-size: 0.74rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-pk-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.dash-pk-body { padding: 0.5rem 1.1rem 0.8rem; }
.dash-pk-val { font-size: 1.45rem; font-weight: 700; color: #0f172a; letter-spacing: -0.4px; }
.dash-pk-target { font-size: 0.8rem; color: #64748b; }
.dash-pk-cmp { border-top: 1px solid #f1f5f9; padding: 0.6rem 1.1rem 0.8rem; background: #fbfcfe; }
.dash-cmp-cell { font-size: 0.74rem; }
.dash-cmp-cell .dash-lbl { color: #64748b; }
.dash-cmp-cell .dash-big { font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.dash-up { color: #10b981; } .dash-down { color: #ef4444; }

.dash-tkpi { background: #fff; border: 1px solid rgba(226, 232, 240, 0.85); border-radius: 14px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.05); padding: 0.8rem 1rem; height: 100%; display: flex; align-items: center; gap: 0.8rem; }
.dash-tkpi .dash-tk-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.dash-tk-label { font-size: 0.68rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-tk-val { font-size: 1.15rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.dash-tk-sub { font-size: 0.72rem; color: #64748b; }

.dash-panel { background: #fff; border: 1px solid rgba(226, 232, 240, 0.85); border-radius: 14px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.06); height: 100%; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem 0; }
.dash-panel-title { font-weight: 700; font-size: 0.98rem; color: #0f172a; margin: 0; }
.dash-chart-box { height: 300px; position: relative; }
.dash-chart-box-sm { height: 215px; position: relative; }
.dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dash-link-more { font-size: 0.78rem; color: #4f46e5; text-decoration: none; font-weight: 600; }

.dash-tbl { font-size: 0.82rem; }
.dash-tbl thead th { background: #f1f5f9 !important; color: #475569 !important; font-weight: 600; border-bottom: 1px solid #e2e8f0; padding: 0.55rem 0.8rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.dash-tbl tbody td { padding: 0.6rem 0.8rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; }
.dash-tbl tbody tr:hover { background: rgba(79, 70, 229, 0.025); }

.dash-b-soft-success { background: #d1fae5; color: #065f46; }
.dash-b-soft-warning { background: #fef3c7; color: #92400e; }
.dash-b-soft-danger  { background: #fee2e2; color: #991b1b; }
.dash-b-soft-secondary { background: #e2e8f0; color: #475569; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.dash-mini { font-size: 0.68rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.dash-val { font-size: 1.02rem; font-weight: 700; color: #0f172a; }
.dash-so-low { color: #ef4444; font-weight: 600; }
.dash-so-good { color: #10b981; font-weight: 600; }
.dash-prog { height: 6px; border-radius: 999px; background: #e2e8f0; margin-top: 0.4rem; overflow: hidden; }
.dash-prog > div { height: 100%; border-radius: 999px; }
.dash-rank-1 { background: #fef3c7; color: #92400e; font-weight: 700; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.dash-rank-n { background: #eef2ff; color: #4338ca; font-weight: 600; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }

/* SO Ranking "View all" — rows beyond the top 10 stay hidden until expanded */
.so-rank-extra { display: none; }
.so-rank-extra.so-rank-show { display: table-row; }

.dash-btn-icon { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 0.45rem 0.9rem; font-size: 0.83rem; color: #64748b; cursor: pointer; }
.dash-btn-icon:hover { border-color: #4f46e5; color: #4f46e5; }
.dash-btn-icon.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* Full-screen dashboard view: hide site chrome and scale up the whole dashboard */
body.dash-fs .navbar-premium { display: none; }
body.dash-fs .footer { display: none; }
/* Legacy standalone fullscreen zoom. The Slide Show has its own fixed 1.3x
   scale (see body.dash-show #dashMain below), so never stack this on top of
   it during slideshow. */
body.dash-fs:not(.dash-show) .container-fluid { zoom: 1.15; }

/* Slide Show kiosk view: hide chrome, one section per screen, auto-rotate */
body.dash-show .navbar-premium,
body.dash-show .footer,
body.dash-show .dash-topbar { display: none; }
body.dash-show { overflow: hidden; }
/* Slideshow uses its own constant scale (larger fonts) regardless of the
   full-screen toggle, so the dashboard is easy to read from a distance.
   The layout box is sized at 100vw/1.3 (100vh/1.3 for slides) so that after
   the 1.3x zoom the content lands exactly inside the screen. */
body.dash-show .page-wrapper > .container-fluid { padding-left: 0; padding-right: 0; }
body.dash-show #dashMain { padding-top: 1rem; zoom: 1.3; width: calc(100vw / 1.3); }
body.dash-show.dash-fs #dashMain { zoom: 1.3; }
/* Each slide is its own full-height scroll area: tall slides scroll
   vertically, wide content never overflows sideways. */
body.dash-show .dash-slide {
  height: calc(100vh / 1.3);
  overflow-y: auto;
  overflow-x: auto;
  padding-bottom: 4.5rem;
}
body.dash-show .dash-slide-hidden { display: none !important; }
/* Bootstrap .row uses negative gutter margins (-8px each side at g-3), which
   would make the slide slightly wider than the screen; cancel them so the
   slide scroll area matches the container exactly. */
body.dash-show .dash-slide .row { margin-left: 0; margin-right: 0; }
/* Kiosk fit: the big xl content columns (Performance drill-down, SO ranking,
   Shop coverage, Top products) stack full-width inside slideshow so their
   wide nowrap tables fit inside the screen at the 1.3x scale. Small KPI
   cards (col-xl-3) stay side by side. */
body.dash-show [class*="col-xl-4"],
body.dash-show [class*="col-xl-5"],
body.dash-show [class*="col-xl-7"],
body.dash-show [class*="col-xl-8"] {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Keep wide tables inside their panels (scroll within, not the page). */
.dash-table-wrap { overflow-x: auto; }
.dash-show-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1080;
  display: flex; align-items: center; gap: 10px; background: rgba(15, 23, 42, 0.85);
  color: #fff; padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px);
  transition: transform .3s ease, opacity .3s ease;
}
/* Auto-hide state: slide down + fade out, no longer clickable */
.dash-show-bar.hidden {
  transform: translateX(-50%) translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.dash-show-ah { font-size: 0.68rem; font-weight: 700; }
.dash-show-ah.on { color: #818cf8; background: rgba(129, 140, 248, 0.18); border-radius: 8px; }
.dash-show-btn {
  background: transparent; border: 0; color: #fff; font-size: 1.05rem; line-height: 1;
  cursor: pointer; padding: 3px 7px; border-radius: 8px;
}
.dash-show-btn:hover { background: rgba(255, 255, 255, 0.12); }
.dash-show-stop { color: #f87171; font-size: 1.25rem; }
.dash-show-label { font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.dash-show-sel { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; font-size: 0.72rem; padding: 2px 4px; }
.dash-show-sel option { color: #0f172a; }
.dash-show-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width .2s ease; }
.dash-show-dot.active { background: #818cf8; width: 22px; }

.dash-pill-group { display: inline-flex; gap: 4px; background: #f1f5f9; padding: 3px; border-radius: 10px; }
.dash-pill { border: 0; background: transparent; font-size: 0.72rem; font-weight: 700; color: #64748b; padding: 0.32rem 0.8rem; border-radius: 8px; }
.dash-pill.active { background: #fff; color: #4338ca; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.dash-pill:hover { color: #4338ca; }

.dash-table-wrap { max-height: 430px; overflow-y: auto; border: 1px solid #f1f5f9; border-radius: 10px; }
.perf-crumbs { font-size: 0.74rem; }
.perf-crumb { color: #4f46e5; font-weight: 600; text-decoration: none; }
.perf-crumb:hover { text-decoration: underline; }
.perf-back td { padding: 0.35rem 0.8rem !important; cursor: pointer; background: #f8fafc; }
.perf-back-link { color: #4f46e5; font-size: 0.74rem; font-weight: 600; }
.perf-caret { display: inline-block; color: #94a3b8; font-size: 0.6rem; transition: transform 0.15s ease; }