:root {
        --bg-primary: #0a0a0f;
        --bg-secondary: #12121a;
        --bg-card: #1a1a24;
        --accent-blue: #3b82f6;
        --accent-green: #22c55e;
        --accent-amber: #f59e0b;
        --accent-red: #ef4444;
        --accent-purple: #8b5cf6;
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
        --border-color: #2d2d3a;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Space Grotesk", sans-serif;
        background: var(--bg-primary);
        color: var(--text-primary);
        min-height: 100vh;
        overflow-x: hidden;
      }

      html {
        overflow-x: hidden;
      }

      .bg-gradient {
        background:
          radial-gradient(
            ellipse at 20% 80%,
            rgba(245, 158, 11, 0.1) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse at 80% 20%,
            rgba(59, 130, 246, 0.08) 0%,
            transparent 50%
          );
      }

      .container,
      .container-wide {
        max-width: 100%;
        width: min(1200px, 100%);
        margin: 0 auto;
        padding: 30px 20px;
        box-sizing: border-box;
      }

      header {
        margin-bottom: 40px;
      }
      .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
      }
      .logo {
        font-size: 1.8rem;
        font-weight: 700;
        background: linear-gradient(
          135deg,
          var(--accent-purple),
          var(--accent-blue)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .nav-links {
        display: flex;
        gap: 20px;
      }
      .nav-links a {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s;
      }
      .nav-links a:hover {
        color: var(--accent-blue);
      }

      /* Theme Toggle Button */
      .theme-toggle {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px;
        width: 44px;
        height: 44px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        position: relative;
      }

      .theme-toggle:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }

      .theme-icon {
        width: 20px;
        height: 20px;
        stroke-width: 2;
        color: var(--text-primary);
        position: absolute;
        transition: all 0.3s ease;
      }

      .sun-icon {
        opacity: 0;
        transform: rotate(90deg) scale(0.8);
      }

      .moon-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      /* Light theme overrides */
      [data-theme="light"] {
        --bg-primary: #f8fafc;
        --bg-secondary: #f1f5f9;
        --bg-card: #ffffff;
        --accent-green: #16a34a;
        --accent-red: #dc2626;
        --accent-purple: #7c3aed;
        --text-primary: #0f172a;
        --text-secondary: #64748b;
        --border-color: #e2e8f0;
      }

      [data-theme="light"] .sun-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      [data-theme="light"] .moon-icon {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
      }

      /* Light theme gradient adjustments */
      [data-theme="light"] .bg-gradient {
        background:
          radial-gradient(
            ellipse at 70% 20%,
            rgba(139, 92, 246, 0.06) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 30% 80%,
            rgba(59, 130, 246, 0.05) 0%,
            transparent 50%
          );
        opacity: 0.3;
      }

      /* Light theme component adjustments */
      [data-theme="light"] .data-table tr:hover td {
        background: rgba(59, 130, 246, 0.08);
      }

      [data-theme="light"] .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
      }
      .card-title {
        font-size: 1.2rem;
        font-weight: 600;
      }

      .filters {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }

      input[type="date"],
      select {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px 14px;
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
      }
      input:focus,
      select:focus {
        outline: none;
        border-color: var(--accent-blue);
      }

      .btn {
        background: var(--accent-blue);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 18px;
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
      }
      .btn:hover {
        transform: translateY(-1px);
      }
      .btn-secondary {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
      }
      .stat-card {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 20px;
      }
      .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        font-family: "JetBrains Mono", monospace;
        background: linear-gradient(
          135deg,
          var(--accent-blue),
          var(--accent-purple)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .stat-label {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-top: 4px;
      }

      #logTableContainer {
        overflow-x: auto;
      }

      .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
      }
      .data-table th,
      .data-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
      }
      .data-table th {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .data-table tr:last-child td {
        border-bottom: none;
      }
      .data-table tr:hover td {
        background: rgba(59, 130, 246, 0.05);
      }

      .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
      }
      .status-normal {
        background: rgba(34, 197, 94, 0.2);
        color: var(--accent-green);
      }
      .status-overtime {
        background: rgba(245, 158, 11, 0.2);
        color: var(--accent-amber);
      }
      .status-timeout {
        background: rgba(239, 68, 68, 0.2);
        color: var(--accent-red);
      }
      .status-active {
        background: rgba(59, 130, 246, 0.2);
        color: var(--accent-blue);
      }

      .chart-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
      }

      .mini-chart {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 20px;
      }
      .mini-chart h4 {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 16px;
      }

      .bar-chart {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .bar-item {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .bar-label {
        width: 100px;
        font-size: 0.85rem;
        color: var(--text-secondary);
      }
      .bar-track {
        flex: 1;
        height: 24px;
        background: var(--bg-primary);
        border-radius: 4px;
        overflow: hidden;
      }
      .bar-fill {
        height: 100%;
        background: linear-gradient(
          90deg,
          var(--accent-blue),
          var(--accent-purple)
        );
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding-left: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        transition: width 0.5s ease;
      }

      .empty-state {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary);
      }

      @media (max-width: 768px) {
        .data-table {
          font-size: 0.85rem;
        }
        .data-table th,
        .data-table td {
          padding: 10px 12px;
        }
        .filters {
          width: 100%;
        }
        .filters input,
        .filters select {
          flex: 1;
          min-width: 120px;
        }
      }

      @media print {
        body {
          background: white;
          color: black;
        }
        .bg-gradient,
        .nav-links,
        .btn {
          display: none !important;
        }
        .card {
          border: 1px solid #ccc;
          break-inside: avoid;
        }
      }