forstok-ui-lib 6.2.11 → 6.3.1

package/src/assets/stylesheets/shares.styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { responseWidth, formLabel, elipsis, multiElipsis, headTable, clearList, dropBase, buttonStyle, buttonActiveStyle, buttonHoverStyle } from './bases.styles';
+import { ModeListTableColumn } from '../../typeds';
 
 const initialStyles = css `
   width: 32px;
@@ -77,46 +78,6 @@ const getInputGroupModFunc = ({ $mode, $required }:{ $mode?: string, $required?:
   }
   return style
 }
-const getBulkActionWrapperModifiedStyled = ({ $isOpen }:{ $isOpen?: boolean }) => {
-  let style = ``
-  if ($isOpen) {
-    style += `
-      transition: bottom .2s;
-      bottom: 0;
-      @media (max-width: 767.9px) {
-        @keyframes droptoup {
-          50% { 
-            bottom: -100px; 
-          }
-          50% { 
-            bottom: -50px; 
-          }
-          100% { 
-            bottom: 0px; 
-          }
-        }
-        &._refMasterTableBulkWrapper {
-          display: grid;
-          left: 0;
-          animation: droptoup .075s linear;
-          bottom: 0;
-          overflow-x: hidden;
-          & + ._refDropdownOverlay {
-            display: block;
-            width: 100%;
-            height: 100%;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 100;
-            background-color: rgba(0, 0, 0, .5);
-          }
-        }
-      }
-    `
-  }
-  return style
-}
 const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPlayground?: boolean }) => {
   let style = `
     & ${TableHeadLabel} {
@@ -1164,6 +1125,7 @@ const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
     style +=`
       grid-auto-flow: column;
       grid-template-columns: 1fr;
+      margin-top: 16px;
       > aside {
         padding: 20px 10px;
       }
@@ -1793,18 +1755,18 @@ export const HeaderContainer = styled.aside`
   grid-gap: 8px;
   grid-template-columns: max-content max-content;
   align-items: center;
-  position: relative;
-  margin-top: 10px;
   @media only screen and (min-width: 768px) {
-    margin-top: 0px;
-    top: 10px;
     position: absolute;
-    right: 0;
+    right: 20px;
+    top: 10px;
   }
   @media only screen and (min-width: 1366px) {
     right: 20px;
   }
-`
+  @media only screen and (min-width: 1800px) {
+    right: 28px;
+  }
+` 
 export const Title = styled.h1`
   font-size: 22px;
   color: var(--ter-clr);
@@ -1814,7 +1776,6 @@ export const Title = styled.h1`
     font-weight: 400;
     margin-top: 5px;
     letter-spacing: normal;
-    line-height: normal;
   }
   @media only screen and (min-width: 768px) {
     font-size: 1.5rem;
@@ -1823,23 +1784,19 @@ export const Title = styled.h1`
     }
   }
 `
-export const PanelWrapper = styled.section<{ $mode?: string }>` 
+export const PanelWrapper = styled.section<{ $mode?: 'full' }>` 
   ${responseWidth}
   position: relative;
   min-height: 1px;
   margin: 0 auto;
-  padding-top: 8px;
+  padding-top: 4px;
   padding-bottom: 10px;
   @media only screen and (min-width: 768px) {
-    padding: 8px 30px 16px;
+    padding: 4px 30px 16px;
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'full') {
-      return css` 
-        width: 100%; 
-      `
-    }
-  }}
+  ${({ $mode }) => $mode === 'full' && css`
+    width: 100%; 
+  `}
 `
 export const PanelContainer = styled.section<{ $mode?: string }>`
   position: relative;
@@ -1912,6 +1869,16 @@ export const ListContainer = styled.section`
   &:first-child {
     margin-top: -4px;
   }
+  > aside:first-child {
+    @media only screen and (min-width: 768px) {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    @media only screen and (min-width: 1024px) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 `
 export const TabsContainer = styled.section<{ $mode?: string }>`
   width: 100%;
@@ -1927,9 +1894,6 @@ export const TabsContainer = styled.section<{ $mode?: string }>`
     } else if ($mode === 'no-header') {
       return css` 
         padding-top: 0; 
-        @media only screen and (min-width: 1366px) {
-          padding-top: 12px; 
-        }
       `
     }
   }}
