@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {

    /* 基本作業領域 */
    .max-w-base {
        @apply !max-w-[90rem];
    }
    .min-w-base {
        @apply min-w-[76rem];
    }
    .w-base-wrap {
        @apply min-w-[76rem] !max-w-[90rem];
    }
    .modal-inner {
        @apply [&_.w-base-wrap]:!min-w-[60rem];
    }
    /* パンくずリスト */
    .breadcrumbs {
        @apply border-l-4 border-l-primary-900 [&_div]:mt-[-0.0625rem]
        flex items-center whitespace-nowrap px-3 ml-2  text-black 
        [&_a:hover]:underline [&>div]:leading-[1] [&>div]:pt-0.5 [&>div]:pb-1;
    }
    /* 横スクロール領域 */
    .scroll-wrap {
        @apply overflow-auto my-1 [&>div]:min-w-[36rem];
    }
    /* ボックス領域 */
    .box {
        @apply bg-white overflow-hidden shadow-sm rounded-lg p-4;
    }
    /* トグルボックス領域 */
    .toggle-box-base {
        @apply w-base-wrap [&>div>div:last-child]:p-4;
    }

    /* 縦向きフレックス領域 */
    .flex-col-gap {
        @apply flex flex-col gap-4;
    }

    /* オプション付き項目 */
    .item-more {
        @apply flex items-center flex-wrap gap-1
    }
    /* 入力項目 */
    /*
    .input-base__ {
        @apply focus:ring-offset-0 focus:ring-4 outline-none disabled:opacity-50 
         border-secondary-290 focus:border-primary-200 focus:ring-primary-100 ;
    }
    */
    .input-base {
        @apply focus:ring-offset-0 focus:ring-4 outline-none disabled:opacity-50 
         border-secondary-290 focus:border-info-300 focus:ring-info-200 ;
    }
    /* ｜テキスト入力 */ /* pt-0 pb-[0.0625rem] */
    .input-text {
        @apply input-base rounded input-item placeholder:text-xs 
        [&.w-half]:max-w-96 [&.w-half]:w-full [&.datepicker]:w-24 ;
    }
    .input-item {
        @apply px-1.5 pt-0 pb-[0.125rem] text-base placeholder:text-xs ;
    }
    .input-readonly {
        @apply read-only:bg-secondary-50 
        read-only:focus:border-secondary-300 
        read-only:focus:ring-0;
    }
    /* ｜セレクト */
    .input-select {
        @apply input-text !pr-7 !bg-white bg-[right_0.25rem_center];
    }

    /* ｜ラジオボタン・チェックボックス */
    .input-radio {
        @apply input-base w-[1.125rem] h-[1.125rem] bg-secondary-50 text-primary-600;
    }
    .input-check {
        @apply input-base w-[1.125rem] h-[1.125rem] bg-secondary-50 text-primary-600 rounded;
    }
    .item-wrap {
        @apply flex flex-wrap items-center gap-1 max-w-fit min-h-[1.875rem] 
        [&>span]:flex [&>span]:items-center [&>span]:gap-0.5 [&>span]:mr-1.5 [&>span:last-child]:mr-0;
    }
    .item-label {
        @apply block text-secondary-900 ml-[0.2rem] mt-[-0.0625rem] peer-disabled:opacity-50;
    }
    /* ｜ボタン付き入力 */
    .input-button-group {
        @apply flex 
        [&>input]:input-text [&>input]:z-10 [&>input]:!rounded-e-[0] 
        [&>button]:border [&>button]:rounded-e [&>button]:-ml-1
        [&>button]:border-secondary-300 [&>button]:bg-secondary-200
        [&>button]:text-secondary-900 [&>button]:px-2.5
        [&>button:focus]:ring-offset-0 [&>button:focus]:ring-4 [&>button]:outline-none 
        [&>button:focus]:ring-secondary-50 
        [&>button>i]:text-secondary-600 [&>button>i]:text-xs [&>button>i]:py-1;
    }
    /* ｜名称選択・検索ボタン付き入力 */
    .input-search-select {
        @apply flex 
        [&>input]:input-text [&>input]:!rounded-e-[0]
        [&>div]:flex-1 [&>div]:-ml-[0.0625rem]
        [&>div>input]:input-text [&>div>input]:input-readonly 
        [&>div>input]:!rounded-[0]
        [&>div>input]:w-full [&>div>input]:cursor-default
        [&>div>input:read-only:focus]:!border-primary-200 
        [&>div>input:read-only:focus]:!ring-4 
        [&>button:last-child]:-ml-[0.0625rem]
        [&>button:last-child]:rounded-e
        [&>button:last-child]:border-primary-200
        [&>button:last-child]:bg-primary-100 
        [&>button:last-child>i]:text-primary-700
        [&>button]:border [&>button]:-ml-[0.0625rem] [&>button]:px-2
        [&>button:focus]:ring-offset-0 [&>button:focus]:ring-4 [&>button]:outline-none 
        [&>button:focus]:ring-primary-100 
         [&>button>i]:py-1 [&>button>i]:text-xs;
    }
    /* ｜名称選択付き入力 */
    .input-choice-group {
        @apply flex 
        [&>input]:input-text [&>input]:!rounded-e-[0]
        [&>div]:flex-1 [&>div>div>div]:!rounded-s-[0]
        [&>div]:-ml-[0.0625rem] [&>div.choices]:min-w-28
        [&>div.choices]:!leading-[1];
    }
    /* ｜必須マーク */
    .required { 
        @apply after:content-['*'] after:text-xs after:text-red-700 after:font-bold after:ml-1;
    }



    /* ボタン */
    /* ｜－ 基本 */
    .btn-primary {
        /*@apply bg-primary-700 text-white border-transparent hover:bg-primary-800;*/
        @apply bg-primary-700 text-white border-transparent hover:bg-primary-900;
    }
    .btn-secondary {
        @apply bg-secondary-700 text-white border-transparent hover:bg-secondary-800;
    }
    .btn-tertiary {
        @apply bg-tertiary-700 text-white border-transparent hover:bg-tertiary-800;
    }
    .btn-light {
        @apply bg-secondary-600 text-white border-transparent hover:bg-secondary-700;
    }
    .btn-lighter {
        @apply bg-secondary-300 text-black border-transparent hover:bg-secondary-700;
    }
    .btn-warning {
        @apply bg-warning-700 text-white border-transparent hover:bg-warning-800;
    }
    .btn-danger {
        @apply bg-danger-700 text-white border-transparent hover:bg-danger-800;
    }
    /* ｜－ アウトライン */
    .btn-primary-outline {
        /*@apply bg-transparent text-primary-700 border-primary-700 hover:bg-primary-700 hover:text-white;*/
        @apply bg-transparent text-primary-700 border-primary-700 hover:bg-primary-300 hover:text-white;
    }
    .btn-secondary-outline {
        @apply bg-transparent text-secondary-700 border-secondary-700 hover:bg-secondary-700 hover:text-white;
    }

    
    .btn-light-outline {
        @apply bg-transparent text-secondary-700 border-secondary-400 hover:bg-secondary-200 hover:text-secondary-700;
    }
/*
    .btn-light-outline {
        @apply bg-transparent text-secondary-700 border-secondary-400 hover:bg-secondary-200 hover:text-secondary-700;
    }
    .btn-tertiary-outline {
        @apply bg-transparent text-tertiary-700 border-tertiary-700 hover:bg-tertiary-700 hover:text-white;
    }
    .btn-warning-outline {
        @apply bg-transparent text-warning-600 border-warning-600 hover:bg-warning-700 hover:text-white;
    }
*/
    .btn-danger-outline {
        @apply bg-transparent text-danger-700 border-danger-700 hover:bg-danger-700 hover:text-white;
    }
    /* ｜－ ALT */
    .btn-primary-alt {
        @apply bg-primary-200 text-primary-900 border-transparent hover:bg-primary-300;
    }
    .btn-secondary-alt {
        @apply bg-secondary-200 text-secondary-900 border-transparent hover:bg-secondary-300;
    }
    .btn-info-alt {
        @apply bg-info-200 text-info-900 border-transparent hover:bg-info-300;
    }
/*
    .btn-tertiary-alt {
        @apply bg-tertiary-200 text-tertiary-900 border-transparent hover:bg-tertiary-300;
    }
    .btn-warning-alt {
        @apply bg-warning-100 text-warning-900 border-transparent hover:bg-warning-200;
    }
    .btn-danger-alt {
        @apply bg-danger-200 text-danger-900 border-transparent hover:bg-danger-300;
    }
*/
    /* ｜サイズ・かたち */
    .btn-base {
        @apply inline-flex items-center border transition ease-in-out duration-150 
             disabled:opacity-50 disabled:pointer-events-none [&_i]:opacity-50;
    }
    /* ｜－ メインボタン */
    .btn-main {
        @apply px-[0.6rem] py-[0.25rem] rounded-[0.325rem] [&>.button-inline-x]:gap-1 text-sm;
    }
    /* ｜－ サブボタン */
    .btn-sub {
        @apply px-1.5 py-[0.25rem] rounded-[0.325rem] [&>.button-inline-x]:gap-0.5 text-sm;
    }
    /* ｜－ リスト内ボタン */
    .btn-table {
        @apply px-1 py-[0.25rem] rounded-[0.25rem] [&>.button-inline-x]:gap-0.5 text-sm;
    }
    /* ｜－ モーダル内ボタン */
    .btn-modal {
        @apply px-1.5 py-1.5 rounded-[0.3rem] [&>.button-inline-x]:gap-0.5 text-xs;
    }
    /*｜－ アイコンボタン */
    .btn-circle {
        @apply w-[1.4rem] h-[1.4rem] [&_i]:text-xs rounded-full;
    }
    /*｜－ アイコンボタン */
    .btn-rectangle {
        @apply w-[1.4rem] h-[1.4rem] [&>span]:px-[0.1875rem] 
        [&>span:not(.flex)]:text-sm [&>span:not(.flex)]:opacity-90
        [&>span:not(.flex)]:mt-[-0.125rem] [&>span.flex]:mt-0
        [&_i]:text-xs rounded;
    }


    .entry-item {
        @apply 
       [&>label]:text-secondary-800
       [&>label]:text-sm;
    }

    .modal-inner{
        @apply 
       [&_div.modal-overlay]:!bg-black/20 [&_div.modal-overlay]:rounded-lg [&_div.modal-overlay]:my-2
    }

    /* 詳細テーブル */
    .table-base {
        @apply border-collapse border-spacing-0 table-fixed w-full 
        [&>tbody>tr>th]:border [&>tbody>tr>th]:border-secondary-250 [&>tbody>tr>th]:px-2.5 
        [&>tbody>tr>th]:font-normal [&>tbody>tr>th]:text-left [&>tbody>tr>th]:bg-secondary-50 
        [&>tbody>tr>td]:border [&>tbody>tr>td]:border-secondary-250 [&>tbody>tr>td]:px-2.5
    }
   
    /* データリスト */
    /* |基本リスト */
    .list-table {
        @apply border-collapse border-spacing-0 table-fixed w-full min-w-fit 
        [&>thead>tr>th]:bg-secondary-50 [&>thead>tr>th]:font-normal
        [&>thead>tr>th]:border [&>thead>tr>th]:border-secondary-250 
        [&>tbody>tr>td]:border [&>tbody>tr>td]:border-secondary-250
        [&>thead>tr>th]:pb-1.5 [&>thead>tr>th]:py-1 
        [&>tbody>tr>td]:pb-1.5 [&>tbody>tr>td]:py-1 [&>tbody>tr>td]:px-1.5 
        [&>tbody>tr>td.readonly]:bg-secondary-50;
    }
    /* |モーダル内基本リスト */
    .modal-list-table {
        @apply list-table [&>thead>tr>th]:text-sm 
        [&>thead>tr>th]:pb-1 [&>thead>tr>th]:pt-0.5 
        [&>tbody>tr>td]:pb-1 [&>tbody>tr>td]:pt-[0.1875rem];
    }
    /* |入力エリア内テーブル */
    .entry-list-table {
        @apply list-table
        [&>thead>tr>th]:text-sm [&>tbody>tr>td]:text-sm;
    }
    /* |ソート用リスト */
    .list-table-order {
        @apply list-table
        [&>tbody>tr:first-child>td:last-child>button:first-child]:invisible 
        [&>tbody>tr:last-child>td:last-child>button:last-child]:invisible
        [&>tbody>tr:hover>td]:bg-primary-50
        [&>tbody>tr:active>td]:!bg-primary-100
    }
    .list-table-sort {
        @apply [&>thead>tr>th]:text-sm  ;
    }

    /* |タイトル・最初＋最後の列（ID＋アクション）を固定 */
    .list-table-fixed {
        @apply list-table-fixed-base 
        [&>tbody>tr:hover>td]:!bg-secondary-300
        sm:list-table-fixed-first-col sm:list-table-fixed-last-col
        [&>thead>tr>th]:px-1.5 [&>thead>tr>th]:pt-0.5 [&>thead>tr>th]:pb-1 
        [&>tbody>tr>td:not(:last-child)]:px-1.5
        [&>tbody>tr>td:not(:last-child)]:pb-1 
        [&>tbody>tr>td:last-child]:px-2
        [&>tbody>tr>td:last-child]:py-1;
    }
    /* |タイトルのみ固定 */
    .list-table-fixed-base {
        @apply border-separate border-spacing-0 table-fixed w-full min-w-fit 
        [&>thead]:sticky [&>thead]:top-0 [&>thead]:left-0
        [&>thead]:z-[11] [&>thead]:bg-secondary-50
        [&>thead>tr:first-child>th]:border-t 
        [&>thead>tr:first-child>th]:border-t-secondary-250
        [&>thead>tr:first-child>th:first-child]:border-l 
        [&>tbody>tr>td:first-child]:border-l 
        [&>thead>tr:first-child>th:first-child]:border-l-secondary-250 
        [&>tbody>tr>td]:border-l-secondary-250
        [&>thead>tr>th]:bg-secondary-50 [&>thead>tr>th]:font-normal
        [&>thead>tr>th]:border-r [&>thead>tr>th]:border-r-secondary-250 
        [&>thead>tr>th]:border-b [&>thead>tr>th]:border-b-secondary-250 
        [&>tbody>tr>td]:border-r [&>tbody>tr>td]:border-r-secondary-250 
        [&>tbody>tr>td]:border-b [&>tbody>tr>td]:border-b-secondary-250; 
    }
    /* |チェック選択リスト */
    .list-table-fixed-checks {
        @apply list-table-fixed-base sm:list-table-fixed-first-col
        [&>thead>tr>th]:px-1.5 [&>thead>tr>th]:pt-0.5 [&>thead>tr>th]:pb-1 
        [&>tbody>tr>td:not(:first-child)]:px-1.5
        [&>tbody>tr>td:not(:first-child)]:pb-1 
        [&>tbody>tr>td:first-child]:px-2
        [&>tbody>tr>td:first-child]:py-0.5;
    }
    /* |最初の列を固定 */
    .list-table-fixed-first-col {
        @apply [&>thead>tr>th:first-child]:sticky 
        [&>thead>tr>th:first-child]:top-0 
        [&>thead>tr>th:first-child]:left-0 
        [&>thead>tr>th:first-child]:z-[11] 
        [&>thead>tr>th:first-child]:bg-secondary-50 
        [&>tbody>tr>td:first-child]:sticky 
        [&>tbody>tr>td:first-child]:top-0
        [&>tbody>tr>td:first-child]:left-0
        [&>tbody>tr>td:first-child]:z-10
        [&>tbody>tr>td:first-child]:bg-white;
    }
    /* |最後の列を固定 */
    .list-table-fixed-last-col {
        @apply [&>thead>tr>th:last-child]:sticky 
        [&>thead>tr>th:last-child]:top-0 
        [&>thead>tr>th:last-child]:right-0 
        [&>thead>tr>th:last-child]:z-[11] 
        [&>thead>tr>th:last-child]:bg-secondary-50 
        [&>thead>tr>th:last-child]:border-l 
        [&>thead>tr>th:last-child]:border-b-secondary-250 
        [&>thead>tr>th:nth-last-child(2)]:border-r-0 
        [&>tbody>tr>td:last-child]:sticky 
        [&>tbody>tr>td:last-child]:top-0
        [&>tbody>tr>td:last-child]:right-0
        [&>tbody>tr>td:last-child]:z-10
        [&>tbody>tr>td:last-child]:bg-white 
        [&>tbody>tr>td:last-child]:border-l 
        [&>tbody>tr>td:last-child]:border-b-secondary-250 
        [&>tbody>tr>td:nth-last-child(2)]:border-r-0;
    }
    /* |保存検索リスト */
    .list-report {
        @apply border-collapse border-spacing-0 table-fixed min-w-fit 
        [&>thead>tr>th]:bg-secondary-50 [&>thead>tr>th]:font-normal
        [&>tbody>tr>td]:bg-white
        [&>thead>tr>th]:border [&>thead>tr>th]:border-secondary-250 
        [&>tbody>tr>td]:border [&>tbody>tr>td]:border-secondary-250
        [&>thead>tr>th]:pb-1.5 [&>thead>tr>th]:py-1 
        [&>tbody>tr>td]:pb-1.5 [&>tbody>tr>td]:py-1 [&>tbody>tr>td]:px-1.5 ; 
    }

    
    /* 検索条件 */
    /* ｜検索グリッド（縦３列構成） */
    .search-grid {
        @apply flex flex-col gap-2 p-2
        [&>div]:grid [&>div]:grid-cols-3  [&>div]:gap-10
        [&>div>div]:flex [&>div>div]:items-center 
        [&>div>div>label]:w-24 [&>div>div>label]:text-sm
        [&>div>div>div]:flex-1;
    }
    /* ｜検索グリッド（縦４列構成） */
    .search-grid-col-4 {
        @apply search-grid [&>div]:grid-cols-4 [&>div>div>label]:w-20
    }
    /* ｜検索グリッド（縦２列構成） */
    .search-grid-col-2 {
        @apply search-grid [&>div]:grid-cols-2 [&>div>div>label]:w-20
    }
    /* ｜検索テーブル｜モーダル */
    .search-table {
        @apply table-base [&>tbody>tr>td]:py-2 
        [&>tbody>tr>th]:text-base 
        [&>tbody>tr>th]:w-28 [&>tbody>tr>td]:min-w-[20rem];
    }
    
    /* ｜基本構成 */
    .entry-base {
        @apply 
       [&_div.entry]:flex [&_div.entry]:gap-10 
       [&_div.entry]:px-5 [&_div.entry]:pt-3 [&_div.entry]:pb-5
       [&_div.entry>div>div]:entry-item
       [&_div.entry>div>div]:pb-0.5
       [&_div.entry_div.block-box>div>div]:entry-item
       [&_div.entry_div.block-box>div>div]:pb-0.5;
    }
    /* ｜4列構成 */
    .entry-base-4 {
        @apply entry-base !w-base-wrap 
       [&_div.entry>div]:w-1/4;
    }
    /* ｜2列構成 */
    .entry-base-2 {
        @apply entry-base !w-base-wrap 
       [&_div.entry>div]:w-1/2 
       [&_div.check-flag]:-mt-0.5 [&_div.check-flag]:border-b;
    }

    /* 伝票入力 */

    /* ｜サマリー表 */
    .slip-summary {
        @apply border-separate  border-spacing-0  
        rounded-md w-full border-secondary-290

        [&>tbody>tr>th]:border-x [&>tbody>tr>th]:border-t 
        [&>tbody>tr>th]:border-secondary-290
        [&>tbody>tr>th]:bg-secondary-50
        [&>tbody>tr>th]:pt-1 [&>tbody>tr>th]:pb-1.5 [&>tbody>tr>th]:px-3 
        [&>tbody>tr>th]:text-left
        [&>tbody>tr>th]:font-normal [&>tbody>tr>th]:w-32

        [&>tbody>tr>td]:border-r [&>tbody>tr>td]:border-t
        [&>tbody>tr>td]:border-secondary-290
        [&>tbody>tr>td]:pt-1 [&>tbody>tr>td]:pb-1.5 [&>tbody>tr>td]:px-3 
        [&>tbody>tr>td]:text-right
        
        [&>tfoot>tr>th]:border 
        [&>tfoot>tr>th]:border-secondary-290
        [&>tfoot>tr>th]:border-t-secondary-290
        [&>tfoot>tr>th]:bg-secondary-245 [&>tfoot>tr>th]:text-secondary-900
        [&>tfoot>tr>th]:pt-1 [&>tfoot>tr>th]:pb-1.5 [&>tfoot>tr>th]:px-3 
        [&>tfoot>tr>th]:text-left 
        [&>tfoot>tr>th]:font-normal [&>tfoot>tr>th]:w-32

        [&>tfoot>tr>td]:border-r [&>tfoot>tr>td]:border-y
        [&>tfoot>tr>td]:border-secondary-290
        [&>tfoot>tr>td]:border-t-secondary-290
        [&>tfoot>tr>td]:bg-secondary-50/70 [&>tfoot>tr>td]:text-secondary-900
        [&>tfoot>tr>td]:pt-1 [&>tfoot>tr>td]:pb-1.5 [&>tfoot>tr>td]:px-3 
        [&>tfoot>tr>td]:text-right

        [&>tbody>tr:first-child>th]:rounded-tl-md
        [&>tbody>tr:first-child>td]:rounded-tr-md
        [&>tfoot>tr:last-child>th]:rounded-bl-md
        [&>tfoot>tr:last-child>td]:rounded-br-md
    }
  
    /* 伝票明細入力 */
  
    /* ｜ボックス */
    .entry-slip-detail-box {
        @apply box px-3 py-2 
    }
    /* ｜基本構成 */
    .entry-slip-detail-table {
        /* |２列目まで固定（行アクション＋行No） */
        @apply list-table-fixed-base
        [&>thead>tr>th]:text-sm
        [&>thead>tr>th]:pb-0.5
        [&>thead>tr>th]:bg-secondary-200
        [&>thead>tr>th]:border-secondary-290
        [&>thead>tr:first-child>th:first-child]:rounded-tl-md
        [&>thead>tr:first-child>th:last-child]:rounded-tr-md
        
        [&>thead>tr:first-child>th]:border-t-secondary-290
        [&>thead>tr:first-child>th:first-child]:border-l-secondary-290 
         [&>tbody>tr>td]:p-1 [&>tbody>tr>td]:border-secondary-290
        [&>tbody>tr>td.readonly]:bg-secondary-50;
    }
    /* |１件１行構成 */
    .entry-slip-detail-table-row {
        @apply entry-slip-detail-table
        [&>thead>tr>th]:pt-1 [&>thead>tr>th]:pb-1.5
    }
    /* |１件２行構成 |２列目まで固定（行アクション＋行No） */
    .entry-slip-detail-table-2rows {
        @apply entry-slip-detail-table
         [&>tbody>tr:not(:nth-last-child(2))>td[rowspan]]:border-b-secondary-500
         [&>tbody>tr:nth-child(2n):not(:last-child)>td]:border-b-secondary-500
        [&>thead>tr:nth-child(2n+1)>th:first-child]:sticky 
        [&>thead>tr:nth-child(2n+1)>th:first-child]:top-0 
        [&>thead>tr:nth-child(2n+1)>th:first-child]:left-0 
        [&>thead>tr:nth-child(2n+1)>th:first-child]:z-[11] 
        [&>thead>tr:nth-child(2n+1)>th:nth-child(2)]:sticky 
        [&>thead>tr:nth-child(2n+1)>th:nth-child(2)]:top-0 
        [&>thead>tr:nth-child(2n+1)>th:nth-child(2)]:left-10 
        [&>thead>tr:nth-child(2n+1)>th:nth-child(2)]:z-[11] 
        [&>tbody>tr:nth-child(2n+1)>td:first-child]:sticky 
        [&>tbody>tr:nth-child(2n+1)>td:first-child]:top-0
        [&>tbody>tr:nth-child(2n+1)>td:first-child]:left-0
        [&>tbody>tr:nth-child(2n+1)>td:first-child]:z-10
        [&>tbody>tr:nth-child(2n+1)>td:first-child]:bg-white 
        [&>tbody>tr:nth-child(2n+1)>td:nth-child(2)]:sticky 
        [&>tbody>tr:nth-child(2n+1)>td:nth-child(2)]:top-0
        [&>tbody>tr:nth-child(2n+1)>td:nth-child(2)]:left-10
        [&>tbody>tr:nth-child(2n+1)>td:nth-child(2)]:z-[9]
        [&>tbody>tr:nth-child(2n+1)>td:nth-child(2)]:bg-white
        [&>tbody>tr:nth-child(2n)>td:first-child]:!border-l-0
        [&>tbody>tr:nth-child(2n)>td:nth-child(2)]:!border-l-0; 
    }





    .table-caption-base {
        @apply [&:not(caption)]:mt-1.5 [&>caption]:text-sm [&>caption]:text-left [&>caption]:pb-2
        [&>caption>span]:pl-2 [&>caption>span]:text-secondary-900
        [&>caption>span]:border-l-4 [&>caption>span]:border-secondary-600 

        [&>caption>span>span]:text-primary-900 
        [&>caption>span>span]:font-bold 
        [&>caption>span>span]:ml-2;
    }
/*
    ._dev-table {
        @apply table-base table-caption-base [&_td]:p-1.5 
        [&>colgroup.entry>col:first-child]:w-44
        [&>colgroup.entry>col:nth-child(2)]:w-24
        [&>colgroup.entry>col:nth-child(3)]:min-w-96 
        [&>colgroup.entry>col:last-child]:w-96
        [&>colgroup.entry>col:nth-child(2)]:tracking-wider;
    }
*/
    ._dev {
        @apply 
        [&_span.caption]:text-primary-900
        [&_span.caption]:font-bold [&_span.caption]:text-sm 
        [&_span.caption]:ml-2 [&_span.caption]:font-sans
        [&_table]:table-base [&_table]:table-caption-base [&_table_td]:p-1.5 
        [&_table.entry>colgroup>col:first-child]:w-44
        [&_table.entry>colgroup>col:nth-child(2)]:w-52
        [&_table.entry>colgroup>col:nth-child(3)]:min-w-56 
        [&_table.entry>colgroup>col:last-child]:w-96
        [&_table.entry>tbody>tr>th:nth-child(2)]:tracking-wider
        [&_table.entry>tbody>tr>th:nth-child(2)]:text-sm;
    }

}