breakout components of sheet use full card defense

src/scss/eventsheet.scss

@@ -325,6 +325,56 @@ td.substitution {
       "footer footer";
   }
 
+  #offense-pane {
+    grid-area: offense;
+  }
+
+  #defense-pane {
+    grid-area: defense;
+  }
+
+  .footer {
+    /* height:var(--row-height); */
+    position: relative;
+    box-sizing: border-box;
+    grid-area: footer;
+    /* border: 1px solid black; */
+    height: 100%;
+    border-right: 0.5px solid grey;
+    border-left: 0.5px solid grey;
+  
+    table {
+      height: 100%;
+      outline: none;
+      border-style: none;
+  
+      tr {
+        background-color: white;
+        outline: none;
+        border-bottom: 0.5px solid var(--color-grey-500);
+  
+        :last-child {
+          background-color: white;
+          outline: none;
+          border-bottom-style: none;
+        }
+      }
+  
+      th {
+        text-align: left;
+        color: var(--color-grey-600);
+      }
+  
+      td {
+        height: var(--row-height);
+        border: none;
+        &empty::after {
+          content: "";
+        }
+      }
+    }
+  }
+
   table {
     &.notes {
       th {
@@ -339,6 +389,47 @@ td.substitution {
   }
 }
 
+#defense-card {
+  #defense-pane {
+    width: 100%;
+  }
+
+  .footer {
+    display: none;
+  }
+
+  .slot-set {
+    table {
+      font-size: 14px;
+      width: 120px;
+      tbody > tr:last-child { 
+        // display: none; 
+      }
+      }
+
+    &.pos-c {
+      grid-area: 6 / 1 / 7 / 5 !important;
+    }
+    
+    &.pos-p {
+      table {
+        width: 120px !important;
+        tbody > tr:last-child { 
+          display: table-row; 
+        }
+      }
+      justify-content: center !important;
+      align-items: center;
+      margin-bottom: inherit !important;
+      grid-area: 5 / 1 / 6 / 5 !important;
+    }
+    
+  }
+
+
+}
+
+
 #defense-pane {
   position: relative;
   grid-area: defense;
@@ -434,12 +525,12 @@ td.substitution {
 }
 
 #offense-pane {
-  counter-reset: lineup-sequence-counter 0;
   position: relative;
   /* box-sizing: border-box; */
   height: 100%;
-  grid-area: offense;
+  // grid-area: offense;
   border-bottom: 0.5px solid black;
+  counter-reset: lineup-sequence-counter 0;
   /* outline: 0.5px solid black; */
 
   table {
@@ -486,7 +577,7 @@ header {
   /* outline: 1px solid black; */
   /* height: var(--row-height); */
   width: auto;
-  grid-area: header;
+  // grid-area: header;
   text-align: center;
   padding-left: 10px;
   padding-right: 10px;
@@ -494,47 +585,7 @@ header {
   z-index: 1;
 }
 
-.footer {
-  /* height:var(--row-height); */
-  position: relative;
-  box-sizing: border-box;
-  grid-area: footer;
-  /* border: 1px solid black; */
-  height: 100%;
-  border-right: 0.5px solid grey;
-  border-left: 0.5px solid grey;
 
-  table {
-    height: 100%;
-    outline: none;
-    border-style: none;
-
-    tr {
-      background-color: white;
-      outline: none;
-      border-bottom: 0.5px solid var(--color-grey-500);
-
-      :last-child {
-        background-color: white;
-        outline: none;
-        border-bottom-style: none;
-      }
-    }
-
-    th {
-      text-align: left;
-      color: var(--color-grey-600);
-    }
-
-    td {
-      height: var(--row-height);
-      border: none;
-      &empty::after {
-        content: "";
-      }
-    }
-  }
-}
 
 .cell-checkbox {
   font-size: 0.75em;