@@ -1937,17 +1901,16 @@ export const TabsContainer = styled.section<{ $mode?: string }>`
 export const TabsContent = styled.div<{ $mode?: string }>`
   padding-top: 16px;
   &._refNoTab {
-    padding-top: 9px;
-    @media only screen and (min-width: 768px) {
-      padding-top: 11px;
-    }
+    padding-top: 0;
   }
   @media only screen and (min-width: 768px) {
-    padding-top: 24px;
+    &._refNoTab {
+      padding-top: 16px;
+    }
   }
   ${getTabsContentModFunc}
 `
-export const FoContainer = styled.section<{ $mode?: string }>` 
+export const FoContainer = styled.section<{ $mode?: 'detail' }>` 
   position: relative;
   > section, 
   > article {
@@ -1959,38 +1922,35 @@ export const FoContainer = styled.section<{ $mode?: string }>`
     }
   }
   > article {
-    height: calc(100vh - 50px);
+    height: calc(100vh - 48px);
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'detail') {
-      return css` 
-        margin-top: -4px;
-        @media only screen and (min-width: 768px) {
-          > section, 
-          > article {
-            > aside {
-              padding-left: 16px;
-              padding-right: 16px;
-            }
-          }
+  ${({ $mode }) => $mode === 'detail' && css`
+    margin-top: -4px;
+    @media only screen and (min-width: 768px) {
+      > section, 
+      > article {
+        > aside {
+          padding-left: 0;
+          padding-right: 0;
         }
-        @media only screen and (min-width: 1024px) {
-          > section, 
-          > article {
-            > aside {
-              padding-left: 0;
-              padding-right: 0;
-            }
-          }
+      }
+    }
+    @media only screen and (min-width: 1024px) {
+      > section, 
+      > article {
+        > aside {
+          padding-left: 0;
+          padding-right: 0;
         }
-      `
+      }
     }
-  }}
+  `}
 `
 export const BreadcrumbContainer = styled.aside` 
   position: relative;
-  padding: 18px 16px;
+  padding: 0;
   text-align: center;
+  margin-left: 9px !important;
   > a {
     &:first-child {
       display: none;
@@ -1998,8 +1958,8 @@ export const BreadcrumbContainer = styled.aside`
     &:nth-child(2) {
       display: inline;
       position: absolute;
-      top: 20px;
-      left: .625em;
+      top: 0;
+      left: 0;
     }
     > i {
       float: left;
@@ -2010,14 +1970,15 @@ export const BreadcrumbContainer = styled.aside`
     display: none; 
   }
   @media only screen and (min-width: 375px) {
+    margin-left: 16px !important;
     > a {
       &:nth-child(2) {
-        left: 16px;
+        left: 4px;
       }
     }
   }
   @media only screen and (min-width: 768px) {
-    padding: 8px 30px 20px;
+    padding: 8px 30px 0;
     text-align: left;
     b {
       font-size: .875rem;
@@ -2035,16 +1996,19 @@ export const BreadcrumbContainer = styled.aside`
       }
     }
   }
+  @media (min-width: 1366px) {
+    margin-left: 28px !important;
+  }
 `
 export const InfoGroup = styled.div`
   display: inline-grid;
   grid-auto-flow: column;
-  grid-template-columns: minmax(140px, 150px) minmax(140px, 1fr);
+  grid-template-columns: minmax(140px, 165px) minmax(140px, 1fr);
   grid-gap: 5px;
   width: 100%;
   justify-content: left;
   margin-bottom: 14px;
-  > span:first-child {
+  span {
     position: relative;
     &:after {
       position: absolute;
@@ -2057,7 +2021,7 @@ export const InfoGroup = styled.div`
     word-break: break-word;
   }
 `
-export const MuteLabel = styled.span<{ $size?: string }>`
+export const MuteLabel = styled.span<{ $size?: 'medium' }>`
   color: var(--mt-clr);
   font-size: 12px;
   word-break: break-all;
@@ -2070,16 +2034,13 @@ export const MuteLabel = styled.span<{ $size?: string }>`
       margin-right: 0; 
     }
   }
-  ${({ $size }:{ $size?: string }) => {
-    if ($size === 'medium') 
-      return css` 
-        font-size: 13px;
-        line-height: 12px;
-        * { 
-          margin-right: 4px; 
-        }
-      `
-  }}
+  ${({ $size }) => $size === 'medium' && css`
+    font-size: 13px;
+    line-height: 12px;
+    * { 
+      margin-right: 4px; 
+    }
+  `}
 `
 export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }>`
   > label, 
@@ -2088,11 +2049,13 @@ export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }
     margin-bottom: 6px;
     padding: 0 6px;
     display: block;
-    font-size: 14px;
   }
   > div { 
     display: grid; 
   }
+  ._refRangeContainer {
+    width: 100%;
+  }
   ${getInputGroupModFunc}
 `
 export const BoxContainer = styled.aside` 
@@ -2117,6 +2080,10 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
   transition: bottom .2s ease-in-out;
   overflow: auto;
   white-space: nowrap;
+  &.is-active {
+    transition: bottom .2s;
+    bottom: 0;
+  }
   i {
     position: relative;
     top: 5px;
@@ -2125,7 +2092,8 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
     position: relative;
     top: 7px;
   }
-  button, a {
+  button, 
+  a {
     padding: 6px 16px;
     font-size: 13px;
     min-height: unset;
@@ -2142,10 +2110,14 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
       box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
       border-radius: 10px 10px 0px 0px;
       display: none;
-      >i, >span, >button { display: none; }
-      >section {
+      > i, 
+      > span, 
+      > button { 
+        display: none; 
+      }
+      > section {
         padding: 1em;
-        >section >article {
+        > section > article {
           display: inline-grid;
           grid-auto-flow: row;
           grid-gap: 12px;
@@ -2156,18 +2128,83 @@ export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
         display:none;
       }
     }
+    &.is-active {
+      @keyframes droptoup {
+        50% { 
+          bottom: -100px; 
+        }
+        50% { 
+          bottom: -50px; 
+        }
+        100% { 
+          bottom: 0px; 
+        }
+      }
+      &._refMasterTableBulkWrapper {
+        display: grid;
+        left: 0;
+        animation: droptoup .075s linear;
+        bottom: 0;
+        overflow-x: hidden;
+        & + ._refDropdownOverlay {
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: 100;
+          background-color: rgba(0, 0, 0, .1);
+        }
+      }
+    }
   }
-  ${getBulkActionWrapperModifiedStyled}
+  ${({ $isOpen }) => $isOpen && css`
+    transition: bottom .2s;
+    bottom: 0;
+    @media (max-width: 767.9px) {
+      @keyframes droptoup {
+        50% { 
+          bottom: -100px; 
+        }
+        50% { 
+          bottom: -50px; 
+        }
+        100% { 
+          bottom: 0px; 
+        }
+      }
+      &._refMasterTableBulkWrapper {
+        display: grid;
+        left: 0;
+        animation: droptoup .075s linear;
+        bottom: 0;
+        overflow-x: hidden;
+        & + ._refDropdownOverlay {
+          display: block;
+          width: 100%;
+          height: 100%;
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: 100;
+          background-color: rgba(0, 0, 0, .1);
+        }
+      }
+    }
+  `}
 `
 export const InitialContainer = styled.span`
-  ${initialStyles}
+  height: 32px;
+  background-color: #000;
   align-items: center;
   display: grid;
   color: #fff;
-  text-align: center;
+  text-align: center !important;
   border-radius: var(--ter-rd);
+  width: 100%;
 `
-export const MasterTableActionWrapper = styled.section<{ $mode?: string }>`
+export const MasterTableActionWrapper = styled.section<{ $mode?: 'picklist' }>`
   height: 35px;
   border-bottom: 1px solid var(--tab-clr-ln);
   background-color: var(--pri-clr-bg);
@@ -2181,20 +2218,16 @@ export const MasterTableActionWrapper = styled.section<{ $mode?: string }>`
       grid-gap: 5px;
     }
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'picklist') {
-      return css` 
-        background-color: var(--ter-clr-bg);
-        border-top: 1px solid var(--tab-clr-ln);
-        height: 50px;
-        > div {
-          height: 50px !important;
-        }
-      `
+  ${({ $mode }) => $mode === 'picklist' && css`
+    background-color: var(--ter-clr-bg);
+    border-top: 1px solid var(--tab-clr-ln);
+    height: 50px;
+    > div {
+      height: 50px !important;
     }
-  }}
+  `}
 `
-export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>` 
+export const FigureWraper = styled.figure<{ $size?: string }>` 
   margin: 0;
   position: relative;
   overflow: hidden;
@@ -2210,16 +2243,11 @@ export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>`
     height: 100%;
     background-color: var(--pri-clr-bg);
   }
-  ${({ $size }:{ $size?: string }) => {
-    let style = ``;
-    if ($size) {
-      style += ` 
-        width: ${$size};  
-        height: ${$size};
-      `
-    }
-    return style;
-  }}
+
+  ${({ $size }) => $size && css`
+    width:${$size}; 
+    height:${$size};
+  `}
 `
 export const PanelBody = styled.section`
   height: 100%;
@@ -2260,10 +2288,13 @@ export const RightPanelContainer = styled.section`
 `
 export const SearchFormWrapper = styled.div<{ $mode?: string }>`
   position: relative;
+  input[name='search'] {
+    font-size: 13px;
+  }
   i {
     position: absolute;
-    left: 12px;
     top: 6px;
+    left: 12px;
     pointer-events: none;
     z-index: 1;
     &:last-child {
@@ -2298,8 +2329,6 @@ export const SearchFormWrapper = styled.div<{ $mode?: string }>`
       `
     }
   }}
-  
-  
 `
 export const TableHeadLabel = styled.span` 
   color: var(--mt-clr);
@@ -2310,6 +2339,7 @@ export const TableHeadLabel = styled.span`
     display: inline-block;
     vertical-align: text-top;
     margin-left: 2px;
+    margin-top: 3px;
   }
   dt {
     display: inline;
@@ -2444,7 +2474,6 @@ export const TabsHeader = styled.article`
 `
 export const TabsItem = styled.div<{ $activated?: boolean }>`
   cursor: pointer;
-  letter-spacing: 0.6px;
   position: relative;
   padding: 9px;
   color: ${({ $activated }:{ $activated?: boolean }) => $activated ? 'var(--sec-clr-lnk__hvr)' : 'var(--pri-clr-lnk)'};
@@ -2479,9 +2508,9 @@ export const TabsWrapper = styled.section<{ $mode?: string }>`
   overflow: auto;
   &.is-sticky {
     position: fixed; 
-    top: 0;
-    z-index: 9;
-    background-color:#FFF;
+    top: 48px;
+    z-index: 9; 
+    background-color: var(--sec-clr-bg);
     & + div {
       margin-top: 40px;
     }
@@ -2489,14 +2518,26 @@ export const TabsWrapper = styled.section<{ $mode?: string }>`
       position: relative;
       z-index: 10;
     }
-    @media only screen and (min-width: 768px) {
-      top: 50px;
+    @media only screen and (min-width: 1280px) {
+      width: calc(100vw - 187px);
+      left: 202px;
+    }
+    @media only screen and (min-width: 1366px) {
+      width: calc(100vw - 220px);
+      left: 220px;
+    }
+    @media only screen and (min-width: 1800px) {
+      padding: 0 20px 0 28px;
     }
   }
   ${getTabsWrapperModFunc}
 `
 export const TableItemColumn = styled.div<{ $mode?: string }>` 
   display: grid;
+  &._refFooterContainer {
+    font-weight: 600;
+    border-top: 1px solid var(--pri-clr-ln);
+  }
   > div {
     padding: 10px 0;
     &:last-child {
@@ -2514,16 +2555,9 @@ export const TableItemColumn = styled.div<{ $mode?: string }>`
     }
     &.cell-action {
       display: grid;
+      grid-gap: 4px;
       align-items: start;
-    }
-  }
-  &._refFooterContainer {
-    font-weight: 600;
-    border-top: 1px solid var(--pri-clr-ln);
-  }
-  &._refItemContainer {
-    ${TableColumnGroup} {
-      grid-gap: 10px;
+      align-content: start;
     }
   }
   ${getTableItemModFunc}
@@ -2634,15 +2668,17 @@ export const CollapseContainer = styled.div<{ $mode?: 'nav' }>`
   `}
 `
 export const PaginationContainer = styled.div`
