Generalize styling for accordion tables

styles/sections/_reports.scss

@@ -201,143 +201,60 @@
   }
 }
 
+.spend-table__month-select {
+  margin: 0;
+  flex: 1;
+}
 
-.spend-table {
-  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-
-  .spend-table__header {
-    @include panel-base;
-    @include panel-theme-default;
-    border-top: none;
-    border-bottom: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    padding: $gap * 2;
-
-    .spend-table__title {
-      @include h4;
-      font-size: $lead-font-size;
-      flex: 2;
-    }
-
-    .spend-table__month-select {
-      margin: 0;
-      flex: 1;
+table {
+  .spend-table__portfolio {
+    th, td {
+      font-weight: bold;
+      border-bottom: 1px solid $color-gray-lightest;
     }
   }
 
-  table {
-    thead th {
-      text-transform: uppercase;
-      border-bottom: 1px solid $color-gray-lightest;
-      border-top: none;
+  th, td {
+    &.previous-month {
+      color: $color-gray;
     }
 
-    th, td {
-      white-space: nowrap;
+    &.meter-cell {
+      padding-left: 0;
+      position: relative;
+      min-width: 4rem;
 
-      button {
-        margin: 0;
+      @include media($medium-screen) {
+        min-width: 12rem;
       }
 
-      &.previous-month {
-        color: $color-gray;
-      }
-
-      &.meter-cell {
-        padding-left: 0;
-        position: relative;
-        min-width: 4rem;
+      meter {
+        width: 100%;
+        height: 3rem;
+        background: $color-white;
+        display: none;
 
         @include media($medium-screen) {
-          min-width: 12rem;
+          display: block;
         }
 
-        meter {
-          width: 100%;
-          height: 3rem;
+        &::-webkit-meter-bar {
           background: $color-white;
-          display: none;
-
-          @include media($medium-screen) {
-            display: block;
-          }
-
-          &::-webkit-meter-bar {
-            background: $color-white;
-          }
-        }
-
-        .spend-table__meter-value {
-          @include h5;
-
-          @include media($medium-screen) {
-            display: block;
-            color: $color-white;
-            background-color: rgba($color-blue, 0.65);
-            border-radius: $gap/2;
-            position: absolute;
-            top: 2.3rem;
-            left: $gap / 2;
-            padding: 0 ($gap / 2);
-          }
         }
       }
-    }
 
-    .spend-table__portfolio {
-      th, td {
-        font-weight: bold;
-        border-bottom: 1px solid $color-gray-lightest;
-      }
-    }
+      .spend-table__meter-value {
+        @include h5;
 
-    .spend-table__application {
-      .spend-table__application__toggler {
-        @include icon-link-color($color-blue, $color-gray-lightest);
-        margin-left: -$gap;
-        color: $color-blue;
-
-        .icon {
-          @include icon-size(12);
-          margin-right: $gap;
-        }
-
-        .open-indicator {
+        @include media($medium-screen) {
+          display: block;
+          color: $color-white;
+          background-color: rgba($color-blue, 0.65);
+          border-radius: $gap/2;
           position: absolute;
-          bottom: 0;
-          left: 5 * $gap;
-          width: 0;
-          height: 0;
-          border-left: 10px solid transparent;
-          border-right: 10px solid transparent;
-
-          border-bottom: 10px solid $color-blue-light;
-        }
-      }
-
-      th, td {
-        border-bottom: none;
-      }
-
-      th[scope=rowgroup] {
-        position: relative;
-      }
-
-      .spend-table__application__env {
-        margin-left: 2 * $gap;
-
-        th, td {
-          .icon-link {
-            font-weight: $font-normal;
-            font-size: $base-font-size;
-          }
-
-          border-bottom: 1px dashed $color-white;
-          background-color: $color-blue-light;
+          top: 2.3rem;
+          left: $gap / 2;
+          padding: 0 ($gap / 2);
         }
       }
     }