/* ============================================================
 * MSKY DESIGN SYSTEM & 3-TIER RESPONSIVE ENGINE
 * Inspired by Modern Dark Neon UI (Image 1: #141722, #0ecb81, #ff6584)
 * Breakpoints: Smartphone (<768px), Tablet (768-1024px), PC (>1024px)
 * ============================================================ */

/* Global Theme Variables */
:root {
  color-scheme: dark !important;
  --msky-bg-main: #141722;
  --msky-bg-card: #181b26;
  --msky-bg-card-hover: #1e2230;
  --msky-border-subtle: rgba(255, 255, 255, 0.08);
  --msky-neon-green: #0ecb81;
  --msky-neon-pink: #ff6584;
  --msky-neon-cyan: #38bdf8;
  --msky-neon-purple: #8b5cf6;
  --msky-neon-orange: #f59e0b;
  --msky-text-primary: #ffffff;
  --msky-text-secondary: #94a3b8;
  --msky-text-muted: #64748b;
}

/* Force dark popup menus on Windows, Android & iOS (Anti White-on-White select bug) */
select, select option, select optgroup, .msky-router-select, .msky-router-select option {
  color-scheme: dark !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
}

/* Base Body & Container Adjustments */
html, body {
  background-color: var(--msky-bg-main) !important;
  color: #e2e8f0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Instant Touch Reaction & Zero Tap Delay */
html, body, a, button, input, select, textarea,
.msky-dock-tab, .msky-subnav-chip, .msky-app-card, .btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.msky-dock-tab:active,
.msky-subnav-chip:active,
.msky-app-card:active,
.btn:active,
button:active {
  transform: scale(0.96) !important;
  opacity: 0.88 !important;
  transition: transform 0.05s ease, opacity 0.05s ease !important;
}

/* Common Card Enhancements */
.card {
  background: var(--msky-bg-card) !important;
  border: 1px solid var(--msky-border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  box-sizing: border-box;
}

.card-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--msky-border-subtle) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.card-title, .card-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px;
}

/* ============================================================
 * IMAGE 1 DESIGN COMPONENTS: NEON OUTLINES, HERO METRICS, RADIALS
 * ============================================================ */

/* 1. Neon Outline Cards (Image 1 Screen 1) */
.msky-card-neon-green {
  border: 1.5px solid var(--msky-neon-green) !important;
  background: rgba(14, 203, 129, 0.04) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 4px 20px rgba(14, 203, 129, 0.08) !important;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.msky-card-neon-pink {
  border: 1.5px solid var(--msky-neon-pink) !important;
  background: rgba(255, 101, 132, 0.04) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 4px 20px rgba(255, 101, 132, 0.08) !important;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.msky-card-neon-cyan {
  border: 1.5px solid var(--msky-neon-cyan) !important;
  background: rgba(56, 189, 248, 0.04) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.08) !important;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.msky-card-neon-purple {
  border: 1.5px solid var(--msky-neon-purple) !important;
  background: rgba(139, 92, 246, 0.04) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08) !important;
  box-sizing: border-box;
  margin-bottom: 14px;
}

/* 2. Hero Metric Numbers (Image 1 Screen 1: "730 MOVES") */
.msky-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  text-align: center;
}

.msky-hero-number {
  font-size: 54px;
  font-weight: 300;
  color: var(--msky-neon-pink);
  line-height: 1;
  letter-spacing: -1.5px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.msky-hero-sub {
  font-size: 12px;
  font-weight: 800;
  color: var(--msky-text-secondary);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-top: 6px;
}

/* 3. Split Metric Inside Neon Card (Image 1 Screen 1: 2000 cal / 46 min / Goal: 5000) */
.msky-split-metric {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 101, 132, 0.2);
}

.msky-split-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.msky-split-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--msky-neon-green);
}

.msky-split-unit {
  font-size: 13px;
  color: var(--msky-text-secondary);
  font-weight: 600;
}

.msky-split-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 101, 132, 0.25);
}