-  margin: 10px auto;
+  margin: 9px auto 10px;
   display: inline-grid;
   width: 100%;
   grid-gap: 12px;
+  padding: 8px 0 8px;
   @media only screen and (min-width: 768px) {
-    margin: 20px auto 60px;
+    margin: 9px auto 30px;
+    padding: 16px 0 16px;
   }
 `
-export const PageWrapper = styled.div<{ $mode?: string }>`
+export const PageWrapper = styled.div<{ $mode?: 'noPageOption' }>`
   display: grid;
   grid-auto-flow: row;
   grid-gap: 10px;
@@ -2677,9 +2713,15 @@ export const PageWrapper = styled.div<{ $mode?: string }>`
       justify-content: start;
     }
   }
-  ${getPageWrapperModFunc}
+  ${({ $mode }) => $mode === 'noPageOption' && css`
+    @media only screen and (min-width: 768px) {
+      > div:first-child {
+        justify-content: center;
+      }
+    }
+  `}
 `
-export const PageButton = styled.div<{ $activated?: boolean, $disabled?: boolean }>`
+export const PageButton = styled.div<{ $activated?: boolean, disabled?: boolean }>`
   display: grid;
   justify-content: center;
   align-content: center;
@@ -2687,10 +2729,6 @@ export const PageButton = styled.div<{ $activated?: boolean, $disabled?: boolean
   height: 28px;
   width: auto;
   min-width: 28px;
-  border: 1px solid var(--ck-clr-ln);
-  cursor: pointer;
-  border-radius: var(--ter-rd);
-  box-shadow: none;
   ${buttonStyle}
   &:hover {
     ${buttonHoverStyle}
@@ -2701,7 +2739,19 @@ export const PageButton = styled.div<{ $activated?: boolean, $disabled?: boolean
   i {
     margin-top: -3px;
   }
-  ${getPageButtonModFunc}
+
+  ${({ $activated }) => $activated && css`
+    ${buttonActiveStyle}
+  `}
+
+  ${({ disabled }) => disabled && css`
+    &, &:hover {
+      background: var(--mt-clr-bg);
+      border-color: var(--ck-clr-ln);
+      opacity: .5;
+      cursor: default;
+    }
+  `}
 `
 export const PageLabel = styled.span`
   font-size: 12px;
@@ -2739,7 +2789,7 @@ export const FilterContainer = styled.article`
     justify-content: left;
   }
 `
-export const SearchFilterContainer = styled.div<{ $mode?: string }>` 
+export const SearchFilterContainer = styled.div<{ $mode?: 'detail' }>` 
   width: 100%;
   margin-bottom: 16px !important;
   > article {
@@ -2759,9 +2809,11 @@ export const SearchFilterContainer = styled.div<{ $mode?: string }>`
       justify-items: unset;
     }
   } 
