// Immersive Dark Tech layer. Tokens live in variables.module.scss; this file
// is responsible for depth, glow, motion and component interaction states.
html.dark {
  background: #0a0e17;

  body,
  #app,
  .app-wrapper,
  .main-container,
  .app-main {
    background-color: #0a0e17;
  }

  .app-wrapper,
  .app-main {
    background-image:
      linear-gradient(rgba(6, 182, 212, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 182, 212, 0.035) 1px, transparent 1px),
      radial-gradient(circle at 78% 12%, rgba(168, 85, 247, 0.07), transparent 34%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
  }

  .app-main {
    isolation: isolate;
  }

  .app-main::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 1px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), rgba(168, 85, 247, 0.34), transparent);
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
    animation: cyber-scan 9s linear infinite;
  }

  .sidebar-container {
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    background: rgba(10, 14, 23, 0.86) !important;
    border-right: 1px solid rgba(6, 182, 212, 0.24);
    box-shadow: 10px 0 34px rgba(0, 0, 0, 0.34), 1px 0 18px rgba(6, 182, 212, 0.08) !important;
  }

  .sidebar-logo-container {
    background: rgba(10, 14, 23, 0.9) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  }

  .sidebar-logo-container .sidebar-logo {
    filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.42));
  }

  .sidebar-logo-container .sidebar-title {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 14px rgba(6, 182, 212, 0.22);
  }

  .sidebar-container .el-menu,
  .sidebar-container .el-scrollbar,
  .sidebar-container .scrollbar-wrapper {
    background: transparent !important;
  }

  .sidebar-container .el-menu-item,
  .sidebar-container .el-sub-menu__title {
    min-height: 48px;
    margin: 3px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .sidebar-container .el-menu-item:hover,
  .sidebar-container .el-sub-menu__title:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.18);
  }

  .sidebar-container .el-menu-item.is-active {
    color: #a5f3fc !important;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.18), rgba(168, 85, 247, 0.08)) !important;
    border-color: rgba(34, 211, 238, 0.38);
    box-shadow: inset 3px 0 0 #22d3ee, 0 0 18px rgba(6, 182, 212, 0.1);
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.32);
  }

  .navbar {
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    background: rgba(10, 14, 23, 0.72) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 1px 14px rgba(6, 182, 212, 0.08) !important;
  }

  .navbar .right-menu-item:hover,
  .navbar .hamburger-container:hover {
    color: #67e8f9;
    background: rgba(6, 182, 212, 0.1) !important;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
  }

  .tags-view-container {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(10, 14, 23, 0.68) !important;
    border-bottom-color: rgba(168, 85, 247, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  }

  .tags-view-container .tags-view-item {
    background: rgba(20, 27, 45, 0.72) !important;
    border-color: rgba(100, 116, 139, 0.24) !important;
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .tags-view-container .tags-view-item:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(6, 182, 212, 0.42) !important;
  }

  .tags-view-container .tags-view-item.active {
    color: #e6fbff !important;
    background: linear-gradient(105deg, rgba(6, 182, 212, 0.88), rgba(93, 92, 226, 0.82)) !important;
    border-color: rgba(103, 232, 249, 0.72) !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .app-container,
  .el-card,
  .el-dialog,
  .el-drawer,
  .el-popover,
  .dashboard-panel,
  .metric-card,
  .row-cards .card,
  .main-workspace .workspace-container > .left,
  .main-workspace .workspace-container > .right,
  .task-log,
  .page-container > .left,
  .page-container > .right {
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    background-color: rgba(20, 27, 45, 0.78) !important;
    background-image:
      linear-gradient(145deg, rgba(6, 182, 212, 0.035), rgba(168, 85, 247, 0.025)),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 5px) !important;
    border-color: rgba(6, 182, 212, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 16px 36px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(6, 182, 212, 0.06) !important;
  }

  .metric-card,
  .dashboard-panel,
  .el-card,
  .app-container {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .metric-card:hover,
  .dashboard-panel:hover,
  .el-card:hover {
    border-color: rgba(34, 211, 238, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 42px rgba(0, 0, 0, 0.26), 0 0 24px rgba(6, 182, 212, 0.1) !important;
  }

  .el-button--primary {
    --el-button-text-color: #f5fdff;
    --el-button-border-color: rgba(103, 232, 249, 0.64);
    --el-button-hover-border-color: rgba(216, 180, 254, 0.76);
    background: linear-gradient(110deg, #0891b2, #4f46c8) !important;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .el-button--primary:hover,
  .el-button--primary:focus {
    background: linear-gradient(110deg, #06b6d4, #7c3aed) !important;
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.28), 0 0 16px rgba(168, 85, 247, 0.12);
  }

  .el-table::before,
  .el-table__inner-wrapper::before {
    background-color: rgba(6, 182, 212, 0.18) !important;
  }

  .el-table th.el-table__cell {
    color: rgba(255, 255, 255, 0.78) !important;
    background: rgba(20, 27, 45, 0.94) !important;
    border-bottom-color: rgba(6, 182, 212, 0.22) !important;
  }

  .el-table td.el-table__cell {
    border-bottom-color: rgba(100, 116, 139, 0.16) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(6, 182, 212, 0.075) !important;
    background-image: linear-gradient(90deg, rgba(6, 182, 212, 0.02), rgba(168, 85, 247, 0.08), rgba(6, 182, 212, 0.025)) !important;
    box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.09), inset 0 -1px 0 rgba(168, 85, 247, 0.07);
  }

  .el-tabs__active-bar {
    background: linear-gradient(90deg, #06b6d4, #a855f7);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.48);
  }

  .el-dialog,
  .el-drawer,
  .el-popover,
  .el-dropdown-menu {
    border-color: rgba(6, 182, 212, 0.28) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48), 0 0 28px rgba(6, 182, 212, 0.1), 0 0 34px rgba(168, 85, 247, 0.06) !important;
  }

  .el-overlay {
    background-color: rgba(3, 6, 14, 0.68);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .state-dot,
  .task-status-dot,
  .status-dot,
  .el-badge__content.is-dot {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08), 0 0 14px currentColor;
    animation: cyber-pulse 2.4s ease-in-out infinite;
  }

  .control-point {
    border-color: rgba(230, 251, 255, 0.9) !important;
    background: rgba(6, 182, 212, 0.88) !important;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1), 0 0 18px rgba(6, 182, 212, 0.62) !important;
    animation: cyber-marker-pulse 2.2s ease-in-out infinite;
  }

  .control-point.active {
    background: rgba(168, 85, 247, 0.92) !important;
    box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.12), 0 0 22px rgba(168, 85, 247, 0.66) !important;
  }

  .home-dashboard .hero-panel {
    border: 1px solid rgba(6, 182, 212, 0.28);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34), 0 0 30px rgba(6, 182, 212, 0.08);
  }

  .home-dashboard .hero-panel::before {
    background: linear-gradient(105deg, rgba(5, 9, 20, 0.94), rgba(10, 14, 23, 0.8) 55%, rgba(35, 18, 61, 0.68)) !important;
  }

  .home-dashboard .section-kicker {
    color: #67e8f9;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.42);
  }

  .home-dashboard .metric-icon--blue { color: #22d3ee !important; background: rgba(6, 182, 212, 0.12) !important; }
  .home-dashboard .metric-icon--green { color: #34d399 !important; background: rgba(16, 185, 129, 0.12) !important; }
  .home-dashboard .metric-icon--orange { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.1) !important; }
  .home-dashboard .metric-icon--red { color: #fb7185 !important; background: rgba(251, 113, 133, 0.1) !important; }

  [data-echarts-instance] canvas,
  div[_echarts_instance_] canvas {
    filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.16));
  }

  ::-webkit-scrollbar-track { background: rgba(10, 14, 23, 0.72); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.72), rgba(168, 85, 247, 0.58));
    border: 2px solid rgba(10, 14, 23, 0.82);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.24);
  }

  .login,
  .register {
    position: relative;
    isolation: isolate;
    padding: 24px;
    background-color: #0a0e17 !important;
    background-image:
      linear-gradient(105deg, rgba(3, 6, 14, 0.88), rgba(10, 14, 23, 0.76) 54%, rgba(40, 20, 68, 0.7)),
      repeating-linear-gradient(180deg, rgba(103, 232, 249, 0.018) 0, rgba(103, 232, 249, 0.018) 1px, transparent 1px, transparent 5px),
      url("../images/login-background.jpg") !important;
    background-position: center;
    background-size: cover, auto, cover;
  }

  .login::before,
  .register::before {
    display: none !important;
  }

  .login .login-form,
  .register .register-form {
    width: min(400px, 100%);
    padding: 30px 34px 16px;
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.06), rgba(168, 85, 247, 0.045)), rgba(10, 14, 23, 0.84) !important;
    border: 1px solid rgba(6, 182, 212, 0.38);
    border-radius: 8px !important;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52), 0 0 32px rgba(6, 182, 212, 0.12), 0 0 42px rgba(168, 85, 247, 0.08);
  }

  .login .title,
  .register .title {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 0 18px rgba(6, 182, 212, 0.22);
  }

  .login .el-login-footer,
  .register .el-register-footer {
    color: rgba(203, 213, 225, 0.62) !important;
    letter-spacing: 0 !important;
  }
}

@keyframes cyber-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 0.44; }
  82% { opacity: 0.26; }
  100% { transform: translateY(calc(100vh - 104px)); opacity: 0; }
}

@keyframes cyber-pulse {
  0%, 100% { opacity: 0.78; filter: brightness(0.95); }
  50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes cyber-marker-pulse {
  0%, 100% { opacity: 0.82; filter: brightness(0.94); }
  50% { opacity: 1; filter: brightness(1.28); }
}

@media (max-width: 520px) {
  html.dark .login,
  html.dark .register { padding: 20px; }
  html.dark .login .login-form,
  html.dark .register .register-form { padding: 28px 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html.dark .app-main::before,
  html.dark .state-dot,
  html.dark .task-status-dot,
  html.dark .status-dot,
  html.dark .el-badge__content.is-dot,
  html.dark .control-point { animation: none; }
}