/* テーマ: ライト（デフォルト - マネーフォワード風） */
:root {
    --sidebar-bg: #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --main-bg: #f1f5f9;
    --card-bg: #ffffff;
    --card-text: #334155;
    --card-border: #e2e8f0;
    --table-header-bg: #f8fafc;
    --table-header-text: #475569;
    --table-border: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
}

/* テーマ: ダーク */
body.theme-dark {
    --sidebar-bg: #0f172a;
    --sidebar-text: #64748b;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --main-bg: #1e293b;
    --card-bg: #334155;
    --card-text: #f1f5f9;
    --card-border: #475569;
    --table-header-bg: #475569;
    --table-header-text: #f1f5f9;
    --table-border: #475569;
    --input-bg: #475569;
    --input-border: #64748b;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
}

/* テーマ: ホワイト（完全白基調） */
body.theme-light {
    --sidebar-bg: #ffffff;
    --sidebar-text: #64748b;
    --sidebar-hover: rgba(0, 0, 0, 0.04);
    --main-bg: #f8fafc;
    --card-bg: #ffffff;
    --card-text: #1e293b;
    --card-border: #e2e8f0;
    --table-header-bg: #f1f5f9;
    --table-header-text: #334155;
    --table-border: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;

    /* フォントサイズ統一 */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;

    /* テーブル用フォント */
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
}

/* テーマ: ブルー */
body.theme-blue {
    --sidebar-bg: #0c4a6e;
    --sidebar-text: #7dd3fc;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --main-bg: #f0f9ff;
    --card-bg: #ffffff;
    --card-text: #0c4a6e;
    --card-border: #bae6fd;
    --table-header-bg: #e0f2fe;
    --table-header-text: #0c4a6e;
    --table-border: #bae6fd;
    --input-bg: #ffffff;
    --input-border: #7dd3fc;
    --primary: #0ea5e9;
    --primary-hover: #0284c7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-base);
    background: var(--main-bg);
    min-height: 100vh;
    overflow-x: auto;
}

.sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--sidebar-bg);
    color: white;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}

.sidebar-header {
    padding: 10px 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-logo-img {
    max-width: 80px;
    height: auto;
    opacity: 0.4;
}

.sidebar-logo {
    font-size: 18px;
    font-weight: 700;
    color: #74c0fc;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.client-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.company-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.company-selector:hover {
    background: rgba(255, 255, 255, 0.1);
}

.company-dropdown-arrow {
    font-size: 10px;
    color: #74c0fc;
    transition: transform 0.2s;
}

.company-dropdown {
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
}

.company-dropdown-list {
    max-height: 200px;
    overflow-y: auto;
}

.company-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #334155;
    transition: background 0.2s;
}

.company-dropdown-item:hover {
    background: #334155;
}

.company-dropdown-item.active {
    background: #3b82f6;
    color: #fff;
}

.company-dropdown-item .company-name {
    flex: 1;
    font-size: 13px;
}

.company-dropdown-item .company-type {
    font-size: 10px;
    color: #94a3b8;
    background: #475569;
    padding: 2px 6px;
    border-radius: 4px;
}

.company-dropdown-add {
    padding: 10px 14px;
    cursor: pointer;
    color: #60a5fa;
    font-size: 13px;
    transition: background 0.2s;
}

.company-dropdown-add:hover {
    background: #334155;
}

.company-dropdown-logout {
    padding: 10px 14px;
    cursor: pointer;
    color: #f87171;
    font-size: 13px;
    border-top: 1px solid #334155;
    transition: background 0.2s;
}

.company-dropdown-logout:hover {
    background: #334155;
}

.company-dropdown-consolidated {
    padding: 10px 14px;
    cursor: pointer;
    color: #a5b4fc;
    font-size: 13px;
    margin-top: 8px;
    border-top: 1px solid #334155;
    background: #0f172a;
    transition: background 0.2s;
}

.company-dropdown-consolidated:hover {
    background: #334155;
}

.company-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid #334155;
    font-size: 12px;
    color: #94a3b8;
    background: #0f172a;
}

.sidebar-header {
    position: relative;
}

.header-client-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 4px;
}

.logo-upload-area {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 2px dashed #cbd5e1;
}

.logo-preview img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: #f1f5f9;
}

.logo-placeholder {
    text-align: center;
}