-  ${getSearchFilterContainerModFunc}
+  ${({ $mode }) => $mode === 'detail' && css`
+    padding-bottom: 10px;
+  `}
 `
-export const SearchWrapper = styled.div<{ width?: string }>`
+export const SearchWrapper = styled.div<{ $width?: string }>`
   display: grid;
   grid-template-columns: 148px 1fr;
   position: relative;
@@ -2792,7 +2844,17 @@ export const SearchWrapper = styled.div<{ width?: string }>`
   @media only screen and (min-width: 1366px) {
     width: 400px;
   }
-  ${getSearchWrapperModFunc}
+  ${({ $width }) => {
+    if ($width) {
+      const _width = $width ? parseInt($width) : 0;
+      return css`
+        grid-template-columns: ${(_width)+'px'} 1fr;
+        button {
+          width: ${$width};
+        }
+      `
+    }
+  }}
 `
 export const ButtonGroup = styled.div` 
   position: relative;
@@ -2807,16 +2869,28 @@ export const ButtonGroup = styled.div`
     color: var(--mt-clr);
     padding: 0 12px;
   }
-  > button , 
+  > button, 
   ._refContainer {
     border-right: 1px solid var(--sec-clr-ln);
-    &:last-child {
+    &:last-child{
       border-right: 0;
     }
   }
   ._refContainer {
     max-width: 200px;
   }
+  @media only screen and (min-width: 768px) {
+    > button {
+      padding: 0 10px;
+      font-size: 13px;
+    }
+  }
+  @media only screen and (min-width: 1280px) {
+    > button {
+      padding: 0 12px;
+      font-size: var(--pri-ft-sz);
+    }
+  }
 `
 export const FilterWrapper = styled.section` 
   display: inline-block;
@@ -2856,6 +2930,10 @@ export const FilterWrapper = styled.section`
         max-width: 100%;
       }
     }
+    > div:nth-child(n+2) {
+      display: inline-block;
+      width: 48.35% !important;
+    }
     > article {
       float: left
     }
@@ -2869,7 +2947,7 @@ export const FilterWrapper = styled.section`
     margin-top: 0;
     padding-left: 8px;
     grid-auto-flow: column;
-    grid-gap: 10px;
+    grid-gap: 8px;
     display: grid;
     > section {
       width: auto !important;
@@ -2879,6 +2957,9 @@ export const FilterWrapper = styled.section`
       align-items: center;
       margin-top: 0px;
     }
+    &:first-child { 
+      padding-left: 0;
+    }
     ${ButtonGroup} {
       margin-bottom: 0;
     }
@@ -2886,27 +2967,482 @@ export const FilterWrapper = styled.section`
 `
 export const ListTableContainer = styled.div` 
   display: grid;
-  grid-gap: 16px;
   padding: 0 .625em 10px;
-  overflow: hidden;
   @media only screen and (min-width: 375px) {
-    padding: 0 16px 10px;
+    padding: 0 20px;
   }
   @media only screen and (min-width: 1024px) {
     padding: 0;
   }
+  @media only screen and (min-width: 1800px) {
+    padding: 0 16px 0 9px;
+  }
 `
 export const ItemTable = styled.section``
