From 0503b342cfc5cb32b30402772c4af5ab7ae3e908 Mon Sep 17 00:00:00 2001
From: VinnyNC <vinny@vlyons.net>
Date: Sun, 28 Sep 2025 22:20:05 -0400
Subject: [PATCH] Complete 1.1 CSS modularization - removed monolithic
 styles.css, using modular CSS system (reset.css, variables.css, layout.css,
 components.css, utilities.css)

---
 styles.css | 736 -----------------------------------------------------
 1 file changed, 736 deletions(-)
 delete mode 100644 styles.css

diff --git a/styles.css b/styles.css
deleted file mode 100644
index e960251..0000000
--- a/styles.css
+++ /dev/null
@@ -1,736 +0,0 @@
-* {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --dodgers-blue: #005A9C;
-            --dodgers-dark: #003d6b;
-            --dodgers-light: #1e7ec8;
-            --dodgers-red: #EF3E42;
-            --bg-dark: #0f1419;
-            --bg-darker: #0a0d14;
-            --bg-darkest: #050810;
-            --admin-gold: #FFD700;
-            --text-primary: #ffffff;
-            --text-secondary: #b8c5d6;
-            --text-muted: #8590a0;
-            --border-color: #1a2332;
-            --input-bg: #1a2332;
-            --card-bg: #15202b;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: var(--bg-darkest);
-            color: var(--text-primary);
-            height: 100vh;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .theater-container {
-            display: flex;
-            height: 100vh;
-            position: relative;
-            transition: all 0.3s ease;
-        }
-
-        .video-section {
-            flex: 1;
-            background: #000;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            transition: all 0.3s ease;
-        }
-
-        .video-section.expanded {
-            flex: 1;
-            width: 100%;
-        }
-
-        .video-header {
-            background: linear-gradient(135deg, var(--dodgers-dark) 0%, var(--dodgers-blue) 100%);
-            padding: 12px 20px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
-            z-index: 10;
-        }
-
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-        }
-
-        .logo {
-            font-size: 20px;
-            font-weight: bold;
-            color: white;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .logo::before {
-            content: "⚾";
-            font-size: 24px;
-        }
-
-        .stream-stats {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .viewer-count {
-            background: rgba(255,255,255,0.2);
-            padding: 6px 14px;
-            border-radius: 20px;
-            color: white;
-            font-size: 14px;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            backdrop-filter: blur(10px);
-        }
-
-        .viewer-count::before {
-            content: "👥";
-        }
-
-        .stream-badge {
-            background: var(--dodgers-red);
-            color: white;
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: bold;
-            text-transform: uppercase;
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
-        }
-
-.header-controls {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-/* Ensure all header control buttons have identical dimensions */
-.header-controls > * {
-    height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    vertical-align: top;
-    line-height: 1;
-}
-
-        .quality-selector {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            backdrop-filter: blur(10px);
-            /* Standardize select appearance to match buttons */
-            outline: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            min-height: auto;
-        }
-
-        .toggle-chat-btn {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 600;
-            transition: all 0.3s;
-            backdrop-filter: blur(10px);
-            position: relative;
-        }
-
-		.toggle-chat-btn:hover {
-			background: rgba(255,255,255,0.3);
-			transform: translateY(-1px);
-		}
-
-		.manual-refresh-btn {
-			background: rgba(255,255,255,0.2);
-			border: none;
-			color: white;
-		 padding: 8px 16px;
-			border-radius: 20px;
-			cursor: pointer;
-			font-size: 14px;
-			font-weight: 600;
-			transition: all 0.3s;
-			backdrop-filter: blur(10px);
-			position: relative;
-		}
-
-		.manual-refresh-btn:hover {
-			background: rgba(255,255,255,0.3);
-			transform: translateY(-1px);
-		}
-
-        .video-wrapper {
-            flex: 1;
-            position: relative;
-            background: #000;
-            overflow: hidden;
-        }
-
-        #video-player {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-        }
-
-        .video-js {
-            width: 100% !important;
-            height: 100% !important;
-            max-width: 100% !important;
-            max-height: 100% !important;
-        }
-
-        /* Override VideoJS fluid behavior to prevent overflow */
-        .video-js.vjs-fluid {
-            width: 100% !important;
-            height: 100% !important;
-            max-width: 100% !important;
-            max-height: 100% !important;
-            padding-top: 0 !important;
-        }
-
-        /* Ensure the actual video element is properly constrained */
-        .video-js video {
-            width: 100% !important;
-            height: 100% !important;
-            max-width: 100% !important;
-            max-height: 100% !important;
-            object-fit: contain !important;
-        }
-
-        .video-js .vjs-control-bar {
-            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-        }
-
-        .chat-section {
-            width: 350px;
-            background: var(--bg-dark);
-            color: var(--text-primary);
-            display: flex;
-            flex-direction: column;
-            box-shadow: -5px 0 20px rgba(0,0,0,0.5);
-            transition: transform 0.3s ease;
-            position: relative;
-            border-left: 1px solid var(--border-color);
-        }
-
-        .chat-section.collapsed {
-            transform: translateX(100%);
-            position: absolute;
-            right: 0;
-            height: 100%;
-        }
-
-        .chat-header {
-            background: linear-gradient(135deg, var(--dodgers-blue) 0%, var(--dodgers-light) 100%);
-            padding: 16px 20px;
-            color: white;
-            font-size: 16px;
-            font-weight: 600;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .chat-header-left {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .chat-header-left::before {
-            content: "💬";
-            font-size: 18px;
-        }
-
-        .admin-controls {
-            display: flex;
-            gap: 8px;
-        }
-
-        .admin-btn {
-            background: rgba(255,215,0,0.3);
-            border: 1px solid var(--admin-gold);
-            color: white;
-            padding: 4px 10px;
-            border-radius: 12px;
-            font-size: 12px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .admin-btn:hover {
-            background: rgba(255,215,0,0.5);
-        }
-
-        .user-info {
-            padding: 12px 16px;
-            background: var(--card-bg);
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .user-id-display {
-            font-size: 11px;
-            color: var(--text-muted);
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .id-badge {
-            background: var(--dodgers-blue);
-            color: white;
-            padding: 2px 8px;
-            border-radius: 12px;
-            font-weight: 600;
-            font-family: monospace;
-        }
-
-        .id-badge.admin {
-            background: linear-gradient(135deg, var(--admin-gold), #FFB700);
-            color: #333;
-        }
-
-        .nickname-input {
-            position: relative;
-        }
-
-        .nickname-input input {
-            width: 100%;
-            padding: 10px 12px;
-            border: 2px solid var(--border-color);
-            border-radius: 8px;
-            font-size: 14px;
-            transition: all 0.3s;
-            background: var(--input-bg);
-            color: var(--text-primary);
-        }
-
-        .nickname-input input::placeholder {
-            color: var(--text-muted);
-        }
-
-        .nickname-input input:focus {
-            outline: none;
-            border-color: var(--dodgers-blue);
-            box-shadow: 0 0 0 3px rgba(0,90,156,0.2);
-        }
-
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 16px;
-            background: var(--bg-dark);
-        }
-
-        .message {
-            margin-bottom: 14px;
-            animation: slideIn 0.3s ease;
-            position: relative;
-        }
-
-        .message:hover .message-actions {
-            opacity: 1;
-        }
-
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .message-header {
-            display: flex;
-            align-items: baseline;
-            gap: 6px;
-            margin-bottom: 4px;
-            flex-wrap: wrap;
-        }
-
-        .message-nickname {
-            font-weight: 600;
-            color: var(--dodgers-blue);
-            font-size: 13px;
-        }
-
-        .message-nickname.admin {
-            color: var(--admin-gold);
-            text-shadow: 0 0 2px rgba(255,215,0,0.5);
-        }
-
-        .message-id {
-            font-size: 10px;
-            color: var(--text-muted);
-            font-family: monospace;
-            background: var(--border-color);
-            padding: 1px 5px;
-            border-radius: 10px;
-        }
-
-        .message-time {
-            font-size: 11px;
-            color: var(--text-muted);
-            margin-left: auto;
-        }
-
-        .message-actions {
-            position: absolute;
-            right: 0;
-            top: 0;
-            opacity: 0;
-            transition: opacity 0.2s;
-            display: flex;
-            gap: 4px;
-        }
-
-        .delete-btn, .ban-btn {
-            background: rgba(239,62,66,0.9);
-            color: white;
-            border: none;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 11px;
-            cursor: pointer;
-        }
-
-        .ban-btn {
-            background: rgba(255,152,0,0.9);
-        }
-
-        .message-text {
-            padding: 8px 12px;
-            background: var(--card-bg);
-            border-radius: 12px;
-            font-size: 14px;
-            line-height: 1.4;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-            border-left: 3px solid transparent;
-            color: var(--text-primary);
-            word-wrap: break-word;
-            word-break: break-word;
-            overflow-wrap: break-word;
-            white-space: pre-wrap;
-            max-width: 100%;
-        }
-
-        .own-message .message-nickname {
-            color: var(--dodgers-red);
-        }
-
-        .own-message .message-text {
-            background: rgba(0,90,156,0.2);
-            border-left-color: var(--dodgers-blue);
-        }
-
-        .admin-message .message-text {
-            background: rgba(255,215,0,0.15);
-            border-left-color: var(--admin-gold);
-        }
-
-        .system-message {
-            text-align: center;
-            color: var(--text-muted);
-            font-size: 12px;
-            font-style: italic;
-            margin: 10px 0;
-            padding: 8px;
-            background: rgba(0,90,156,0.1);
-            border-radius: 8px;
-        }
-
-        .typing-indicator {
-            padding: 0 16px 8px;
-            font-size: 12px;
-            color: var(--text-muted);
-            font-style: italic;
-            display: none;
-        }
-
-        .typing-indicator.active {
-            display: block;
-        }
-
-        .typing-indicator span {
-            animation: blink 1.4s infinite;
-        }
-
-        .typing-indicator span:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-
-        .typing-indicator span:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-
-        .chat-input {
-            padding: 12px 16px;
-            background: var(--card-bg);
-            border-top: 1px solid var(--border-color);
-        }
-
-        .input-group {
-            display: flex;
-            gap: 8px;
-        }
-
-        .chat-input input {
-            flex: 1;
-            padding: 10px 14px;
-            border: 2px solid var(--border-color);
-            border-radius: 24px;
-            font-size: 14px;
-            transition: all 0.3s;
-            background: var(--input-bg);
-            color: var(--text-primary);
-        }
-
-        .chat-input input::placeholder {
-            color: var(--text-muted);
-        }
-
-        .chat-input input:focus {
-            outline: none;
-            border-color: var(--dodgers-blue);
-            box-shadow: 0 0 0 3px rgba(0,90,156,0.2);
-        }
-
-        .chat-input button {
-            padding: 10px 20px;
-            background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light));
-            color: white;
-            border: none;
-            border-radius: 24px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            box-shadow: 0 2px 8px rgba(0,90,156,0.3);
-        }
-
-        .chat-input button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,90,156,0.4);
-        }
-
-        .chat-input button:active {
-            transform: translateY(0);
-        }
-
-        .empty-chat {
-            text-align: center;
-            color: var(--text-muted);
-            padding: 40px 20px;
-            font-size: 13px;
-        }
-
-        .connection-status {
-            padding: 6px;
-            background: var(--bg-darker);
-            text-align: center;
-            font-size: 11px;
-            color: var(--text-muted);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            border-top: 1px solid var(--border-color);
-        }
-
-        .status-dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #4caf50;
-            animation: blink 2s infinite;
-        }
-
-        .status-dot.offline {
-            background: #f44336;
-            animation: none;
-        }
-
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        .notification-badge {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            background: var(--dodgers-red);
-            color: white;
-            border-radius: 10px;
-            padding: 2px 6px;
-            font-size: 11px;
-            font-weight: bold;
-            display: none;
-            animation: bounce 0.5s;
-        }
-
-        .notification-badge.show {
-            display: block;
-        }
-
-        @keyframes bounce {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.2); }
-        }
-
-        @keyframes slideOut {
-            to {
-                opacity: 0;
-                transform: translateX(100%);
-            }
-        }
-
-        /* Floating action buttons */
-        .fab-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 100;
-        }
-
-        .fab {
-            width: 56px;
-            height: 56px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light));
-            color: white;
-            border: none;
-            cursor: pointer;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            transition: all 0.3s;
-        }
-
-        .fab:hover {
-            transform: scale(1.1);
-            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
-        }
-
-        .fab.secondary {
-            width: 48px;
-            height: 48px;
-            font-size: 20px;
-            background: rgba(0,90,156,0.9);
-        }
-
-        /* Toast notifications */
-        .toast {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0,0,0,0.9);
-            color: white;
-            padding: 12px 24px;
-            border-radius: 24px;
-            font-size: 14px;
-            z-index: 1000;
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-
-        .toast.show {
-            opacity: 1;
-        }
-
-        @media (max-width: 768px) {
-            .chat-section {
-                width: 100%;
-                position: absolute;
-                right: 0;
-                top: 0;
-                height: 100%;
-                z-index: 100;
-            }
-
-            .video-header {
-                padding: 10px 15px;
-            }
-
-            .logo {
-                font-size: 16px;
-            }
-
-            .stream-stats {
-                gap: 10px;
-            }
-
-            .quality-selector {
-                display: none;
-            }
-        }
-
-        /* Scrollbar styling */
-        .chat-messages::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .chat-messages::-webkit-scrollbar-track {
-            background: var(--bg-darker);
-        }
-
-        .chat-messages::-webkit-scrollbar-thumb {
-            background: var(--dodgers-blue);
-            border-radius: 3px;
-            opacity: 0.6;
-        }
-
-        .chat-messages::-webkit-scrollbar-thumb:hover {
-            opacity: 1;
-        }