.btn-upload,
.btn-upload-large {
    display: inline-block;
    padding: 6px 12px;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.btn-upload:hover,
.btn-upload-large:hover {
    background: #2563eb;
}

.btn-upload input,
.btn-upload-large input {
    display: none;
}

.btn-delete-logo {
    padding: 6px 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.btn-delete-logo:hover {
    background: #dc2626;
}

.logo-actions {
    display: flex;
    gap: 6px;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin: 2px 10px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sidebar-menu a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    filter: brightness(1.2);
}

.sidebar-menu a.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* ライトテーマ用のアクティブ調整 */
body.theme-light .sidebar-menu a.active {
    color: white;
}

/* メニューセクション区切り */
.menu-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.menu-section-title {
    padding: 0 14px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

/* サブメニュー */
.has-submenu > a {
    position: relative;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
    color: #64748b;
}

.has-submenu.open .submenu-arrow {
    transform: rotate(90deg);
}

.submenu {
    display: none;
    list-style: none;
    padding: 4px 0;
    margin: 4px 0 0 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.has-submenu.open .submenu {
    display: block;
}

.submenu li {
    margin: 0 6px;
}

.submenu li a {
    padding: 8px 12px 8px 32px;
    font-size: 12px;
    color: #94a3b8;
}

.submenu li a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.submenu li a.active {
    background: rgba(59, 130, 246, 0.3);
    color: white;
}

.submenu li a .menu-icon {
    font-size: 11px;
}

.sidebar-menu .menu-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

.sidebar-menu .menu-text {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .menu-text {
    display: none;
}

.sidebar.collapsed .sidebar-menu a {
    justify-content: center;
    padding: 12px;
}

/* ===== 閉じたサイドバー: ホバーフライアウトメニュー ===== */
.sidebar.collapsed .has-submenu {
    position: relative;
}

.sidebar.collapsed .has-submenu .submenu-arrow {
    display: none;
}

/* 閉じた状態ではサブメニューを隠す（openクラス関係なく） */
.sidebar.collapsed .submenu {
    display: none !important;
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    background: var(--sidebar-bg);
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
    padding: 8px 0;
    margin: 0;
    z-index: 1000;
}

/* 閉じた状態でホバー時にサブメニューを表示 */
.sidebar.collapsed .has-submenu:hover .submenu {
    display: block !important;
}

.sidebar.collapsed .submenu li a {
    padding: 10px 16px;
    justify-content: flex-start;
}

/* サブメニュー内のテキストは表示する */
.sidebar.collapsed .submenu .menu-text {
    display: inline !important;
}

/* 閉じた状態のサブメニューフライアウト内のアクティブ状態 */
.sidebar.collapsed .submenu li a.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* 閉じた状態でトップレベルメニューにもホバー時にラベルを表示 */
.sidebar.collapsed .sidebar-menu > li {
    position: relative;
}

.sidebar.collapsed .sidebar-menu > li:not(.has-submenu)::after {
    content: attr(data-label);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sidebar-bg);
    color: white;
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    white-space: nowrap;
    font-size: 13px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 999;
}

.sidebar.collapsed .sidebar-menu > li:not(.has-submenu):hover::after {
    opacity: 1;
}

/* 閉じた状態でヘッダーとフッターも調整 */
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 10px;
    border-bottom: none;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .company-selector {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: 8px;
}

.sidebar.collapsed .sidebar-footer > *:not(.logo-small) {
    display: none;
}

.sidebar.collapsed .logo-small {
    width: 40px;
    height: auto;
    aspect-ratio: auto;
}

/* トグルボタンの調整 */
.sidebar.collapsed .sidebar-toggle {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

.main-wrapper {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    max-height: 100vh;
}

.container,
.page-container {
    max-width: none;
    margin: 0;
    margin-left: 280px;
    margin-right: 20px;
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 32px;
    min-height: calc(100vh - 60px);
    border: 1px solid var(--card-border);
    transition: margin-left 0.2s ease;
}

/* main-wrapperは内部コンテナなのでmarginなし */
.main-wrapper .container,
.main-wrapper .page-container {
    margin-left: 0;
    margin-right: 0;
}

/* main-wrapper自体のマージン設定 */
.main-wrapper {
    margin-left: 280px;
    margin-right: 8px;
    transition: margin-left 0.2s ease;
}

/* サイドバー折りたたみ時 */
.sidebar.collapsed ~ .container,
.sidebar.collapsed ~ .page-container {
    margin-left: 80px;
}

.sidebar.collapsed ~ .main-wrapper {
    margin-left: 80px;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

h1 {
    color: var(--card-text);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0;
}

.scenario-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.scenario-selector label {
    font-weight: 600;
    color: #475569;
    font-size: 14px;
}

.scenario-selector select {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.scenario-selector select:hover {
    border-color: #74c0fc;
}

.scenario-selector select:focus {
    outline: none;
    border-color: #74c0fc;
    box-shadow: 0 0 0 3px rgba(116, 192, 252, 0.2);
}

.scenario-optimistic {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border-color: #22c55e !important;
    color: #166534 !important;
}

.scenario-pessimistic {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

/* 基礎マスタページ用スタイル */
.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}

.page-description {
    color: var(--card-text);
    opacity: 0.7;
    font-size: 14px;
}

.master-section {
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.section-header:hover {
    background: #f1f5f9;
}

.section-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.section-toggle {
    color: #64748b;
    transition: transform 0.2s ease;
}

.section-content {
    padding: 20px;
    background: white;
    overflow-x: auto;
}

.section-content.collapsed {
    display: none;
}

/* 事業セクションドラッグ&ドロップ */
.master-section.dragging-section {
    opacity: 0.5;
    border: 2px dashed #3b82f6;
}

.master-section.drop-above {
    border-top: 3px solid #3b82f6;
}

.master-section.drop-below {
    border-bottom: 3px solid #3b82f6;
}

.business-drag-handle {
    cursor: grab;
    user-select: none;
}

.business-drag-handle:active {
    cursor: grabbing;
}

.master-table {
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.master-table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.master-table th:nth-child(1) {
    text-align: left;
    min-width: 100px;
}

.master-table th:nth-child(2) {
    text-align: left;
    min-width: 120px;
}

.master-table th:nth-child(3) {
    min-width: 50px;
}

.master-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    color: #1e293b;
}

.master-table tbody tr:hover {
    background: #f8fafc;
}

.master-table input[type='number'] {
    width: 80px;
    min-width: 80px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
    color: #1e293b !important;
    background: white !important;
    -moz-appearance: textfield;
}

.master-table input[type='number']::-webkit-outer-spin-button,
.master-table input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 全てのnumber inputのスピナーを非表示 */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

.master-table input[type='number']:focus {
    outline: none;
    border-color: #74c0fc;
    box-shadow: 0 0 0 2px rgba(116, 192, 252, 0.2);
}

.scenario-opt {
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
    font-size: 11px;
}

.scenario-std {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
    font-size: 11px;
}

.scenario-pes {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 600;
    font-size: 11px;
}

/* シナリオタグ（ページタイトル用） */
.scenario-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 12px;
    vertical-align: middle;
}

.scenario-tag.optimistic {
    background: #dcfce7;
    color: #166534;
}

.scenario-tag.standard {
    background: #dbeafe;
    color: #1e40af;
}

.scenario-tag.pessimistic {
    background: #fee2e2;
    color: #991b1b;
}

/* シナリオタブ */
.scenario-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.scenario-tab {
    padding: 12px 28px;
    border: none;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #64748b;
    transition: all 0.2s;
}

.scenario-tab:hover {
    color: #1e293b;
    background: #f8fafc;
}

.scenario-tab.active {
    border-bottom-color: #2563eb;
    color: #2563eb;
    font-weight: 600;
}

/* 各マスタ用タブカラー */
.scenario-tabs-sales .scenario-tab.active {
    border-bottom-color: #dc2626;
    color: #dc2626;
}

.scenario-tabs-cost .scenario-tab.active {
    border-bottom-color: #16a34a;
    color: #16a34a;
}

.scenario-tabs-sga .scenario-tab.active {
    border-bottom-color: #d97706;
    color: #d97706;
}

/* 売上マスタ レイアウト */
.sales-master-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.sales-base-with-sidebar {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.sales-sidebar {
    width: 280px;
    min-width: 280px;
    background: #f8fafc;
    border-radius: 4px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    align-self: flex-start;
}

.sales-sidebar h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #1e293b;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* 各マスタ用 サイドバータイトル下線色 */
#page-sales .sales-sidebar h3 {
    border-bottom-color: #f87171;
}

#page-cost .sales-sidebar h3 {
    border-bottom-color: #4ade80;
}

#page-sga .sales-sidebar h3 {
    border-bottom-color: #fbbf24;
}

.sales-sidebar .sidebar-hint {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 15px;
}

.scenario-selectors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scenario-selector-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}

.scenario-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
}

.scenario-item-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.scenario-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 6px;
}

.scenario-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
}

.scenario-selector-item label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.scenario-selector-item .item-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 8px;
}

.scenario-selector-item select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: white;
}

.sales-main {
    flex: 1;
    min-width: 0;
}

.sales-calculated-section {
    background: #fef2f2;
    border: 2px solid #f0b4b4;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.sales-base-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px;
}

.sales-base-section h3,
.sales-calculated-section h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #1e293b;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.sales-table th,
.sales-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}

.sales-table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 500;
    position: sticky;
    top: 0;
}

.sales-table th:first-child,
.sales-table th:nth-child(2),
.sales-table th:nth-child(3),
.sales-table td:first-child,
.sales-table td:nth-child(2),
.sales-table td:nth-child(3) {
    text-align: left;
}

.sales-table tbody tr:hover {
    background: #f8fafc;
}

.sales-table .total-row {
    background: #f8fafc;
    font-weight: 600;
}

.sales-table .total-row td {
    border-top: 1px solid #cbd5e1;
}

/* 売上マスタ用テーブル色 */
#page-sales .sales-table th {
    background: #fecaca !important;
    color: #7f1d1d !important;
}

#page-sales .sales-table .total-row {
    background: #fee2e2;
}

#page-sales .sales-table .total-row td {
    border-top: 2px solid #f87171;
}

/* 原価マスタ用テーブル色 */
#page-cost .sales-table th {
    background: #bbf7d0 !important;
    color: #14532d !important;
}

#page-cost .sales-table .total-row {
    background: #dcfce7;
}

#page-cost .sales-table .total-row td {
    border-top: 2px solid #4ade80;
}

/* 販管費マスタ用テーブル色 */
#page-sga .sales-table th {
    background: #fef08a !important;
    color: #713f12 !important;
}

#page-sga .sales-table .total-row {
    background: #fef9c3;
}

#page-sga .sales-table .total-row td {
    border-top: 2px solid #facc15;
}

.table-scroll-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

.section-description {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 15px 0;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid #74c0fc;
}

/* 各マスタ用 説明文の縦線色 */
#page-sales .section-description {
    border-left-color: #f87171;
}

#page-cost .section-description {
    border-left-color: #4ade80;
}

#page-sga .section-description {
    border-left-color: #fbbf24;
}

/* KPIテーブル（フラット表示） */
.kpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

.kpi-table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.kpi-table th:first-child,
.kpi-table th:nth-child(2) {
    text-align: left;
}

.kpi-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    white-space: nowrap;
}

.kpi-table td:first-child {
    font-weight: 500;
    color: #64748b;
}

.kpi-table td:nth-child(2) {
    font-weight: 600;
}

.kpi-table tr:hover {
    background: #f8fafc;
}

.section-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-title-bar h3 {
    margin: 0;
}

.btn-formula {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-formula:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
}

.btn-formula-large {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.2s;
}

.btn-formula-large:hover {
    transform: translateY(-2px);
}

.btn-gradient-red:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.4);
}

.btn-gradient-green:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    box-shadow: 0 6px 16px rgba(4, 120, 87, 0.4);
}

.btn-gradient-yellow:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.4);
}

