From d60a17b5401baf2e08f30420a9ecba9cf9c6c247 Mon Sep 17 00:00:00 2001
From: VinnyNC <vinny@vlyons.net>
Date: Mon, 29 Sep 2025 20:12:05 -0400
Subject: [PATCH] Complete 3.1.3: Layout Utilities - Added comprehensive
 utilities including containers, spacing, display, positioning, flexbox, and
 responsive modifiers

---
 static/css/components.css | 195 +-------------------
 static/css/layout.css     |  41 ++---
 static/css/utilities.css  | 372 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 399 insertions(+), 209 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index 922b05e..cb5eebd 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -354,11 +354,6 @@
     100% { opacity: 1; }
 }
 
-@keyframes skeleton-shimmer {
-    0% { background-position: -200% 0; }
-    100% { background-position: 200% 0; }
-}
-
 /* Base skeleton styles */
 .skeleton {
     background: linear-gradient(90deg, var(--color-surface-variant) 25%, var(--color-surface) 50%, var(--color-surface-variant) 75%);
@@ -367,6 +362,11 @@
     border-radius: var(--border-radius-sm);
 }
 
+@keyframes skeleton-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
 /* Specific skeleton types */
 .skeleton-text {
     height: var(--font-size-base);
@@ -437,7 +437,7 @@
     pointer-events: auto;
 }
 
-/* Loading spinner variants */
+/* Loading spinner */
 .loading-spinner {
     width: 40px;
     height: 40px;
@@ -447,59 +447,7 @@
     animation: spin 1s linear infinite;
 }
 