-export const ListTable = styled.main<{ $mode?: string }>` 
+
+const overflowStyle = css`
+  overflow: hidden;
+  > div {
+    overflow: auto;
+  }
+  @media only screen and (min-width: 1024px) {
+    > div {
+      margin: 0px 9px 0px 9px;
+    }
+  }
+`
+const overflowItemTableStyle = css`
+  width: 100%;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  grid-gap: 0;
+  &[role=rowheader] > div[role=group], 
+  &[role=row] > div[role=group], 
+  &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+  &[role=row] > div[role=cellgroup], 
+  ._refCollapse > div:not(._refCollapseContainer), 
+  ._refCollapseContainer > div {
+    display: flex;
+    flex: 2;
+    grid-gap: 0;
+  }
+  &[role=row] > div[role=cellgroup] {
+    flex-direction: column;
+  }
+  &[role=rowheader] > div[role=columnheader],
+  &[role=rowheader] > div[role=group] > div[role=cell],
+  &[role=row] > div[role=cell],
+  &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+  ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+  ._refCollapseContainer > div > div[role=cell]  {
+    align-self: stretch;
+    width: 100%;
+  }
+  &[role=rowheader] > div[role=columnheader], 
+  &[role=rowheader] > div[role=group] > div[role=cell] {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid var(--ter-clr-ln);
+  }
+  &[role=row] > div[role=cell],
+  &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+  ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+  ._refCollapseContainer > div > div[role=cell]  {
+    padding-top: 1.25em;
+    padding-bottom: 1.25em;
+  }
+  &[role=rowheader], &[role=row] {
+    padding: 0;
+    margin: 0;
+    > div {
+      padding-right: 12px;
+      &:first-child {
+        padding-left: 0;
+      } 
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+  &[role=rowheader] > div[role=group] > div[role=cell], &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell] {
+    padding-right: 12px;
+    &:last-child {
+
+    }
+  }
+  &[role=rowheader] {
+    border: none;
+  }
+  &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+  ._refCollapse > div, ._refCollapseContainer > div {
+    padding-bottom: 0;
+    padding-top: 0;
+    &:nth-child(n+2) {
+      padding-top: 0;
+    }
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  @media only screen and (min-width: 1024px) {
+    &[role=rowheader], &[role=row] {
+      > div {
+        &:first-child {
+          padding-left: 9px;
+        } 
+        &:last-child {
+          padding-right: 9px;
+        }
+      }
+    }
+  }
+`
+const listTableStyles = {
+  item: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) var(--time) minmax(88px, auto);
+      &[role=rowheader] > div[role=group], 
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(--price) var(--status-big);
+      }
+      input[name=checkbox-list] {
+        & + span { 
+          top: 8px;
+        }
+      }
+    }
+  `,
+  listing: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) minmax(88px, auto);
+      &[role=rowheader] > div[role=group], 
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        grid-template-columns: var(--variant) var(--sku) var(--sku) minmax(95px, 115px) var(--price) var(--status-small);
+      }
+      input[name=checkbox-list] {
+        & + span { 
+          top: 8px;
+        }
+      }
+    }
+  `,
+  quantity: css`
+    ${overflowStyle}
+    ${ItemTable} {
+      ${overflowItemTableStyle}
+      .column-product {
+        min-width: calc(var(--item-min) + 25px);
+        max-width: calc(var(--item-max) + 25px);
+        flex: 1;
+      }
+      .column-master-sku {
+        min-width: calc(var(--sku-min) + 12px);
+        max-width: calc(var(--sku-max) + 12px);
+        flex: 1;
+      }
+      .column-warehouse {
+        min-width: calc(var(--warehouse-min) + 12px);
+        max-width: calc(var(--warehouse-max) + 12px);
+        flex: 3;
+      }
+      .column-on-hand-total {
+        min-width: 87px;
+        max-width: 97px;
+        flex: 2;
+      }
+      .column-on-hand-damage {
+        min-width: 97px;
+        max-width: 102px;
+        flex: 2;
+      }
+      .column-on-hand-normal {
+        min-width: 97px;
+        max-width: 102px;
+        flex: 2;
+      }
+      .column-reserved-orders {
+        min-width: 87px;
+        max-width: 97px;
+        flex: 2;
+      }
+      .column-picked {
+        min-width: 87px;
+        max-width: 97px;
+        flex: 2;
+      }
+      .column-packed {
+        min-width: 87px;
+        max-width: 97px;
+        flex: 2;
+      }
+      .column-handover {
+        min-width: calc(var(--qty-big-min) + 12px);
+        max-width: calc(var(--qty-big-max) + 12px);
+        flex: 2;
+      }
+      .column-promotion-allocation {
+        min-width: calc(var(--qty-big-min) + 12px);
+        max-width: calc(var(--qty-big-max) + 12px);
+        flex: 2;
+      }
+      .column-available-to-sell {
+        min-width: 95px;
+        max-width: 97px;
+        flex: 2;
+      }
+      .column-in-transit {
+        min-width: 95px;
+        max-width: 105px;
+        flex: 2;
+      }
+      .column-waiting-inbound {
+        min-width: 95px;
+        max-width: 98px;
+        flex: 2;
+      }
+      .column-inbounded {
+        min-width: 110px;
+        max-width: 115px;
+        flex: 2;
+      }
+      .column-waiting-outbound {
+        min-width: 110px;
+        max-width: 112px;
+        flex: 2;
+      }
+      .column-last-updated {
+        min-width: calc(var(--time-min) + 12px);
+        max-width: calc(var(--time-max) + 12px);
+        flex: 2;
+      }
+      .column-actions {
+        min-width: 96px;
+        flex: 1;
+        padding-right: 12px !important;
+      }
+    }
+  `,
+  picklist: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--ref) var(--time) minmax(185px, auto);
+    }
+  `,
+  package: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--person) var(--ref) var(--time) minmax(110px, auto);
+    }
+  `,
+  shipment: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--time) var(--id-big) var(--status) minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 160px) var(--ref) minmax(140px, auto);
+    }
+  `,
+  invoice: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--id-big) var(--status-small) var(--store) var(--price) var(--price) var(--ref) var(--person) var(--time) minmax(180px, auto);
+      @media only screen and (max-width: 1279px) {
+        width: unset;
+      }
+    }
+  `,
+  'payment-receive': css`
+    ${ItemTable} {
+      grid-template-columns: var(--time) 155px var(--person) var(--qty) var(--price) minmax(110px, auto);
+    }
+  `,
+  'sales-return': css`
+    ${ItemTable} {
+      grid-template-columns: var(--id-big) var(--status) var(--warehouse) var(--person) var(--person) var(--ref-big) var(--time) minmax(120px, auto);
+    }
+  `,
+  activity: css`
+    ${ItemTable} {
+      grid-template-columns: var(--time) var(--id-big) var(--item) var(--status) var(--email) var(--status)  var(--status) minmax(110px, auto);
+    }
+  `,
+  putaway: css`
+    ${ItemTable} {
+      grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) var(--person) var(--time) minmax(60px, auto);
+    }
+  `,
+  inbound: css`
+    ${ItemTable} {
+      grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 160px) var(--person) var(--time) minmax(170px, auto);
+    }
+  `,
+  lowstock: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) var(--item) var(--variant) var(--sku) var(--warehouse) var(--qty-big) var(--statusnow) var(--time) minmax(60px, auto);
+    }
+  `,
+  price: css`
+    ${ItemTable} {
+      grid-template-columns: var(--time) var(--id-big) var(--status) var(--qty) var(--email) var(--status) minmax(60px, auto);
+    }
+  `,
+  'stock-adjustment': css`
+    ${ItemTable} {
+      grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 150px) var(--person) var(--time) minmax(160px, auto);
+    }
+  `,
+  'stock-outbound': css`
+    ${ItemTable} {
+      grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(150px,160px) var(--person) var(--time) minmax(160px, auto);
+    }
+  `,
+  'stock-transfer': css`
+    ${ItemTable} {
+      grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(--warehouse) minmax(90px, 100px) var(--person) var(--time) minmax(160px, auto);
+    }
+  `,
+  promotion: css`
+    ${ItemTable} {
+      grid-template-columns: var(--store) var(--id-big) var(--ref-big) minmax(100px,160px) var(--status-small) var(--time) var(--time) minmax(42px, 88px) var(--time) minmax(62px, auto);
+    }
+  `,
+  'stock-history': css`
+    ${ItemTable} {
+      grid-template-columns: minmax(120px, 360px) var(--sku) var(--warehouse) minmax(85px,120px) minmax(105px,190px) var(--qty-small) var(--qty-small) minmax(68px, 100px) var(--time) minmax(75px, 88px);
+      > *:last-child {
+        display: unset;
+        justify-content: unset;
+      }
+      @media only screen and (max-width: 1279px) {
+        width: unset;
+      }
+    }
+  `,
+  'price-history': css`
+    ${ItemTable} {
+      @media only screen and (max-width: 1279px) {
+        width: unset;
+      }
+      > *:last-child {
+        display: unset;
+        justify-content: unset;
+      }
+      grid-template-columns: minmax(110px,146px) minmax(120px,360px) var(--sku) var(--store) minmax(75px,120px) minmax(85px,120px) minmax(75px,120px) minmax(80px,120px) var(--time) var(--status) minmax(75px,88px);
+    }
+  `,
+  turnover: css`
+    ${ItemTable} {
+      @media only screen and (max-width: 1279px) {
+        width: unset;
+      }
+      > *:last-child {
+        display: unset;
+        justify-content: unset;
+      }
+      grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) repeat(4, var(--qty)) minmax(75px,88px);
+    }
+  `,
+  'days-outofstock': css`
+    ${ItemTable} {
+      @media only screen and (max-width: 1279px) {
+        width: unset;
+      }
+      > *:last-child {
+        display: unset;
+        justify-content: unset;
+      }
+      grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) var(--qty-big) var(--qty) var(--qty-big) var(--time) minmax(75px,88px);
+    }
+  `,
+  warehouses: css`
+    ${ItemTable} {
+      grid-template-columns: var(--warehouse) var(--status) var(--id-big) var(--qty-big) var(--time) minmax(110px, auto);
+    }
+  `,
+  archived: css`
+    ${ItemTable} {
+      grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(88px, auto);
+      &[role=rowheader] > div[role=group], 
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        grid-template-columns: var(--sku) var(--item);
+      }
+    }
+  `,
+  order: css`
+    ${ItemTable} {
+      grid-template-columns: var(--checkbox) 118px 90px minmax(auto, max-content);
+      input[name=checkbox-list]{
+        & + span { 
+          top: 8px;
+        }
+      }
+      &[role=rowheader] > div[role=group] {
+        grid-template-columns: var(--order) 40px 80px 80px 88px minmax(145px, auto);
+      }
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        grid-template-columns: var(--order) 40px 80px 80px;
+      }
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div, 
+      ._refCollapseContainer > div {
+        &:nth-child(n+2) {
+          border-top: none;
+        }
+      }
+    }
+    @media only screen and (min-width: 1280px) {
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) 118px 118px minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 40px 80px 80px 107px minmax(145px, auto);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 40px 80px 80px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1366px) {
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) 120px 118px minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 40px 90px 80px 130px minmax(150px, auto);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 40px 90px 80px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1800px) {
+      ${ItemTable} {
+        grid-template-columns: var(--checkbox) minmax(125px, 170px) minmax(85px, 145px) minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 50px 110px 130px 130px minmax(50px, 2000px);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 50px 110px 130px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1920px) {
+      ${ItemTable} {
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 50px 110px 145px 130px minmax(50px, 2000px);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 50px 110px 145px;
+        }
+      }
+    }
+  `,
+  'table-customheader': css`
+    ${overflowStyle}
+    ${ItemTable} {
+      ${overflowItemTableStyle}
+      > *:last-child {
+        display: block;
+        justify-content: inherit;
+      }
+    }
+  `,
+} as const
+export const ListTable = styled.main<{ $mode?: ModeListTableColumn }>` 
   position: relative;
   width: 100%;
   overflow-x: auto;
   ${ItemTable} {
-    width: calc(100% - 19px);
+    padding: 8px 0 8px 0;
+    width: calc(100% - 20px);
     min-width: 975px;
     border-bottom: 1px solid var(--ter-clr-ln);
-    margin: 9px 9px 9px 10px;
-    padding: 16px 12px 16px 19px;
     display: inline-grid;
     grid-gap: 12px;
     align-items: start;
@@ -2918,12 +3454,11 @@ export const ListTable = styled.main<{ $mode?: string }>`
       align-items: start;
       grid-gap: 12px;
     }