.msky-split-goal {
  text-align: center;
  font-size: 12px;
  color: var(--msky-text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 4. Radial Score Meter Gauges (Image 1 Screen 3: 8.1 GREAT / 4.2 WEAK) */
.msky-score-card {
  background: var(--msky-bg-card);
  border: 1px solid var(--msky-border-subtle);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
}

.msky-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.msky-score-row:last-child {
  border-bottom: none;
}

.msky-radial-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.msky-radial-ring {
  width: 58px;
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msky-radial-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.msky-radial-ring circle {
  fill: transparent;
  stroke-width: 4;
}

.msky-radial-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.msky-radial-green {
  stroke: var(--msky-neon-green);
  stroke-dasharray: 157;
  stroke-dashoffset: 35;
  stroke-linecap: round;
}

.msky-radial-pink {
  stroke: var(--msky-neon-pink);
  stroke-dasharray: 157;
  stroke-dashoffset: 85;
  stroke-linecap: round;
}

.msky-radial-score-val {
  position: absolute;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.msky-score-info h4 {
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.msky-score-info span {
  font-size: 11px;
  color: var(--msky-text-muted);
}

.msky-score-status {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.msky-score-badge-great {
  background: var(--msky-neon-green);
  color: #0b0d13;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.msky-score-badge-weak {
  background: var(--msky-neon-pink);
  color: #ffffff;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.msky-score-percent-green {
  font-size: 12px;
  font-weight: 800;
  color: var(--msky-neon-green);
}

.msky-score-percent-pink {
  font-size: 12px;
  font-weight: 800;
  color: var(--msky-neon-pink);
}

/* 5. Monthly Trend Table Matrix (Image 1 Screen 3) */
.msky-monthly-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.msky-monthly-table td {
  padding: 8px 6px;
  font-size: 12px;
  color: var(--msky-text-secondary);
}

.msky-monthly-table td .trend-arrow {
  font-weight: 800;
  margin-left: 4px;
  display: inline-block;
}

.trend-up {
  color: var(--msky-neon-green) !important;
}

.trend-down {
  color: var(--msky-neon-pink) !important;
}

/* 6. Dual Wave Chart Visualization (Image 1 Screen 2) */
.msky-wave-chart-box {
  background: var(--msky-bg-card);
  border: 1px solid var(--msky-border-subtle);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.msky-wave-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.msky-wave-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.msky-wave-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2b303b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--msky-text-secondary);
  font-size: 16px;
}

.msky-wave-user-text h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--msky-neon-green);
}

.msky-wave-user-text span {
  font-size: 11px;
  color: var(--msky-text-muted);
}

.msky-wave-pill {
  background: var(--msky-neon-pink);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* 7. Top Navbar AI Capsule Button */
.msky-top-ai-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(255, 101, 132, 0.15) 0%, rgba(14, 203, 129, 0.15) 100%) !important;
  border: 1px solid rgba(255, 101, 132, 0.4) !important;
  color: #ff6584 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: 30px !important;
  box-sizing: border-box !important;
}

.msky-top-ai-btn:hover {
  background: linear-gradient(135deg, rgba(255, 101, 132, 0.3) 0%, rgba(14, 203, 129, 0.3) 100%) !important;
  border-color: #0ecb81 !important;
  color: #0ecb81 !important;
  transform: translateY(-1px);
}

.ai-pulse-dot {
  width: 7px;
  height: 7px;
  background-color: var(--msky-neon-green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--msky-neon-green);
  display: inline-block;
  animation: mskyPulseDot 2s infinite;
}

@keyframes mskyPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(14, 203, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 203, 129, 0); }
}

/* ============================================================
 * MODERN RESPONSIVE HEADER (.navbar.msky-navbar) & STATUS CAPSULES
 * ============================================================ */
.navbar.msky-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  background: rgba(18, 22, 31, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.msky-navbar .navbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
}

.msky-navbar .navbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
}

/* Brand Badge with Pulse Dot */
.msky-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  min-width: 0 !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  transition: opacity 0.2s ease !important;
  line-height: 1 !important;
}

.msky-brand:hover {
  opacity: 0.9 !important;
}