.calculated-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.calculated-table th {
    background: #16a34a;
    color: white;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.calculated-table th:first-child,
.calculated-table th:nth-child(2) {
    text-align: left;
    white-space: nowrap;
}

.calculated-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #d1fae5;
    text-align: right;
    color: #1e293b;
}

.calculated-table td:first-child,
.calculated-table td:nth-child(2) {
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

.calculated-table tr:hover {
    background: #f8fafc;
}

.calculated-table .total-row {
    background: #f1f5f9;
    font-weight: 600;
}

.calculated-table .total-row td {
    border-top: 2px solid #16a34a;
}

/* 計算式モーダル */
.modal-content.modal-large {
    max-width: 1000px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.formula-section {
    margin-bottom: 20px;
}

.formula-section h3 {
    font-size: 15px;
    color: #1e293b;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #e2e8f0;
}

.formula-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.formula-table th {
    background: #f1f5f9;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.formula-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.formula-table code {
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #7c3aed;
}

.formula-table .btn-actions {
    white-space: nowrap;
}

.formula-form {
    background: #f8fafc;
    padding: 20px;
    border-radius: 4px;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}

.formula-builder {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* 補助計算モーダル用レイアウト */
#modal-aux-calc .formula-builder {
    display: block;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

#modal-aux-calc .formula-builder h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #475569;
}

.formula-builder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.formula-builder-row label {
    min-width: 70px;
    font-size: 13px;
    color: #64748b;
}

.formula-builder-row select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}

.formula-builder-row .btn-formula-add {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.formula-builder-row .btn-formula-add:hover {
    background: #2563eb;
}

.formula-builder-row .btn-op {
    padding: 8px 12px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    min-width: 40px;
}

.formula-builder-row .btn-op:hover {
    background: #cbd5e1;
}

/* 補助計算リスト（コンパクト表示） */
.aux-calc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aux-calc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.aux-calc-name {
    font-weight: 600;
    color: #1e293b;
    min-width: 120px;
}

.aux-calc-formula {
    flex: 1;
    font-family: monospace;
    font-size: 13px;
    color: #475569;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.aux-calc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-edit-sm {
    padding: 4px 10px;
    font-size: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-edit-sm:hover {
    background: #2563eb;
}

.btn-danger-sm {
    padding: 4px 10px;
    font-size: 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger-sm:hover {
    background: #dc2626;
}

.formula-items {
    flex: 2;
}

.formula-items select {
    width: 100%;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.formula-operators {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formula-operators label {
    color: #1e293b;
    font-weight: 600;
}

.operator-buttons {
    display: grid;
    grid-template-columns: repeat(2, 40px);
    gap: 8px;
    margin-top: 8px;
}

.operator-buttons button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

/* マスター選択グリッド（2カラム） */
.formula-masters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* 計算式+演算子グリッド */
.formula-expression-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    margin-bottom: 6px;
}

.formula-operators-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: start;
}

.formula-operators-panel button {
    width: 100%;
    height: 36px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    background: #38bdf8;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.formula-operators-panel button:hover {
    background: #0ea5e9;
}

.formula-operators-panel button.btn-if {
    background: #f59e0b;
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
    grid-column: 1 / -1;
}

.formula-operators-panel button.btn-if:hover {
    background: #d97706;
}

.formula-builder-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 120px;
}

.formula-builder-right .operator-buttons {
    display: grid;
    gap: 6px;
    width: 100%;
}

.formula-builder-right .op-3col {
    grid-template-columns: repeat(2, 1fr);
}

.formula-builder-right .operator-buttons button {
    width: 100%;
    height: 38px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    background: #38bdf8;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.formula-builder-right .operator-buttons button:hover {
    background: #0ea5e9;
}

.formula-builder-right .func-buttons {
    grid-template-columns: repeat(2, 1fr);
}

.formula-builder-right .func-buttons button {
    background: #a855f7;
    font-size: 12px;
    width: 54px;
}

.formula-builder-right .func-buttons button:hover {
    background: #9333ea;
}

.formula-builder-right .num-buttons {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4px;
}

.formula-builder-right .num-buttons button {
    background: #64748b;
    font-size: 14px;
}

.formula-builder-right .num-buttons button:hover {
    background: #475569;
}

.formula-builder-right .operator-buttons button.btn-if {
    background: #f59e0b;
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
    grid-column: 1 / -1;
}

.formula-builder-right .num-buttons button.btn-if:hover {
    background: #d97706;
}

.formula-builder-add-btn {
    width: 100%;
    padding: 10px 16px;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.formula-builder-add-btn:hover {
    background: #4b5563;
}

/* マスタタイプ別の計算式追加ボタン */
.modal-sales .formula-builder-add-btn {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

.modal-sales .formula-builder-add-btn:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.modal-cost .formula-builder-add-btn {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
}

.modal-cost .formula-builder-add-btn:hover {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.modal-sga .formula-builder-add-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.modal-sga .formula-builder-add-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
}

/* 売上タイプ切替タブ */
.sales-type-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.sales-type-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.sales-type-tab:hover {
    color: #3b82f6;
}

.sales-type-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

/* 売上マスタのタイプタブ */
#page-sales .sales-type-tab.active {
    color: #dc2626;
    border-bottom-color: #dc2626;
}

#page-sales .sales-type-tab:hover {
    color: #dc2626;
}

/* 原価マスタのタイプタブ */
#page-cost .sales-type-tab.active {
    color: #16a34a;
    border-bottom-color: #16a34a;
}

#page-cost .sales-type-tab:hover {
    color: #16a34a;
}

/* 販管費マスタのタイプタブ */
#page-sga .sales-type-tab.active {
    color: #d97706;
    border-bottom-color: #d97706;
}

#page-sga .sales-type-tab:hover {
    color: #d97706;
}

/* 定期購買セクション */
.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.subscription-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.subscription-product-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 16px;
}

.subscription-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.subscription-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.subscription-product-actions {
    display: flex;
    gap: 8px;
}