-    &[role=rowheader], 
-    &:nth-child(2) {
+    &[role=rowheader], &:nth-child(2) {
       border-top: 0;
     }
     &[role=rowheader] {
-      padding: 18px 12px 18px 19px;
+      padding: 1em 0 1em 0;
       border-bottom: 1px solid #e8e8ec;
       color: var(--mt-clr);
       position: relative;
@@ -2933,40 +3468,45 @@ export const ListTable = styled.main<{ $mode?: string }>`
       font-size: .875rem;
     }
     &[role=row] {
-      margin-top: 0;
-      margin-bottom: 0;
+      padding: 1.25em 0 1.25em 0;
     }
     &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
     ._refCollapse > div, 
     ._refCollapseContainer > div {
-      padding-bottom: 1em;
       &:nth-child(n+2) {
         border-top: 1px solid rgba(227, 227, 227, .7);
         padding-top: 16px;
       }
-      &:last-child {
-        padding-bottom: 0;
-      }
     }
-    > *:last-child {
-      display: grid;
-      justify-content: end;
+    ._refCollapseContainer {
+      padding-bottom: 0;
     }
     input[name=checkbox-selectAll]  {
       & + span { 
         top: 50%; 
       }
     }
-    input[name=checkbox-list] {
+    input[name=checkbox-list]{
       & + span { 
         top: 0;
       }
     }
-    ._refCollapseContainer {
-      padding-bottom: 0;
+    > *:last-child {
+      display: grid;
+      justify-content: end;
     }
   }
-  ${getListTableFunc}
+  @media only screen and (min-width: 1024px) {
+    ${ItemTable} {
+      &[role=rowheader], 
+      &[role=row] {
+        margin: 0 10px;
+        padding-left: 9px; 
+        padding-right: 9px;
+      }
+    }
+  }
+  ${({ $mode }) => $mode && $mode in listTableStyles ? listTableStyles[$mode] : ''}
 `
 export const DateWrapper = styled.div`
   display: grid;
@@ -2998,13 +3538,13 @@ export const DropdownTitle = styled.div`
     font-style: normal; 
   }
 `
-export const DropdownList = styled.ul<{ $mode?: string }>` 
+export const DropdownList = styled.ul<{ $mode?: 'no-border' }>` 
   ${clearList}
   max-height: 44vh;
   overflow: auto;
   > li {
     padding: 8px 1em;
-    border-bottom: ${({ $mode }:{ $mode?: string }) => $mode === 'no-border' ? 'none' : '1px solid var(--pri-clr-ln)'};
+    border-bottom: ${({ $mode }:{ $mode?: 'no-border' }) => $mode === 'no-border' ? 'none' : '1px solid var(--pri-clr-ln)'};
     &:last-child {
       border-bottom: 0;
     }
@@ -3013,7 +3553,7 @@ export const DropdownList = styled.ul<{ $mode?: string }>`
     max-height: 50vh;
   }
 `
-export const DropdownItem = styled.li<{ $mode?: string }>` 
+export const DropdownItem = styled.li<{ $mode?: 'categories' }>` 
   display: inline-grid;
   width: 100%;
   grid-gap: 10px; 
@@ -3023,60 +3563,84 @@ export const DropdownItem = styled.li<{ $mode?: string }>`
     grid-auto-flow: column;
     grid-template-columns: 100px auto;
   }