.msky-brand-text {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.msky-brand-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--msky-neon-green) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px var(--msky-neon-green) !important;
  display: inline-block !important;
  animation: mskyPulseDot 2s infinite !important;
}

/* Header Icon Button (Hamburger, Fullscreen, Logout) */
.msky-nav-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.msky-nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Page Chip / Context Pill */
.msky-page-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Live Digital Clock Capsule */
.msky-clock-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(14, 203, 129, 0.08) !important;
  border: 1px solid rgba(14, 203, 129, 0.25) !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.msky-clock-icon {
  color: #0ecb81 !important;
  font-size: 12px !important;
}

#msky-clock-time {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0ecb81 !important;
  letter-spacing: 0.8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace !important;
}

.msky-clock-date {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  padding-left: 5px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Router Switcher Capsule */
.msky-router-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  height: 34px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  max-width: 240px !important;
  min-width: 120px !important;
}

.msky-router-capsule:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #0ecb81 !important;
}

.msky-capsule-server-icon {
  color: #0ecb81 !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.msky-capsule-arrow {
  color: #94a3b8 !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.msky-router-select {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 190px !important;
  min-width: 80px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark !important;
}

.msky-router-select option {
  background: #111827 !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* Top AI Capsule in Header */
.msky-top-ai-capsule {
  position: relative !important;
  color: #ff6584 !important;
  background: rgba(255, 101, 132, 0.1) !important;
  border-color: rgba(255, 101, 132, 0.3) !important;
}

.msky-top-ai-capsule:hover {
  background: rgba(255, 101, 132, 0.2) !important;
  color: #ff6584 !important;
  border-color: #ff6584 !important;
}

/* Idle Timeout Capsule */
.msky-idle-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  background: rgba(240, 185, 11, 0.08) !important;
  border: 1px solid rgba(240, 185, 11, 0.2) !important;
  border-radius: 14px !important;
  color: #f0b90b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ============================================================
 * DYNAMIC SUB-NAVIGATION HUB (Scrollable Chips Bar)
 * ============================================================ */
.msky-subnav-hub-container {
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  box-sizing: border-box !important;
}

.msky-subnav-hub-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 2px 2px 4px 2px !important;
  box-sizing: border-box !important;
}

.msky-subnav-hub-scroll::-webkit-scrollbar {
  display: none !important;
}

.msky-subnav-hub-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #0ecb81 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.msky-subnav-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  background: rgba(24, 27, 38, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.msky-subnav-chip:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.msky-subnav-chip.active {
  background: linear-gradient(135deg, rgba(255, 101, 132, 0.2) 0%, rgba(225, 29, 72, 0.25) 100%) !important;
  border-color: #ff6584 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(255, 101, 132, 0.3) !important;
}

.msky-subnav-chip.active i {
  color: #ff6584 !important;
}

/* ============================================================
 * RESPONSIVE TOOLBAR CHIPS & DATE FILTER (Fixing Image 2)
 * ============================================================ */

.msky-toolbar-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}

.msky-search-chip-wrap {
  position: relative;
  flex: 1;
  min-width: 140px;
  max-width: 220px;
}

.msky-search-chip-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--msky-text-muted);
  font-size: 12px;
}

.msky-search-input {
  width: 100% !important;
  background: #14161f !important;
  border: 1px solid var(--msky-border-subtle) !important;
  color: #ffffff !important;
  padding: 6px 10px 6px 30px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  height: 34px !important;
  outline: none;
  box-sizing: border-box !important;
}

.msky-search-input:focus {
  border-color: var(--msky-neon-cyan) !important;
}

.msky-chip-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--msky-border-subtle) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.msky-chip-btn.chip-default {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}
.msky-chip-btn.chip-default:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.msky-chip-btn.chip-info {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: var(--msky-neon-cyan) !important;
}
.msky-chip-btn.chip-info:hover {
  background: rgba(56, 189, 248, 0.2) !important;
}