.subscription-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.subscription-stat {
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.subscription-stat-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.subscription-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

/* 継続率テーブル */
.retention-rate-table {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.retention-rate-row {
    display: grid;
    grid-template-columns: 60px repeat(6, 1fr);
    gap: 1px;
    background: #e2e8f0;
}

.retention-12 .retention-rate-row {
    grid-template-columns: 60px repeat(12, 1fr);
    min-width: 900px;
}

.retention-rate-table.retention-12 {
    overflow-x: auto;
}

.retention-rate-header {
    background: #f1f5f9;
}

.retention-rate-row span {
    background: white;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

.retention-rate-header span {
    background: #f1f5f9;
    font-weight: 600;
    color: #1e293b;
}

.retention-rate-row input {
    border: none;
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.retention-rate-row input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

/* 新規獲得数テーブル */
.subscription-customers-table {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
}

.subscription-customers-row {
    display: grid;
    grid-template-columns: 60px repeat(12, 1fr);
    gap: 1px;
    background: #e2e8f0;
    min-width: 800px;
}

.subscription-customers-header {
    background: #f1f5f9;
}

.subscription-customers-row span {
    background: white;
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    color: #64748b;
}

.subscription-customers-header span {
    background: #f1f5f9;
    font-weight: 600;
    color: #1e293b;
}

.subscription-customers-row input {
    border: none;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.subscription-customers-row input:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

/* 計算結果プレビュー */
#subscription-calc-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

#subscription-calc-preview table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

#subscription-calc-preview th,
#subscription-calc-preview td {
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #e2e8f0;
}

#subscription-calc-preview th {
    background: #f1f5f9;
    font-weight: 600;
    color: #1e293b;
}

#subscription-calc-preview td {
    color: #475569;
}

#subscription-calc-preview tr:last-child td {
    border-bottom: none;
}

.formula-builder-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.formula-builder-header {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
}

.formula-builder-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.formula-builder-filters label {
    font-size: 13px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.formula-builder-filters input[type='checkbox'] {
    width: 16px;
    height: 16px;
}

.formula-builder-box select[size] {
    width: 100%;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    flex: 1 1 0;
    min-height: 150px;
    max-height: 280px;
    overflow-y: auto;
}

.formula-builder-box select option {
    padding: 4px 8px;
}

.formula-builder-box .btn-add-item {
    width: 100%;
    margin-top: 10px;
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.formula-builder-box .btn-add-item:hover {
    background: #059669;
}

.formula-operators-box {
    min-width: 120px;
    display: flex;
    flex-direction: column;
}

.formula-operators-box .operator-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.operator-buttons button:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-add-item {
    width: 100%;
    padding: 8px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.btn-add-item:hover {
    background: #2563eb;
}

.hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

/* 設定フォームのinputスピンボタン非表示 */
.settings-form input[type='number'] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.settings-form input[type='number']::-webkit-outer-spin-button,
.settings-form input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* テーマカラー選択 */
.theme-selector {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.theme-option {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.theme-option:hover {
    transform: scale(1.05);
}

.theme-option.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.theme-option.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.theme-option.dark {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
}

.theme-option.light {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

.btn-edit-sm,
.btn-delete-sm {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
}

.btn-edit-sm {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.btn-delete-sm {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.btn-edit-sm:hover {
    background: #fde68a;
}

.btn-delete-sm:hover {
    background: #fecaca;
}

/* グループ行のスタイル（楽観・標準・悲観をまとめる） */
.row-group {
    background: #f8fafc;
}

.row-group-first td {
    border-top: 2px solid #94a3b8;
}

.row-group-last td {
    border-bottom: 2px solid #94a3b8;
}

.row-group td[rowspan] {
    font-weight: 600;
    background: #f1f5f9;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #e2e8f0;
}

/* 単独行（シナリオなし）のスタイル */
.row-single {
    background: #fff;
}

.row-single td {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.row-single td:first-child,
.row-single td:nth-child(2) {
    font-weight: 500;
}

.master-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-save {
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-reset {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background: #e2e8f0;
}

.auto-save-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.auto-save-icon {
    font-size: 16px;
}

.master-toolbar {
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.year-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.year-selector label {
    font-weight: 600;
    color: #1e293b;
}

.year-selector select {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    cursor: pointer;
}

.year-selector select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 行操作ボタン */
.actions-cell {
    vertical-align: middle;
    text-align: center;
}

.row-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-row-action {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-apply-all {
    background: #f1f5f9;
    color: #475569;
}

.btn-apply-all:hover {
    background: #e2e8f0;
    color: white;
}

.btn-copy-year {
    background: #f1f5f9;
    color: #475569;
}

.btn-copy-year:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-add {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* フォームスタイル */
.form-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 12px;
}

.form-group > label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 5px;
}

.form-group .required {
    color: #ef4444;
}

.form-group select,
.form-group input[type='text'],
.form-group input[type='number'],
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--card-text);
    background: var(--input-bg);
    transition: all 0.2s ease;
    box-sizing: border-box;
    height: 36px;
    line-height: 1.3;
}

.form-group textarea {
    height: auto;
    min-height: 80px;
}

.form-group select:focus,
.form-group input[type='text']:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group select:disabled,
.form-group input:disabled,
.form-group textarea:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
}

.form-hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
}

/* 基礎情報ページ */
.info-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
}

.tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: #3b82f6;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    font-weight: 600;
}

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.form-row .form-group {
    flex: 1;
}

.info-form .form-group {
    margin-bottom: 20px;
}

.info-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #334155;
}

.info-form input,
.info-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.info-form input:focus,
.info-form select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.fiscal-period-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.period-input {
    display: flex;
    gap: 8px;
}

.period-input select {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    min-width: 90px;
}

.period-separator {
    color: #64748b;
    font-size: 16px;
}

.period-display {
    padding: 10px 16px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #334155;
    font-weight: 500;
}

.fiscal-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fiscal-warning .warn-icon {
    font-size: 16px;
}

.fiscal-info {
    background: #eff6ff;
    border: 1px solid #3b82f6;
    color: #1e40af;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 8px;
}

.section-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header-bar h2 {
    margin: 0;
    font-size: 18px;
    color: var(--card-text);
}

.section-header-bar h3 {
    color: var(--card-text);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-item input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.scenario-check {
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.btn-cancel {
    padding: 12px 24px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #f1f5f9;
}

.btn-submit {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover {
    background: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* 売上マスタ用モーダルのボタン - 赤系 */
.modal-sales .btn-submit {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

.modal-sales .btn-submit:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* 原価マスタ用モーダルのボタン - 緑系 */
.modal-cost .btn-submit {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
}

.modal-cost .btn-submit:hover {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

/* 販管費マスタ用モーダルのボタン - 黄系 */
.modal-sga .btn-submit {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.modal-sga .btn-submit:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* 売上マスタ内のボタン - 赤系 */
#page-sales .btn-submit {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

#page-sales .btn-submit:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* 原価マスタ内のボタン - 緑系 */
#page-cost .btn-submit {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
}

#page-cost .btn-submit:hover {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

/* 販管費マスタ内のボタン - 黄系 */
#page-sga .btn-submit {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

#page-sga .btn-submit:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* サブアクションボタン */
.sub-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.btn-sub-action {
    padding: 10px 16px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sub-action:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

/* モーダル */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content,
.modal-container {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalIn 0.2s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2 {
    font-size: 18px;
    margin: 0;
    color: #1e293b;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: #64748b;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

/* CSVドロップゾーン */
.csv-drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.csv-drop-zone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.csv-drop-zone.drag-over {
    border-color: #3b82f6;
    background: #dbeafe;
    transform: scale(1.02);
}

.csv-drop-icon {
    margin-bottom: 12px;
}

.csv-drop-text {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.csv-drop-subtext {
    font-size: 13px;
    color: #64748b;
}

.csv-template-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.csv-template-link:hover {
    text-decoration: underline;
}

/* 項目編集テーブル */
.edit-table-container {
    overflow-x: auto;
}

.edit-table {
    width: 100%;
    border-collapse: collapse;
}

.edit-table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}

.edit-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--table-border);
    vertical-align: middle;
    color: var(--card-text);
}

.edit-table tbody tr:hover {
    background: var(--sidebar-hover);
}

.edit-table .drag-handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 18px;
}

.edit-table .drag-handle:active {
    cursor: grabbing;
}

.edit-table .scenario-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.edit-table .scenario-badge.yes {
    background: #dbeafe;
    color: #1e40af;
}

.edit-table .scenario-badge.no {
    background: #f1f5f9;
    color: #64748b;
}

.edit-table .rc-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.edit-table .rc-badge.yes {
    background: #fef3c7;
    color: #92400e;
}

.edit-table .rc-badge.no {
    background: #f1f5f9;
    color: #94a3b8;
}

.edit-table .btn-edit {
    padding: 6px 12px;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    background: white;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    margin-right: 6px;
}

.edit-table .btn-edit:hover {
    background: #3b82f6;
    color: white;
}

.edit-table .btn-delete {
    padding: 6px 12px;
    border: 1px solid #ef4444;
    border-radius: 6px;
    background: white;
    color: #ef4444;
    font-size: 12px;
    cursor: pointer;
}

.edit-table .btn-delete:hover {
    background: #ef4444;
    color: white;
}

.dragging {
    opacity: 0.5;
    background: #e0f2fe !important;
}

.edit-business-group {
    margin-bottom: 24px;
}

.edit-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 2px solid #e2e8f0;
}

.controls {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px 24px;
    border-radius: 4px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    overflow: hidden;
}

.controls-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

label {
    font-weight: bold;
    color: #555;
}

select,
button {
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    color: #475569;
}

select:hover,
button:hover {
    border-color: #74c0fc;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(116, 192, 252, 0.2);
}

select:focus,
button:focus {
    outline: none;
    border-color: #74c0fc;
    box-shadow: 0 0 0 3px rgba(116, 192, 252, 0.1);
}

button {
    background: linear-gradient(135deg, #74c0fc 0%, #4dabf7 100%);
    color: white;
    border: none;
    font-weight: 600;
}

button:hover {
    background: linear-gradient(135deg, #4dabf7 0%, #339af0 100%);
    box-shadow: 0 6px 12px rgba(116, 192, 252, 0.3);
}

.view-toggle {
    display: flex;
    gap: 0;
    background: #e2e8f0;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
}

.view-toggle button {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-right: 1px solid #cbd5e1;
    font-weight: 500;
    font-size: 13px;
}

.view-toggle button:last-child {
    border-right: none;
}

.view-toggle button.active {
    background: #cbd5e1;
    color: #1e293b;
    font-weight: 600;
}

.financial-statement {
    margin-bottom: 40px;
}

.statement-header {
    background: #f8fafc;
    color: #334155;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #e2e8f0;
}

.statement-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    table-layout: auto;
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    max-height: calc(100vh - 250px);
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.statement-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.statement-table th {
    background: #e2e8f0;
    color: #0f172a;
    padding: 12px 12px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid #cbd5e1;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: left;
    border: none;
    border-bottom: 3px solid #0f172a;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.statement-table th:first-child {
    width: 40px;
    text-align: center;
}

.statement-table th:nth-child(2) {
    min-width: 300px;
    max-width: 500px;
    width: auto;
}

.statement-table th.month-column {
    min-width: 100px;
    width: 100px;
    text-align: center !important;
    white-space: nowrap;
}

.statement-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.statement-table td:last-child,
.statement-table th:last-child {
    border-right: 1px solid #cbd5e1;
}

.statement-table tbody tr {
    transition: all 0.2s ease;
}

.statement-table tbody tr:hover {
    background: #e7f5ff;
    transform: translateX(2px);
}

.statement-table tbody tr:last-child td {
    border-bottom: none;
}

.item-name {
    font-weight: 500;
    color: #2d3748;
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: visible;
    min-width: 300px;
    max-width: 500px;
    padding-right: 12px;
}

.item-value {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 500;
    white-space: nowrap;
    min-width: 120px;
    width: 120px;
    padding-right: 12px;
}

.positive {
    color: #10b981;
    font-weight: 600;
}

.negative {
    color: #d97777;
    font-weight: 600;
}

.subtotal {
    background: #f8fafc;
    font-weight: 600;
    border-left: none;
}

.subtotal .item-name {
    color: #1e293b;
}

.subtotal .item-value {
    color: #1e293b;
}

.total {
    background: #f8fafc;
    font-weight: 600;
    border-left: 3px solid #64748b;
}

.total .item-name {
    color: #1e40af;
    font-size: var(--font-size-md);
}

.total .item-value {
    color: #1e40af;
    font-size: var(--font-size-md);
    font-weight: 700;
}

.title-row {
    font-weight: 700;
}

.title-row .item-name {
    color: #64748b;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.title-row .item-value {
    display: none;
}

.important-item {
    background: #fefce8;
    font-weight: 600;
    font-size: 14px;
    border-left: 2px solid #eab308;
}

.important-item .item-name {
    color: #713f12;
    font-size: 14px;
}

.important-item .item-value {
    color: #713f12;
    font-size: 14px;
    font-weight: 600;
}

/* DB版PLテーブル用スタイル */
.statement-table .title-row td {
    background: transparent;
    color: #475569;
    font-weight: 700;
    font-size: 12px;
    padding: 16px 12px 6px;
    letter-spacing: 0;
    white-space: nowrap;
    border-top: none;
    border-bottom: none;
}

.statement-table .parent-row {
    background: #f8fafc;
    cursor: pointer;
}

.statement-table .parent-row:hover {
    background: #e2e8f0;
}

.statement-table .parent-row td {
    white-space: nowrap;
    padding: 10px 12px;
}

.statement-table .parent-row td:first-child {
    font-weight: 600;
    color: #1e293b;
}

.statement-table .expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: transparent;
    font-size: 0;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.statement-table .expand-toggle::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.statement-table .parent-row:hover .expand-toggle,
.statement-table .child-row.expandable:hover .expand-toggle {
    background: #e2e8f0;
}

.statement-table .parent-row:hover .expand-toggle::before,
.statement-table .child-row.expandable:hover .expand-toggle::before {
    border-color: #3b82f6;
}

/* 展開時は下向き */
.statement-table .expand-toggle.expanded::before {
    transform: rotate(45deg);
}

.statement-table .child-row {
    background: #ffffff;
}

.statement-table .child-row td {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
}

.statement-table .child-row td:first-child {
    color: #64748b;
}

/* KPI行（4階層目） */
.statement-table .kpi-row {
    background: #f0f9ff;
    border-left: 3px solid #0ea5e9;
}

.statement-table .kpi-row td {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    color: #0369a1;
}

.statement-table .kpi-row td:first-child {
    padding-left: 56px;
}

/* 3階層目を展開可能にするスタイル */
.statement-table .child-row.expandable {
    cursor: pointer;
}

.statement-table .child-row.expandable:hover {
    background: #f8fafc;
}

.statement-table .indent-1 {
    padding-left: 36px !important;
}

.statement-table .indent-2 {
    padding-left: 56px !important;
}

.statement-table .subtotal-row td {
    background: #e2e8f0;
    font-weight: 700;
    border-top: 1px solid #cbd5e1;
    white-space: nowrap;
    padding: 10px 12px;
}

.statement-table .important-item td {
    background: #f8fafc;
    font-weight: 600;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    white-space: nowrap;
    padding: 12px;
    font-size: 14px;
}

.statement-table .important-item.highlight td {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.statement-table .amount {
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.statement-table .negative {
    color: #d97777;
    font-weight: 600;
}

.statement-table tbody .total-column {
    background: #f1f5f9 !important;
    font-weight: 700;
    border-left: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
    text-align: right;
    padding-right: 16px;
}

.statement-table thead th.total-column {
    background: #1e293b !important;
    color: white !important;
    border-left: 2px solid #475569;
    border-right: 2px solid #475569;
    min-width: 110px;
    text-align: center;
}

.statement-table .month-column {
    min-width: 90px;
    width: 90px;
}

.rate-item .item-name {
    color: #713f12;
}

.rate-item .item-value {
    color: #713f12;
    font-weight: 600;
}

.month-column {
    min-width: 120px;
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.expand-toggle {
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    color: #74c0fc;
    font-weight: bold;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s ease;
    background: #e7f5ff;
}

.expand-toggle:hover {
    background: #74c0fc;
    color: white;
    transform: scale(1.1);
}

.parent-item {
    cursor: pointer;
    position: relative;
}

.parent-item:hover {
    background: #e7f5ff;
}

.parent-item .item-name {
    font-weight: 600;
    color: #1e293b;
}

.sub-item {
    background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 3px solid #93c5fd;
}

.sub-item .item-name {
    font-weight: 400;
    color: #64748b;
    font-size: 13px;
    padding-left: 24px;
    position: relative;
}

.sub-item .item-name::before {
    content: '└';
    position: absolute;
    left: 8px;
    color: #94a3b8;
    font-weight: 300;
}

.sub-item .item-value {
    color: #64748b;
    font-weight: 500;
}

.sub-items-row {
    display: none;
}

.sub-items-row.expanded {
    display: table-row;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.tab-button {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px;
}

.tab-button:hover {
    color: #74c0fc;
    background: #e7f5ff;
}

.tab-button.active {
    color: #74c0fc;
    border-bottom-color: #74c0fc;
    background: #e7f5ff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.month-range-selector {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.year-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    flex-shrink: 0;
}

.year-selector label {
    font-weight: 600;
    color: #475569;
    font-size: 14px;
}

.year-selector select {
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.year-selector select:hover {
    border-color: #74c0fc;
}

.year-selector select:focus {
    outline: none;
    border-color: #74c0fc;
    box-shadow: 0 0 0 3px rgba(116, 192, 252, 0.1);
}

.btn-apply-filter-mini {
    padding: 6px 14px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: 12px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.btn-apply-filter-mini:hover {
    background: #e2e8f0;
}

.month-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
}

.month-range-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.month-range-label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
}

.month-range-display {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    padding: 0;
    background: transparent;
    border: none;
}

.month-slider-container {
    position: relative;
    padding: 8px 0 0 0;
}

.month-bar {
    position: relative;
    height: 32px;
    background: #f1f5f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    min-width: 0;
    flex-shrink: 1;
}

.month-item {
    flex: 1;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    color: #64748b;
    border-radius: 4px;
    transition:
        background 0.1s ease,
        color 0.1s ease;
    cursor: pointer;
    padding: 0 4px;
    white-space: nowrap;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
}

.month-item:hover {
    background: #e2e8f0;
}

.month-item.selected {
    background: #e2e8f0;
    color: #1e293b;
    font-weight: 700;
}

.range-inputs {
    display: none;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ボタン内スピナー */
button .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

.loading-spinner .loading-text {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.loading-spinner .loading-subtext {
    font-size: 12px;
    color: #9ca3af;
    margin-top: -8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 事業計画書生成中のアニメーション */
.bp-loading-animation {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bp-loading-animation::before,
.bp-loading-animation::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: bp-bounce 1.4s ease-in-out infinite both;
}

.bp-loading-animation::before {
    animation-delay: -0.32s;
}

.bp-loading-animation::after {
    animation-delay: 0.16s;
}

@keyframes bp-bounce {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-progress {
    width: 200px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    animation: progress 1.5s ease-in-out infinite;
}

@keyframes progress {
    0% {
        width: 0%;
        margin-left: 0%;
    }

    50% {
        width: 30%;
        margin-left: 35%;
    }

    100% {
        width: 0%;
        margin-left: 100%;
    }
}

.error {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 6px;
    margin: 20px 0;
}

.balance-check {
    background: #fff3cd;
    padding: 15px;
    border-radius: 6px;
    margin: 20px 0;
    border-left: 4px solid #ffc107;
}

.balance-ok {
    color: #28a745;
    font-weight: bold;
}

.balance-error {
    color: #dc3545;
    font-weight: bold;
}

.sheet-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.sheet-tab {
    padding: 14px 28px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 4px 12px 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px;
    margin-bottom: -2px;
}

.sheet-tab:hover {
    background: #e7f5ff;
    color: #74c0fc;
    border-color: #74c0fc;
}

.sheet-tab.active {
    background: white;
    color: #1e293b;
    border-color: #74c0fc;
    border-bottom-color: white;
    box-shadow: 0 -4px 12px rgba(116, 192, 252, 0.15);
}

.sheet-content {
    display: none;
}

.sheet-content.active {
    display: block;
}

.charts-section {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e2e8f0;
}

.charts-section h3 {
    color: #1e293b;
    font-size: 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;
}

.chart-card {
    background: #f8fafc;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-card h4 {
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.chart-toggle {
    display: flex;
    gap: 4px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 6px;
}

.chart-toggle button {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-toggle button:hover {
    color: #1e293b;
}

.chart-toggle button.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-container {
    position: relative;
    height: 280px;
}

/* ===== 実績入力テーブル ===== */
.actual-input-table {
    font-size: 13px;
}

.actual-input-table th {
    padding: 10px 8px;
    font-size: 12px;
}

.actual-input-table td {
    padding: 6px 4px;
}

.actual-input-table .actual-input {
    width: 85px;
    text-align: right;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: var(--font-mono);
    transition: all 0.2s ease;
}

.actual-input-table .actual-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.actual-input-table .actual-input:hover {
    border-color: #94a3b8;
}

.actual-input-table .subtotal-row td {
    padding: 8px 4px;
}

.actual-input-table .subtotal-row .amount {
    font-weight: 600;
    color: #1e293b;
}

/* ===== ドロップゾーン ===== */
.drop-zone {
    padding: 40px 20px;
    border: 2px dashed var(--border-color, #cbd5e1);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--input-bg, #f8fafc);
}

.drop-zone:hover {
    border-color: var(--primary, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.drop-zone.drag-over {
    border-color: var(--primary, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.02);
}

.drop-zone-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.drop-zone-text {
    color: var(--text-color-light, #64748b);
    margin-bottom: 8px;
    font-size: 14px;
}

.drop-zone-hint {
    font-size: 12px;
    color: #94a3b8;
}

.drop-zone-filename {
    margin-top: 16px;
    color: var(--primary, #3b82f6);
    font-weight: 600;
    font-size: 14px;
}

/* ===== Flatpickr カスタム ===== */
.datepicker {
    width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--card-text, #334155);
    font-size: 14px;
    cursor: pointer;
}

.datepicker:focus {
    outline: none;
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ダークテーマ用 */
body.theme-dark .flatpickr-calendar {
    background: #334155;
    border-color: #475569;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.theme-dark .flatpickr-day {
    color: #f1f5f9;
}

body.theme-dark .flatpickr-day:hover {
    background: #475569;
}

body.theme-dark .flatpickr-day.selected {
    background: var(--primary, #3b82f6);
}

body.theme-dark .flatpickr-monthDropdown-months,
body.theme-dark .numInputWrapper input {
    background: #334155;
    color: #f1f5f9;
}

/* ===== AI要約スタイル ===== */
.ai-summary-result {
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.ai-summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ai-badge {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.ai-meta {
    font-size: 12px;
    color: #7c3aed;
}

.ai-summary-body {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}

.ai-summary-body strong {
    color: #6d28d9;
}

.ai-summary-body li {
    margin-left: 16px;
    margin-bottom: 4px;
    list-style: disc;
}

/* ダークテーマ */
body.theme-dark .ai-summary-result {
    background: linear-gradient(135deg, #2e1065 0%, #312e81 100%);
    border-color: #4c1d95;
}

body.theme-dark .ai-summary-body {
    color: #e2e8f0;
}

body.theme-dark .ai-summary-body strong {
    color: #c4b5fd;
}

/* スピナー（AI生成中） */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Utility Classes (Phase 2-3) ===== */

/* Display */
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

/* Flex */
.flex-1 {
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

/* Gap */
.gap-4 {
    gap: 4px;
}

.gap-6 {
    gap: 6px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

/* Width */
.w-full {
    width: 100%;
}

.w-100 {
    width: 100px;
}

.w-120 {
    width: 120px;
}

/* Text Align */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Margin */
.m-0 {
    margin: 0;
}

.mt-0 {
    margin-top: 0;
}

.mt-4 {
    margin-top: 4px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

/* Colors */
.text-danger {
    color: #dc2626;
}

.text-success {
    color: #16a34a;
}

.text-muted {
    color: #64748b;
}

/* Font Size */
.text-xs {
    font-size: 11px;
}

.text-sm {
    font-size: 12px;
}

.text-base {
    font-size: 13px;
}

.text-md {
    font-size: 14px;
}

/* Button Layout */
.btn-row {
    display: flex;
    gap: 8px;
}

.btn-row-right {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-row-between {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

/* Section Spacing */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.action-row {
    margin: 20px 0;
    text-align: right;
}

/* Phase 2-3 Step 2: Additional Utility Classes */

/* Hint/Description Text */
.hint-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.description-text {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
}

/* Flex Alignments */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center-gap-16 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.flex-center-gap-12 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flex-center-gap-8 {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Color Classes */
.text-red {
    color: #dc2626;
}

.text-orange {
    color: #d97706;
}

.text-green-600 {
    color: #16a34a;
}

/* Empty State */
.empty-state {
    color: #64748b;
    text-align: center;
    padding: 40px;
}

/* Phase 2-3 Step 8: Additional Utility Classes */
.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.btn-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

.ai-option-btn {
    flex: 1;
    padding: 16px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.ai-option-btn.active {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.ai-option-title {
    font-weight: 700;
    color: #8b5cf6;
    font-size: 14px;
}

/* Phase 2-3 Step 10: Border and Combined Classes */
.mt-12-gradient-purple {
    margin-top: 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

.tabs-border-red {
    border-bottom-color: #fecaca;
}

.tabs-border-green {
    border-bottom-color: #86efac;
}

.tabs-border-orange {
    border-bottom-color: #fde68a;
}

/* Phase 2-3 Step 11: Additional Classes */
.icon-sm {
    height: 14px;
    width: auto;
}

.btn-filter {
    padding: 8px 16px;
    font-size: 13px;
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

/* Phase 2-3 Step 12: Additional Classes */
.btn-lg {
    font-size: 14px;
    padding: 10px 20px;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    border-top: 1px solid #e2e8f0;
    white-space: nowrap;
    color: #334155;
}

.text-center-p40 {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

/* Phase 2-3 Step 14: Width Classes */
.w-40px {
    width: 40px;
}

.w-150px {
    width: 150px;
}

.w-180px {
    width: 180px;
}

/* Phase 2-3 Step 15: Additional Utility Classes */
.text-right {
    text-align: right;
}

.resize-v {
    resize: vertical;
}

/* Phase 2-3 Step 16: Position and Gradient Classes */
.pos-relative {
    position: relative;
}

/* Phase 2-3 Step 18: Padding Utility Classes */
.p-8-16 {
    padding: 8px 16px;
}

/* Phase 2-3 Step 19: Additional Utility Classes */
.mt-32 {
    margin-top: 32px;
}

.fs-16-mb-12 {
    font-size: 16px;
    margin-bottom: 12px;
}

.mb-12-purple {
    margin-bottom: 12px;
    color: #6366f1;
}

/* Phase 2-3 Step 20: Additional Utility Classes */
.fs-13 {
    font-size: 13px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-16 {
    margin-top: 16px;
}

/* Phase 2-3 Step 21: More Utility Classes */
.flex-between-mb16 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mb-4 {
    margin-bottom: 4px;
}

.mr-10 {
    margin-right: 10px;
}

.p-6-12-border {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

/* Phase 2-3 Step 22: Additional Utility Classes */
.fs-36-mb-8 {
    font-size: 36px;
    margin-bottom: 8px;
}

.mb-0-border-gray {
    margin-bottom: 0;
    border-bottom: 2px solid #e2e8f0;
}

/* Phase 2-3 Step 23: Additional Utility Classes */
.p-30-20 {
    padding: 30px 20px;
}

.color-gray-mb15 {
    color: #64748b;
    margin-bottom: 15px;
}

.fw600-blue {
    font-weight: 600;
    color: #0369a1;
}

/* Phase 2-3 Step 24: Additional Utility Classes */
.flex-wrap-gap12 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mt15-dark-fw600 {
    margin-top: 15px;
    color: #1e293b;
    font-weight: 600;
}

.dropzone-dashed {
    padding: 30px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
}

/* Phase 2-3 Step 25: Additional Utility Classes */
.info-section-blue {
    margin-bottom: 20px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
}

.gradient-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-purple-white {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
}

/* Phase 2-3 Step 26: Additional Utility Classes */
.select-light-blue {
    padding: 6px 12px;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    font-size: 14px;
    min-width: 90px;
}

.color-white {
    color: #fff;
}

/* Phase 2-3 Step 27: Button Utility Classes */
.btn-purple {
    padding: 8px 16px;
    border: 2px solid #8b5cf6;
    background: #f5f3ff;
    color: #6366f1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.btn-gray {
    padding: 8px 16px;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
}

/* Phase 2-3 Step 28: Flex and Width Classes */
.flex-gap-mb12 {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Phase 2-3 Step 29: Grid and Margin Classes */
.grid-2col {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

.mt-10 {
    margin-top: 10px;
}

/* Phase 2-3 Step 30: Padding and Font Size Classes */
.p-6-14 {
    padding: 6px 14px;
}

.p-6-12-fs12 {
    padding: 6px 12px;
    font-size: 12px;
}

.p-4-8-border {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    font-size: 12px;
}

/* Phase 2-3 Step 31: Additional Classes for 80% */
.p-6-14-fs13 {
    padding: 6px 14px;
    font-size: 13px;
}

.fs13-fw600 {
    font-size: 13px;
    font-weight: 600;
}

.flex-row-gap8 {
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

/* Phase 2-3 Step 32: Additional Classes */
.color-gray-fs13 {
    color: #64748b;
    font-size: 13px;
}

.mt24-pt24-border {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.flex-sb-mb12 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Phase 2-3 Step 33: Button Classes */
.btn-export {
    padding: 6px 12px;
    font-size: 12px;
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.btn-green {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #10b981;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

.btn-blue {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

/* Phase 2-3 Step 34: Additional Classes */
.btn-ai-gradient {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.fs12-gray {
    font-size: 12px;
    color: #94a3b8;
}

.border-top-none {
    border-top: none;
}

/* Phase 2-3 Step 35: Input/Textarea Classes */
.input-readonly {
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
}

.status-bar {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    color: #666;
}

.textarea-full {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
}

/* Phase 2-3 Step 36: Hint/Button/Logo Classes */
.hint-text {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.btn-ai-generate {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.logo-small {
    width: 50px;
    height: auto;
    margin-bottom: 6px;
}

/* Phase 2-3 Step 37: Sidebar/Flex/Login Classes */
.sidebar-footer-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 16px;
}

.flex-center-gap4 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #888;
}

.logo-login {
    width: 120px;
    margin-bottom: 20px;
    opacity: 0.8;
}

/* Phase 2-3 Step 38: Loading Screen Classes */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main-bg, #f8fafc);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.loading-text {
    color: #64748b;
    font-size: 14px;
}

/* Phase 2-3 Step 39: Margin Classes */
.mt-8 {
    margin-top: 8px;
}

.mt-0 {
    margin-top: 0;
}

.mt16-flex-gap12 {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

/* Phase 2-3 Step 40: 90% Milestone Classes */
.fw700-fs15 {
    font-weight: 700;
    font-size: 15px;
}

.section-header-bold {
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

/* 管理会計PL テーブル内のセクションヘッダー行 */
table tr.section-header {
    display: table-row;
    padding: 0;
    background: none;
}

table tr.section-header td {
    padding: 8px 12px;
    font-weight: 600;
    background: #f8fafc;
}

.h-full {
    height: 100%;
}

.max-h-300-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.modal-body-scroll {
    height: calc(100% - 120px);
    overflow: auto;
}

/* Phase 2-3 Step 41: Mode Button Classes */
.flex-btn-default {
    flex: 1;
    padding: 16px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.flex-btn-selected {
    flex: 1;
    padding: 16px;
    border: 2px solid #8b5cf6;
    background: #f5f3ff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.btn-register-green {
    flex: 1;
    padding: 12px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Phase 2-3 Step 42: Layout Classes */
.flex-gap12-mt8 {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.grid-1fr-200px {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 16px;
}

.grid-6col-mt8 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 8px;
}

/* Phase 2-3 Step 43: Utility Classes */
.inline-flex-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.flex-row-gap12 {
    flex-direction: row;
    gap: 12px;
}

.text-gray-mb15 {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 15px;
}

/* Phase 2-3 Step 44: Modal/Dropdown/Grid Classes */
.modal-vh80 {
    max-width: 900px;
    height: 80vh;
}

.dropdown-logout {
    padding: 10px 12px;
    border-top: 1px solid #ddd;
    cursor: pointer;
    color: #c00;
    font-size: 13px;
}

.grid-gap16 {
    display: grid;
    gap: 16px;
}

/* Phase 2-3 Step 45: 95% Milestone Classes */
.flex-gap12-mt12 {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.flex-sb-pointer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.flex-sb-mb15 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.grid-2col-gap20 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Phase 2-3 Step 46: Alert Color Classes */
.alert-green {
    background: #f0fdf4;
    border-color: #86efac;
}

.alert-yellow {
    background: #fefce8;
    border-color: #fde68a;
}

.alert-red {
    background: #fef2f2;
    border-color: #f0b4b4;
}

/* Phase 2-3 Step 47: Gradient Button Classes */
.btn-gradient-green {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}

.btn-gradient-yellow {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.btn-gradient-red {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.3);
}

/* Phase 2-3 Step 48: Final 100% Classes */
.code-block {
    background: #f1f5f9;
    padding: 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    margin-bottom: 15px;
    overflow-x: auto;
}

.btn-ai-large {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    padding: 12px 32px;
    font-size: 16px;
}

.flex-wrap-gap6-mt6 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
}

.info-box-scroll {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

.flex-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    margin-top: 8px;
}

.color-gray {
    color: #999;
}

/* ===== Phase 2: コンパクトツールバー（エクセルライク） ===== */
.compact-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    margin: -16px -16px 8px -16px;
    gap: 16px;
}

.sheet-tabs-compact {
    display: flex;
    gap: 2px;
    background: #e2e8f0;
    padding: 2px;
    border-radius: 6px;
}

.sheet-tab-compact {
    padding: 6px 16px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.sheet-tab-compact:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #1e293b;
}

.sheet-tab-compact.active {
    background: white;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.control-group label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.control-group select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    color: #1e293b;
    cursor: pointer;
}

.btn-toolbar {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toolbar:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* page-containerのパディングを縮小 */
#page-summary .modern-card {
    padding: 16px;
}

/* コントロール行もコンパクトに */
#page-summary .controls {
    padding: 8px 0;
    margin-bottom: 8px;
}

/* テーブルコンテナの余白縮小 */
#page-summary .modern-table-container {
    margin: 0 -16px -16px -16px;
    padding: 0;
}

.gap-4 {
    gap: 4px;
}

/* ===== コンパクトコントロール行 ===== */
.controls-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.control-group-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.select-mini {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    color: #1e293b;
    cursor: pointer;
}

.label-mini {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.month-bar-compact {
    display: flex;
    gap: 1px;
    background: #e2e8f0;
    padding: 2px;
    border-radius: 4px;
}

.month-item-compact {
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #64748b;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.1s;
    user-select: none;
}

.month-item-compact:hover {
    background: rgba(59, 130, 246, 0.2);
}

.month-item-compact.in-range {
    background: #3b82f6;
    color: white;
}

.month-item-compact.is-start,
.month-item-compact.is-end {
    background: #1d4ed8;
    color: white;
    font-weight: 600;
}

/* ===== 統合ツールバー ===== */
.unified-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    margin: -16px -16px 0 -16px;
    gap: 8px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-toolbar-mini {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.1s;
}

.btn-toolbar-mini:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* メインコンテンツがサイドバー連動で広がるようにする */
.main-wrapper {
    transition: margin-left 0.2s ease;
}

.sidebar.collapsed ~ .main-wrapper {
    margin-left: 60px;
}

/* モダンカードのパディングをさらに縮小 */
#page-summary .modern-card {
    padding: 0 4px 4px 4px;
}

/* ===== 上段/下段ツールバー ===== */
.toolbar-primary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    margin: 0 -8px;
    gap: 8px;
}

.toolbar-secondary {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: #fafafa;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 -8px;
    gap: 8px;
    flex-wrap: wrap;
}

/* テーブルコンテナを幅100%に */
#page-summary .modern-table-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* テーブル自体を幅100%に */
#page-summary .edit-table,
#page-summary table {
    width: 100%;
    table-layout: auto;
}

/* サマリーページのコンテナパディングを最小化 */
#page-summary.page-container {
    padding: 16px 8px;
}

/* ===== サマリーページ テーブルデザイン改善 ===== */

/* 1. ヘッダーのフォントサイズ縮小・パディング調整 */
#page-summary .edit-table th,
#page-summary table th {
    font-size: 11px;
    padding: 6px 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* 2. セルのパディングをコンパクトに */
#page-summary .edit-table td,
#page-summary table td {
    padding: 5px 8px;
    font-size: 12px;
}

/* 3. 項目列（最初の列）を広げる */
#page-summary .edit-table th:first-child,
#page-summary .edit-table td:first-child,
#page-summary table th:first-child,
#page-summary table td:first-child {
    min-width: 140px;
    width: 140px;
}

/* 4. 期間計列（.total-columnクラスを持つ列）を強調 - PLのみ */
/* 注意: :last-childではなくクラスで判定（年次比較で最終年度に誤適用されないように） */
#page-summary[data-sheet='pl'] .edit-table th.total-column,
#page-summary[data-sheet='pl'] .edit-table td.total-column,
#page-summary[data-sheet='pl'] table th.total-column,
#page-summary[data-sheet='pl'] table td.total-column {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
    font-weight: 600;
    border-left: 2px solid rgba(59, 130, 246, 0.3);
    min-width: 70px;
    width: 100px;
    white-space: nowrap;
}

/* 期間計ヘッダーをさらに強調 - PLのみ */
#page-summary[data-sheet='pl'] .edit-table th.total-column,
#page-summary[data-sheet='pl'] table th.total-column {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* 5. ツールバーとテーブルの間隔を縮小 */
#page-summary .toolbar-secondary {
    margin-bottom: 4px;
}

#page-summary .table-wrapper {
    margin-top: 0;
}

/* 月列の幅を均等に */
#page-summary .edit-table th:not(:first-child):not(:last-child),
#page-summary .edit-table td:not(:first-child):not(:last-child),
#page-summary table th:not(:first-child):not(:last-child),
#page-summary table td:not(:first-child):not(:last-child) {
    min-width: 70px;
    text-align: right;
}

/* 行区切り線を薄く */
#page-summary .edit-table td,
#page-summary table td {
    border-bottom: 1px solid #f1f5f9;
}

/* カテゴリ行のスタイル調整 */
#page-summary .edit-table tr.category-row td,
#page-summary table tr.category-row td {
    padding: 4px 8px;
    font-size: 11px;
}

/* ===== カスタムマルチセレクト（タグ用） ===== */
.multi-select-wrapper {
    position: relative;
    display: inline-block;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    cursor: pointer;
    min-width: 80px;
}

.multi-select-trigger .dropdown-arrow {
    font-size: 8px;
    color: #94a3b8;
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
}

.multi-select-options {
    padding: 4px 0;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.multi-select-option:hover {
    background: #f1f5f9;
}

.multi-select-option input[type='checkbox'] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.multi-select-option label {
    cursor: pointer;
    flex: 1;
    font-size: 12px;
    color: #334155;
}

/* ===== 売上テーブル: 編集・削除ボタン（Phase 4） ===== */

/* 操作列のスタイル */
.sales-table .action-column,
.sales-table th.action-column,
.sales-table td.action-column {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    text-align: center !important;
    padding: 4px 12px 4px 8px !important;
}

/* アイコンボタン共通スタイル */
.sales-table .btn-icon,
.sales-table button.btn-icon {
    padding: 4px 8px !important;
    margin: 0 2px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: white !important;
    color: #475569 !important;
}

.sales-table .btn-icon:hover,
.sales-table button.btn-icon:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* 編集ボタン */
.sales-table .btn-edit,
.sales-table button.btn-edit {
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.sales-table .btn-edit:hover,
.sales-table button.btn-edit:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* 削除ボタン */
.sales-table .btn-delete,
.sales-table button.btn-delete {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

.sales-table .btn-delete:hover,
.sales-table button.btn-delete:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

/* 基礎マスタテーブル用のボタン */
.master-table .btn-sm {
    padding: 4px 10px;
    margin: 2px 0;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    color: #475569;
    white-space: nowrap;
    width: 100%;
}

.master-table .btn-sm:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 編集ボタン（青） */
.master-table .btn-edit-small {
    color: #3b82f6;
    border-color: #3b82f6;
}

.master-table .btn-edit-small:hover {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}

/* 削除ボタン（赤） */
.master-table .btn-delete-small {
    color: #ef4444;
    border-color: #ef4444;
}

.master-table .btn-delete-small:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
}

/* 縦並びアクションボタン */
.row-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: stretch;
    min-width: 60px;
}

/* 科目マスタフィルタ */
.account-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.account-filter > label:first-child {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    margin-right: 4px;
}

.account-filter .checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    margin: 0;
}

.account-filter .checkbox-item input[type='checkbox'] {
    cursor: pointer;
}

.account-filter .checkbox-item span {
    user-select: none;
}

/* ドラッグハンドル */
.drag-handle {
    cursor: grab !important;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing !important;
}

.drag-handle:hover span {
    color: #475569 !important;
}

/* ドラッグ中の行スタイル */
.master-table tr.dragging {
    opacity: 0.5;
    background: #f1f5f9;
}

.master-table tr.drag-over {
    border-top: 2px solid #3b82f6 !important;
}

/* ドロップ位置を示すプレースホルダー */
.master-table tr.drop-placeholder {
    background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%);
    border: 2px dashed #3b82f6 !important;
    animation: placeholder-pulse 1.5s ease-in-out infinite;
}

.master-table tr.drop-placeholder td {
    text-align: center !important;
    color: #3b82f6 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    padding: 0 !important;
}

@keyframes placeholder-pulse {
    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}
/* Scenario Input Group - AI Assistant */
.scenario-input-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.scenario-input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scenario-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.scenario-input-item input {
    width: 100%;
}