nested css

app/assets/stylesheets/application.css

@@ -34,25 +34,27 @@ header.navbar {
   color: white;
   padding: 15px 0;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
 
-header.navbar h1 {
+  h1 {
     margin-bottom: 10px;
-}
+  }
 
-header.navbar nav ul {
+  nav {
+    ul {
       list-style: none;
       display: flex;
       gap: 20px;
-}
+    }
 
-header.navbar nav a {
+    a {
       color: white;
       text-decoration: none;
-}
 
-header.navbar nav a:hover {
+      &:hover {
         color: #ccc;
+      }
+    }
+  }
 }
 
 main {
@@ -88,12 +90,16 @@ th, td {
   text-align: left;
 }
 
-tbody tr:hover {
+tbody {
+  tr {
+    &:hover {
       background-color: #f9f9f9;
-}
+    }
 
-tbody tr:nth-child(even) {
+    &:nth-child(even) {
       background-color: #fafafa;
+    }
+  }
 }
 
 .btn {
@@ -108,79 +114,77 @@ tbody tr:nth-child(even) {
   font-size: 14px;
   transition: background-color 0.2s;
   margin-right: 5px;
-}
 
-.btn:hover {
+  &:hover {
     background-color: #ccc;
-}
+  }
 
-.btn--primary {
+  &--primary {
     background-color: #007bff;
     color: white;
-}
 
-.btn--primary:hover {
+    &:hover {
       background-color: #0056b3;
-}
+    }
+  }
 
-.btn--success {
+  &--success {
     background-color: #28a745;
     color: white;
-}
 
-.btn--success:hover {
+    &:hover {
       background-color: #1e7e34;
-}
+    }
+  }
 
-.btn--danger {
+  &--danger {
     background-color: #dc3545;
     color: white;
-}
 
-.btn--danger:hover {
+    &:hover {
       background-color: #c82333;
-}
+    }
+  }
 
-.btn--warning {
+  &--warning {
     background-color: #ffc107;
     color: #333;
-}
 
-.btn--warning:hover {
+    &:hover {
       background-color: #e0a800;
-}
+    }
+  }
 
-.btn--small {
+  &--small {
     padding: 6px 10px;
     font-size: 12px;
+  }
 }
 
 .form-group {
   margin-bottom: 15px;
-}
 
-.form-group label {
+  label {
     display: block;
     margin-bottom: 5px;
     font-weight: 600;
-}
+  }
 
-.form-group input,
+  input,
-.form-group textarea,
+  textarea,
-.form-group select {
+  select {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 14px;
-}
 
-.form-group input:focus,
+    &:focus {
-.form-group textarea:focus,
-.form-group select:focus {
       outline: none;
       border-color: #007bff;
       box-shadow: 0 0 5px rgba(0,123,255,0.25);
+    }
+  }
 }
 
 .form-actions {
@@ -192,18 +196,18 @@ tbody tr:nth-child(even) {
   margin-bottom: 20px;
   border-radius: 4px;
   border-left: 4px solid;
-}
 
-.alert--success {
+  &--success {
     background-color: #d4edda;
     border-color: #28a745;
     color: #155724;
-}
+  }
 
-.alert--error {
+  &--error {
     background-color: #f8d7da;
     border-color: #dc3545;
     color: #721c24;
+  }
 }
 
 .status {
@@ -212,26 +216,26 @@ tbody tr:nth-child(even) {
   font-size: 12px;
   font-weight: 600;
   display: inline-block;
-}
 
-.status--stopped {
+  &--stopped {
     background-color: #e9ecef;
     color: #6c757d;
-}
+  }
 
-.status--starting {
+  &--starting {
     background-color: #fff3cd;
     color: #856404;
-}
+  }
 
-.status--running {
+  &--running {
     background-color: #d4edda;
     color: #155724;
-}
+  }
 
-.status--failed {
+  &--failed {
     background-color: #f8d7da;
     color: #721c24;
+  }
 }
 
 section {
@@ -255,20 +259,22 @@ section {
   word-wrap: break-word;
 }
 
-.server-info p {
+.server-info {
+  p {
     margin-bottom: 10px;
+  }
 }
 
 .overlays-list {
   list-style: decimal;
   padding-left: 20px;
-}
 
-.overlays-list li {
+  li {
     padding: 8px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
+  }
 }
 
 .template-preview {