.msky-chip-btn.chip-cyan {
  background: rgba(14, 203, 129, 0.1) !important;
  border-color: rgba(14, 203, 129, 0.3) !important;
  color: var(--msky-neon-green) !important;
}
.msky-chip-btn.chip-cyan:hover {
  background: rgba(14, 203, 129, 0.2) !important;
}

.msky-chip-btn.chip-purple {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: var(--msky-neon-purple) !important;
}
.msky-chip-btn.chip-purple:hover {
  background: rgba(139, 92, 246, 0.2) !important;
}

.msky-chip-btn.chip-danger {
  background: rgba(255, 101, 132, 0.12) !important;
  border-color: rgba(255, 101, 132, 0.35) !important;
  color: var(--msky-neon-pink) !important;
}
.msky-chip-btn.chip-danger:hover {
  background: rgba(255, 101, 132, 0.25) !important;
}

/* Date Filter Grid (Replacing Giant Stacked Blocks) */
.msky-date-filter-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr 1fr auto !important;
  gap: 10px !important;
  align-items: flex-end !important;
  margin-bottom: 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--msky-border-subtle) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.filter-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.filter-label {
  font-size: 11px !important;
  color: var(--msky-text-secondary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}

.msky-select-dark {
  background: #14161f !important;
  border: 1px solid var(--msky-border-subtle) !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  height: 36px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.msky-select-dark:focus {
  border-color: var(--msky-neon-cyan) !important;
}

.msky-btn-filter {
  background: linear-gradient(135deg, #0ecb81 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 15px rgba(14, 203, 129, 0.3) !important;
  transition: all 0.2s ease !important;
}

.msky-btn-filter:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(14, 203, 129, 0.45) !important;
}

/* ============================================================
 * TICKETWIFIMARKET VIBRANT APP GRID (Image 4 & Uploaded Image)
 * ============================================================ */

.msky-mobile-section-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 6px 0 8px 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.msky-mobile-section-title.hotspot-sec {
  color: #38bdf8 !important;
}
.msky-mobile-section-title.pppoe-sec {
  color: #f43f5e !important;
}

/* App Grid (2-column on mobile, 3 on tablet, 4 on desktop) */
.msky-app-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Individual App Card (Exact Form from Uploaded Image & TicketWiFiMarket) */
.msky-app-card {
  border-radius: 22px !important;
  padding: 18px 16px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 135px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
.msky-app-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55) !important;
}
.msky-app-card:active {
  transform: scale(0.97) !important;
}

.msky-app-card-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.msky-app-card-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
}

.msky-app-card-sub {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.msky-app-card-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 14px !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Vibrant TicketWiFiMarket Gradients */
.card-grad-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}
.card-grad-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}
.card-grad-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
}
.card-grad-teal {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
}
.card-grad-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
.card-grad-indigo {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
}
.card-grad-full-cyan {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  grid-column: span 2 !important;
  min-height: 88px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}
.card-grad-full-cyan .msky-app-card-icon {
  margin-bottom: 0 !important;
}

/* Diagnostic Card (Image 3) */
.msky-diag-card {
  background: #141722 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  padding: 20px 16px !important;
  margin-top: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}