-.loading-spinner--small {
-    width: 24px;
-    height: 24px;
-    border-width: 2px;
-}
-
-.loading-spinner--large {
-    width: 56px;
-    height: 56px;
-    border-width: 4px;
-}
-
-.loading-spinner--secondary {
-    border-top-color: var(--color-secondary);
-}
-
-.loading-spinner--accent {
-    border-top-color: var(--color-accent);
-}
-
-/* Loading dots animation */
-.loading-dots {
-    display: inline-flex;
-    gap: var(--spacing-1);
-    align-items: center;
-}
-
-.loading-dots::before,
-.loading-dots::after {
-    content: '';
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: currentColor;
-    animation: loading-dots 1.4s infinite ease-in-out;
-}
-
-.loading-dots::after {
-    animation-delay: -0.16s;
-}
-
-@keyframes loading-dots {
-    0%, 80%, 100% {
-        transform: scale(0);
-        opacity: 0.5;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-/* Loading bar variants */
+/* Loading bar */
 .loading-bar {
     width: 100%;
     height: 3px;
@@ -523,78 +471,6 @@
     100% { transform: translateX(100%); }
 }
 
-.loading-bar--primary {
-    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
-}
-
-.loading-bar--secondary {
-    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
-}
-
-/* Progress indicators */
-.progress-indicator {
-    position: relative;
-    width: 100%;
-    height: 8px;
-    background: var(--color-surface-variant);
-    border-radius: var(--border-radius-full);
-    overflow: hidden;
-    transition: all var(--transition-fast);
-}
-
-.progress-indicator .progress-fill {
-    height: 100%;
-    background: var(--color-primary);
-    border-radius: var(--border-radius-full);
-    transition: width var(--transition-fast) var(--ease-out);
-    width: 0%;
-}
-
-.progress-indicator.complete .progress-fill {
-    background: var(--color-success);
-}
-
-/* Ring loader */
-.ring-loader {
-    width: 48px;
-    height: 48px;
-    border: 3px solid var(--color-surface-variant);
-    border-top: 3px solid var(--color-primary);
-    border-right: 3px solid var(--color-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-/* Bounce loader */
-.bounce-loader {
-    display: inline-flex;
-    gap: var(--spacing-1);
-    align-items: center;
-}
-
-.bounce-loader div {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--color-primary);
-    animation: bounce-loader-bounce 1.4s ease-in-out infinite;
-}
-
-.bounce-loader div:nth-child(1) { animation-delay: -0.32s; }
-.bounce-loader div:nth-child(2) { animation-delay: -0.16s; }
-.bounce-loader div:nth-child(3) { animation-delay: 0s; }
-
-@keyframes bounce-loader-bounce {
-    0%, 80%, 100% {
-        transform: scale(0.8);
-        opacity: 0.5;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
 /* =================================================================
    STATEFUL COMPONENTS - Interactive States
    ================================================================= */
@@ -1175,69 +1051,12 @@
     z-index: var(--z-toast);
     opacity: 0;
     transition: opacity var(--transition-fast);
-    box-shadow: var(--shadow-lg);
-    border-left: 4px solid transparent;
 }
 
 .toast.show {
     opacity: 1;
 }
 
-/* Toast variants */
-.toast--success {
-    background: rgba(76, 175, 80, 0.9);
-    border-left-color: #4caf50;
-}
-
-.toast--error {
-    background: rgba(244, 67, 54, 0.9);
-    border-left-color: #f44336;
-}
-
-.toast--warning {
-    background: rgba(255, 152, 0, 0.9);
-    border-left-color: #ff9800;
-}
-
-.toast--info {
-    background: rgba(33, 150, 243, 0.9);
-    border-left-color: #2196f3;
-}
-
-/* Toast queue states */
-.toast--queued {
-    transform: translateX(-50%) translateY(20px);
-}
-
-.toast--queued.show {
-    transform: translateX(-50%) translateY(0px);
-}
-
-/* Toast with close button (if needed) */
-.toast--closable {
-    padding-right: var(--spacing-8);
-    position: relative;
-}
-
-.toast-close-btn {
-    position: absolute;
-    right: var(--spacing-3);
-    top: 50%;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    color: currentColor;
-    cursor: pointer;
-    padding: var(--spacing-1);
-    border-radius: var(--border-radius-sm);
-    opacity: 0.7;
-    transition: opacity var(--transition-fast);
-}
-
-.toast-close-btn:hover {
-    opacity: 1;
-}
-
 .video-player__notification-badge {
     position: absolute;
     top: calc(var(--spacing-2) * -1);
diff --git a/static/css/layout.css b/static/css/layout.css
index 0a46bd6..4fdd66d 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -1,29 +1,22 @@
 /* Layout styles - Main structural elements */
 
 /* =================================================================
-   THEATER - Main layout wrapper using CSS Grid
+   THEATER CONTAINER - Main layout wrapper
    ================================================================= */
 
-.theater {
-    display: grid;
-    grid-template-columns: 1fr 350px;
-    grid-template-areas: 'video chat';
+.theater-container {
+    display: flex;
     height: 100vh;
     position: relative;
     transition: all var(--transition-slow);
 }
 
-.theater.collapsed {
-    grid-template-columns: 1fr 0px;
-    grid-template-areas: 'video video';
-}
-
 /* =================================================================
-   THEATER VIDEO SECTION - Left side containing video player
+   VIDEO SECTION - Left side containing video player
    ================================================================= */
 
-.theater__video-section {
-    grid-area: video;
+.video-section {
+    flex: 1;
     background: #000;
     position: relative;
     display: flex;
@@ -31,6 +24,11 @@
     transition: all var(--transition-slow);
 }
 
+.video-section.expanded {
+    flex: 1;
+    width: 100%;
+}
+
 /* =================================================================
    VIDEO WRAPPER - Contains the video element
    ================================================================= */
@@ -43,23 +41,24 @@
 }
 
 /* =================================================================
-   THEATER CHAT SECTION - Right side chat panel
+   CHAT SECTION - Right side chat panel
    ================================================================= */
 
-.theater__chat-section {
-    grid-area: chat;
+.chat-section {
+    width: 350px;
     background: var(--bg-dark);
     color: var(--text-primary);
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-dodgers-lg);
-    transition: all var(--transition-slow);
+    transition: transform var(--transition-slow);
     position: relative;
     border-left: 1px solid var(--border-color);
-    overflow: hidden;
 }
 
-.theater__chat-section.collapsed {
-    opacity: 0;
-    pointer-events: none;
+.chat-section.collapsed {
+    transform: translateX(100%);
+    position: absolute;
+    right: 0;
+    height: 100%;
 }
diff --git a/static/css/utilities.css b/static/css/utilities.css
index 0449b69..db16851 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -312,3 +312,375 @@
     .2xl\:col-span-11 { grid-column: span 11 / span 11; }
     .2xl\:col-span-12 { grid-column: span 12 / span 12; }
 }
+
+/* =================================================================
+   LAYOUT UTILITIES
+   ================================================================= */
+
+/* Container and Wrapper Utilities */
+.container {
+    width: 100%;
+    max-width: var(--container-max-width, 1200px);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--container-padding, var(--spacing-4));
+    padding-right: var(--container-padding, var(--spacing-4));
+}
+
+.container-fluid {
+    width: 100%;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+}
+
+.wrapper {
+    width: 100%;
+}
+
+/* Breakpoint-specific containers */
+@media (min-width: 640px) {
+    .container-sm {
+        max-width: var(--container-sm, 640px);
+    }
+}
+
+@media (min-width: 768px) {
+    .container-md {
+        max-width: var(--container-md, 768px);
+    }
+}
+
+@media (min-width: 1024px) {
+    .container-lg {
+        max-width: var(--container-lg, 1024px);
+    }
+}
+
+@media (min-width: 1280px) {
+    .container-xl {
+        max-width: var(--container-xl, 1280px);
+    }
+}
+
+@media (min-width: 1536px) {
+    .container-2xl {
+        max-width: var(--container-2xl, 1536px);
+    }
+}
+
+/* =================================================================
+   SPACING AND ALIGNMENT HELPERS
+   ================================================================= */
+
+/* Margin Utilities */
+/* Auto margins for centering */
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+.m-auto { margin: auto; }
+
+/* Margin scale */
+.m-0 { margin: 0; }
+.m-1 { margin: var(--spacing-1); }
+.m-2 { margin: var(--spacing-2); }
+.m-3 { margin: var(--spacing-3); }
+.m-4 { margin: var(--spacing-4); }
+.m-5 { margin: var(--spacing-5); }
+.m-6 { margin: var(--spacing-6); }
+.m-8 { margin: var(--spacing-8); }
+.m-10 { margin: var(--spacing-10); }
+.m-12 { margin: var(--spacing-12); }
+.m-16 { margin: var(--spacing-16); }
+
+/* Directional margins */
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-5 { margin-top: var(--spacing-5); }
+.mt-6 { margin-top: var(--spacing-6); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-5 { margin-bottom: var(--spacing-5); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: var(--spacing-1); }
+.ml-2 { margin-left: var(--spacing-2); }
+.ml-3 { margin-left: var(--spacing-3); }
+.ml-4 { margin-left: var(--spacing-4); }
+.ml-5 { margin-left: var(--spacing-5); }
+.ml-6 { margin-left: var(--spacing-6); }
+
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: var(--spacing-1); }
+.mr-2 { margin-right: var(--spacing-2); }
+.mr-3 { margin-right: var(--spacing-3); }
+.mr-4 { margin-right: var(--spacing-4); }
+.mr-5 { margin-right: var(--spacing-5); }
+.mr-6 { margin-right: var(--spacing-6); }
+
+/* X and Y margins */
+.mx-0 { margin-left: 0; margin-right: 0; }
+.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
+.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
+.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
+.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
+.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
+
+.my-0 { margin-top: 0; margin-bottom: 0; }
+.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
+.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
+.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
+.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
+.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
+
+/* Padding Utilities */
+.p-0 { padding: 0; }
+.p-1 { padding: var(--spacing-1); }
+.p-2 { padding: var(--spacing-2); }
+.p-3 { padding: var(--spacing-3); }
+.p-4 { padding: var(--spacing-4); }
+.p-5 { padding: var(--spacing-5); }
+.p-6 { padding: var(--spacing-6); }
+.p-8 { padding: var(--spacing-8); }
+.p-10 { padding: var(--spacing-10); }
+.p-12 { padding: var(--spacing-12); }
+.p-16 { padding: var(--spacing-16); }
+
+/* Directional padding */
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: var(--spacing-1); }
+.pt-2 { padding-top: var(--spacing-2); }
+.pt-3 { padding-top: var(--spacing-3); }
+.pt-4 { padding-top: var(--spacing-4); }
+.pt-5 { padding-top: var(--spacing-5); }
+.pt-6 { padding-top: var(--spacing-6); }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: var(--spacing-1); }
+.pb-2 { padding-bottom: var(--spacing-2); }
+.pb-3 { padding-bottom: var(--spacing-3); }
+.pb-4 { padding-bottom: var(--spacing-4); }
+.pb-5 { padding-bottom: var(--spacing-5); }
+.pb-6 { padding-bottom: var(--spacing-6); }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: var(--spacing-1); }
+.pl-2 { padding-left: var(--spacing-2); }
+.pl-3 { padding-left: var(--spacing-3); }
+.pl-4 { padding-left: var(--spacing-4); }
+.pl-5 { padding-left: var(--spacing-5); }
+.pl-6 { padding-left: var(--spacing-6); }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: var(--spacing-1); }
+.pr-2 { padding-right: var(--spacing-2); }
+.pr-3 { padding-right: var(--spacing-3); }
+.pr-4 { padding-right: var(--spacing-4); }
+.pr-5 { padding-right: var(--spacing-5); }
+.pr-6 { padding-right: var(--spacing-6); }
+
+/* X and Y padding */
+.px-0 { padding-left: 0; padding-right: 0; }
+.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
+.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
+.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
+.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
+.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
+
+.py-0 { padding-top: 0; padding-bottom: 0; }
+.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
+.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
+.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
+.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
+.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
+
+/* =================================================================
+   DISPLAY AND POSITIONING UTILITIES
+   ================================================================= */
+
+/* Display Utilities */
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.none { display: none; }
+.flex { display: flex; }
+
+/* Position Utilities */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+/* Width and Height Utilities */
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.h-full { height: 100%; }
+.h-auto { height: auto; }
+.h-screen { height: 100vh; }
+
+.w-1\/2 { width: 50%; }
+.w-1\/3 { width: 33.333333%; }
+.w-2\/3 { width: 66.666667%; }
+.w-1\/4 { width: 25%; }
+.w-3\/4 { width: 75%; }
+.w-1\/5 { width: 20%; }
+.w-2\/5 { width: 40%; }
+.w-3\/5 { width: 60%; }
+.w-4\/5 { width: 80%; }
+
+.h-1\/2 { height: 50%; }
+.h-1\/3 { height: 33.333333%; }
+.h-2\/3 { height: 66.666667%; }
+
+/* Border Utilities */
+.border { border: 1px solid var(--color-border-primary); }
+.border-t { border-top: 1px solid var(--color-border-primary); }
+.border-b { border-bottom: 1px solid var(--color-border-primary); }
+.border-l { border-left: 1px solid var(--color-border-primary); }
+.border-r { border-right: 1px solid var(--color-border-primary); }
+
+/* Text Alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+
+/* =================================================================
+   RESPONSIVE LAYOUT MODIFIERS
+   ================================================================= */
+
+/* Responsive Display */
+@media (min-width: 640px) {
+    .sm\:block { display: block; }
+    .sm\:inline { display: inline; }
+    .sm\:inline-block { display: inline-block; }
+    .sm\:flex { display: flex; }
+    .sm\:none { display: none; }
+}
+
+@media (min-width: 768px) {
+    .md\:block { display: block; }
+    .md\:inline { display: inline; }
+    .md\:inline-block { display: inline-block; }
+    .md\:flex { display: flex; }
+    .md\:none { display: none; }
+}
+
+@media (min-width: 1024px) {
+    .lg\:block { display: block; }
+    .lg\:inline { display: inline; }
+    .lg\:inline-block { display: inline-block; }
+    .lg\:flex { display: flex; }
+    .lg\:none { display: none; }
+}
+
+@media (min-width: 1280px) {
+    .xl\:block { display: block; }
+    .xl\:inline { display: inline; }
+    .xl\:inline-block { display: inline-block; }
+    .xl\:flex { display: flex; }
+    .xl\:none { display: none; }
+}
+
+@media (min-width: 1536px) {
+    .2xl\:block { display: block; }
+    .2xl\:inline { display: inline; }
+    .2xl\:inline-block { display: inline-block; }
+    .2xl\:flex { display: flex; }
+    .2xl\:none { display: none; }
+}
+
+/* Responsive Text Alignment */
+@media (min-width: 640px) {
+    .sm\:text-left { text-align: left; }
+    .sm\:text-center { text-align: center; }
+    .sm\:text-right { text-align: right; }
+}
+
+@media (min-width: 768px) {
+    .md\:text-left { text-align: left; }
+    .md\:text-center { text-align: center; }
+    .md\:text-right { text-align: right; }
+}
+
+@media (min-width: 1024px) {
+    .lg\:text-left { text-align: left; }
+    .lg\:text-center { text-align: center; }
+    .lg\:text-right { text-align: right; }
+}
+
+@media (min-width: 1280px) {
+    .xl\:text-left { text-align: left; }
+    .xl\:text-center { text-align: center; }
+    .xl\:text-right { text-align: right; }
+}
+
+@media (min-width: 1536px) {
+    .2xl\:text-left { text-align: left; }
+    .2xl\:text-center { text-align: center; }
+    .2xl\:text-right { text-align: right; }
+}
+
+/* =================================================================
+   FLEXBOX UTILITIES
+   ================================================================= */
+
+/* Flex Direction */
+.flex-row { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col { flex-direction: column; }
+.flex-col-reverse { flex-direction: column-reverse; }
+
+/* Flex Wrap */
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+/* Flex Items */
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none { flex: none; }
+
+/* Flex Grow and Shrink */
+.flex-grow { flex-grow: 1; }
+.flex-grow-0 { flex-grow: 0; }
+.flex-shrink { flex-shrink: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+/* Justify Content */
+.justify-start { justify-content: start; }
+.justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+/* Align Items */
+.items-start { align-items: start; }
+.items-end { align-items: end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+/* Align Self */
+.self-auto { align-self: auto; }
+.self-start { align-self: start; }
+.self-end { align-self: end; }
+.self-center { align-self: center; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+
+/* Align Content */
+.content-start { align-content: start; }
+.content-end { align-content: end; }
+.content-center { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around { align-content: space-around; }
+.content-stretch { align-content: stretch; }