-  ${({ $mode }:{ $mode?: string }) => {
-    if ($mode === 'categories') {
-      return css` 
-        grid-auto-flow: column;
-        grid-template-columns: 22px auto;
-        min-height: 33px;
-        align-items: center;
-        grid-gap: 0;
-        > label {
-          cursor: pointer;
-          text-transform: capitalize;
-        }
-        @media only screen and (min-width: 768px) {
-          grid-template-columns: 22px auto;
-        }
-      `
+  ${({ $mode }) => $mode === 'categories' && css`
+    grid-auto-flow: column;
+    grid-template-columns: 22px auto;
+    min-height: 33px;
+    align-items: center;
+    grid-gap: 0;
+    > label {
+      cursor: pointer;
+      text-transform: capitalize;
     }
-  }}
+    @media only screen and (min-width: 768px) {
+      grid-template-columns: 22px auto;
+    }
+  `}
 `
 export const DropdownAction = styled.div` 
   padding: .8em 1em 1em;
   display: grid;
   grid-auto-flow: column;
   justify-content: end;
-  grid-gap: 8px;
+  grid-gap: 4px;
   border-top: 1px solid var(--sec-clr-ln);
 `
 export const FilterList = styled.ul` 
   ${clearList}
 ` 
 export const FilterItem = styled.li` 
-  > input {
-    display: none;
-  }
-  > label {
+  &._refCheckbox {
     display: block;
     float: left;
-    padding: 8px 10px;
     margin-right: 4px;
     margin-bottom: 8px;
-    border: 1px solid transparent;
-    outline: 1px solid transparent;
-    cursor: pointer;
-    font-size: 13px;
+    > label {
+      padding-left: 0 !important;
+      input, span {
+        display: none !important;
+      }
+      aside {
+        padding: 8px 10px;
+        border: 1px solid transparent;
+        outline: 1px solid transparent;
+        cursor: pointer;
+        font-size: 13px;
+      }
+      input:checked~aside {
+        border: 1px solid var(--sel-clr-ln);
+        outline: 1px solid var(--sel-clr-ln);
+        color: var(--ter-clr);
+        border-radius: var(--sec-rd);
+      }
+    }
   }
-  > input:checked + label {
-    border: 1px solid var(--sel-clr-ln);
-    outline: 1px solid var(--sel-clr-ln);
-    color: var(--ter-clr);
-    border-radius: var(--sec-rd);
+  &:not(._refCheckbox) {
+    > input {
+      display: none;
+    }
+    > label {
+      display: block;
+      float: left;
+      padding: 8px 10px;
+      margin-right: 4px;
+      margin-bottom: 8px;
+      border: 1px solid transparent;
+      outline: 1px solid transparent;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    > input:checked + label {
+      border: 1px solid var(--sel-clr-ln);
+      outline: 1px solid var(--sel-clr-ln);
+      color: var(--ter-clr);
+      border-radius: var(--sec-rd);
+    }
   }
 `
 export const FilterListTitle = styled.strong` 
   padding-top: 8px;
+  font-size: 13px;
 `
 export const FilterButton = styled.div` 
   display: grid;
@@ -3084,7 +3648,7 @@ export const FilterButton = styled.div`
   grid-template-columns: 1fr auto;
   gap: 4px;
 `
-export const IconDot = styled.span<{ $mode?: string }>`
+export const IconDot = styled.span<{ $mode?: 'list' | 'header' }>`
   display: grid;
   min-width: 18px;
   height: 18px;
@@ -3096,13 +3660,27 @@ export const IconDot = styled.span<{ $mode?: string }>`
   text-align: center;
   padding: 0px 4px;
   border-radius: var(--ter-rd);
-  ${getIconDotModifiedStyled}
+  ${({ $mode }) => ($mode === 'list' || $mode === 'header') && css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, -50%);
+    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transform-origin: 100% 0%; 
+    ${($mode === 'header') && css`
+      left: unset;
+      right: 0;
+      z-index: 99;
+      transform: scale(1) translate(50%, -50%);
+    `}
+  `}
 `
 export const SortByWrapper = styled.section`
   justify-self: end;
   margin-top: 10px;
   display: grid;
   justify-content: end;
+  max-width: 280px;
   @media only screen and (min-width: 768px) {
     margin-top: 0;
     padding-left: 10px;
@@ -3110,7 +3688,6 @@ export const SortByWrapper = styled.section`
 `
 export const DetailWrapper = styled.section`
   width: 100%;
-  border-top: 1px solid var(--lay-clr-ln);
   padding-bottom: 16px;
   @media only screen and (min-width: 768px) {
     padding-bottom: 16px;
@@ -3120,11 +3697,10 @@ export const DetailWrapper = styled.section`
   }
 `
 export const CardContainer = styled.section`
-  margin-bottom: 16px;
-  background: #FFFFFF;
+  background: var(--ter-clr-bg);
   border: 1px solid rgb(232, 232, 232);
   border-radius: var(--sec-rd);
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   min-height: 72px;
   display: grid;
   align-items: center;
@@ -3133,8 +3709,30 @@ export const CardContainer = styled.section`
     min-height: 92px;
   }
 `
-export const CardWrapper = styled.div<{ $mode?: string }>`
-  ${getCardModFunc}
+const globalEmptyCss = css`
+  text-align: center;
+  color: var(--mt-clr);
+`
+export const CardWrapper = styled.div<{ $mode?: 'empty' | 'empty-invoice' }>`
+  ${({ $mode }) => ($mode === 'empty' || $mode === 'empty-invoice') && css`
+    ${globalEmptyCss}
+  `}
+
+  ${({ $mode }) => $mode === 'empty-invoice' && css`
+    > div {
+      display: grid;
+      align-content: center;
+      grid-gap: 4px;
+      margin: 0 16px;
+    }
+  `}
+
+  ${({ $mode }) => !$mode  && css`
+    width: 958px;
+    @media only screen and (min-width: 1024px) { 
+      width: unset; 
+    }
+  `}
 `
 export const DetailList = styled.ul<{ $mode?: string }>`
   ${clearList}
@@ -3191,6 +3789,7 @@ export const DetailItemInfo = styled.article`
   span {
     text-transform: capitalize;
     overflow-wrap: anywhere;
+    line-height: 16px;
   }
 `
 export const DetailItem = styled.li`
@@ -3225,6 +3824,13 @@ export const DetailItemWrapper = styled.article`
 `
 export const DetailPanelWrapper = styled.section`
   min-height: 66px;
+  padding-left: 10px !important;
+  padding-right: 9px !important;
+  @media only screen and (min-width: 1024px) {
+    > section {
+      margin: 0 10px; 
+    }
+  }
 `
 export const PopupBoxWrapper = styled.article`
   display: grid;
@@ -3255,8 +3861,9 @@ export const CreateContainer = styled.section<{ $mode?: string }>`
   background-color: var(--pri-clr-bg);
   ${getCreateContainerModFunc}
 `
-export const CreateHeaderWrapper = styled.article<{ $mode?: string }>`
-  ${fullGrid}
+export const CreateHeaderWrapper = styled.article<{ $mode?: 'edit-master' }>`
+  display: inline-grid;
+  width: 100%;
   padding: 26px 15px 14px;
   background-color: var(--hd-clr-bg);
   grid-auto-flow: row;
@@ -3265,8 +3872,8 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: string }>`
   article {
     display: grid;
     grid-auto-flow: column;
-    grid-template-columns: 350px 1fr;
-    grid-gap: 10;
+    grid-template-columns: max-content 1fr;
+    grid-gap: 10px;
     align-items: center;
     label { 
       font-weight: 600; 
@@ -3291,10 +3898,14 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: string }>`
       grid-auto-flow: column;
     }
     .title {
-      font-size: 1.5rem;
+      font-size: 30px;
     }
   }
-  ${getCreateHeaderWrapperModFunc} 
+  ${({ $mode }) => $mode === 'edit-master' && css`
+    aside { 
+      grid-template-rows: none; 
+    }
+  `}
 `
 export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string }>`
   padding: 20px 15px;
@@ -3439,7 +4050,7 @@ export const SearchResultList = styled.section`
   overflow-y: auto;
   overflow-x: hidden;
   height: auto;
-  max-height: 300px;
+  max-height: 360px;
 `
 export const SearchResultItem = styled.div`
   border-bottom: 1px solid var(--ter-clr-ln);
@@ -3456,6 +4067,7 @@ export const SearchResultItem = styled.div`
 export const ListAddItemContainer = styled.div`
   overflow: auto;
   height: 400px;
+  font-size: 13px;
 `
 export const SearchWrapperPopup = styled.div`
   position: relative;
@@ -3476,14 +4088,19 @@ export const SearchWrapperPopup = styled.div`
 export const PopupAddProductContainer = styled.section`
   margin-top: 1em;
 ` 
-export const PopupCard = styled.section<{ $mode?: string }>`
+export const PopupCard = styled.section<{ $mode?: 'mass-payment' }>`
   padding: 1em;
   background-color: var(--sec-clr-bg);
   margin-bottom: 1em;
   @media only screen and (min-width: 768px) {
     padding: 1em 120px;
   }
-  ${getPopupCardModFunc}
+  ${({ $mode }) => $mode === 'mass-payment' && css`
+    margin: 0;
+    @media only screen and (min-width: 768px) {
+      padding: 1em 24px;
+    }
+  `}
 `
 export const PopupExportCardWrapper = styled.article`
   display: grid;
@@ -3563,7 +4180,6 @@ export const NavContainerStyles = css`
     }
   }
 `
-
 export const NavContainer = styled.nav`
   ${NavContainerStyles}
 `
@@ -3683,9 +4299,9 @@ export const NavMainItemWrapper = styled.div`
   }
 `
 export const TotalLabel = styled.span`
-  letter-spacing: 1.25px;
-  display: inline;
-`
+  font-weight: 600;
+  padding-top: 6px;
+` 
 export const FilterColumnContainer = styled.section`
   display: grid;
   justify-content: end;