.msky-diag-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.msky-diag-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: #94a3b8 !important;
}
.msky-diag-header-text h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
.msky-diag-header-text p {
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* Radar Circle (Image 3) */
.msky-diag-radar-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 20px 0 !important;
}
.msky-diag-radar {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  border: 6px dashed #2e3446 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  animation: rotateSlow 20s linear infinite !important;
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.msky-diag-radar-shield {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  color: #94a3b8 !important;
}

/* 4 Metrics Grid inside Diagnostic Card (Image 3) */
.msky-diag-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}
.msky-diag-pill {
  background: #1e2230 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.msky-diag-pill i {
  font-size: 16px !important;
}
.msky-diag-pill .pill-text {
  display: flex !important;
  flex-direction: column !important;
}
.msky-diag-pill .pill-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  letter-spacing: 0.5px !important;
}
.msky-diag-pill .pill-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Big Button: LANCER LE DIAGNOSTIC (Image 3) */
.btn-diag-start {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ============================================================
 * TIER 1: SMARTPHONES (< 768px)
 * ============================================================ */
@media (max-width: 767px) {
  .msky-mobile-only {
    display: block !important;
  }
  .msky-desktop-only, .msky-tablet-only {
    display: none !important;
  }

  /* Content area clearing top navbar & bottom dock - TIGHT SPACING */
  #main {
    margin-left: 0 !important;
    margin-top: 56px !important;
    padding: 8px 10px 130px 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    float: none !important;
    overflow-x: hidden !important;
  }

  .msky-dock-spacer {
    display: block !important;
    height: 80px !important;
    width: 100% !important;
    clear: both !important;
  }

  .main-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Compact spacing for cards and rows on mobile */
  .card, .box {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .card-header {
    padding: 10px 14px !important;
  }

  .card-body {
    padding: 10px 12px !important;
  }

  .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Grid Reset: 100% full width cards */
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-box-1, .col-box-2, .col-box-3, .col-box-4,
  .col-box-5, .col-box-6, .col-box-7, .col-box-8,
  .col-box-9, .col-box-10, .col-box-11, .col-box-12,
  .col-m-12, [class*="col-"]:not(.filter-col):not(.filter-action-col):not(.msky-app-card) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* App Grid MUST ALWAYS be 2 columns on smartphones */
  .msky-app-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
  }
  .msky-app-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 20px !important;
    min-height: 125px !important;
    padding: 16px 14px !important;
  }
  .card-grad-full-cyan {
    grid-column: span 2 !important;
    flex-direction: row !important;
    min-height: 80px !important;
  }

  /* Mobile Header Adjustments */
  .navbar.msky-navbar, #navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
    height: 52px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  .msky-navbar .navbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .msky-navbar .navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .msky-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px !important;
  }
  .msky-brand-text {
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  #brand {
    display: inline-flex !important;
  }
  #cpage, .msky-page-chip {
    display: none !important;
  }
  .msky-clock-capsule {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 6px !important;
    border-radius: 12px !important;
  }
  #msky-clock-time {
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
  }
  .msky-clock-date {
    display: none !important;
  }
  .msky-router-capsule {
    max-width: 155px !important;
    min-width: 95px !important;
    padding: 0 8px !important;
    height: 32px !important;
  }
  .msky-router-select {
    max-width: 115px !important;
    min-width: 70px !important;
    font-size: 11.5px !important;
    color-scheme: dark !important;
  }
  /* Prevent floating bottom dock bar from obscuring content/tables on mobile */
  body, #main, .card-body, .msky-active-card-body, .table-responsive, .box-bordered {
    padding-bottom: 95px !important;
  }
  .msky-nav-icon-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 12.5px !important;
  }
  /* On small mobile (<768px), hide non-critical header items so header NEVER overflows */
  #msky-fs-btn, .msky-idle-capsule, .msky-nav-logout, #closeNav {
    display: none !important;
  }
  .msky-drawer-close {
    display: inline-flex !important;
  }
  .msky-top-ai-capsule {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Date Filter Grid on Small Phones: 3 columns + full-width action button */
  .msky-date-filter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .filter-action-col {
    grid-column: span 3 !important;
    margin-top: 4px;
  }
  .msky-btn-filter {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Table horizontal swipe - STRICTLY for data tables (lists/logs/reports) */
  .table-responsive, .overflow.box-bordered {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
  }
  .table-responsive > .table,
  .overflow > .table,
  .table.table-data {
    min-width: 580px !important;
  }
  /* Forms, settings and standard card tables MUST NEVER overflow horizontally */
  .table:not(.table-data):not(.table-responsive *):not(.overflow *),
  form[name="settings"] .table,
  .card-body > .table-sm {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* ============================================================
   * MOBILE FORM RESPONSIVENESS (Settings, Modals, Inputs)
   * ============================================================ */
  form[name="settings"],
  .msky-form-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  form[name="settings"] .table,
  form[name="settings"] .table tbody,
  form[name="settings"] .table tr,
  form[name="settings"] .table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  form[name="settings"] .table tr {
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 8px !important;
  }

  form[name="settings"] .table tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  form[name="settings"] .table td {
    padding: 3px 0 !important;
    border: none !important;
  }

  form[name="settings"] .table td.align-middle {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
  }

  form[name="settings"] .form-control {
    width: 100% !important;
    height: 42px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  form[name="settings"] .form-control:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    outline: none !important;
  }

  /* Password field with show/hide toggle */
  form[name="settings"] .input-group {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
    position: relative !important;
  }

  form[name="settings"] .input-group-11 {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  form[name="settings"] .input-group-1 {
    flex: 0 0 44px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  form[name="settings"] .input-group-10 {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  form[name="settings"] .input-group-2,
  form[name="settings"] .input-group-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 60px !important;
    width: 60px !important;
  }

  form[name="settings"] select.form-control,
  form[name="settings"] select.group-item {
    width: 100% !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 0 10px !important;
  }

  /* Premium activation input & button */
  input[name="license_key"] {
    width: 100% !important;
    height: 44px !important;
    font-size: 13px !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-sizing: border-box !important;
  }

  button[name="activate_license"] {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Responsive action buttons grid */
  #btnAutoProvision,
  .msky-btn-provision,
  .btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .msky-settings-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .msky-settings-actions .btn-action {
    height: 42px !important;
    width: 100% !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .msky-btn-save {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
  }

  .msky-btn-connect {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
  }

  .msky-btn-test {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #ffffff !important;
  }

  .msky-btn-reload {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  /* Floating 4-Tab Bottom Dock (Dashboard, Hotspot, Statistiques, System) - CLEAN, UNOBSTRUCTED */
  .msky-bottom-dock {
    position: fixed !important;
    bottom: 10px !important;
    left: 12px !important;
    right: 12px !important;
    height: 62px !important;
    background: rgba(18, 22, 31, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 100001 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(14, 203, 129, 0.05) !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }

  .msky-dock-tab {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: #64748b !important;
    height: 52px !important;
    border-radius: 18px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .msky-dock-tab-icon {
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    transition: all 0.25s ease !important;
  }

  .msky-dock-tab-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
  }

  .msky-dock-tab:hover {
    color: #cbd5e1 !important;
  }

  .msky-dock-tab.active {
    color: #ff6584 !important;
  }

  .msky-dock-tab.active .msky-dock-tab-icon {
    transform: translateY(-2px) scale(1.1) !important;
    color: #ff6584 !important;
    text-shadow: 0 0 12px rgba(255, 101, 132, 0.6) !important;
  }

  .msky-dock-tab.active .msky-dock-tab-label {
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .msky-dock-tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 3px !important;
    background: linear-gradient(90deg, #ff6584 0%, #0ecb81 100%) !important;
    box-shadow: 0 0 8px #ff6584 !important;
  }

  /* NEVER SHOW DUPLICATE CLOSE BTN IN NAVBAR */
  #navbar #closeNav,
  #navbar .msky-drawer-close {
    display: none !important;
  }

  /* Clean up top navbar on narrow mobile screens (<768px) */
  #msky-fs-btn,
  .msky-idle-capsule,
  .msky-nav-logout {
    display: none !important;
  }

  /* ABSOLUTELY HIDE ANY FLOATING ASSISTANT BUTTON ON MOBILE TO PREVENT MASKING TABS */
  .msky-chatbot-btn,
  .msky-mobile-chatbot-btn {
    display: none !important;
  }
}

/* ============================================================
 * TIER 2: TABLETTES (768px - 1024px)
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .msky-mobile-only {
    display: none !important;
  }
  .msky-bottom-dock {
    display: none !important;
  }

  #main {
    margin-left: 0 !important;
    padding: 62px 20px 40px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2-Column Responsive Grid on Tablet */
  .col-12 { width: 100% !important; }
  .col-6 { width: 50% !important; float: left !important; }
  .col-7 { width: 58.333% !important; float: left !important; }
  .col-5 { width: 41.666% !important; float: left !important; }
  .col-4 { width: 33.333% !important; float: left !important; }
  .col-8 { width: 66.666% !important; float: left !important; }
  .col-3 { width: 50% !important; float: left !important; } /* 2 per row on tablet */

  .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -8px !important;
  }
  [class*="col-"] {
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  /* Chatbot sits at bottom right on tablet (no dock present) */
  .msky-chatbot-btn {
    bottom: 25px !important;
    right: 25px !important;
  }

  .msky-app-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .card-grad-full-cyan {
    grid-column: span 3 !important;
  }
}

/* ============================================================
 * TIER 3: PC & DESKTOP (> 1024px)
 * ============================================================ */
@media (min-width: 1025px) {
  .msky-mobile-only {
    display: none !important;
  }
  .msky-bottom-dock {
    display: none !important;
  }

  #main {
    margin-left: 210px !important;
    padding: 64px 28px 40px 28px !important;
    box-sizing: border-box !important;
  }

  .sidenav {
    width: 210px !important;
    display: block !important;
  }

  .msky-app-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }
  .card-grad-full-cyan {
    grid-column: span 4 !important;
  }

  /* Floating Chatbot comfortably visible on PC */
  .msky-chatbot-btn {
    display: flex !important;
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    z-index: 999999 !important;
  }
}

/* ============================================================
 * FULLSCREEN SIMULATOR & FALLBACK ENGINE
 * ============================================================ */
body.msky-fallback-fullscreen {
  overflow: hidden !important;
}
body.msky-fallback-fullscreen #wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #111 !important;
  overflow: auto !important;
}
body.msky-fallback-fullscreen #main {
  margin-left: 0 !important;
  margin-top: 50px !important;
}
body.msky-fallback-fullscreen #sidenav {
  display: none !important;
}
body.msky-fallback-fullscreen #navbar {
  width: 100vw !important;
  left: 0 !important;
  z-index: 100000 !important;
}

/* ============================================================
 * RESPONSIVE DRAWER & BACKDROP LAYER ARCHITECTURE
 * Ensures drawer is NEVER dimmed, blackened, or blocked by backdrop
 * ============================================================ */
.msky-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.72) !important;
  z-index: 100002 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

