nested css

app/assets/stylesheets/application.css

@@ -34,26 +34,28 @@ 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 {
   padding: 30px 0;
@@ -88,13 +90,17 @@ 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 {
   display: inline-block;
@@ -108,80 +114,78 @@ 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,
-.form-group textarea,
-.form-group select {
+  input,
+  textarea,
+  select {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 14px;
-}
 
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
+    &:focus {
       outline: none;
       border-color: #007bff;
       box-shadow: 0 0 5px rgba(0,123,255,0.25);
     }
+  }
+}
 
 .form-actions {
   margin-top: 20px;
@@ -192,19 +196,19 @@ 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 {
   padding: 5px 10px;
@@ -212,27 +216,27 @@ 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 {
   background: white;
@@ -255,21 +259,23 @@ 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 {
   background: #f9f9f9;