/* Version: 2025-06-03 (Styles for Eiketsu Filter and initial Jinkei Simulation page) */
body {
    font-family: 'Inter', sans-serif;
}

/* Scrollbar Styles */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Screen Reader Only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Header - Language Select */
.language-select-header { padding: .25rem .5rem; border: 1px solid #d1d5db; border-radius: .375rem; font-size: .75rem; color: #4b5563; background-color: #f9fafb; min-width: 100px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.dark .language-select-header { background-color: #374151; border-color: #4b5563; color: #d1d5db; }
.language-select-header:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #6366f1; box-shadow: 0 0 0 2px #a5b4fc; }

/* Message Box */
.message-box {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: .375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    z-index: 1000;
    display: none; 
    opacity: 0;
    transition: opacity .3s ease-in-out, background-color .3s ease-in-out;
    text-align: center;
}
.message-box.show { display: block; opacity: 1; }
.message-box.success { background-color: #22c55e; } 
.message-box.warning { background-color: #f59e0b; } 
.message-box.error   { background-color: #ef4444; } 
.message-box.info    { background-color: #3b82f6; } 


/* Filter Controls (Eiketsu Filter & General) */
.filter-input,
.filter-dropdown,
#globalKeywordSearchInput, 
#displayFilterDropdown,    
#innenSelect, /* Eiketsu filter page's Innen Filter */
#simInnenSelect, /* Simulation page's Innen Select */
#jinkeiSelect    /* Simulation page's Jinkei Select */
 {
    font-size: 16px !important; 
}
@media (min-width: 768px) { 
    .filter-input,
    .filter-dropdown,
    #globalKeywordSearchInput,
    #displayFilterDropdown,
    #innenSelect,
    #simInnenSelect, 
    #jinkeiSelect {
        font-size: .875rem !important; /* text-sm */
    }
}
/* Accordion arrow style (Eiketsu Filter) */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; } 
details[open] summary .accordion-arrow { transform: rotate(180deg); }
.accordion-arrow { transition: transform 0.2s ease-in-out; }


/* Results Table (Eiketsu Filter) - components.cssで共通定義済み */
/* 以下はローカル上書き */
.table-container { max-height: 70vh; overflow-y: auto; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.dark .table-container { border-color: #374151; }
.table-container table { width: 100%; min-width: max-content; border-collapse: collapse; }

#resultsTable th,
#resultsTable td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border); white-space: nowrap; font-size: 0.875rem; line-height: 1.25rem; }
.dark #resultsTable th, .dark #resultsTable td { border-color: #374151; }

#resultsTable th { font-weight: 600; color: var(--c-text-sub); position: sticky; top: 0; z-index: 10; background-color: var(--c-bg-header); cursor: pointer; user-select: none; }
.dark #resultsTable th { background-color: #1f2937; color: #9ca3af; }
#resultsTable th.checkbox-header { width: 2.5rem; padding: 0.5rem 0.25rem; text-align: center; font-size: 0.75rem; }
#resultsTable th:hover { background-color: #f3f4f6; }
.dark #resultsTable th:hover { background-color: #374151; }
#resultsTable td { color: var(--c-text); }
.dark #resultsTable td { color: #d1d5db; }
#resultsTable td.checkbox-cell { width: 2.5rem; padding: 0.5rem 0.25rem; text-align: center; }

#resultsTable tbody tr { cursor: pointer; }
#resultsTable tbody tr:nth-child(odd) { background-color: #fff; }
.dark #resultsTable tbody tr:nth-child(odd) { background-color: #1f2937; }
#resultsTable tbody tr:nth-child(even) { background-color: var(--c-bg-alt); }
.dark #resultsTable tbody tr:nth-child(even) { background-color: #374151; }

#resultsTable th .sort-indicator { margin-left: 0.3em; font-size: 0.75em; display: inline-block; width: 1em; color: #374151; font-weight: bold; line-height: 1; vertical-align: middle;}
.dark #resultsTable th .sort-indicator { color: #9ca3af; }
.selected-row { background-color: var(--c-set-a-bg) !important; } 
.dark .selected-row { background-color: #1e3a8a !important; }
.selected-row td { color: var(--c-set-a-text) !important; font-weight: 600 !important; } 
.dark .selected-row td { color: #bfdbfe !important; }
.row-select-checkbox { cursor: pointer; }

/* Memo Area Styles (Eiketsu Filter) */
#memoList { list-style-type: none; padding-left: 0; }
#memoList li { display: flex; flex-direction: column; align-items: stretch; padding: 0.375rem 0.5rem; background-color: #fff; border: 1px solid #e0f2fe; border-radius: 0.375rem; line-height: 1.4; }
.dark #memoList li { background-color: #1e3a8a; border-color: #0c4a6e; }
#memoList li .memo-item-main-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
#memoList li .memo-text-container { flex-grow: 1; }
#memoList li .memo-text-name { font-weight: 600; color: #0c4a6e; margin-right: 0.5rem; cursor: pointer; text-decoration: underline; display: block; }
.dark #memoList li .memo-text-name { color: #7dd3fc; }
#memoList li .memo-text-name:hover { color: #075985; }
.dark #memoList li .memo-text-name:hover { color: #bae6fd; }
#memoList li .memo-text-details { font-size: 0.75rem; color: #0369a1; word-break: break-all; display: block; }
.dark #memoList li .memo-text-details { color: #a5f3fc; }

.delete-memo-btn {
    background-color: #d1d5db; color: #4b5563; border: 1px solid #9ca3af;
    border-radius: .25rem; width: 1.1rem; height: 1.1rem; font-size: .65rem;
    line-height: 1rem; text-align: center; cursor: pointer; margin-left: .5rem;
    padding: 0; flex-shrink: 0; transition: background-color .2s, color .2s, border-color .2s;
}
.dark .delete-memo-btn { background-color: #4b5563; color: #d1d5db; border-color: #6b7280;}
.delete-memo-btn:hover { background-color: #9ca3af; color: #374151; border-color: #6b7280; }
.dark .delete-memo-btn:hover { background-color: #6b7280; color: #f3f4f6; border-color: #9ca3af; }

.memo-inline-details { background-color: #f0f9ff; border: 1px solid #e0f2fe; border-radius: 0.25rem; padding: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.125rem 0.5rem; }
.dark .memo-inline-details { background-color: #0c4a6e; border-color: #075985; }
.memo-inline-details div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.1rem 0; }
.memo-inline-details .stat-label { color: #075985; font-weight: 500; margin-right: 0.25rem; white-space: nowrap; }
.dark .memo-inline-details .stat-label { color: #7dd3fc; }
.memo-inline-details .stat-value { color: #0c4a6e; text-align: right; font-weight: 500; }
.dark .memo-inline-details .stat-value { color: #e0f2fe; }

/* Common Button Styles */
.custom-btn { color: #fff; font-weight: 600; padding: .5rem 1rem; border-radius: .5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06); transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out; }
.custom-btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
.search-reset-button { background-color: #ef4444; border-color: #ef4444; }
.search-reset-button:hover { background-color: #dc2626; border-color: #dc2626; }
.search-reset-button:focus { box-shadow: 0 0 0 2px #fca5a5, 0 0 0 4px #ef4444; }
.reset-button-alt { background-color: #ef4444; }
.reset-button-alt:hover { background-color: #dc2626; }
.reset-button-alt:focus { box-shadow: 0 0 0 2px #fca5a5; }
.gray-button { background-color: #6b7280; border-color: #6b7280; }
.gray-button:hover { background-color: #4b5563; border-color: #4b5563; }
.gray-button:focus { box-shadow: 0 0 0 2px #9ca3af, 0 0 0 4px #6b7280; }
.copy-button { background-color: #10b981; } 
.copy-button:hover { background-color: #059669; } 
.copy-button:focus { box-shadow: 0 0 0 2px #6ee7b7; }
.share-button { background-color: #3b82f6; } 
.share-button:hover { background-color: #2563eb; } 
.share-button:focus { box-shadow: 0 0 0 2px #93c5fd; }

/* Footer */
#lastUpdatedFooter, #lastUpdatedSimFooter { color: #9ca3af; } 
.dark #lastUpdatedFooter, .dark #lastUpdatedSimFooter { color: #6b7280; } 


/* Responsive adjustments */
@media (max-width: 767px) { 
    .filter-dropdown, #globalKeywordSearchInput, #displayFilterDropdown, #innenSelect, 
    #languageSelectHeader, #languageSelectSim, #simInnenSelect, #jinkeiSelect, 
    select, textarea { 
        font-size: 16px !important; 
    }
}
@media (max-width: 640px) { /* sm breakpoint */
    .table-container { max-height: 60vh; }
    #resultsTable th, #resultsTable td { font-size: 0.8rem; padding: .5rem .75rem; }
    #resultsTable th.checkbox-header, #resultsTable td.checkbox-cell { width: 3rem; padding-left: 0.25rem; padding-right: 0.25rem; }
}

#jinkeiSlotsGrid {
    display: grid;
    gap: 0.75rem; 
    padding: 0.5rem;
    width: fit-content; 
    margin-left: auto;
    margin-right: auto;
    align-items: stretch; 
    justify-items: stretch; 
}

.jinkei-slot {
    border: 2px solid #cbd5e1; 
    border-radius: 0.375rem; 
    min-height: 70px; 
    padding: 0.75rem 0.5rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center;
    font-size: 0.75rem; 
    background-color: #f8fafc; 
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; 
    box-sizing: border-box; 
    word-break: break-all; 
}

.dark .jinkei-slot {
    border-color: #4b5563; 
    background-color: #374151; 
    color: #d1d5db; 
}

.jinkei-slot:hover {
    border-color: #9ca3af; 
    background-color: #f1f5f9; 
}
.dark .jinkei-slot:hover {
    border-color: #64748b;
    background-color: #4b5563; 
}

.jinkei-slot.selected-slot { 
    border-color: #4f46e5 !important; 
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4) !important; 
    background-color: #e0e7ff !important; 
    outline: none; 
}
.dark .jinkei-slot.selected-slot {
    border-color: #818cf8 !important; 
    background-color: #3730a3 !important; 
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.5) !important; 
}

.jinkei-slot.has-eiketsu { 
    background-color: #dbeafe; 
    border-color: #93c5fd; 
    font-weight: 600;
}
.dark .jinkei-slot.has-eiketsu {
    background-color: #1e3a8a; 
    border-color: #3b82f6; 
    color: #eff6ff; 
}
.jinkei-slot .eiketsu-name-in-slot {
    font-size: 0.8rem; 
    display: block; 
    margin-bottom: 0.25rem; 
}
.jinkei-slot .text-xxs { 
    font-size: 0.65rem; 
    line-height: 0.8rem;
}

/* 各陣形のレイアウト */
#jinkeiSlotsGrid.jinkei-layout-kakuyoku,
#jinkeiSlotsGrid.jinkei-layout-koeyaku {
    grid-template-columns: repeat(2, minmax(100px, 1fr)); 
    grid-template-rows: repeat(3, minmax(70px, auto));
    grid-template-areas:
        "s1 s4"
        "s2 s5"
        "s3 s6";
    gap: 1rem; 
}

#jinkeiSlotsGrid.jinkei-layout-hoen {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    grid-template-rows: repeat(2, minmax(70px, auto));
}

#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-1 { grid-column: 1; grid-row: 1; }
#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-2 { grid-column: 2; grid-row: 1; }
#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-3 { grid-column: 3; grid-row: 1; }
#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-6 { grid-column: 1; grid-row: 2; } /* S6 */
#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-5 { grid-column: 2; grid-row: 2; } /* S5 */
#jinkeiSlotsGrid.jinkei-layout-hoen .jinkei-slot.slot-4 { grid-column: 3; grid-row: 2; } /* S4 */


#jinkeiSlotsGrid.jinkei-layout-gyorin {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    grid-template-rows: repeat(3, minmax(70px, auto));
    grid-template-areas:
        ".  s1 ."
        "s6 .  s2"
        "s5 s4 s3";
}


#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="1"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="1"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="1"] { grid-area: s1; }

#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="2"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="2"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="2"] { grid-area: s2; }

#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="3"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="3"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="3"] { grid-area: s3; }

#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="4"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="4"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="4"] { grid-area: s4; }

#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="5"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="5"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="5"] { grid-area: s5; }

#jinkeiSlotsGrid.jinkei-layout-kakuyoku .jinkei-slot[data-slot-id="6"],
#jinkeiSlotsGrid.jinkei-layout-koeyaku .jinkei-slot[data-slot-id="6"],
#jinkeiSlotsGrid.jinkei-layout-gyorin .jinkei-slot[data-slot-id="6"] { grid-area: s6; }