@media (max-width: 1024px) {
  #sidenav, .sidenav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 100003 !important; /* CRITICAL: Must be higher than backdrop (100002) and navbar (100000) */
    background: #141722 !important;
    box-shadow: 4px 0 35px rgba(0, 0, 0, 0.85) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .msky-drawer-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  .msky-drawer-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .msky-drawer-close:hover {
    background: rgba(255, 101, 132, 0.25) !important;
    color: #ff6584 !important;
  }

  #openNav {
    display: inline-flex !important;
  }
}

/* ============================================================
 * HOTSPOT ACTIVE RESPONSIVE & MOBILE REFINEMENT
 * ============================================================ */
.msky-active-row,
.msky-reload-active-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.msky-active-col {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.msky-active-card {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.msky-active-card-body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  padding: 12px 12px 110px 12px !important; /* Clears floating bottom navigation dock cleanly */
}

.msky-table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.msky-table-responsive > table,
.msky-data-table {
  min-width: 780px !important;
  margin-bottom: 0 !important;
}

.msky-table-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .msky-active-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 10px !important;
  }

  .msky-active-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .msky-active-quick-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .msky-active-tabs-wrap {
    width: 100% !important;
  }

  .msky-active-tabs {
    display: flex !important;
    width: 100% !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .msky-active-tabs .btn {
    flex: 1 1 0 !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .msky-data-table th,
  .msky-data-table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
 * TICKET LISTING & VOUCHER EDITOR STYLES
 * ============================================================ */
.msky-edit-ticket-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.msky-edit-ticket-btn:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateX(2px) !important;
}

.msky-edit-ticket-btn .badge {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4) !important;
  transition: background 0.2s ease !important;
}

.msky-edit-ticket-btn:hover .badge {
  background: #0ea5e9 !important;
}

#clearFilterBtn:hover {
  color: #f43f5e !important;
}