/* ==================== リセット & ベース ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* アースカラーパレット */
    --color-primary: #8B7355;
    --color-primary-rgb: 139, 115, 85;
    --color-secondary: #A0937D;
    --color-accent: #6B8E6F;
    --color-background: #F5F1EB;
    --color-text: #3E3A35;
    --color-text-light: #6B6660;
    --color-white: #FFFFFF;
    --color-card: #FAF8F4;
    --color-border: #D4C9B8;
    --color-hover: #7A6347;
    --color-shadow: rgba(62, 58, 53, 0.1);
    --color-shadow-hover: rgba(62, 58, 53, 0.15);

    /* サイドバー */
    --sidebar-width-collapsed: 48px;
    --sidebar-width-expanded: 200px;
    --sidebar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== Goals（目標） ==================== */
.goals-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 目標タブ内だけコンパクト（既存画面に影響させない） */
#goals .btn {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    gap: 6px;
}

#goals .btn:hover {
    transform: translateY(-1px);
}

#goals .btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 9px;
}

.goals-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-end;
    padding: 12px 14px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.goals-toolbar-left {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.goals-company-head {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.goals-company-actions {
    display: flex;
    align-items: center;
}

.goals-footer {
    position: sticky;
    bottom: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(8px);
}

.goals-bulk-dialog {
    max-width: 560px;
}

.goals-bulk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px 16px;
    margin-top: 12px;
}

.goals-bulk-section {
    border: 1px solid rgba(212, 201, 184, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.6);
}

.goals-bulk-title {
    font-size: 12px;
    font-weight: 800;
    color: #666;
    margin-bottom: 6px;
}

.goals-tree {
    border-radius: 14px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
    padding: 12px;
    overflow-x: auto;
    position: relative;
}

.goals-tree-root {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 860px;
    width: 100%;
    justify-content: space-between;
}

.goals-tree-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.goals-tree-person-list {
    column-count: 2;
    column-gap: 10px;
}

.goals-tree-person-list .goals-tree-card-person,
.goals-tree-person-list .goals-tree-empty {
    break-inside: avoid;
    margin-bottom: 8px;
    display: inline-block;
    width: 100%;
}

.goals-tree-col-title {
    font-size: 12px;
    font-weight: 800;
    color: #555;
    position: relative;
    z-index: 6;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-block;
}

.goals-tree-card {
    border: 1px solid rgba(212, 201, 184, 0.7);
    border-radius: 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.goals-tree-card-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.goals-tree-card-subtitle {
    display: block;
    font-size: 11px;
    opacity: 0.75;
    margin-top: 2px;
}

.goals-tree-card-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    font-size: 11px;
}

.goals-tree-metric {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.goals-tree-metric .label {
    color: #666;
}

.goals-tree-metric .value {
    font-weight: 700;
}

.goals-tree-children {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.goals-tree-card-unit {
    background: rgba(255, 255, 255, 0.96);
}

.goals-tree-card-person {
    background: rgba(255, 255, 255, 0.98);
    border-style: dashed;
}

.goals-tree-empty {
    font-size: 12px;
    color: #777;
    padding: 6px 4px;
}

.goals-tree-lines {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    z-index: 5;
}

.goals-tree-line {
    fill: none;
    stroke: rgba(140, 140, 140, 0.5);
    stroke-width: 1.4;
    pointer-events: stroke;
}

.goals-tree-line.is-active {
    stroke: rgba(var(--color-primary-rgb), 0.85);
}

.goals-tree-card.is-line-hover {
    border-color: rgba(var(--color-primary-rgb), 0.65);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.goals-tree-rate-inline {
    font-size: 10px;
    color: #666;
    margin-left: 4px;
}

.goals-month-label {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.goals-month input[type="month"] {
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.7);
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.85);
}

.goals-month-native {
    display: none;
    /* タブUIをメインにする */
}

.goals-month-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 360px;
}

.goals-year-tabs,
.goals-month-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.goals-year-tabs::-webkit-scrollbar,
.goals-month-row::-webkit-scrollbar {
    height: 6px;
}

.goals-year-tabs::-webkit-scrollbar-thumb,
.goals-month-row::-webkit-scrollbar-thumb {
    background: rgba(212, 201, 184, 0.8);
    border-radius: 999px;
}

.goals-tab {
    appearance: none;
    border: 1px solid rgba(212, 201, 184, 0.9);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.goals-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--color-primary-rgb), 0.55);
}

.goals-tab.active {
    background: var(--color-primary);
    color: #fff;
    border-color: rgba(var(--color-primary-rgb), 0.95);
}

.goals-year-tab {
    font-weight: 800;
}

.goals-month-tab {
    font-weight: 700;
    padding: 6px 9px;
}

.goals-month-hint {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.7;
}

/* 会社目標：売上計上月（年/年月タブ）を請求サマリ風に（#goals のみ） */
#goals .goals-company-card .goals-month-dyntabs {
    padding: 10px 14px;
    margin: -2px -2px 10px -2px;
    /* card内で“上部タブ感”を出す */
    border-radius: 12px 12px 0 0;
    text-align: center;
}

#goals .goals-company-card .goals-month-dyntabs .detail-dyntabs-scroll {
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    width: 100%;
    overflow: hidden;
    /* スクロールではなく均等割りで全幅 */
    justify-content: stretch;
}

#goals .goals-company-card .goals-month-dyntabs .detail-dyntab {
    padding: 8px 12px;
    font-size: 13px;
    flex: 1 1 0;
    justify-content: center;
    width: 0;
    /* flex均等割りの安定化 */
}

#goals .goals-company-card .goals-month-dyntabs .detail-dyntab.goals-month-mini {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    flex: 1 1 0;
    justify-content: center;
    width: 0;
}

#goals .goals-company-card .goals-month-dyntabs .goals-month-hint {
    margin-top: 8px;
    padding-left: 2px;
}

/* 会社目標：ヘッダー内に入力を1行でまとめる */
#goals .goals-company-inline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#goals .goals-company-inline-title {
    font-weight: 900;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

#goals .goals-company-inline-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
    /* 中央寄せ */
    min-width: 280px;
}

#goals .goals-inline-label {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.85;
    white-space: nowrap;
}

#goals .goals-inline-input {
    height: 34px;
    padding: 8px 10px;
    border-radius: 10px;
    max-width: 160px;
    width: 140px;
}

.goals-status-label {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.goals-status-pill {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.22);
    background: rgba(var(--color-primary-rgb), 0.08);
    font-weight: 700;
}

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

.goals-validation {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
}

.goals-validation-title {
    font-weight: 800;
    margin-bottom: 8px;
}

.goals-validation-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.goals-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid rgba(212, 201, 184, 0.6);
    background: rgba(255, 255, 255, 0.7);
}

.goals-chip.ok {
    border-color: rgba(46, 125, 50, 0.35);
    background: rgba(46, 125, 50, 0.10);
}

.goals-chip.ng {
    border-color: rgba(211, 47, 47, 0.35);
    background: rgba(211, 47, 47, 0.10);
}

.goals-editor {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goals-card {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.60);
    padding: 12px 14px;
}

.goals-card-header {
    margin-bottom: 10px;
}

.goals-card-header-inline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.goals-card-title {
    font-weight: 900;
}

.goals-card-title-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.goals-rate-sums {
    display: inline-flex;
    gap: 8px;
    font-size: 12px;
    opacity: 0.9;
}

.goals-rate-sum {
    color: #2d2d2d;
    font-weight: 700;
}

.goals-rate-sum.is-ng {
    color: #c62828;
}

.goals-card-sub {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.75;
}

.goals-mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.goals-mini-actions .btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 9px;
}

.goals-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px 12px;
}

@media (max-width: 920px) {
    .goals-form-grid {
        grid-template-columns: 1fr;
    }
}

.goals-field label {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.goals-field .input {
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.7);
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.9);
}

.goals-note {
    font-size: 12px;
    opacity: 0.8;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(212, 201, 184, 0.8);
    background: rgba(255, 255, 255, 0.6);
    min-height: 42px;
    display: flex;
    align-items: center;
}

.goals-table-wrap {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
}

.goals-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.goals-table thead th {
    position: sticky;
    top: 0;
    background: rgba(245, 242, 236, 0.90);
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    font-size: 11px;
    text-align: left;
    padding: 7px 8px;
    white-space: nowrap;
}

.goals-table thead tr.goals-table-toggle-row th {
    top: 0;
    padding: 4px 8px;
    font-size: 10px;
    background: rgba(245, 242, 236, 0.85);
}

.goals-table thead tr.goals-table-toggle-row+tr th {
    top: 22px;
}

.goals-table-toggle-cell {
    text-align: center;
}

.goals-value-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

.goals-value-toggle input {
    transform: scale(0.85);
}

.goals-table tbody td {
    border-bottom: 1px solid rgba(212, 201, 184, 0.35);
    padding: 6px 8px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.6);
}

.goals-table tbody tr:hover td {
    background: rgba(var(--color-primary-rgb), 0.06);
}

.goals-select {
    width: 100%;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.7);
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 12px;
}

.goals-input {
    width: 100%;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.7);
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 12px;
}

.goals-readonly {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

.goals-mono {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 12px;
}

.goals-row-actions {
    text-align: center;
    white-space: nowrap;
}

.goals-text-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.goals-text-btn:hover {
    color: var(--color-hover);
}

/* Goals: アクションドロップダウン（保存以外をまとめる） */
#goals .goals-actions-dd {
    position: relative;
    display: inline-block;
}

#goals .goals-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-shadow);
    padding: 8px 0;
    display: none;
    z-index: 1100;
    overflow: hidden;
}

#goals .goals-actions-menu.show {
    display: block;
    animation: slideDown 0.18s ease-out;
}

#goals .goals-actions-item {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    transition: background-color 0.15s ease;
    display: block;
    white-space: nowrap;
}

#goals .goals-actions-item:hover {
    background: var(--color-background);
}

#goals .goals-actions-item:active {
    background: rgba(212, 201, 184, 0.55);
}

.goals-viz-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.goals-viz-title {
    font-weight: 900;
}

.goals-viz-note {
    font-size: 12px;
    opacity: 0.75;
}

.goals-viz {
    /* 無限拡大防止：高さを画面基準で固定/上限を持たせる */
    height: min(46vh, 420px);
    min-height: 280px;
    max-height: 520px;
    border-radius: 14px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

.goals-viz-fallback {
    padding: 14px;
}

.goals-viz-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.goals-viz-kpi-item {
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.65);
    padding: 10px 12px;
}

.goals-viz-kpi-item .label {
    font-size: 12px;
    opacity: 0.75;
}

.goals-viz-kpi-item .value {
    font-weight: 900;
    margin-top: 4px;
}

.goals-viz-flow {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    justify-items: start;
}

.goals-viz-flow .node {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.22);
    background: rgba(var(--color-primary-rgb), 0.08);
    font-weight: 800;
}

.goals-viz-flow .arrow {
    opacity: 0.7;
    margin-left: 14px;
}

.goals-viz-flow .muted {
    font-weight: 700;
    opacity: 0.7;
}

.goals-viz-hint {
    margin-top: 12px;
    font-size: 12px;
    opacity: 0.75;
}

/* ==================== Goals View Tabs ==================== */
.goals-view-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.goals-view-tab {
    appearance: none;
    border: 1px solid rgba(212, 201, 184, 0.7);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.goals-view-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.goals-view-tab.active {
    background: var(--color-primary);
    color: #fff;
    border-color: rgba(var(--color-primary-rgb), 0.95);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
}

.goals-view-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/* ==================== Goals Dashboard KPI ==================== */
.goals-dashboard {
    margin-top: 8px;
}

.goals-dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* 4列固定グリッド (Row1) */
.goals-dash-kpi-grid-4 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .goals-dash-kpi-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .goals-dash-kpi-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ランキンググリッド (Row2) */
.goals-dash-rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.85fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) {
    .goals-dash-rank-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .goals-dash-rank-grid {
        grid-template-columns: 1fr;
    }
}

.goals-dash-rank-card {
    flex-direction: column;
    gap: 10px;
}

.goals-dash-rank-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.4);
}

.goals-dash-rank-title {
    font-size: 12px;
    font-weight: 800;
    color: #555;
    white-space: nowrap;
}

.goals-dash-rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 1;
}

.goals-dash-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    width: 100%;
}

.goals-dash-rank-medal {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.goals-dash-rank-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goals-dash-rank-bar-wrap {
    width: 52px;
    flex-shrink: 0;
    height: 6px;
    background: rgba(212, 201, 184, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.goals-dash-rank-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6B8E6F, #4A8B7F);
    transition: width 0.5s ease;
}

.goals-dash-rank-bar-unit {
    background: linear-gradient(90deg, #5C7A9E, #4A8B7F);
}

.goals-dash-rank-bar-person {
    background: linear-gradient(90deg, #7B6B8D, #9E6B7B);
}

.goals-dash-rank-vals {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.goals-dash-rank-amount {
    font-weight: 800;
    color: #333;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.goals-dash-rank-pct {
    font-size: 10px;
    color: #999;
}

/* サマリーカード（右端）*/
.goals-dash-summary-col {
    flex-direction: column;
    gap: 0;
    justify-content: center;
}

.goals-dash-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.goals-dash-summary-divider {
    height: 1px;
    background: rgba(212, 201, 184, 0.4);
    margin: 4px 0;
    width: 100%;
}

.goals-dash-kpi-value-md {
    font-size: 15px;
    font-weight: 800;
}

/* ヒーローカード */
.goals-dash-kpi-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(107, 142, 111, 0.12) 0%,
            rgba(74, 139, 127, 0.08) 50%,
            rgba(255, 255, 255, 0.85) 100%);
    border-color: rgba(107, 142, 111, 0.35);
    box-shadow: 0 4px 20px rgba(107, 142, 111, 0.12);
}

.goals-dash-kpi-hero-bg {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 142, 111, 0.15), transparent 70%);
    pointer-events: none;
}

.goals-dash-kpi-value-hero {
    font-size: 22px;
    font-weight: 900;
    color: #3a6040;
    letter-spacing: -0.02em;
}

/* ── Hero Row（左: ヒーローカード, 右: ランキング + サマリー） ── */
.goals-dash-hero-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
    .goals-dash-hero-row {
        grid-template-columns: 1fr;
    }
}

.goals-dash-hero-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── badgeスタイル（「目標」「実績」ラベル） ── */
.goals-dash-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
    flex-shrink: 0;
}

.goals-dash-badge--target {
    background: rgba(107, 142, 111, 0.18);
    color: #3a6040;
}

.goals-dash-badge--actual {
    background: rgba(92, 122, 158, 0.18);
    color: #2a4a7f;
}

/* ── カード内ラベル行 ── */
.goals-dash-kpi-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.goals-dash-kpi-label-text {
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

/* ── 実績セクション（ヒーローカード内） ── */
.goals-dash-actual-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 201, 184, 0.5);
}

.goals-dash-actual-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.goals-dash-actual-period {
    font-size: 10px;
    color: #999;
}

.goals-dash-actual-nums {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

/* ── 3列ランキンググリッド ── */
.goals-dash-rank-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .goals-dash-rank-grid3 {
        grid-template-columns: 1fr;
    }
}

/* ── サマリーRow（ランキング下の2列） ── */
.goals-dash-summary-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.goals-dash-summary-mini {
    align-items: flex-start;
}

/* ── ドーナツチャートwrap（高さ固定で縦中央） ── */
.goals-dash-donut-card {
    display: flex;
    flex-direction: column;
}

.goals-dash-donut-wrap {
    width: 100%;
    height: 260px;
    display: block;
}

.goals-dash-donut-wrap canvas {
    display: block;
    width: 100% !important;
    height: 260px !important;
    max-height: 260px;
}


/* ── チャートタイトル行 ── */
.goals-dash-chart-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* ── フィルタバーの期間テキスト ── */
.goals-dash-filter-range-label {
    margin-left: auto;
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

/* ── ローディングスピナー ── */
.goals-dash-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: #999;
    font-size: 13px;
}

.goals-dash-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(107, 142, 111, 0.2);
    border-top-color: #6B8E6F;
    border-radius: 50%;
    animation: goals-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

.goals-dash-kpi-card {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.goals-dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.goals-dash-kpi-main {
    grid-column: span 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 241, 235, 0.85) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.25);
}

.goals-dash-kpi-icon {
    flex-shrink: 0;
    margin-top: 2px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(212, 201, 184, 0.18);
}

.goals-dash-kpi-body {
    flex: 1;
    min-width: 0;
}

.goals-dash-kpi-label {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 4px;
}

.goals-dash-kpi-value {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.goals-dash-kpi-change {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
}

.goals-dash-kpi-change.positive {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.08);
}

.goals-dash-kpi-change.negative {
    color: #c62828;
    background: rgba(198, 40, 40, 0.08);
}

.goals-dash-kpi-change.neutral {
    color: #666;
    background: rgba(0, 0, 0, 0.04);
}

.goals-dash-donut-card {
    flex-direction: column;
    align-items: center;
}

.goals-dash-donut-card .goals-dash-chart-container {
    width: 100%;
    max-height: 140px;
}

/* ==================== Goals Dashboard Charts ==================== */
.goals-dash-charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .goals-dash-charts {
        grid-template-columns: 1fr;
    }
}

.goals-dash-chart-card {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.70);
    padding: 14px 16px;
    backdrop-filter: blur(6px);
}

.goals-dash-chart-wide {
    grid-column: span 1;
}

.goals-dash-chart-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #555;
}

/* Chart container — prevents infinite resize loop */
.goals-dash-chart-container {
    position: relative;
    width: 100%;
    max-height: 260px;
}

.goals-dash-chart-container canvas {
    width: 100% !important;
    max-height: 260px;
}

.goals-dash-chart-sm {
    max-height: 140px;
}

.goals-dash-chart-sm canvas {
    max-height: 140px;
}

/* ── Analysis grid (row 2) ── */
.goals-dash-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .goals-dash-analysis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Status badge */
.goals-dash-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 2px;
    letter-spacing: .3px;
}

.goals-dash-status-final {
    background: rgba(107, 142, 111, 0.18);
    color: #4a7c50;
}

.goals-dash-status-draft {
    background: rgba(196, 149, 106, 0.18);
    color: #9a7040;
}

.goals-dash-status-none {
    background: rgba(180, 180, 180, 0.18);
    color: #999;
}

/* Sub label */
.goals-dash-kpi-sub {
    font-size: 11px;
    color: #999;
    margin-top: 1px;
}

/* Value variants */
.goals-dash-kpi-value-row {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.goals-dash-kpi-value-sm {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

/* Coverage bar */
.goals-dash-coverage-bar {
    width: 100%;
    height: 5px;
    background: rgba(212, 201, 184, 0.35);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.goals-dash-coverage-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #5C7A9E, #6B8E6F);
    transition: width 0.4s ease;
}

/* Count card */
.goals-dash-counts-card {
    justify-content: center;
}

.goals-dash-counts {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.goals-dash-count-item {
    display: flex;
    gap: 6px;
    align-items: center;
}

.goals-dash-count-num {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    line-height: 1;
}

.goals-dash-count-label {
    font-size: 10px;
    color: #999;
}

/* Org breakdown mini bars */
.goals-dash-org-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.goals-dash-org-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.goals-dash-org-name {
    width: 100px;
    flex-shrink: 0;
    color: #555;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goals-dash-org-bar-wrap {
    flex: 1;
    height: 10px;
    background: rgba(212, 201, 184, 0.25);
    border-radius: 5px;
    overflow: hidden;
}

.goals-dash-org-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.goals-dash-org-pct {
    flex-shrink: 0;
    width: 48px;
    text-align: right;
    font-weight: 700;
    color: #555;
}

.goals-dash-org-val {
    flex-shrink: 0;
    width: 110px;
    text-align: right;
    color: #777;
}

/* ==================== Goals Dashboard Filter Bar ==================== */
.goals-dash-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
}

.goals-dash-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    margin-right: 4px;
}

.goals-dash-filter-btn {
    appearance: none;
    border: 1px solid rgba(212, 201, 184, 0.7);
    background: rgba(255, 255, 255, 0.85);
    color: #666;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.goals-dash-filter-btn:hover {
    border-color: rgba(107, 142, 111, 0.55);
    color: #3a6040;
    background: rgba(107, 142, 111, 0.06);
    transform: translateY(-1px);
}

.goals-dash-filter-btn--active {
    background: linear-gradient(135deg, #6B8E6F, #4A8B7F);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(107, 142, 111, 0.35);
}

.goals-dash-filter-btn--active:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* ==================== Goals Dashboard Labels / Tags ==================== */
.goals-dash-label-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 3px;
    vertical-align: middle;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

.goals-dash-label-tag--target {
    background: rgba(107, 142, 111, 0.18);
    color: #3a6040;
}

.goals-dash-label-tag--actual {
    background: rgba(92, 122, 158, 0.18);
    color: #2a4a7f;
}

/* ==================== Goals Dashboard Actual Row ==================== */
.goals-dash-actual-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.goals-dash-actual-label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.goals-dash-actual-label small {
    font-size: 9px;
}

.goals-dash-actual-value {
    font-size: 13px;
    font-weight: 800;
    color: #5C7A9E;
    font-variant-numeric: tabular-nums;
}

.goals-dash-actual-rate {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
}

.goals-dash-actual-rate.achieve-ok {
    background: rgba(107, 142, 111, 0.15);
    color: #3a6040;
}

.goals-dash-actual-rate.achieve-mid {
    background: rgba(196, 149, 106, 0.15);
    color: #9a6020;
}

.goals-dash-actual-rate.achieve-low {
    background: rgba(181, 101, 77, 0.12);
    color: #8a3020;
}

/* 達成率バー */
.goals-dash-achieve-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(212, 201, 184, 0.3);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.goals-dash-achieve-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ==================== Unit Bar 組織タグ ==================== */
.goals-dash-org-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 120px;
    flex-shrink: 0;
}

.goals-dash-org-tag {
    font-size: 9px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.goals-dash-org-name {
    width: 100%;
    color: #555;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.goals-dash-empty {

    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* ==================== Goals Progress Bar ==================== */
.goals-progress-wrap {
    position: relative;
    height: 14px;
    background: rgba(212, 201, 184, 0.25);
    border-radius: 10px;
    overflow: hidden;
    margin: 4px 0 6px;
}

.goals-progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.goals-progress-bar.high {
    background: linear-gradient(90deg, #6B8E6F 0%, #4CAF50 100%);
}

.goals-progress-bar.mid {
    background: linear-gradient(90deg, #C4956A 0%, #FF9800 100%);
}

.goals-progress-bar.low {
    background: linear-gradient(90deg, #B5654D 0%, #f44336 100%);
}

.goals-progress-label {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 800;
    color: #555;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

/* ==================== Goals Tree Collapse ==================== */
.goals-tree-card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.goals-tree-toggle {
    appearance: none;
    border: none;
    background: rgba(var(--color-primary-rgb), 0.08);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    transition: transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goals-tree-toggle:hover {
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-primary);
}

.goals-tree-card.collapsed .goals-tree-toggle {
    transform: rotate(-90deg);
}

.goals-tree-card.collapsed .goals-tree-card-body {
    display: none;
}

.goals-tree-card.collapsed .goals-progress-wrap {
    display: none;
}

/* ==================== Goals Slider ==================== */
.goals-slider-wrap {
    position: relative;
    margin-top: 4px;
    padding: 0 2px;
}

.goals-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            rgba(107, 142, 111, 0.6) 0%,
            rgba(107, 142, 111, 0.6) var(--slider-pct, 0%),
            rgba(212, 201, 184, 0.35) var(--slider-pct, 0%),
            rgba(212, 201, 184, 0.35) 100%);
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.goals-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.goals-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.goals-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.goals-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: grab;
}

.goals-slider-tooltip {
    position: absolute;
    top: -20px;
    left: 0;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.goals-slider-wrap:hover .goals-slider-tooltip,
.goals-slider:active+.goals-slider-tooltip {
    opacity: 1;
}

/* ==================== Goals Annual Summary ==================== */
.goals-annual-summary {
    margin-top: 8px;
}

.goals-annual-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.goals-annual-year {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.goals-annual-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
}

.goals-annual-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
    font-size: 12px;
}

.goals-annual-table thead th {
    position: sticky;
    top: 0;
    background: rgba(245, 242, 236, 0.95);
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    padding: 8px 10px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
}

.goals-annual-th-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(245, 242, 236, 0.95) !important;
    min-width: 120px;
    text-align: left !important;
}

.goals-annual-td-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(250, 248, 244, 0.95);
    min-width: 120px;
    font-weight: 700;
    border-right: 1px solid rgba(212, 201, 184, 0.35);
}

.goals-annual-cell {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid rgba(212, 201, 184, 0.25);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.goals-annual-cell .muted {
    opacity: 0.4;
}

.goals-annual-total {
    font-weight: 800;
    background: rgba(var(--color-primary-rgb), 0.06) !important;
    border-left: 2px solid rgba(var(--color-primary-rgb), 0.3);
}

.goals-annual-row-company td {
    font-weight: 800;
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.25);
}


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    background: linear-gradient(135deg, var(--color-background) 0%, #E8E3DB 100%);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ==================== 起動中スプラッシュ（ログインのチラつき防止） ==================== */
.boot-splash {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15000;
    /* login-modal(10000)より前 */
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    /* フォールバック */
    overflow: hidden;
}

.boot-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.boot-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    z-index: 1;
}

/* 中央のダイアログは不要のため削除（動画＋オーバーレイのみ） */

/* JS有効時は起動中にスプラッシュを表示し、ログイン/アプリを隠す */
html.booting .boot-splash {
    display: flex;
}

html.booting #login-modal,
html.booting #app {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .boot-bg-video {
        display: none !important;
    }
}

/* ==================== ログインモーダル ==================== */
.login-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    /* フォールバック */
    z-index: 10000;
    overflow: hidden;
}

.login-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* 文字/フォームの可読性 */
    z-index: 1;
}

.login-content {
    /* ガラスモーフィズム（背景動画に馴染ませる） */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 42px 40px;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 400px;
    animation: slideIn 0.3s ease-out;
    position: relative;
    z-index: 2;
    /* 背景動画より前面 */
}

/* ログインカードの縁取り（ほんのり光） */
.login-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.login-header h2 {
    color: var(--color-text);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.login-logo {
    /* ロゴは縁取り/影を付けない（素材そのまま） */
    border-radius: 12px;
    box-shadow: none;
}

/* 入力欄を“軽く”して背景に合わせる */
.login-content .form-group input {
    background: rgba(250, 248, 244, 0.75);
    border-color: rgba(212, 201, 184, 0.85);
}

.login-content .form-group input:hover {
    border-color: rgba(139, 115, 85, 0.55);
    background: rgba(255, 255, 255, 0.82);
}

.login-content .form-group input:focus {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 4px rgba(139, 115, 85, 0.14);
}

/* ログインボタンの押しやすさ */
.login-content .btn.btn-primary.btn-block {
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(139, 115, 85, 0.25);
}

.login-content .btn.btn-primary.btn-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(139, 115, 85, 0.30);
}

.login-content .btn.btn-primary.btn-block:active {
    transform: translateY(0);
}

/* エラー表示をカードに馴染ませる */
.login-content .error-message {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(211, 47, 47, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
}

/* エラー文が空のときは“空白の箱”を出さない */
.login-content .error-message:empty {
    display: none;
    padding: 0;
    border: none;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .login-bg-video {
        display: none !important;
    }

    .login-bg-overlay {
        display: none !important;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
}

.login-logo {
    height: 80px;
    width: auto;
    max-width: 100%;
    margin-bottom: 15px;
    border-radius: 12px;
    object-fit: contain;
}

.login-header h2 {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 600;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    transition: var(--sidebar-transition);
    background: var(--color-card);
    color: var(--color-text);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.error-message {
    color: #d32f2f;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* ==================== ヘッダー ==================== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--color-white);
    border-bottom: 2px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 1000;
    box-shadow: 0 2px 8px var(--color-shadow);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* サービス名テキストを廃止してロゴのみ表示にするため、ロゴの見え方を少し整える */
.header-left .header-logo {
    display: block;
}

.header-logo {
    height: 45px;
    width: auto;
    border-radius: 8px;
    object-fit: contain;
}

.header-left h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

.header-right {
    display: flex;
    align-items: center;
}

.user-menu {
    position: relative;
}

.user-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--color-border);
    transition: var(--sidebar-transition);
    object-fit: cover;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 600;
    font-size: 18px;
}

.user-icon:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--color-shadow);
}

.user-menu-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--color-shadow);
    min-width: 220px;
    padding: 12px 0;
    display: none;
    z-index: 1001;
    border: 1px solid var(--color-border);
}

.user-menu-dropdown.show {
    display: block;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-info {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
}

.user-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.user-email {
    font-size: 13px;
    color: var(--color-text-light);
}

.user-menu-item {
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font-size: 14px;
    transition: var(--sidebar-transition);
}

.user-menu-item:hover {
    background: var(--color-background);
    color: var(--color-primary);
}

/* ==================== メインレイアウト ==================== */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-layout {
    display: flex;
    margin-top: 70px;
    min-height: calc(100vh - 70px);
}

/* ==================== サイドバー ==================== */
.sidebar {
    position: fixed;
    left: 0;
    top: 70px;
    width: var(--sidebar-width-collapsed);
    height: calc(100vh - 70px);
    /* ガラスモーフィズム効果 */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 2px solid rgba(212, 201, 184, 0.5);
    transition: var(--sidebar-transition);
    z-index: 999;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(62, 58, 53, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-group {
    border-radius: 10px;
    overflow: visible;
    border: none;
    background: transparent;
}

.sidebar-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-weight: 700;
    transition: var(--sidebar-transition);
    letter-spacing: 0.2px;
    box-sizing: border-box;
}

.sidebar-group-header:hover {
    color: var(--color-primary);
    background: transparent;
}

/* カテゴリアイコン */
.sidebar-group-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-group-header:hover .sidebar-group-icon {
    opacity: 1;
    transform: scale(1.1);
}

.sidebar-group.is-open .sidebar-group-icon {
    opacity: 1;
}

.sidebar-group-arrow {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    margin-left: auto;
    display: inline-block;
}

.sidebar-group.is-open .sidebar-group-arrow {
    transform: rotate(90deg);
    opacity: 0.9;
}

.sidebar-group-items {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    padding: 0 0 0 10px;
    overflow: hidden;
}

.sidebar-group-items>* {
    /* overflow:hiddenをgridで制御するためのラッパー制約 */
    min-height: 0;
    overflow: hidden;
}

.sidebar-group.is-open .sidebar-group-items {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 4px 0 8px 10px;
}

/* is-opening クラスで開き始めのフェードイン */
.sidebar-group.is-opening .sidebar-group-items {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* 折りたたみ時はグループ内を隠す（クリックミス防止） */
.sidebar:not(.expanded) .sidebar-group-items {
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
    padding: 0 0 0 10px !important;
}

/* 完全折りたたみ時のみ（expandedでもhoverでもない）: アイコンのみ表示 */
.sidebar:not(.expanded):not(:hover) .sidebar-group-arrow {
    display: none;
}

.sidebar:not(.expanded):not(:hover) .sidebar-group-header .sidebar-label {
    display: none;
}

/* 完全折りたたみ時のみ: アイコンを中央寄せ・少し大きく */
.sidebar:not(.expanded):not(:hover) .sidebar-group-icon {
    width: 32px;
    height: 32px;
    opacity: 0.85;
}

/* expanded状態またはホバー時: 左寄せ・ラベル表示・24pxアイコン */
.sidebar.expanded .sidebar-group-header,
.sidebar:hover .sidebar-group-header {
    justify-content: flex-start;
    padding: 8px 14px 6px 10px;
}

.sidebar.expanded .sidebar-group-header .sidebar-label,
.sidebar:hover .sidebar-group-header .sidebar-label {
    display: inline;
}

/* 矢印は常に非表示（ホバー時も含む） */
.sidebar-group-arrow {
    display: none !important;
}

.sidebar-group-items-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}

.sidebar-group-items .sidebar-item {
    width: 100%;
}

/* 既存.sidebar-itemの見た目を“コンパクトで洗練”に上書き */
.sidebar-item {
    padding: 8px 10px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
}

.sidebar-item .sidebar-label {
    font-size: 14px;
    line-height: 1.2;
}

/* サブ項目のインデント感（左に細いガイド）
   NOTE: .sidebar-item::before は「選択状態の縦ライン」に使うため、ガイドは ::after を使う */
.sidebar-group-items .sidebar-item {
    position: relative;
    padding-left: 16px !important;
}

.sidebar-group-items .sidebar-item::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 2px;
    height: 16px;
    /* 文字の高さに近い */
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(212, 201, 184, 0.9);
    opacity: 0.95;
}

/* セクション見出しの控えめな区切り線 */
.sidebar-group-header {
    position: relative;
}

.sidebar-group-header::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: rgba(212, 201, 184, 0.55);
}

/* ==================== Dashboard ==================== */
.dashboard-container {
    padding: 12px 0 0 0;
}

.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
    /* 上端を揃える（見栄え優先） */
}

.filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-group>.segmented,
.filter-group>select,
.filter-group>.filter-range-row,
.filter-group>.filter-checkbox,
.filter-group>.btn {
    min-height: 30px;
}

.filter-group label {
    display: block;
    font-size: 11px;
    color: var(--color-text-light);
    margin-bottom: 4px;
    white-space: nowrap;
    min-height: 14px;
    line-height: 14px;
}

/* フィルタ（カスタム期間） */
.filter-range-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
}

.filter-range-sep {
    color: var(--color-text-light);
    font-weight: 800;
    font-size: 12px;
}

.filter-group-compact {
    min-width: 90px;
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    box-shadow: 0 6px 16px rgba(62, 58, 53, 0.06);
    user-select: none;
}

.filter-checkbox input {
    transform: none;
}

/* Dashboard（請求サマリ）: select / date input を“標準サイズ”で統一（他ページへ波及させない） */
#invoice-summary-dashboard .dashboard-filters select,
#invoice-summary-dashboard .dashboard-filters input[type="date"] {
    height: 42px;
    min-height: 42px;
    padding: 8px 36px 8px 12px;
    /* 右側は矢印スペース */
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: var(--sidebar-transition);
    box-shadow: 0 6px 16px rgba(62, 58, 53, 0.06);
}

#yomi-dashboard .dashboard-filters select,
#yomi-dashboard .dashboard-filters input[type="date"] {
    height: 34px;
    min-height: 34px;
    padding: 4px 30px 4px 10px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: var(--sidebar-transition);
    box-shadow: 0 4px 10px rgba(62, 58, 53, 0.05);
}

#accounts-payable-summary-dashboard .dashboard-filters select,
#accounts-payable-summary-dashboard .dashboard-filters input[type="date"] {
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.8);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#estimates-summary-dashboard .dashboard-filters select,
#estimates-summary-dashboard .dashboard-filters input[type="date"] {
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.8);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#estimates-summary-dashboard .dashboard-filters select:hover,
#estimates-summary-dashboard .dashboard-filters input[type="date"]:hover {
    border-color: rgba(139, 115, 85, 0.6);
}

#estimates-summary-dashboard .dashboard-filters select:focus,
#estimates-summary-dashboard .dashboard-filters input[type="date"]:focus {
    outline: none;
    border-color: rgba(139, 115, 85, 0.9);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}

#estimates-summary-dashboard .dashboard-filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(90, 74, 56, 0.9) 50%),
        linear-gradient(135deg, rgba(90, 74, 56, 0.9) 50%, transparent 50%),
        linear-gradient(to right, rgba(212, 201, 184, 0.6), rgba(212, 201, 184, 0.6));
    background-position:
        calc(100% - 18px) 17px,
        calc(100% - 12px) 17px,
        calc(100% - 36px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 60%;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.epl-summary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.epl-summary-link {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.epl-summary-tooltip {
    display: none;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 360px;
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    line-height: 1.6;
    z-index: 10000;
    pointer-events: none;
    white-space: normal;
}

.epl-summary-link:hover .epl-summary-tooltip,
.epl-summary-link:focus-within .epl-summary-tooltip {
    display: block;
}

#accounts-payable-summary-dashboard .dashboard-filters select:hover,
#accounts-payable-summary-dashboard .dashboard-filters input[type="date"]:hover {
    border-color: rgba(139, 115, 85, 0.6);
}

#accounts-payable-summary-dashboard .dashboard-filters select:focus,
#accounts-payable-summary-dashboard .dashboard-filters input[type="date"]:focus {
    outline: none;
    border-color: rgba(139, 115, 85, 0.9);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}

/* selectの“素の見た目”を抑えて、矢印を統一（買掛サマリ） */
#accounts-payable-summary-dashboard .dashboard-filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(90, 74, 56, 0.9) 50%),
        linear-gradient(135deg, rgba(90, 74, 56, 0.9) 50%, transparent 50%),
        linear-gradient(to right, rgba(212, 201, 184, 0.6), rgba(212, 201, 184, 0.6));
    background-position:
        calc(100% - 18px) 17px,
        calc(100% - 12px) 17px,
        calc(100% - 36px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 60%;
    background-repeat: no-repeat;
    padding-right: 42px;
}

#yomi-dashboard .dashboard-filters select:hover,
#yomi-dashboard .dashboard-filters input[type="date"]:hover {
    border-color: rgba(139, 115, 85, 0.55);
    background: rgba(255, 255, 255, 0.82);
}

#yomi-dashboard .dashboard-filters select:focus,
#yomi-dashboard .dashboard-filters input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.14), 0 10px 24px rgba(62, 58, 53, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

#yomi-dashboard .dashboard-filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}

.yomi-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yomi-summary-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.yomi-dashboard-table-wrap {
    max-height: 320px;
    overflow: auto;
}

#estimates-summary-dashboard .yomi-dashboard-table-wrap {
    max-height: none;
    overflow: visible;
}

.yomi-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.yomi-dashboard-table th,
.yomi-dashboard-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.5);
    text-align: left;
    white-space: nowrap;
}

.yomi-dashboard-table th {
    font-weight: 700;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.6);
    position: sticky;
    top: 0;
    z-index: 1;
}

.yomi-dashboard-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-light);
}

.yomi-axis-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.yomi-axis-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.yomi-axis-sub {
    font-size: 12px;
    color: var(--color-text-light);
}

.yomi-axis-kpi {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
}

.yomi-axis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yomi-axis-grid canvas {
    min-height: 200px;
}

.yomi-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.yomi-summary-grid .dashboard-card {
    min-height: 220px;
}

/* min-height は .yomi-gross-trend-wrap ラッパーに移動済み */
.yomi-summary-grid .span-2 {
    grid-column: span 2;
}

/* drop-shadowをcanvasに適用するとChart.jsカスタム描画テキストが引き伸ばされるため削除 */

#yomi-summary-by-owner {
    height: 520px !important;
}

#yomi-summary-by-client,
#yomi-summary-by-product {
    height: 360px !important;
}

.yomi-summary-matrix {
    margin-top: 8px;
}

.yomi-summary-matrix-scroll {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
}

.yomi-summary-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.yomi-summary-matrix-cell {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.yomi-summary-matrix-cell .matrix-header {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-light);
}

.yomi-summary-matrix-cell .matrix-name {
    font-weight: 700;
    color: var(--color-text);
}

.yomi-summary-matrix-cell .matrix-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    font-size: 11px;
    color: var(--color-text-light);
}

.yomi-summary-matrix-cell .matrix-metrics span:nth-child(3) {
    grid-column: 1 / -1;
}

.yomi-summary-matrix-empty {
    color: var(--color-text-light);
    font-size: 12px;
    padding: 8px 10px;
}

.yomi-person-tabs {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 12px;
}

.yomi-person-tab {
    border: 1px solid rgba(212, 201, 184, 0.6);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

.yomi-person-tab.active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.22);
}

.yomi-person-pane {
    display: none;
}

.yomi-person-pane.active {
    display: block;
}

.yomi-person-detail-tabs {
    display: inline-flex;
    gap: 8px;
    margin: 6px 0 12px;
}

.yomi-person-detail-tab {
    border: 1px solid rgba(212, 201, 184, 0.7);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.yomi-person-detail-tab.active {
    background: rgba(var(--color-primary-rgb), 0.16);
    border-color: rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-text);
}

.yomi-person-detail-pane {
    display: none;
}

.yomi-person-detail-pane.active {
    display: block;
}

.yomi-dashboard-rank-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.yomi-dashboard-rank-buttons .rank-btn {
    border: 1px solid rgba(212, 201, 184, 0.7);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.yomi-dashboard-rank-buttons .rank-btn.active {
    background: rgba(var(--color-primary-rgb), 0.16);
    border-color: rgba(var(--color-primary-rgb), 0.5);
}

.filter-group .filter-hint {
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.yomi-person-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.yomi-person-controls label {
    font-size: 12px;
    color: var(--color-text-light);
}

.yomi-person-controls select {
    height: 38px;
    min-height: 38px;
    padding: 6px 34px 6px 10px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
}

.yomi-person-table-wrap {
    margin-top: 12px;
    max-height: 320px;
    overflow: auto;
}

.yomi-person-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.yomi-person-table th,
.yomi-person-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.5);
    text-align: left;
    white-space: nowrap;
}

.yomi-person-table tbody tr {
    cursor: pointer;
}

.yomi-person-table tbody tr:hover {
    background: rgba(139, 115, 85, 0.08);
}

.payable-pdf-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.payable-pdf-card-actions .btn-text {
    background: transparent;
    border: none;
    color: var(--color-text);
    padding: 0 4px;
}

.payable-pdf-card-actions .btn-text:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.payable-pdf-card-actions .btn-outline {
    background: transparent;
    border: 1px solid rgba(120, 120, 120, 0.45);
    color: var(--color-text);
}

.payable-pdf-card-actions .btn-outline:hover {
    background: rgba(120, 120, 120, 0.08);
    border-color: rgba(120, 120, 120, 0.6);
}

.payable-pdf-card-actions .btn-icon {
    background: transparent;
    border: 1px solid rgba(200, 70, 70, 0.4);
    color: #c62828;
    width: 30px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.payable-pdf-card-actions .btn-icon:hover {
    background: rgba(200, 70, 70, 0.12);
    border-color: rgba(200, 70, 70, 0.6);
}

.payable-status-select {
    min-width: 140px;
    padding: 6px 10px;
    font-size: 13px;
}

.yomi-rank-inline-select {
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    min-width: 54px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.yomi-rank-inline-select:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

.yomi-rank-inline-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.yomi-axis-stats {
    padding: 6px 0;
}

.yomi-axis-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.yomi-axis-stats-table th,
.yomi-axis-stats-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.45);
}

.yomi-axis-stats-table th {
    text-align: left;
    color: var(--color-text-light);
    font-weight: 600;
    width: 40%;
}

.yomi-axis-stats-table td {
    text-align: right;
    color: var(--color-text);
    font-weight: 700;
}

.yomi-axis-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-light);
}

#invoice-summary-dashboard .dashboard-filters select:hover,
#invoice-summary-dashboard .dashboard-filters input[type="date"]:hover {
    border-color: rgba(139, 115, 85, 0.55);
    background: rgba(255, 255, 255, 0.82);
}

#invoice-summary-dashboard .dashboard-filters select:focus,
#invoice-summary-dashboard .dashboard-filters input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.14), 0 10px 24px rgba(62, 58, 53, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

/* selectの“素の見た目”を抑えて、矢印を統一 */
#invoice-summary-dashboard .dashboard-filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}

.segmented {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.seg-btn {
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    font-weight: 600;
    transition: var(--sidebar-transition);
    font-size: 13px;
}

/* Dashboard: セグメント外枠（padding+border）を含めて select(42px) と同じ見た目の高さに揃える */
#invoice-summary-dashboard .segmented {
    padding: 2px;
}

#invoice-summary-dashboard .segmented .seg-btn {
    height: 36px;
    /* 36 + (padding上下2*2) + (border上下1*2) = 42 */
    display: inline-flex;
    align-items: center;
}

.seg-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.25);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.yomi-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(62, 58, 53, 0.08);
}

.kpi-label {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: 0.2px;
}

.kpi-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-light);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-card.span-2 {
    grid-column: span 2;
}

.dashboard-card.span-2 {
    --sub-chart-height: 240px;
}

.dashboard-card.tall {
    --chart-height: 320px;
}

/* Dashboard: 詳細フィルタ（開閉） */
.dashboard-advanced-filters {
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(62, 58, 53, 0.08);
}

.adv-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

.adv-filter-label {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 6px;
    font-weight: 600;
}

.adv-filter-box {
    min-height: 36px;
    padding: 10px 10px;
    border: 1px solid rgba(212, 201, 184, 0.65);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
}

/* Dashboard: サジェスト型（クライアント/担当者/売上商品） */
.adv-suggest {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 42px;
}

.adv-suggest-tokens {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.adv-suggest-input {
    flex: 1;
    min-width: 140px;
    height: 30px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    outline: none;
}

.adv-suggest-input:focus {
    border-color: rgba(139, 115, 85, 0.75);
}

.adv-suggest-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(62, 58, 53, 0.14);
    padding: 6px;
    max-height: 220px;
    overflow: auto;
}

.adv-suggest-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}

.adv-suggest-item:hover {
    background: rgba(139, 115, 85, 0.12);
}

.adv-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(139, 115, 85, 0.35);
    background: rgba(139, 115, 85, 0.12);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
}

.adv-token-x {
    border: none;
    background: rgba(62, 58, 53, 0.08);
    color: var(--color-text);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    cursor: pointer;
    font-weight: 900;
}

.adv-token-x:hover {
    background: rgba(62, 58, 53, 0.16);
}

.adv-filters-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    /* pill廃止：選択/非選択の判別を上げる */
    border: 1px solid rgba(212, 201, 184, 0.65);
    background: rgba(255, 255, 255, 0.75);
    color: var(--color-text);
    cursor: pointer;
    transition: var(--sidebar-transition);
    font-size: 12px;
    font-weight: 600;
    user-select: none;
}

.filter-chip:hover {
    border-color: rgba(139, 115, 85, 0.55);
}

.filter-chip.is-selected {
    border-color: rgba(139, 115, 85, 0.70);
    background: rgba(139, 115, 85, 0.20);
    box-shadow: 0 6px 16px rgba(62, 58, 53, 0.06);
}

.filter-chip.is-selected::before {
    content: '✓';
    font-weight: 900;
    margin-right: 6px;
    color: var(--color-primary);
}

/* Dashboard Drilldown Detail（split方式） */
.dashboard-detail {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(62, 58, 53, 0.10);
    overflow: hidden;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(245, 241, 235, 0.65);
}

.detail-title-main {
    font-weight: 800;
    color: var(--color-text);
}

.detail-title-sub {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 2px;
}

.detail-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.45);
}

/* ==================== Dashboard Drill: 動的タブ ==================== */
.detail-dyntabs {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.55);
}

.detail-dyntabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    /* Chrome風：タブ下の罫線 */
}

.detail-dyntabs-scroll::-webkit-scrollbar {
    height: 8px;
}

.detail-dyntabs-scroll::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 85, 0.35);
    border-radius: 999px;
}

.detail-dyntabs-scroll::-webkit-scrollbar-track {
    background: rgba(245, 241, 235, 0.55);
    border-radius: 999px;
}

.detail-dyntab {
    border: 1px solid rgba(212, 201, 184, 0.75);
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(245, 241, 235, 0.55);
    color: var(--color-text);
    border-radius: 10px 10px 0 0;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    transition: var(--sidebar-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    user-select: none;
    margin-bottom: -1px;
    position: relative;
}

.detail-dyntab:hover {
    border-color: rgba(139, 115, 85, 0.55);
    background: rgba(255, 255, 255, 0.86);
}

.detail-dyntab.active {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(212, 201, 184, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    box-shadow: 0 12px 26px rgba(62, 58, 53, 0.10);
    z-index: 2;
}

.detail-dyntabs.is-snapshot .detail-dyntab.active {
    border-color: rgba(203, 63, 63, 0.65);
    color: #9b1c1c;
    box-shadow: 0 12px 26px rgba(203, 63, 63, 0.18);
}

.detail-dyntab.snapshot-changed {
    border-color: rgba(203, 63, 63, 0.75);
    color: #b42318;
    box-shadow: 0 10px 22px rgba(203, 63, 63, 0.2);
}

.detail-dyntab.is-new {
    animation: dynTabPulse 1.2s ease-out 1;
}

@keyframes dynTabPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(107, 142, 111, 0.35);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(107, 142, 111, 0);
    }
}

.detail-dyntab-close {
    border: none;
    background: rgba(62, 58, 53, 0.06);
    color: rgba(62, 58, 53, 0.85);
    width: 22px;
    height: 22px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
    transition: var(--sidebar-transition);
}

.detail-dyntab.active .detail-dyntab-close {
    background: rgba(62, 58, 53, 0.06);
}

.detail-dyntab-close:hover {
    transform: scale(1.06);
}

.detail-dyntab-pane {
    display: none;
    padding: 12px 14px 14px 14px;
}

.detail-dyntab-pane.active {
    display: block;
}

/* サマリ内サブタブは少しだけ詰める */
.detail-subtabs {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.45);
    background: rgba(245, 241, 235, 0.35);
}

.detail-tab {
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.65);
    color: var(--color-text);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: var(--sidebar-transition);
}

.detail-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 24px rgba(139, 115, 85, 0.22);
}

.detail-pane {
    display: none;
    padding: 12px 14px 14px 14px;
}

.detail-pane.active {
    display: block;
}

.detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.detail-kpi {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
}

.detail-kpi-label {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 600;
}

.detail-kpi-value {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
}

.detail-table-wrap {
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.detail-table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.45);
}

.detail-table-note {
    color: var(--color-text-light);
    font-size: 12px;
}

.detail-table-scroll {
    overflow: auto;
    max-height: 420px;
}

.detail-table {
    font-size: 12px;
}

.dash-status-select {
    width: 100%;
    min-width: 120px;
    height: 32px;
    padding: 6px 28px 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.65);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    font-weight: 600;
    transition: var(--sidebar-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

/* Dashboard（請求サマリ）: JSON列 */
.dash-json-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text);
    max-width: 520px;
}

.dash-json-vertical {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
    overflow: hidden;
}

.dash-json-line {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-json-key {
    color: var(--color-text-light);
    font-weight: 700;
    min-width: 26px;
    text-transform: lowercase;
}

.dash-json-sep {
    color: var(--color-text-light);
}

.dash-json-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 800;
}

.dash-json-link:hover {
    color: var(--color-hover);
}

.dash-json-null {
    color: var(--color-text-light);
}

.dash-status-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.14);
}

.detail-table tr.is-saving {
    opacity: 0.72;
}

.detail-table tr.is-saving .dash-status-select,
.detail-table tr.is-saving .dash-open-cpl {
    pointer-events: none;
}

.cpl-parent-row.dashboard-focus {
    outline: 2px solid rgba(139, 115, 85, 0.55);
    background: rgba(139, 115, 85, 0.10);
}

.cpl-item-row tr.dashboard-focus-item {
    outline: 2px solid rgba(107, 142, 111, 0.55);
    background: rgba(107, 142, 111, 0.12);
}

.detail-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(62, 58, 53, 0.08);
    position: relative;
}

.dashboard-card-title {
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

.dashboard-card-subtitle {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 600;
    margin-bottom: 8px;
}

.dashboard-chart-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-chart-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(212, 201, 184, 0.5);
    border-radius: 12px;
    padding: 10px 12px;
}

/* Chart.js: 親の高さが未確定だとcanvasが伸び続けることがあるため固定 */
.dashboard-card canvas {
    display: block;
    width: 100% !important;
    height: var(--chart-height, 260px) !important;
}

.dashboard-chart-card canvas {
    height: var(--sub-chart-height, 220px) !important;
}

.dashboard-note {
    margin-top: 12px;
    color: var(--color-text-light);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card.span-2 {
        grid-column: span 1;
    }

    .yomi-summary-grid .dashboard-card.span-2,
    .yomi-summary-grid .span-2 {
        grid-column: span 2;
    }

    .dashboard-chart-stack {
        grid-template-columns: 1fr;
    }

    .adv-filters-grid {
        grid-template-columns: 1fr;
    }

    .detail-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.sidebar-toggle-btn {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 2px solid rgba(212, 201, 184, 0.6);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sidebar-transition);
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(62, 58, 53, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    padding: 0;
}

.sidebar-toggle-btn:hover {
    background: rgba(245, 241, 235, 0.9);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-color: var(--color-primary);
    box-shadow: 2px 0 10px rgba(62, 58, 53, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    width: 28px;
}

.sidebar.expanded .sidebar-toggle-btn {
    right: -20px;
}

.sidebar-arrow {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    transition: var(--sidebar-transition);
    line-height: 1;
}

.sidebar-toggle-btn:hover .sidebar-arrow {
    color: var(--color-hover);
    transform: scale(1.2);
}

.sidebar.expanded .sidebar-arrow {
    transform: rotate(180deg);
}

.sidebar:hover {
    width: var(--sidebar-width-expanded);
}

.sidebar:hover .sidebar-item {
    justify-content: flex-start;
    padding: 16px 20px;
    margin: 4px 12px;
    color: var(--color-text);
}

.sidebar:hover .sidebar-item:not(.active) {
    color: var(--color-text);
}

.sidebar:hover .sidebar-label {
    opacity: 1 !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    overflow: visible !important;
    margin-left: 0;
    color: var(--color-text) !important;
    display: inline-block !important;
    visibility: visible !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0s linear 0s !important;
}

.sidebar:hover .sidebar-item.active .sidebar-label {
    color: var(--color-white) !important;
}

.sidebar:hover .sidebar-item:not(.active) .sidebar-label {
    color: var(--color-text) !important;
}

.sidebar.expanded {
    width: var(--sidebar-width-expanded);
}

.sidebar.expanded .sidebar-item {
    justify-content: flex-start;
    padding: 8px 12px;
    margin: 2px 12px;
    color: var(--color-text);
    width: calc(100% - 24px);
    /* 12px*2 を差し引いてはみ出し防止 */
    box-sizing: border-box;
}

.sidebar.expanded .sidebar-item:not(.active) {
    color: var(--color-text);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    overflow-y: auto;
    max-height: calc(100vh - 70px);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* スクロールバーを細くして目立たなくする */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 115, 85, 0.3) transparent;
}

.sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    margin: 4px 4px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
    border-radius: 8px;
    transition: var(--sidebar-transition);
    color: var(--color-text-light);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 40px;
    width: 100%;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    /* 文字高に合わせる */
    background: var(--color-primary);
    border-radius: 2px;
    transform: translateY(-50%) scaleY(0);
    transition: var(--sidebar-transition);
}

.sidebar-item:hover {
    background: rgba(245, 241, 235, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-primary);
    transform: none;
    /* 横ズレで背景がはみ出やすいので抑制 */
    border-color: rgba(139, 115, 85, 0.3);
    box-shadow: 0 2px 8px rgba(62, 58, 53, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.sidebar-item.active {
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.8) 0%, rgba(122, 99, 71, 0.8) 100%);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    border-color: rgba(139, 115, 85, 0.5);
}

.sidebar.expanded .sidebar-item.active {
    color: var(--color-white);
}

.sidebar-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.sidebar-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
        max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
        visibility 0s linear 0.3s;
    text-align: left;
    color: var(--color-text);
    display: inline-block;
    visibility: hidden;
    line-height: 1.5;
}

.sidebar.expanded .sidebar-label {
    opacity: 1 !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    overflow: visible !important;
    margin-left: 0;
    color: var(--color-text) !important;
    display: inline-block !important;
    visibility: visible !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0s linear 0s !important;
}

/* より具体的なセレクタで確実に適用 */
aside#sidebar.sidebar.expanded nav.sidebar-nav button.sidebar-item span.sidebar-label {
    opacity: 1 !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    overflow: visible !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* アクティブな項目のラベルは常に白文字 */
.sidebar-item.active .sidebar-label {
    color: var(--color-white);
}

/* 展開時もアクティブな項目のラベルは白文字 */
.sidebar.expanded .sidebar-item.active .sidebar-label {
    color: var(--color-white);
}

/* 展開時の非アクティブな項目のラベルは通常のテキスト色 */
.sidebar.expanded .sidebar-item:not(.active) .sidebar-label {
    color: var(--color-text);
}

/* ==================== メインコンテンツ ==================== */
.main-content {
    margin-left: var(--sidebar-width-collapsed);
    padding: 30px;
    width: calc(100% - var(--sidebar-width-collapsed));
    transition: var(--sidebar-transition);
    flex: 1;
}

.sidebar.expanded~.main-content {
    margin-left: var(--sidebar-width-expanded);
    width: calc(100% - var(--sidebar-width-expanded));
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.header-actions>* {
    order: 1;
}

.header-actions .btn-primary {
    order: 2;
}

.header-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-actions .btn-secondary,
.header-actions .btn-primary {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 30px;
}

.header-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* サブタブ（組織ページ内のタブ） */
.sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    background: var(--color-white);
    border-radius: 8px 8px 0 0;
    padding: 0 20px;
}

.sub-tab-button {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-light);
    transition: all 0.3s ease;
    position: relative;
    top: 2px;
}

.sub-tab-button:hover {
    color: var(--color-primary);
    background: var(--color-background);
}

.sub-tab-button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.sub-tab-content {
    display: none;
}

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

/* 一括アップロードドロップダウンメニュー */
.bulk-upload-dropdown {
    position: relative;
    display: inline-block;
}

.bulk-upload-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-shadow);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 1001;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.bulk-upload-dropdown-menu.show {
    display: block;
    animation: slideDown 0.2s ease-out;
}

.bulk-upload-menu-item {
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
    transition: background-color 0.2s;
    display: block;
}

.bulk-upload-menu-section {
    font-weight: 800;
    font-size: 12px;
    color: #666;
    cursor: default;
    padding: 6px 20px 4px;
}

.bulk-upload-menu-item:hover {
    background: var(--color-background);
}

.bulk-upload-menu-item:active {
    background: var(--color-border);
}

/* disabled（例: 発注管理へ（作成済））を薄いグレーで明確化 */
.bulk-upload-menu-item:disabled {
    color: #b3ada6;
    cursor: not-allowed;
    opacity: 1;
}

.bulk-upload-menu-item:disabled:hover,
.bulk-upload-menu-item:disabled:active {
    background: none;
}

.csv-dropzone {
    border: 2px dashed #d0d5dd;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
    text-align: center;
    color: #667085;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.csv-dropzone.dragover {
    border-color: #5b8def;
    background: #f3f7ff;
    color: #1d3b8b;
}

.csv-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.csv-file-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.csv-file-button {
    cursor: pointer;
    user-select: none;
}

.csv-file-name {
    font-size: 12px;
    color: #667085;
}

.section-header h2 {
    color: #9ca3af;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ==================== テーブル ==================== */
.table-wrapper {
    background: var(--color-white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px var(--color-shadow);
}

.epl-prefix-tabs,
.apl-prefix-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    margin-bottom: 12px;
}

.epl-prefix-tabs button,
.apl-prefix-tabs button {
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--sidebar-transition);
}

.epl-prefix-tabs button:hover,
.apl-prefix-tabs button:hover {
    background: rgba(148, 163, 184, 0.15);
}

.epl-prefix-tabs button.active,
.apl-prefix-tabs button.active {
    background: rgba(30, 41, 59, 0.9);
    color: #f8fafc;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.table-controls {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.table-controls-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

.table-controls-actions>* {
    order: 1;
}

.table-controls-actions .btn-primary {
    order: 2;
}

.table-controls-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.table-controls-actions .btn-secondary,
.table-controls-actions .btn-primary {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 30px;
}

.table-controls-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.search-input {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;
    margin-left: auto;
}

/* YOMI：ページネーションは中央寄せ */
#yomi-pagination.pagination-controls {
    justify-content: center;
    margin-left: 0;
    width: 100%;
}

/* 見積もり管理のページネーションを検索アクションと同じ高さに */
.estimates-search-container .pagination-controls {
    margin-left: 0;
    height: 40px;
    align-items: center;
}

.estimates-search-container .pagination-controls button,
.estimates-search-container .pagination-controls select {
    height: 40px;
    box-sizing: border-box;
}

.estimates-search-container .pagination-nav button {
    height: 40px;
}

.estimates-search-container .pagination-limit select {
    height: 40px;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

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

.pagination-limit label {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
}

.pagination-limit select {
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transition: var(--sidebar-transition);
}

.pagination-limit select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.pagination-info {
    font-size: 14px;
    color: var(--color-text-light);
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination-nav button {
    min-width: 44px;
    height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pagination-nav button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--color-background);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.pagination-nav button:not(.disabled):hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.pagination-nav .pagination-btn-prev,
.pagination-nav .pagination-btn-next {
    font-weight: 600;
    min-width: 60px;
}

.pagination-nav span.pagination-ellipsis {
    color: var(--color-text-light);
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    height: 36px;
}

.search-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-size: 14px;
    transition: var(--sidebar-transition);
    background: var(--color-card);
    color: var(--color-text);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.table-container {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
}

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

.table-container::-webkit-scrollbar-track {
    background: var(--color-background);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-hover);
}

.data-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: var(--color-white);
}

.payable-pdf-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
}

.payable-pdf-actions .muted {
    color: #888;
    font-size: 12px;
}

.payable-ocr-inline {
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 2px;
}

.payable-status-select {
    width: 100%;
    max-width: 140px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    font-size: 13px;
}

.payable-status-select.is-paid {
    color: #8a8a8a;
}

.payable-status-select.is-pending {
    color: #c62828;
}

/* 見積もりテーブルの列幅を固定 */
#estimates-table {
    table-layout: fixed;
}

/* 見積一覧：操作/枝番数の列が狭いとボタンがはみ出して被るので、min-widthでスクロールへ逃がす */
#estimates-table th:nth-child(7),
#estimates-table td:nth-child(7) {
    min-width: 72px;
    /* 枝番数 */
}

#estimates-table th:nth-child(8),
#estimates-table td:nth-child(8) {
    min-width: 132px;
    /* 操作（アクションボタン） */
}

/* 発注テーブル：列幅と折り返し制御（APLを少し広げ、枝番が改行しないようにする） */
#orders-table {
    table-layout: fixed;
}

#orders-table th:nth-child(1),
#orders-table td:nth-child(1) {
    width: 16%;
    /* APL（少し広げる） */
}

#orders-table th:nth-child(2),
#orders-table td:nth-child(2) {
    width: 12%;
    /* EPL */
}

#orders-table th:nth-child(3),
#orders-table td:nth-child(3) {
    width: 10%;
    /* ステータス */
}

#orders-table th:nth-child(4),
#orders-table td:nth-child(4) {
    width: 10%;
    /* 見積日 */
}

#orders-table th:nth-child(5),
#orders-table td:nth-child(5) {
    width: 14%;
    /* クライアント */
}

#orders-table th:nth-child(6),
#orders-table td:nth-child(6) {
    width: 20%;
    /* 見積もり件名 */
}

#orders-table th:nth-child(7),
#orders-table td:nth-child(7) {
    width: 12%;
    /* 合計金額 */
}

#orders-table th:nth-child(8),
#orders-table td:nth-child(8) {
    width: 8%;
    /* 操作 */
    min-width: 84px;
    /* 「詳細」が金額列に食い込まない最低幅 */
}

#orders-table .truncate-1 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 子/孫のAPL枝番が改行しないようにする（APL-897-1 等） */
#orders-table tr.order-item-row td:first-child {
    white-space: nowrap;
}

/* 発注：子明細ヘッダー（見積の子ヘッダーと揃える） */
#orders-table tr.order-item-header-row {
    background-color: #e8e8e8;
    font-weight: 600;
    border-top: none;
}

/* 見積：子明細ヘッダー（発注と同じ見た目に統一） */
#estimates-table tr.estimate-item-header-row {
    background-color: #e8e8e8;
    font-weight: 600;
    border-top: 2px solid var(--color-primary);
}

/* 見積：子明細（行） */
#estimates-table tr.estimate-item-row td {
    background: #e8e8e8;
    border-top: 1px dashed rgba(212, 201, 184, 0.55);
}

#estimates-table tr.estimate-item-row td.action-buttons {
    min-width: 120px;
    justify-content: center;
    align-items: center;
}

#estimates-table tr.estimate-item-row .row-action-trigger {
    white-space: nowrap;
}

#estimates-table th:nth-child(1),
#estimates-table td:nth-child(1) {
    width: 12%;
    /* EPL */
}

#estimates-table th:nth-child(2),
#estimates-table td:nth-child(2) {
    width: 8%;
    /* APL */
}

#estimates-table th:nth-child(3),
#estimates-table td:nth-child(3) {
    width: 12%;
    /* ステータス */
}

#estimates-table th:nth-child(4),
#estimates-table td:nth-child(4) {
    width: 10%;
    /* 見積日 */
}

#estimates-table th:nth-child(5),
#estimates-table td:nth-child(5) {
    width: 14%;
    /* クライアント */
}

#estimates-table th:nth-child(6),
#estimates-table td:nth-child(6) {
    width: 28%;
    /* 見積もり件名 */
}

#estimates-table th:nth-child(7),
#estimates-table td:nth-child(7) {
    width: 6%;
    /* 枝番数 */
}

#estimates-table th:nth-child(8),
#estimates-table td:nth-child(8) {
    width: 10%;
    /* 操作 */
}

.data-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%);
    color: var(--color-white);
    position: relative;
    z-index: 200;
    /* ローディングオーバーレイより前面に表示 */
}

.data-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: var(--sidebar-transition);
    position: relative;
}

.data-table th:hover {
    background: rgba(255, 255, 255, 0.1);
}

.data-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: var(--sidebar-transition);
}

.data-table tbody tr:nth-child(even) {
    background: var(--color-card);
}

/* 発注一覧：アコーディオン行（子/孫）が混ざるとnth-child縞が崩れるため除外 */
#orders-table tbody tr.order-item-row:nth-child(even) {
    background: transparent;
}

/* 発注一覧：親行の縞は「親配列のindex」で付与したクラスで制御 */
#orders-table tr.order-parent-row.is-striped {
    background: var(--color-card);
}

#orders-table tr.order-parent-row.is-plain {
    background: transparent;
}

/* 発注一覧：親行の高さを圧縮 */
#orders-table tr.order-parent-row td {
    padding: 6px 10px;
    line-height: 1.15;
    white-space: nowrap;
    font-size: 13px;
}

#orders-table .apl-cpl-stack {
    gap: 2px;
    line-height: 1.15;
}

/* 請求一覧：親行の高さを圧縮 */
#cpl-table tr.cpl-parent-row td {
    padding: 6px 10px;
    line-height: 1.15;
    white-space: nowrap;
    font-size: 13px;
}

/* 見積一覧：親行の縞は「親配列のindex」で付与したクラスで制御（子/孫で崩れない） */
#estimates-table tr.estimate-parent-row.is-striped {
    background: var(--color-card);
}

#estimates-table tr.estimate-parent-row.is-plain {
    background: transparent;
}

.data-table tbody tr:hover {
    background: var(--color-background);
    transform: scale(1.01);
    box-shadow: 0 2px 8px var(--color-shadow);
    /* ドロップダウンが他行のスタッキングに隠れないようにする */
    position: relative;
    z-index: 5;
}

/* キーボード操作（focus）でもドロップダウンが他行に隠れないようにする */
.data-table tbody tr:focus-within {
    position: relative;
    z-index: 5;
}

.data-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text);
}

.data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 見積一覧（親行）は行高を揃えるため折り返ししない（…で省略） */
#estimates-table tr.estimate-parent-row td {
    white-space: nowrap;
}

/* 見積：APL + CPL の2段表示（コンパクト） */
#estimates-table .apl-cpl-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

#estimates-table .apl-cpl-line {
    display: block;
}

#estimates-table .apl-cpl-sub {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 700;
}

/* APL/CPLブロック内はリンクの余白を消して、文字開始位置（左端）を揃える */
#estimates-table .apl-cpl-stack .action-link {
    padding: 0;
    margin: 0;
}

/* 発注：EPL + CPL の2段表示（見積と同じトーン） */
#orders-table .apl-cpl-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

#orders-table .apl-cpl-line {
    display: block;
}

#orders-table .apl-cpl-sub {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 700;
}

#orders-table .apl-cpl-stack .action-link,
#orders-table .apl-cpl-stack .link-button {
    padding: 0;
    margin: 0;
}

.data-table td.action-buttons {
    padding: 8px 12px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* 見積一覧の親行は nowrap だが、操作列だけは例外で省略しない */
#estimates-table tr.estimate-parent-row td.action-buttons {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.data-table td.action-buttons {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#accounts-payable-table td.action-buttons {
    text-align: center;
    vertical-align: middle;
    padding: 0 12px;
}

#accounts-payable-table td.action-buttons .action-link {
    display: inline-block;
    margin: 0 6px;
}

#accounts-payable-table tr td {
    vertical-align: middle;
}

/* YOMI：操作セルを上下左右中央に揃える（上寄り/右寄り対策） */
#yomi-table td.action-buttons {
    text-align: center;
    width: 100%;
    white-space: nowrap;
    line-height: 1.2;
}

#yomi-table {
    table-layout: auto;
    min-width: 980px;
}

#yomi-table th[data-field="sales_month"],
#yomi-table td[data-field="sales_month"] {
    min-width: 110px;
}

#yomi-table th[data-field="client_name"],
#yomi-table td[data-field="client_name"] {
    min-width: 180px;
}

#yomi-table th[data-field="product_name"],
#yomi-table td[data-field="product_name"] {
    min-width: 200px;
}

#yomi-table th,
#yomi-table td {
    word-break: break-word;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ==== YOMI コンパクトツールバー ==== */
.yomi-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, #faf9f7 0%, #f5f3ef 100%);
    border: 1px solid rgba(212, 201, 184, 0.45);
    border-radius: 10px;
    padding: 0;
    margin: 12px 0 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.yomi-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    min-height: 40px;
}

.yomi-toolbar-left,
.yomi-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.yomi-toolbar-right .pagination-controls {
    margin: 0;
    padding: 0;
}

.yomi-toolbar-right .pagination-controls .pagination-nav {
    display: none;
}

.yomi-toolbar-right .pagination-controls .pagination-info {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    margin: 0;
}

.yomi-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #444;
    background: #fff;
    border: 1px solid #d4c9b8;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    line-height: 1;
}

.yomi-toolbar-btn:hover {
    background: #eee8df;
    border-color: #c4b9a8;
    color: #222;
}

.yomi-toolbar-btn-primary {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 6px 14px;
}

.yomi-toolbar-btn-primary:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    color: #fff;
}

.yomi-toolbar-filter-toggle svg {
    opacity: 0.65;
}

.yomi-toolbar-filter-toggle:hover svg {
    opacity: 1;
}

.yomi-filter-panel {
    display: none;
    flex-wrap: nowrap;
    gap: 4px 8px;
    padding: 0 12px 8px;
    font-size: 11px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    border-top: 1px solid rgba(212, 201, 184, 0.35);
}

.yomi-filter-panel.open {
    display: flex;
}

.yomi-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.yomi-filter-group .label {
    font-weight: 600;
    white-space: nowrap;
}

.yomi-filter-group input,
.yomi-filter-group select {
    height: 24px;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 8px;
    border: 1px solid rgba(120, 120, 120, 0.25);
}

.yomi-filter-group input[type="month"] {
    min-width: 110px;
}

.yomi-filter-group input[type="number"] {
    width: 70px;
}

.yomi-filter-group input[type="text"] {
    min-width: 120px;
}

.yomi-filter-panel .range-sep {
    color: #777;
    white-space: nowrap;
}

.yomi-filter-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

#yomi-filter-panel .btn {
    height: 24px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 8px;
}

#yomi-filter-apply {
    padding: 2px 8px;
    min-width: 44px;
}

#yomi-filter-clear {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 0 4px;
    height: auto;
}

#yomi-filter-clear:hover {
    color: #111827;
    text-decoration: underline;
}

#yomi-summary.is-loading {
    position: relative;
    opacity: 0.7;
}

#yomi-summary .yomi-summary-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: #374151;
    font-size: 12px;
    z-index: 5;
}

#yomi-summary .yomi-summary-loading .spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(55, 65, 81, 0.25);
    border-top-color: rgba(55, 65, 81, 0.9);
    animation: yomi-spin 0.8s linear infinite;
}

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

#yomi-table td.action-buttons .action-link {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px 4px;
    font-size: 12px;
}

#yomi-table .yomi-ellipsis {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* YOMI サマライズ */
.yomi-summary {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 201, 184, 0.35);
}

.yomi-summary.is-snapshot {
    border-color: rgba(203, 63, 63, 0.5);
    box-shadow: 0 12px 28px rgba(203, 63, 63, 0.12);
}

.yomi-summary-snapshot-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(203, 63, 63, 0.12);
    color: #b42318;
}

.yomi-snapshot-diff {
    color: #b42318;
    font-weight: 700;
}

/* 方向アイコン */
.yomi-diff-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
    padding: 0 1px;
}

.yomi-diff-icon:hover {
    opacity: 1;
    transform: scale(1.25);
}

.yomi-diff-icon-str {
    color: #d97706;
    font-size: 12px;
}

/* 新規追加行ハイライト */
.yomi-snapshot-new-row {
    background: rgba(16, 185, 129, 0.06) !important;
    box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.7);
}

.yomi-new-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 9px;
    vertical-align: middle;
    margin-right: 4px;
    line-height: 16px;
    text-transform: uppercase;
}

/* Before/After ポップオーバー */
.yomi-diff-popover {
    position: absolute;
    z-index: 9999;
    min-width: 240px;
    max-width: 360px;
    background: #fff;
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    overflow: hidden;
    animation: yomiPopIn 0.15s ease-out;
}

@keyframes yomiPopIn {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.97);
    }

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

.yomi-diff-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f6f3;
    border-bottom: 1px solid rgba(212, 201, 184, 0.4);
}

.yomi-diff-popover-title {
    font-weight: 700;
    font-size: 12px;
    color: #333;
}

.yomi-diff-popover-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #999;
    padding: 0;
    line-height: 1;
}

.yomi-diff-popover-close:hover {
    color: #333;
}

.yomi-diff-popover-body {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px;
}

.yomi-diff-popover-col {
    flex: 1;
    text-align: center;
}

.yomi-diff-popover-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.yomi-diff-before .yomi-diff-popover-label {
    color: #888;
}

.yomi-diff-before .yomi-diff-popover-value {
    color: #666;
    font-size: 15px;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: rgba(180, 35, 24, 0.35);
}

.yomi-diff-after .yomi-diff-popover-label {
    color: #b42318;
}

.yomi-diff-after .yomi-diff-popover-value {
    color: #b42318;
    font-size: 15px;
    font-weight: 700;
}

.yomi-diff-popover-arrow {
    font-size: 16px;
    color: #ccc;
    padding: 0 8px;
    flex-shrink: 0;
}

table#yomi-table tbody tr.yomi-row-highlight {
    outline: 2px solid rgba(59, 130, 246, 0.7);
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.08);
    box-shadow: inset 4px 0 0 rgba(59, 130, 246, 0.55);
}

.yomi-summary-header {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.yomi-summary-title {
    font-weight: 800;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.yomi-top-dyntabs {
    margin-bottom: 6px;
}

.yomi-summary-range-select {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text);
    cursor: pointer;
}

.yomi-summary-range-select:focus {
    outline: none;
    border-color: rgba(var(--color-primary-rgb), 0.85);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.yomi-summary-metrics {
    font-size: 12px;
    color: var(--color-text-light);
    white-space: nowrap;
}

.yomi-summary-timeline {
    margin: 8px 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.68), rgba(241, 245, 249, 0.52));
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.yomi-summary-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.yomi-summary-timeline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.yomi-summary-timeline-title {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text);
}

.yomi-summary-timeline-meta {
    font-size: 12px;
    color: var(--color-text-light);
}

.yomi-summary-timeline .updater {
    font-size: 11px;
    color: rgba(107, 114, 128, 0.85);
}

.yomi-summary-timeline-track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    align-items: stretch;
}

.yomi-summary-timeline-track::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.2), rgba(59, 130, 246, 0.5), rgba(148, 163, 184, 0.2));
    z-index: 0;
}

.yomi-summary-timeline-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--active-node-left, 50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 1);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.yomi-summary-timeline-track::-webkit-scrollbar {
    height: 6px;
}

.yomi-summary-timeline-track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

.yomi-timeline-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border-radius: 10px;
    padding: 14px 10px 10px 10px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
    z-index: 1;
}

/* --- アクションドロップダウン --- */
.yomi-action-dropdown {
    position: relative;
    display: inline-block;
}

.yomi-action-btn {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.yomi-action-btn:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.5);
}

.yomi-action-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    z-index: 9999;
    overflow: visible;
    padding: 4px 0;
}

.yomi-action-dropdown.is-open .yomi-action-menu {
    display: block;
}

.yomi-action-menu-item {
    display: block;
    width: 100%;
    padding: 6px 14px;
    font-size: 12px;
    text-align: left;
    border: none;
    background: none;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.yomi-action-menu-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

.yomi-action-menu-item.yomi-action-delete {
    color: #dc2626;
}

.yomi-action-menu-item.yomi-action-delete:hover {
    background: rgba(220, 38, 38, 0.08);
}

.yomi-summary-rank-detail-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.yomi-timeline-node:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

.yomi-timeline-node.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(14, 165, 233, 0.12));
    border-color: rgba(59, 130, 246, 0.7);
}


.yomi-dashboard-snapshot-lock {
    opacity: 0.6;
    pointer-events: none;
}

.yomi-timeline-node .label {
    font-size: 11px;
    color: #475569;
}

.yomi-timeline-node.has-changes {
    border-color: rgba(244, 114, 182, 0.6);
    box-shadow: 0 12px 26px rgba(244, 114, 182, 0.18);
}

.yomi-timeline-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.yomi-timeline-flag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(244, 114, 182, 0.14);
    color: #9f1239;
    border: 1px solid rgba(244, 114, 182, 0.35);
    white-space: nowrap;
}

.yomi-timeline-node .rate {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.yomi-timeline-node .rate-label {
    font-size: 10px;
    color: var(--color-text-light);
    margin-right: 6px;
    font-weight: 600;
}

.yomi-timeline-node .rate-value {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}

.yomi-timeline-node .delta {
    font-size: 11px;
    color: #64748b;
}

.yomi-summary-rank-breakdown {
    margin-top: 10px;
}

.yomi-summary-rank-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

/* 累積ブラケット */
.yomi-cumulative-brackets {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 6px;
    padding: 0 4px;
}

.yomi-cumulative-bracket {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.yomi-cumulative-bracket:hover {
    opacity: 0.85;
}

.yomi-cumulative-bracket:hover .yomi-cumulative-bracket-label {
    color: #1e40af;
}

.yomi-cumulative-bracket.is-active .yomi-cumulative-bracket-line {
    border-color: rgba(59, 130, 246, 0.6);
}

.yomi-cumulative-bracket.is-active .yomi-cumulative-bracket-label {
    color: #1e40af;
    font-weight: 800;
}

.yomi-cumulative-bracket-line {
    position: relative;
    height: 20px;
    border-left: 1.5px solid rgba(100, 116, 139, 0.35);
    border-right: 1.5px solid rgba(100, 116, 139, 0.35);
    border-top: 1.5px solid rgba(100, 116, 139, 0.35);
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.yomi-cumulative-bracket-label {
    position: absolute;
    top: -1px;
    transform: translateY(-50%);
    background: var(--card-bg, #ffffff);
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    line-height: 1;
}

/* 1カードだけ(S単体)の場合はブラケット不要なので小さく */
.yomi-cumulative-bracket[data-end="0"] .yomi-cumulative-bracket-line {
    border-left: none;
    border-right: none;
    border-top: 1.5px solid rgba(100, 116, 139, 0.25);
    border-radius: 0;
    height: 16px;
}

.yomi-summary-rank-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.yomi-summary-rank-name {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.yomi-summary-rank-value {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
}

.yomi-summary-rank-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    background: rgba(59, 130, 246, 0.12);
}

.yomi-summary-rank-item.is-active {
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.2);
}

.yomi-summary-rank-detail-card {
    min-height: 140px;
}

.yomi-summary-rank-detail-card.is-full {
    grid-column: 1 / -1;
    width: 100%;
}

.yomi-summary-rank-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.yomi-summary-rank-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
}

.yomi-summary-rank-detail-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.yomi-summary-rank-detail-value {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
}

.yomi-summary-rank-detail-loading {
    padding: 10px 0;
    font-size: 12px;
    color: #64748b;
}

.yomi-summary-rank-detail-loading.is-error {
    color: #b91c1c;
}

.yomi-summary-rank-detail-card.is-loading {
    position: relative;
}

.yomi-summary-rank-detail-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 4;
    border-radius: 14px;
}

.yomi-summary-rank-detail-loading-spinner {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: #64748b;
    animation: yomiDetailSpin 0.9s linear infinite;
}

.yomi-summary-rank-detail-loading-text {
    font-size: 12px;
    color: #64748b;
}

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

.yomi-summary-rank-detail-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
}

.yomi-summary-rank-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}

.yomi-summary-rank-tabs .detail-dyntabs-scroll {
    gap: 6px;
    border-bottom: 0;
    padding-bottom: 0;
}

.yomi-summary-rank-detail-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 12px;
}

.yomi-summary-rank-detail-table th,
.yomi-summary-rank-detail-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    white-space: nowrap;
}

.yomi-summary-rank-detail-table thead th {
    font-weight: 700;
    color: #475569;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
}

.yomi-summary-rank-detail-empty {
    padding: 10px 0;
    text-align: center;
    color: #64748b;
}

/* YOMI按分グルーピング行 */
.yomi-summary-rank-detail-table tr.yomi-alloc-group-parent {
    border-left: 3px solid rgba(59, 130, 246, 0.65);
    background: rgba(59, 130, 246, 0.04);
}

.yomi-summary-rank-detail-table tr.yomi-alloc-group-parent td:first-child {
    padding-left: 10px;
}

.yomi-summary-rank-detail-table tr.yomi-alloc-group-child {
    border-left: 3px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.025);
}

.yomi-summary-rank-detail-table tr.yomi-alloc-group-child td {
    border-bottom-color: rgba(148, 163, 184, 0.15);
    font-size: 11px;
    color: #475569;
}

.yomi-summary-rank-detail-table tr.yomi-alloc-group-child td:first-child {
    padding-left: 10px;
}

.yomi-alloc-child-indent {
    color: rgba(59, 130, 246, 0.5);
    font-size: 11px;
    margin-right: 2px;
}

.yomi-alloc-group-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.3);
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.yomi-alloc-rate-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 他担当者の参考行 */
.yomi-summary-rank-detail-table tr.yomi-alloc-group-external {
    opacity: 0.55;
    background: rgba(148, 163, 184, 0.04);
    border-left-color: rgba(148, 163, 184, 0.35);
}

.yomi-summary-rank-detail-table tr.yomi-alloc-group-external td {
    font-style: italic;
    color: #94a3b8;
}

.yomi-alloc-external-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(251, 146, 60, 0.12);
    color: #c2410c;
    border: 1px solid rgba(251, 146, 60, 0.3);
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.yomi-timeline-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    color: #1e40af;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.yomi-summary-rank-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.yomi-summary-kpi-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 10px 0 12px;
}

.yomi-summary-kpi-card {
    border: 1px solid rgba(212, 201, 184, 0.45);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
}

.yomi-summary-kpi-card .kpi-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}

.yomi-summary-kpi-card .kpi-card-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 150px;
    padding: 6px 4px;
}

.yomi-summary-kpi-card canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140px !important;
    height: 140px !important;
    aspect-ratio: 1 / 1;
    max-width: 140px;
    max-height: 140px;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.16));
    opacity: 0.95;
    z-index: 1;
}

.yomi-summary-kpi-card .kpi-donut-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #0f172a;
    font-weight: 700;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    pointer-events: none;
}

.yomi-summary-kpi-card .kpi-donut-month {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #475569;
}

.yomi-summary-kpi-card .kpi-donut-rate {
    font-size: 16px;
    letter-spacing: 0.2px;
    color: #0f172a;
}

.yomi-summary-kpi-card .kpi-card-metrics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 12px;
    padding: 8px 10px;
    z-index: 3;
    margin-left: auto;
    min-width: 170px;
}

.yomi-summary-kpi-card .kpi-metric {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.yomi-summary-kpi-card .kpi-metric .label {
    font-weight: 600;
    color: var(--color-text);
}

.yomi-summary-rank-filter .label {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-light);
}

.yomi-summary-rank-filter .hint {
    font-size: 11px;
    color: var(--color-text-light);
    opacity: 0.8;
}

.yomi-summary-rank-buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.yomi-summary-rank-buttons button {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    font-size: 12px;
    cursor: pointer;
}

.yomi-summary-rank-buttons button.active {
    background: rgba(74, 144, 226, 0.25);
    border-color: rgba(74, 144, 226, 0.6);
}

.yomi-summary-chart-wrap {
    height: 190px;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(203, 213, 225, 0.6);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(6px);
}

.yomi-summary-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.yomi-summary-table-wrap {
    margin-top: 8px;
    overflow: auto;
    max-height: 180px;
}

.yomi-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.yomi-summary-table th,
.yomi-summary-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.25);
}

.yomi-summary-table th {
    text-align: left;
    font-weight: 800;
    color: var(--color-text);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

/* YOMIサマライズ：月行クリックの視認性 */
.yomi-summary-table tbody tr {
    cursor: pointer;
}

.yomi-summary-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.yomi-summary-table tbody tr.active {
    background: rgba(74, 144, 226, 0.12);
    outline: 1px solid rgba(74, 144, 226, 0.25);
}

.yomi-allocation-linked-row td {
    padding: 4px 12px 6px;
    border: none;
    background: transparent;
}

.yomi-allocation-linked {
    border: 1px dashed rgba(212, 201, 184, 0.6);
    border-radius: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

.yomi-allocation-linked-title {
    color: var(--color-text-light);
    font-weight: 700;
    font-size: 11px;
}

.yomi-allocation-linked-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.yomi-allocation-linked-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(212, 201, 184, 0.55);
    min-width: 0;
}

.yomi-allocation-linked-rate {
    color: var(--color-text-light);
    font-size: 11px;
}

.yomi-allocation-linked-name {
    font-weight: 700;
    color: var(--color-text);
}

.yomi-allocation-linked-metrics {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--color-text-light);
    font-size: 11px;
}

/* YOMI：右上フィルタトースト */
#yomi-filter-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    max-width: min(520px, 55vw);
    position: sticky;
    top: 10px;
    z-index: 3;
}

#yomi-filter-toast .yomi-filter-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

#yomi-filter-toast .yomi-filter-chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 201, 184, 0.35);
    font-size: 12px;
    white-space: nowrap;
    max-width: 100%;
}

#yomi-filter-toast .yomi-filter-chip.is-empty {
    opacity: 0.75;
}

#yomi-filter-toast .yomi-filter-chip .label {
    opacity: 0.9;
    font-weight: 700;
}

#yomi-filter-toast .yomi-filter-chip .value {
    opacity: 0.95;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#yomi-filter-toast .yomi-filter-chip button {
    border: none;
    background: transparent;
    color: var(--color-text);
    opacity: 0.7;
    cursor: pointer;
    padding: 0 2px;
    font-size: 14px;
    line-height: 1;
}

#yomi-filter-toast .yomi-filter-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
}

#yomi-filter-toast .yomi-filter-actions button {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

#yomi-filter-toast .yomi-filter-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 発注一覧：操作セルは overflow: visible だと隣列（合計金額）へ食い込んで見えるため抑止
   ただし row-action-dropdown がある場合はメニューが背面に隠れないよう overflow: visible を許可 */
#orders-table td.action-buttons {
    overflow: hidden;
}

/* 発注一覧：アクションメニューが背面に隠れないよう前面化 */
#orders-table tr.order-parent-row .row-action-dropdown {
    position: relative;
    z-index: 2001;
}

#orders-table tr.order-parent-row .row-action-menu {
    z-index: 3001;
}

#orders-table tr.order-parent-row.row-action-open {
    position: relative;
    z-index: 100;
}

#orders-table tr.order-parent-row.row-action-open td.action-buttons {
    overflow: visible;
}

#orders-table td.action-buttons .action-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CPL: 親行の操作セルは中央寄せ（右上に寄る問題を解消） */
#cpl-table td.action-buttons {
    justify-content: center;
}

.data-table td.action-buttons .action-link {
    margin: 0;
}

#orders-table tr.order-parent-row.order-row-highlight {
    background: rgba(253, 224, 71, 0.2);
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.35);
}

/* 行アクション（ドロップダウン） */
.row-action-dropdown {
    /* テーブル行のスタッキング文脈の中でも前面になりやすくする */
    position: relative;
    z-index: 10;
}

.row-action-dropdown .btn.btn-sm {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 10px;
}

/* 一括アップロードのドロップダウン(menu)と同じ見た目/挙動を、行アクションにも適用する
   ※ bulk-upload のグローバルclickハンドラが `.bulk-upload-dropdown-menu` を `style.display='none'` にするため、
      行アクションはクラスを分離して副作用を避ける */
.row-action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 8px;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-shadow);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 1001;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* 見積の枝番アクション: 背面に隠れないよう前面化 */
#estimates-table tr.estimate-item-row .row-action-dropdown {
    position: relative;
    z-index: 2001;
}

#estimates-table tr.estimate-item-row .row-action-menu {
    z-index: 3001;
}

.row-action-menu.show {
    display: block;
    animation: slideDown 0.2s ease-out;
}

.row-action-menu.estimate-row-action-portal {
    z-index: 3000;
}

/* 見積：アクションボタン（テキスト風） */
.row-action-trigger {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.row-action-trigger:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.row-action-trigger:disabled {
    color: var(--color-text-light);
    cursor: not-allowed;
    text-decoration: none;
}

/* アクションメニュー項目：連打防止（実行中） */
.row-action-menu .bulk-upload-menu-item.is-busy {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.row-action-menu .bulk-upload-menu-item.is-busy::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(62, 58, 53, 0.25);
    border-top-color: rgba(62, 58, 53, 0.8);
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    animation: spin 0.8s linear infinite;
}

/* 開いた行のメニューは最前面に（hover transform によるスタッキング対策） */
.data-table tbody tr.row-action-open {
    position: relative;
    z-index: 50;
}

.row-action-menu.show {
    z-index: 5000;
}

.row-action-menu.cpl-row-action-portal {
    z-index: 6000;
    /* CPL明細は確実に最前面 */
}

.cpl-items-cell {
    padding: 0 !important;
}

.cpl-items-wrap {
    padding: 10px 12px;
    background: rgba(245, 241, 235, 0.35);
    border-top: 1px solid rgba(212, 201, 184, 0.45);
}

/* 横スクロールは内側だけに閉じ込める（ドロップダウンがクリップされない土台） */
.cpl-items-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* 縦スクロールは不要、横のみ */
    max-width: 88vw;
    /* 画面幅に応じてスクロールさせる */
    width: 100%;
}

.cpl-items-table {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(212, 201, 184, 0.6);
    border-radius: 12px;
    overflow: hidden;
    table-layout: auto;
    /* fixedだと幅固定になりスクロールしない場合があるためautoに変更 */
    width: auto;
    /* 親幅100%ではなく、min-width以上で中身に応じる */
    min-width: 1560px;
}

/* CPL明細（アコーディオン内）は、親テーブルと同じヘッダ（グラデ）だと重いので、
   発注の子行に近いグレースケールのシンプルヘッダに上書きする。 */
.cpl-items-table thead {
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
    position: static;
    z-index: auto;
}

.cpl-items-table th {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
}

.cpl-items-table td {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.cpl-items-loading {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-light);
}

.cpl-items-loading.is-error {
    color: #b91c1c;
}

/* CPL明細：カラム幅（列設計） */
.cpl-items-table th:nth-child(1),
.cpl-items-table td:nth-child(1) {
    width: 9%;
    /* CPL */
    white-space: nowrap;
}

.cpl-items-table th:nth-child(2),
.cpl-items-table td:nth-child(2) {
    width: 10%;
    /* EPL */
    white-space: nowrap;
}

.cpl-items-table th:nth-child(3),
.cpl-items-table td:nth-child(3) {
    width: 10%;
    /* APL枝番 */
    white-space: nowrap;
}

.cpl-items-table th:nth-child(4),
.cpl-items-table td:nth-child(4) {
    width: 13%;
    /* ステータス（selectが入るので広め） */
}

.cpl-items-table th:nth-child(5),
.cpl-items-table td:nth-child(5) {
    width: 14%;
    /* 請求書記載名（長くなりやすいが、操作列を確保する） */
}

.cpl-items-table th:nth-child(6),
.cpl-items-table td:nth-child(6),
.cpl-items-table th:nth-child(7),
.cpl-items-table td:nth-child(7),
.cpl-items-table th:nth-child(8),
.cpl-items-table td:nth-child(8) {
    width: 8%;
    /* 金額3列 */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpl-items-table th:nth-child(9),
.cpl-items-table td:nth-child(9) {
    width: 6%;
    /* 粗利率 */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpl-items-table th:nth-child(10),
.cpl-items-table td:nth-child(10) {
    width: 12%;
    /* 操作（被り防止のため最低幅を確保） */
    white-space: nowrap;
}

.cpl-items-scroll {
    overflow-x: auto;
}

.cpl-items-table {
    min-width: 1200px;
}

.cpl-items-table td.action-buttons {
    min-width: 130px;
    justify-content: center;
    align-items: center;
}

.cpl-items-table .inline-input {
    height: 22px;
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid #cfd6e4;
    border-radius: 4px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.cpl-items-table .inline-input:focus {
    outline: none;
    border-color: #7b8cff;
    box-shadow: 0 0 0 2px rgba(123, 140, 255, 0.18);
}

.cpl-items-table .cpl-inline-computed {
    display: inline-block;
    min-width: 48px;
}

.cpl-item-row-editing {
    background: rgba(245, 241, 235, 0.85);
}

.cpl-items-table th:hover {
    background: rgba(245, 241, 235, 0.65);
}

/* CPL明細: hover時に白く/拡大して見えるのは `.data-table tbody tr:hover` の共通指定が原因。
   見積/発注の体感に合わせ、CPL明細テーブルでは「淡いハイライト＋拡大なし」にする。 */
.cpl-items-table tbody tr:hover {
    background: rgba(245, 241, 235, 0.75);
    transform: none;
    box-shadow: none;
    position: relative;
    /* 行アクションのためのスタッキングは維持 */
    z-index: 5;
}

.cpl-items-table tbody tr:focus-within {
    position: relative;
    z-index: 5;
}

/* CPL: 明細編集モーダル */
.cpl-item-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.65);
    margin-bottom: 14px;
}

.cpl-item-edit-ids {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cpl-item-edit-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(245, 241, 235, 0.55);
    font-weight: 800;
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;
}

.cpl-item-edit-sep {
    color: var(--color-text-light);
    font-weight: 700;
}

.cpl-item-edit-client {
    color: var(--color-text);
    font-weight: 700;
    font-size: 13px;
    text-align: right;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpl-field-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-light);
}

.action-link {
    display: inline-block;
    padding: 4px 8px;
    margin: 0 4px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sidebar-transition);
    border-bottom: 1px solid transparent;
}

.action-link:hover {
    color: var(--color-hover);
    border-bottom-color: var(--color-hover);
}

.action-link.action-info {
    color: var(--color-accent);
}

/* CPL: 親トグルリンクの見え方（見積/発注のリンクトーンに合わせる） */
#cpl-table a.cpl-toggle-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

#cpl-table a.cpl-toggle-link:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

#cpl-table a.cpl-toggle-link .cpl-label {
    font-weight: 800;
}

.action-link.action-info:hover {
    color: #5a7a5d;
    border-bottom-color: #5a7a5d;
}

.action-link.action-edit {
    color: #1976d2;
}

.action-link.action-edit:hover {
    color: #1565c0;
    border-bottom-color: #1565c0;
}

.cpl-inline-label {
    display: inline-block;
    padding: 4px 8px;
    margin: 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
}

.cc-add-link {
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.1;
    cursor: pointer;
}

.cc-add-link:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.cc-remove-link {
    padding: 2px 6px;
    border: none;
    background: none;
    color: #d32f2f;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.cc-remove-link:hover {
    color: #b71c1c;
    text-decoration: underline;
}

.action-link.action-delete {
    color: #d32f2f;
}

.action-link.action-delete:hover {
    color: #b71c1c;
    border-bottom-color: #b71c1c;
}

/* テーブル内select（ステータス等）を見積基準で統一 */
select.status-select,
select.item-status-select {
    width: 100%;
    min-width: 110px;
    height: 32px;
    padding: 6px 28px 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    transition: var(--sidebar-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

select.status-select:focus,
select.item-status-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.14);
}

/* ==================== ボタン ==================== */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--sidebar-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.4);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-hover);
    transform: translateY(-2px);
}

.btn-link {
    background: transparent;
    color: var(--color-text);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.btn-link:hover {
    color: var(--color-hover);
    transform: none;
    text-decoration: underline;
}

.btn-compact {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
}

.btn-danger {
    background: #d32f2f;
    color: var(--color-white);
}

.btn-danger:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.btn-info {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-info:hover {
    background: #5a7a5d;
    transform: translateY(-2px);
}

.btn-edit {
    background: #1976d2;
    color: var(--color-white);
}

.btn-edit:hover {
    background: #1565c0;
    transform: translateY(-2px);
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

/* ==================== モーダル ==================== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(62, 58, 53, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s;
    /* 中央配置 */
    justify-content: center;
    align-items: center;
}

#confirm-modal {
    z-index: 22000;
}

.modal.show,
.modal[style*="display: block"] {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px var(--color-shadow);
    animation: slideUp 0.3s ease-out;
    position: relative;
}

/* ==================== 買掛PDFビューア ==================== */
.payable-pdf-modal .modal-content {
    max-width: 95vw;
    width: 95vw;
    height: 90vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdf-viewer-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdf-viewer-meta {
    font-size: 12px;
    color: var(--color-text-light);
}

.pdf-viewer-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pdf-viewer-controls .pdf-nav-btn {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 8px;
    min-width: auto;
}

.pdf-viewer-controls .pdf-compact-btn {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 8px;
    min-width: auto;
}

.pdf-viewer-controls .pdf-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.pdf-viewer-controls .pdf-zoom-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 24px;
    padding: 0 6px;
    border-radius: 8px;
    font-weight: 700;
    color: var(--color-text);
    background: #f2ede5;
    cursor: pointer;
    user-select: none;
}

.pdf-viewer-controls .pdf-zoom-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.2);
}

.pdf-page-info,
.pdf-zoom-info {
    min-width: 64px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
}

.pdf-viewer-body {
    flex: 1;
    position: relative;
    overflow: auto;
    background: #111;
    border-radius: 12px;
    padding: 12px;
}

#payable-pdf-canvas {
    display: block;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: 8px;
}

.pdf-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    z-index: 2;
}

.payable-pdf-upload-modal .modal-content {
    max-width: 560px;
    width: 90%;
}

.pdf-upload-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.pdf-upload-dropzone {
    border: 2px dashed rgba(139, 115, 85, 0.5);
    border-radius: 14px;
    padding: 24px;
    background: #fffaf2;
    text-align: center;
    cursor: pointer;
    transition: 160ms ease;
}

.pdf-upload-dropzone-title {
    font-weight: 700;
    color: var(--color-text);
}

.pdf-upload-dropzone-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-light);
}

.pdf-upload-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: rgba(139, 115, 85, 0.12);
    transform: translateY(-1px);
}

.pdf-upload-input {
    display: none;
}

.pdf-upload-label {
    font-weight: 600;
    color: var(--color-text);
}

.pdf-upload-filename {
    font-size: 12px;
    color: var(--color-text-light);
}

.pdf-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.payable-create-choice-modal .modal-content {
    max-width: 760px;
    width: 90%;
}

.payable-choice-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.payable-choice-body p {
    margin: 0;
    color: var(--color-text);
}

.payable-choice-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payable-choice-actions .btn {
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.payable-choice-actions .btn:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

@media (max-width: 720px) {
    .payable-choice-actions {
        grid-template-columns: 1fr;
    }
}

.payable-edit-modal .modal-content {
    max-width: 1200px;
    width: 95vw;
    display: flex;
    flex-direction: column;
    height: 90vh;
}

.payable-edit-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

.payable-edit-form {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.payable-edit-preview {
    width: 42%;
    min-width: 280px;
    background: #f7f4ef;
    border-radius: 12px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.payable-edit-modal .form-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 12px;
    margin-top: auto;
}

.payable-edit-modal #modal-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 8px;
}

.payable-items-section {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #fff;
}

.payable-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.payable-items-header h3 {
    margin: 0;
    font-size: 14px;
}

.payable-items-hint {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.payable-items-table-wrap {
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.payable-items-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.payable-items-table th,
.payable-items-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 8px;
    font-size: 12px;
    text-align: left;
    background: #fff;
}

.payable-items-table th {
    background: #f6f2ea;
    position: sticky;
    top: 0;
    z-index: 1;
}

.payable-items-table input[type="text"],
.payable-items-table input[type="number"],
.payable-items-table select {
    height: 36px;
    font-size: 12px;
    padding: 6px 8px;
    box-sizing: border-box;
    width: 100%;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
    color: var(--color-text);
    transition: var(--sidebar-transition);
}

.payable-items-table input[type="text"]:focus,
.payable-items-table input[type="number"]:focus,
.payable-items-table select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}


.payable-items-actions {
    white-space: nowrap;
}

.payable-items-empty-row td {
    color: #888;
    text-align: center;
    padding: 14px 8px;
}

.payable-epl-select-dialog {
    max-width: 1280px;
    width: min(96vw, 1280px);
    height: 78vh;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.payable-epl-select-body {
    margin-top: 10px;
    flex: 1;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

.payable-epl-search-hint {
    color: var(--color-text-light);
    margin-bottom: 10px;
    font-size: 13px;
}

.payable-epl-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

#payable-epl-results {
    flex: 1;
    min-height: 280px;
}

.cpl-step2-table thead th {
    background: rgba(139, 115, 85, 0.12);
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 1px solid rgba(139, 115, 85, 0.25);
}

.payable-epl-search-row .search-input {
    flex: 1;
    height: 36px;
    font-size: 12px;
    padding: 6px 10px;
    box-sizing: border-box;
}

.payable-epl-search-row .btn {
    white-space: nowrap;
    height: 36px;
}

.payable-epl-dialog-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

.payable-epl-dialog-controls .search-input {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    box-sizing: border-box;
}

.payable-epl-dialog-controls .form-hint {
    justify-self: start;
    margin: 0;
}

.payable-epl-dialog-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 12px;
}

.payable-epl-dialog-filters .search-input {
    height: 36px;
    font-size: 12px;
    padding: 6px 10px;
    box-sizing: border-box;
}

.payable-epl-search-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow: auto;
    padding-right: 2px;
}

@media (max-width: 760px) {
    .payable-epl-dialog-filters {
        grid-template-columns: 1fr;
    }
}

.payable-epl-option {
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payable-epl-option:hover {
    background: #f6f2ea;
}

.payable-epl-option.is-custom {
    border-color: rgba(139, 115, 85, 0.4);
    background: rgba(139, 115, 85, 0.08);
}

.payable-epl-option.is-clear {
    color: #666;
}

.payable-epl-option .epl-main {
    font-weight: 600;
}

.payable-epl-option .epl-meta {
    font-size: 11px;
    color: #666;
}

.payable-epl-empty {
    font-size: 12px;
    color: #888;
    padding: 10px 4px;
}

.payable-epl-dialog-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* EPL・計上日・内容 列の共通行レイアウト */
.epl-amount-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.epl-amount-row,
.epl-date-row,
.epl-desc-row {
    font-size: 13px;
    line-height: 1.4;
    min-height: 28px;
    display: flex;
    align-items: center;
    padding: 2px 0;
    box-sizing: border-box;
}

.epl-amount-row {
    gap: 6px;
    white-space: nowrap;
}

.epl-amount {
    color: #6b6b6b;
    font-size: 13px;
}

.epl-date {
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

.epl-date-row {
    color: var(--color-text);
    white-space: nowrap;
}

.epl-desc-row {
    position: relative;
    cursor: default;
}

.epl-desc-text {
    display: block;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* 内容列のtdはoverflowを許可しツールチップを隠さない */
td[data-field="eplbranch_amounts"] {
    overflow: visible;
    position: relative;
    z-index: auto;
}

/* ホバープレビュー・ツールチップ */
.epl-tooltip-popup {
    display: none;
    position: fixed;
    z-index: 99999;
    min-width: 280px;
    max-width: 400px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    white-space: normal;
    word-break: break-word;
    /* ホバー時の表示位置（JSで上書き） */
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

/* CSS only: .epl-desc-row ホバーでツールチップを表示 */
.epl-desc-row:hover .epl-tooltip-popup {
    display: block;
}


.epl-tooltip-header {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-primary, #8b7355);
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.epl-tooltip-line {
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.5;
    padding: 2px 0;
}

.epl-tooltip-label {
    font-weight: 600;
    color: #666;
    margin-right: 4px;
}

.payable-edit-modal .form-grid {
    gap: 12px;
}

.payable-edit-modal .form-group label {
    font-size: 12px;
    margin-bottom: 4px;
}

.payable-edit-modal input[type="text"],
.payable-edit-modal input[type="number"],
.payable-edit-modal input[type="date"],
.payable-edit-modal select,
.payable-edit-modal textarea {
    padding: 6px 8px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
}

.payable-edit-modal select[name="payment_status"] {
    height: 40px;
    padding: 8px 10px;
    line-height: 1.4;
}

.payable-edit-modal select[name="is_current_account"] {
    font-size: 11px;
    line-height: 1.2;
}

.payable-edit-preview h3 {
    margin: 4px 0 8px;
    font-size: 16px;
}

.payable-preview-body {
    position: relative;
    background: #111;
    border-radius: 8px;
    padding: 8px;
    overflow: auto;
    max-height: 520px;
    flex: 1;
    min-height: 0;
}

.payable-preview-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.payable-preview-body canvas {
    display: block;
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
}

.payable-preview-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-light);
}

.payable-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.preview-zoom-link {
    border: none;
    background: transparent;
    color: var(--color-text);
    font-weight: 700;
    font-size: 14px;
    padding: 2px 4px;
    cursor: pointer;
}

.payable-preview-actions .btn.btn-xs {
    padding: 2px 10px;
    min-width: 64px;
}

.preview-zoom-link:hover {
    color: var(--color-primary);
}

.btn.btn-xs {
    padding: 4px 12px;
    font-size: 12px;
    min-width: 72px;
}

.payable-preview-actions .preview-zoom {
    min-width: 56px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
}

.ocr-hint-section {
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed rgba(139, 115, 85, 0.35);
    border-radius: 12px;
    background: rgba(255, 250, 242, 0.7);
}

.ocr-hint-title {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text);
    margin-bottom: 6px;
}

.ocr-hint-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow: auto;
}

.ocr-hint-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ocr-hint-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ocr-hint-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.ocr-hint-column .ocr-hint-list {
    max-height: 160px;
}

.ocr-hint-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ocr-hint-text {
    font-size: 12px;
    color: var(--color-text);
    word-break: break-all;
}

.ocr-hint-copy {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-primary);
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ocr-hint-copy::before {
    content: '';
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 8V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3v-2h3V5h-7v3H8z'/><path d='M5 8h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2zm0 2v9h7v-9H5z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 8V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-3v-2h3V5h-7v3H8z'/><path d='M5 8h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2zm0 2v9h7v-9H5z'/></svg>") center / contain no-repeat;
}

.ocr-hint-copy:hover {
    opacity: 0.9;
}

.payable-pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.payable-pdf-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.payable-pdf-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text);
}

.payable-pdf-card-meta {
    font-size: 12px;
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payable-pdf-card-badge {
    align-self: flex-start;
    background: #f0f4ff;
    color: #3a5bcc;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.payable-pdf-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
}

.payable-pdf-card-actions .btn {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.2;
    min-height: 0;
}

.payable-pdf-card-actions .btn.btn-secondary {
    border-radius: 0;
}

.payable-pdf-empty {
    margin-top: 16px;
    color: var(--color-text-light);
    display: none;
}

.payable-link-controls {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 12px;
}

.payable-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.payable-link-empty {
    margin-top: 16px;
    color: var(--color-text-light);
}

.payable-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
}

@media (max-width: 980px) {
    .payable-edit-layout {
        flex-direction: column;
    }

    .payable-edit-preview {
        width: 100%;
    }
}

.modal.edit-history-modal .modal-content {
    max-width: 1200px;
    width: 96%;
}

.modal.clients-modal .modal-content {
    max-width: 1200px;
    width: 96%;
}

/* YOMI：入力項目が多いのでモーダル幅を広げる */
.modal.yomi-modal .modal-content {
    max-width: 1200px;
    width: 96%;
    overflow: visible;
}

.modal.yomi-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 0;
}

.modal.yomi-modal .modal-content {
    margin-top: 24px;
    max-height: none;
}

.modal.yomi-modal #modal-form {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.form-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* YOMI：EPL入力（選択＋入力） */
/* YOMI：EPLは入力欄1つ（datalist候補＋自由入力） */

/* YOMI：按分トグル（モダン） */
.yomi-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 800;
    color: var(--color-text);
}

.yomi-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.yomi-toggle-track {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 201, 184, 0.8);
    position: relative;
    transition: 180ms ease;
    flex: 0 0 auto;
}

.yomi-toggle-thumb {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    position: absolute;
    top: 1px;
    left: 2px;
    transition: 180ms ease;
}

.yomi-toggle input[type="checkbox"]:checked+.yomi-toggle-track {
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-primary-rgb), 0.55);
}

.yomi-toggle input[type="checkbox"]:checked+.yomi-toggle-track .yomi-toggle-thumb {
    transform: translateX(18px);
}

.dept-toggle {
    font-size: 11px;
    font-weight: 700;
    gap: 8px;
}

.dept-toggle-label {
    color: var(--color-text);
}

.yomi-section {
    border: 1px solid rgba(212, 201, 184, 0.35);
    border-radius: 14px;
    padding: 12px 12px 8px;
    background: rgba(255, 255, 255, 0.03);
}

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

.yomi-epl-select input {
    flex: 1;
}

.yomi-epl-open.btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 10px;
}

.yomi-epl-clear {
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.yomi-epl-clear:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.modal.yomi-epl-modal .modal-content {
    max-width: 1280px;
    width: 96%;
}

.yomi-allocation-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yomi-allocation-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.yomi-allocation-card-title .form-group-title {
    margin-bottom: 4px;
}

.estimate-epl-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.estimate-epl-main {
    font-weight: 600;
}

.estimate-epl-sub {
    font-size: 12px;
    color: var(--color-text-light);
}

.estimate-item-row.estimate-item-highlight .estimate-item-grid {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.6);
    border-radius: 8px;
}

.yomi-allocation-card-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.yomi-allocation-card .form-hint {
    margin-top: 4px;
}

.yomi-sync-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.yomi-allocation-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.yomi-split-btn {
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.yomi-split-btn:hover {
    color: var(--color-text);
    text-decoration: underline;
}

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

.yomi-total-pill {
    font-weight: 700;
    color: var(--color-text);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.yomi-allocation-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.yomi-allocation-pair.is-synced {
    grid-template-columns: 1fr;
}

.yomi-allocation-pair.is-synced .yomi-section[data-allocation-section="gross"] {
    display: none;
}

@media (max-width: 980px) {
    .yomi-allocation-pair {
        grid-template-columns: 1fr;
    }
}

.yomi-allocation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.yomi-allocation-list-wrap {
    position: relative;
    padding-bottom: 44px;
    border: 1px dashed rgba(212, 201, 184, 0.35);
    border-radius: 12px;
    padding: 10px 12px 52px;
    background: rgba(255, 255, 255, 0.03);
}

.yomi-allocation-add-fab {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.yomi-allocation-add-fab:hover {
    border-color: rgba(var(--color-primary-rgb), 0.55);
    background: rgba(var(--color-primary-rgb), 0.18);
}

.yomi-sync {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 800;
    color: var(--color-text);
}

.yomi-sync input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.yomi-sync-label {
    font-size: 13px;
}

.yomi-allocation-results {
    border: none;
    padding: 0;
    background: transparent;
    border-top: 1px dashed rgba(212, 201, 184, 0.35);
    padding-top: 12px;
}

@media (max-width: 980px) {
    .yomi-allocation-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.yomi-allocation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(212, 201, 184, 0.35);
}

.yomi-allocation-row:last-child {
    border-bottom: none;
}

.yomi-allocation-rate {
    text-align: right;
    padding: 10px 12px;
    border-radius: 12px;
    border: 2px solid var(--color-border);
    background: var(--color-card);
    font-weight: 800;
}

.yomi-allocation-rate::placeholder {
    color: rgba(107, 102, 96, 0.35);
}

.yomi-allocation-list {
    width: 100%;
}

/* YOMI：按分行の入力UI（select/percent）をフォームと同じトーンに */
.yomi-allocation-employee {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 2px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
}

.yomi-allocation-employee:focus {
    outline: none;
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12);
}

.yomi-allocation-rate:focus {
    outline: none;
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12);
}

.yomi-allocation-remove {
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 700;
}

.yomi-allocation-remove:hover {
    border-color: rgba(var(--color-primary-rgb), 0.45);
}

.yomi-allocation-fixed {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-light);
}

/* YOMI：EPLサジェスト（独自ドロップダウン） */
.yomi-suggest-wrap {
    position: relative;
}

.yomi-epl-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-height: 320px;
    /* 文字を小さくして、より多く候補を見せる */
    overflow-y: auto;
    z-index: 1005;
}

.yomi-epl-suggest .item {
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.25;
    color: var(--color-text);
    border-bottom: 1px solid rgba(212, 201, 184, 0.25);
}

.yomi-epl-suggest .item:last-child {
    border-bottom: none;
}

.yomi-epl-suggest .item:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
}

.yomi-epl-suggest .empty {
    padding: 10px 12px;
    color: var(--color-text-light);
    font-size: 11px;
}

/* 詳細モーダル専用のスタイル */
#detail-modal .modal-content {
    max-width: 1200px;
    width: 95%;
    padding: 28px;
    animation: detailModalIn 220ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes detailFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes detailModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }

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

.modal-content h2 {
    color: var(--color-primary);
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 700;
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    font-weight: 300;
    color: var(--color-text-light);
    cursor: pointer;
    transition: var(--sidebar-transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close:hover {
    color: var(--color-primary);
    background: var(--color-background);
    transform: rotate(90deg);
}

/* ==================== フォーム ==================== */
#modal-form {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 20px;
}

/* 見積もり管理の検索UI */
.estimates-search-container {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
}

.search-actions-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-actions .btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 40px;
    box-sizing: border-box;
}

.search-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.search-actions .btn-primary {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.search-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.btn-icon {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.search-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.search-condition-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    flex-wrap: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 見積もり検索：日付範囲 */
.estimate-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.estimate-date-range .estimate-date-range-sep {
    color: var(--color-text-light);
    font-weight: 600;
    padding: 0 2px;
}

.estimate-date-range .estimate-date-preset {
    min-width: 140px;
}

.estimate-date-range .estimate-date-from,
.estimate-date-range .estimate-date-to {
    min-width: 160px;
}

/* 見積もり枝番の横長表示（共通カラム） */
.estimate-item-row td {
    padding-top: 6px;
    padding-bottom: 6px;
}

.estimate-item-row-editing {
    position: relative;
    z-index: 5;
}

.estimate-item-row-editing .estimate-item-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.estimate-item-row-editing .category-dropdown {
    z-index: 3000;
}

.estimate-item-row-editing .category-search-container.inline-category {
    position: relative;
    z-index: 3001;
}

.estimate-item-row-editing .estimate-item-cell {
    position: relative;
    z-index: 1;
}

.estimate-item-row-editing .estimate-item-cell:focus-within {
    z-index: 3002;
}

.estimate-item-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.estimate-item-scroll-header {
    padding: 6px 8px;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
}

.estimate-item-scroll::-webkit-scrollbar {
    height: 0;
}

.estimate-item-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns:
        140px 140px 140px 140px 130px 130px 260px 160px 180px 180px 140px 140px 140px 240px 280px 240px;
    align-items: center;
    gap: 8px;
}

.estimate-item-grid-header {
    font-weight: 600;
    color: #555;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.estimate-item-grid.editing {
    background: #fffaf0;
    border-radius: 6px;
    padding: 4px;
    gap: 10px;
}

.estimate-item-cell {
    font-size: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estimate-item-grid.editing .estimate-item-cell {
    overflow: visible;
}

.estimate-item-grid-header .estimate-item-cell {
    display: block;
    overflow: visible;
}

.estimate-item-cell .item-status-select {
    height: 26px;
    font-size: 12px;
    padding: 2px 6px;
}

.estimate-item-cell .inline-input {
    height: 24px;
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid #cfd6e4;
    border-radius: 4px;
    min-width: 0;
    background: #fff;
    flex: 1 1 auto;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
}

.estimate-item-cell .cell-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estimate-item-cell .inline-input:focus {
    outline: none;
    border-color: #7b8cff;
    box-shadow: 0 0 0 2px rgba(123, 140, 255, 0.18);
}

.estimate-item-cell .inline-input[type="number"] {
    min-width: 80px;
}

.estimate-item-cell .inline-input[type="date"] {
    min-width: 100px;
}

.estimate-item-cell .inline-input.inline-unit {
    flex: 0 0 64px;
    min-width: 64px;
}

.estimate-item-cell .category-search-container.inline-category {
    flex: 1 1 auto;
    min-width: 0;
}

.estimate-item-cell .category-search-container.inline-category input[type="text"] {
    height: 24px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #cfd6e4;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
}

.estimate-item-cell .category-search-container.inline-category input[type="text"]:focus {
    outline: none;
    border-color: #7b8cff;
    box-shadow: 0 0 0 2px rgba(123, 140, 255, 0.18);
}

.estimate-item-scroll .category-dropdown {
    z-index: 20;
    min-width: 180px;
    max-width: 320px;
}

.estimate-item-actions-inline {
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.estimate-item-actions-inline .btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

.estimate-item-row .text-muted {
    color: var(--color-text-light);
}

.search-condition-item:hover {
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.search-type-select {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
}

.search-type-select:hover {
    border-color: var(--color-primary, #667eea);
}

.search-type-select:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-value-input {
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    min-width: 180px;
    transition: all 0.2s ease;
    background: white;
    color: #333;
}

.search-value-input:hover {
    border-color: #ccc;
}

.search-value-input:focus {
    outline: none;
    border-color: var(--color-primary, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-remove-condition {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(238, 90, 111, 0.3);
}

.btn-remove-condition:hover {
    background: linear-gradient(135deg, #ee5a6f 0%, #dc4c64 100%);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 8px rgba(238, 90, 111, 0.4);
}

.search-actions .btn-sm {
    padding: 6px 12px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .search-condition-item {
        flex-direction: column;
        align-items: stretch;
    }

    .search-type-select,
    .search-value-input {
        width: 100%;
        min-width: auto;
    }
}

/* ステップインジケーター */
.step-indicator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin: 20px 0 30px 0 !important;
}

.step-indicator .step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 100px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 見積もりフォーム用の3段組みレイアウト */
.form-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
}

.form-grid-3col .form-group {
    margin-bottom: 0 !important;
}

/* 見積：備考は2カラム分（3カラム中） */
.form-grid-3col .form-group.notes-two-col {
    grid-column: 2 / -1;
}

/* 見積もり項目フォーム用の4段組みレイアウト */
.form-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: start;
    width: 100%;
}

.form-grid-4col .form-group {
    margin-bottom: 0 !important;
}

.form-group-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    display: block;
    clear: both;
}

.form-group-section:last-child {
    border-bottom: none;
}

.form-group-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    width: 100%;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-size: 14px;
    transition: var(--sidebar-transition);
    background: var(--color-card);
    color: var(--color-text);
    font-family: inherit;
}

/* 買掛の主要selectは文字が埋もれないように余白と矢印を固定 */
.form-group select[name="payment_status"],
.form-group select[name="is_current_account"] {
    height: 36px;
    padding: 6px 30px 6px 10px;
    line-height: 1.2;
    background: #fff;
    color: var(--color-text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B6660' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

.cpl-client-select {
    position: relative;
    display: flex;
    align-items: center;
}

.cpl-client-select input {
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.cpl-client-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(212, 201, 184, 0.7);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
    padding: 6px 0;
}

.cpl-client-suggest .item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--color-text);
    white-space: nowrap;
}

.cpl-client-suggest .item:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
}

.cpl-client-suggest .empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-light);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input[readonly],
.form-group input[readonly]:focus {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

.form-group select:disabled,
.form-group input:disabled,
.btn-suggest-tiny:disabled {
    background-color: #f0f0f0;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-tiny {
    font-size: 11px;
    padding: 1px 5px;
    min-width: unset;
    height: auto;
    line-height: 1.2;
}

.form-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    width: 100%;
    clear: both;
}

.form-actions .btn {
    padding: 8px 20px;
    font-size: 14px;
    min-width: 100px;
    flex-shrink: 0;
    white-space: nowrap;
}

.modal .form-actions .btn {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal .form-actions .btn:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.form-actions .btn-cancel {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-text);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.form-actions .btn-submit {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
}

.form-actions .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4);
}

/* ==================== CC入力（CPL作成など） ==================== */
.cc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cc-row .cc-input {
    flex: 1;
}

/* 見積のEPLプレビューに寄せた “採番プレビュー” 表示 */
.number-preview {
    margin-left: 15px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
}

/* ==================== CPL作成 STEP2/STEP3 ==================== */
.cpl-step2-table td,
.cpl-step2-table th {
    vertical-align: top;
}

.cpl-step2-table th,
.cpl-step2-table td {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.25;
}

.cpl-step2-parent-row {
    cursor: pointer;
}

.cpl-step2-expand-cell {
    width: 40px;
    text-align: center;
    color: var(--color-text-light);
    user-select: none;
    white-space: nowrap;
}

.cpl-step2-expand-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-weight: 900;
}

.cpl-step2-expand-btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
}

.cpl-step2-child-wrap {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed rgba(212, 201, 184, 0.55);
    border-radius: 10px;
}

.cpl-step2-branch-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cpl-step2-branch-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
}

.cpl-step2-branch-row.is-selected {
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
}

.cpl-step2-branch-row .branch-code {
    font-weight: 700;
    min-width: 140px;
    white-space: nowrap;
}

.cpl-step2-branch-row .branch-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpl-step2-branch-row .branch-requestor {
    font-size: 12px;
    color: var(--color-text-light);
    white-space: nowrap;
}

.cpl-step2-branch-row .branch-amount {
    margin-left: auto;
    font-weight: 800;
    white-space: nowrap;
    color: var(--color-text);
}

.cpl-step2-pick-btn.btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
}

.cpl-step2-branch-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.cpl-step2-selectall-btn.btn {
    padding: 3px 8px;
    font-size: 12px;
    min-width: auto;
    border-radius: 10px;
}

.cpl-step3-table input[type="text"],
.cpl-step3-table input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    font-size: 13px;
    transition: var(--sidebar-transition);
    background: var(--color-card);
    color: var(--color-text);
    font-family: inherit;
}

.cpl-step3-table input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.cpl-step3-table td,
.cpl-step3-table th {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.2;
}

.cpl-step3-display-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cpl-step3-display-wrap .btn-mini {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 8px;
    min-width: auto;
    white-space: nowrap;
}

.help-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid rgba(122, 111, 97, 0.6);
    color: var(--color-text-light);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    background: rgba(255, 255, 255, 0.7);
}

.help-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(38, 34, 30, 0.95);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    min-width: 180px;
    max-width: 280px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 3001;
}

.help-icon::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(38, 34, 30, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 3001;
}

.help-icon:hover::after,
.help-icon:hover::before {
    opacity: 1;
}

/* CPL新規作成：入力補助（サジェスト） */
.cpl-notes-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cpl-notes-suggest button {
    border: 1px solid rgba(139, 115, 85, 0.35);
    background: rgba(139, 115, 85, 0.10);
    color: var(--color-text);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cpl-notes-suggest button:hover {
    background: rgba(139, 115, 85, 0.16);
}

.btn-mini-suggest,
.btn-suggest-tiny {
    appearance: none;
    border: 1px solid rgba(139, 115, 85, 0.45);
    background: rgba(139, 115, 85, 0.06);
    color: var(--color-text);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.1s ease;
    line-height: 1.2;
}

.btn-mini-suggest:hover,
.btn-suggest-tiny:hover {
    background: rgba(139, 115, 85, 0.15);
    border-color: rgba(139, 115, 85, 0.6);
    transform: translateY(-1px);
}

.btn-mini-suggest:disabled,
.btn-suggest-tiny:disabled {
    opacity: 0.5;
    background: #f0f0f0;
    border-color: #d0d0d0;
    color: #999 !important;
    cursor: not-allowed;
    transform: none;
}

/* CPL作成：候補読み込み中の軽い表示（webpアニメは使わない） */
.inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-light);
    font-size: 12px;
    font-weight: 700;
}

.inline-loading::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgba(139, 115, 85, 0.25);
    border-top-color: rgba(139, 115, 85, 0.75);
    animation: spin 0.8s linear infinite;
}

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

/* ==================== トースター通知 ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: var(--color-white);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px var(--color-shadow);
    min-width: 300px;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid var(--color-primary);
}

.yomi-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.yomi-help-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #475569;
    color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    display: inline-block;
}

.yomi-help-tooltip {
    display: none;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 380px;
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    line-height: 1.6;
    z-index: 9999;
    pointer-events: none;
    white-space: normal;
}

.yomi-help:hover .yomi-help-tooltip,
.yomi-help:focus .yomi-help-tooltip,
.yomi-help:focus-within .yomi-help-tooltip {
    display: block;
}

.toast.success {
    border-left-color: var(--color-accent);
}

.toast.error {
    border-left-color: #d32f2f;
}

.toast.warning {
    border-left-color: #f57c00;
}

.toast.info {
    border-left-color: var(--color-primary);
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: var(--color-accent);
}

.toast.error .toast-icon {
    color: #d32f2f;
}

.toast.warning .toast-icon {
    color: #f57c00;
}

.toast.info .toast-icon {
    color: var(--color-primary);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
}

.toast-message {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: var(--color-background);
    color: var(--color-text);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* ==================== アイコンアップロード ==================== */
.icon-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-card);
}

.icon-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-border);
    box-shadow: 0 4px 12px var(--color-shadow);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 600;
    font-size: 48px;
}

.icon-upload-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.icon-upload-controls .btn {
    height: 48px;
    padding: 0 20px;
    line-height: 48px;
}

.icon-upload-controls input[type="file"] {
    display: none;
}

/* ==================== 詳細表示 ==================== */
.detail-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--color-border);
}

.detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h3 {
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.25);
    display: inline-block;
    width: 100%;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* 詳細モーダル内のグリッドをより横に長く */
#detail-modal .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.detail-item {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--color-card) 0%, #ffffff 100%);
    border-radius: 12px;
    border-left: 5px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-left-color: var(--color-accent);
}

.detail-item strong {
    color: var(--color-primary);
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 0.8;
}

/* ==================== 見積もり詳細（#detail-modal）視認性改善 ==================== */
#detail-modal .detail-section {
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
}

#detail-modal .detail-section h3 {
    color: var(--color-text);
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.8);
}

#detail-modal .detail-grid {
    gap: 12px;
}

#detail-modal .detail-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(212, 201, 184, 0.85);
    border-left: none;
    /* 色帯を撤去 */
    box-shadow: 0 8px 20px rgba(62, 58, 53, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    min-height: 54px;
    padding: 12px 14px;
    padding-right: 44px;
    /* コピーアイコン分 */
    position: relative;
    animation: detailFadeUp 220ms ease both;
}

#detail-modal .detail-item:hover {
    transform: translateY(-1px);
    border-color: rgba(139, 115, 85, 0.45);
    box-shadow: 0 14px 28px rgba(62, 58, 53, 0.12);
}

#detail-modal .detail-item strong {
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: 0.2px;
    font-size: 12px;
    opacity: 1;
    margin-bottom: 4px;
}

#detail-modal .detail-item {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.55;
}

#detail-modal .detail-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(212, 201, 184, 0.75);
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: var(--sidebar-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}

#detail-modal .detail-copy-btn::before {
    content: '⧉';
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
}

#detail-modal .detail-copy-btn:hover {
    border-color: rgba(139, 115, 85, 0.55);
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

#detail-modal .detail-copy-btn:active {
    transform: translateY(0);
}

#detail-modal .detail-item[style*="grid-column: 1 / -1"] {
    background: rgba(255, 255, 255, 0.92);
}

/* ざっくりstagger（過剰にならない範囲で） */
#detail-modal .detail-section .detail-item:nth-child(1) {
    animation-delay: 0ms;
}

#detail-modal .detail-section .detail-item:nth-child(2) {
    animation-delay: 20ms;
}

#detail-modal .detail-section .detail-item:nth-child(3) {
    animation-delay: 40ms;
}

#detail-modal .detail-section .detail-item:nth-child(4) {
    animation-delay: 60ms;
}

#detail-modal .detail-section .detail-item:nth-child(5) {
    animation-delay: 80ms;
}

#detail-modal .detail-section .detail-item:nth-child(6) {
    animation-delay: 100ms;
}

#detail-modal .detail-section .detail-item:nth-child(7) {
    animation-delay: 120ms;
}

#detail-modal .detail-section .detail-item:nth-child(8) {
    animation-delay: 140ms;
}

@media (prefers-reduced-motion: reduce) {

    #detail-modal .modal-content,
    #detail-modal .detail-item {
        animation: none !important;
    }

    #detail-modal .detail-item {
        transition: none !important;
    }
}

/* ==================== 発注一覧：アコーディオン（子行） ==================== */
#orders-table tr.order-item-row td {
    background: #e8e8e8;
    border-top: 1px dashed rgba(212, 201, 184, 0.55);
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}

#orders-table tr.order-item-row.grandchild td {
    background: rgba(255, 255, 255, 0.6);
}

#orders-table tr.order-item-header-row td {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}

#orders-table tr.order-item-row.expanding,
#orders-table tr.order-item-row.collapsing,
#orders-table tr.order-item-header-row.collapsing {
    transform-origin: top;
    transition: opacity 180ms ease, transform 180ms ease;
}

#orders-table tr.order-item-row.collapsing td,
#orders-table tr.order-item-header-row.collapsing td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden;
    transition: padding 220ms ease, line-height 220ms ease, font-size 220ms ease;
}

#orders-table tr.order-item-row.collapsing td * {
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
}

/* ==================== EPLホバー：見積プレビュー（ツールチップ） ==================== */
.epl-preview-tooltip {
    position: absolute;
    width: min(520px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 24px));
    overflow: auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(212, 201, 184, 0.85);
    box-shadow: 0 16px 40px rgba(62, 58, 53, 0.14);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    z-index: 10050;
}

.epl-preview-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(212, 201, 184, 0.55);
}

.epl-preview-title {
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 6px;
}

.epl-preview-sub {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.35;
}

.epl-preview-body {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.epl-preview-item {
    display: grid;
    grid-template-columns: 120px 1fr 110px;
    gap: 8px;
    align-items: baseline;
    padding: 8px 10px;
    border: 1px solid rgba(212, 201, 184, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
}

.epl-preview-branch {
    font-weight: 700;
    color: var(--color-text);
}

.epl-preview-name {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epl-preview-amt {
    text-align: right;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

.epl-preview-empty {
    padding: 10px;
    color: var(--color-text-light);
}

@media (prefers-reduced-motion: reduce) {

    #orders-table tr.order-item-row.expanding,
    #orders-table tr.order-item-row.collapsing {
        transition: none !important;
    }
}

/* :has()セレクターのフォールバック（必要に応じて） */

/* 全幅のアイテム（備考など） */
.detail-item[style*="grid-column: 1 / -1"] {
    grid-column: 1 / -1;
    padding: 20px 24px;
    min-height: auto;
}

.detail-item[style*="grid-column: 1 / -1"] strong {
    margin-bottom: 12px;
}

/* レスポンシブ対応 */
@media (max-width: 1400px) {
    #detail-modal .detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    #detail-modal .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .modal-content {
        max-width: 95%;
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    #detail-modal .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== ローディングアニメーション ==================== */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-radius: 8px;
    min-height: 200px;
    /* 最小の高さを確保 */
}

/* ====================
   Busy（連打防止）UI
   ==================== */
.is-busy {
    cursor: not-allowed;
    opacity: 0.85;
}

.busy-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-right: 8px;
}

.busy-dots::before,
.busy-dots::after {
    content: '';
}

.busy-dots,
.busy-dots::before,
.busy-dots::after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: busyBounce 0.9s infinite ease-in-out;
}

.busy-dots::before {
    animation-delay: -0.18s;
}

.busy-dots::after {
    animation-delay: -0.36s;
}

@keyframes busyBounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.busy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    border-radius: 8px;
}

.busy-overlay-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    color: #333;
    font-weight: 600;
}

.busy-animation-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    image-rendering: auto;
    flex: 0 0 auto;
}

/* ====================
   Global Loading（viewport固定）
   ==================== */
.global-busy-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    z-index: 20000;
    /* toast(10000)やモーダルより前面 */
    pointer-events: auto;
    /* 背面操作をブロック */
}

.global-busy-overlay.is-visible {
    display: flex;
}

.global-busy-overlay-content {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    color: #333;
    font-weight: 800;
    font-size: 18px;
    min-width: 340px;
    justify-content: center;
}

/* グローバルオーバーレイ内のアニメーション画像を大きく */
.global-busy-overlay .busy-animation-img {
    width: 92px;
    height: 92px;
}

/* ====================
   Bulk Order Modal（sticky actions）
   ==================== */
.bulk-order-actions-sticky {
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--color-border);
    z-index: 5;
}

.bulk-order-actions-sticky .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 見積検索：クリアはテキストリンク表現に（ボタンっぽさを消す） */
#clear-search-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

#clear-search-btn:hover {
    color: var(--color-hover);
}

/* 発注/CPL検索：クリアも見積と同じテキストリンク表現に */
#clear-order-search-btn,
#clear-cpl-search-btn {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    height: auto;
}

#clear-order-search-btn:hover,
#clear-cpl-search-btn:hover {
    color: var(--color-hover);
    transform: none;
}

/* 共通: クリアボタンをテキストリンク表現に（見積以外でも使う） */
.clear-search-link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    height: auto !important;
}

.clear-search-link:hover {
    color: var(--color-hover) !important;
    transform: none !important;
}

/* 見積もりテーブルのtbody内のローディングオーバーレイ用のスタイル */
#estimates-table tbody {
    position: relative;
    min-height: 200px;
    /* 最小の高さを確保 */
}

#estimates-table tbody .estimates-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    /* クリックイベントを無効化 */
}

#estimates-table tbody .estimates-loading-overlay .loading-spinner {
    pointer-events: auto;
    /* スピナー自体はクリック可能 */
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.table-wrapper {
    position: relative;
}

.table-container {
    position: relative;
}

/* ==================== 編集履歴スタイル ==================== */
.edit-history-accordion {
    margin-top: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.edit-history-accordion summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-weight: 700;
    color: #2f3b48;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edit-history-accordion summary::-webkit-details-marker {
    display: none;
}

.edit-history-accordion summary::after {
    content: '▾';
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.edit-history-accordion[open] summary::after {
    transform: rotate(180deg);
}

.edit-history-accordion-body {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.85);
}

.edit-history-container {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.edit-history-search {
    margin-bottom: 12px;
}

.edit-history-search-row {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr 1fr auto auto auto;
    gap: 8px;
    align-items: center;
}

.edit-history-search-row input[type="text"],
.edit-history-search-row input[type="date"] {
    height: 36px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 14px;
    background: #fff;
}

.edit-history-search-row select {
    height: 36px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 14px;
    background: #fff;
}

.edit-history-search-meta {
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
}

.edit-history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.edit-history-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-history-item:hover {
    background: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.edit-history-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.edit-history-action {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.edit-history-user {
    font-weight: 600;
    color: var(--color-text);
}

.edit-history-date {
    color: #666;
    font-size: 14px;
    margin-left: auto;
}

.edit-history-changes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.edit-history-changes-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}

.edit-history-changes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.edit-history-changes-list li {
    padding: 5px 0;
    font-size: 14px;
}

.edit-history-changes-list .old-value {
    color: #f44336;
    text-decoration: line-through;
    margin-right: 5px;
}

.edit-history-changes-list .new-value {
    color: #4CAF50;
    font-weight: 600;
}

.edit-history-data {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

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

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

.error {
    text-align: center;
    padding: 40px;
    color: #f44336;
}

/* ページネーション部分のローディング */
.pagination-loading {
    position: relative;
    min-height: 50px;
}

.pagination-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==================== 見積もりアコーディオンアニメーション ==================== */
.estimate-item-header-row,
.estimate-item-row {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
    overflow: hidden;
}

.estimate-item-header-row.expanding,
.estimate-item-row.expanding {
    opacity: 0;
    transform: scaleY(0);
}

.estimate-item-header-row.expanded,
.estimate-item-row.expanded {
    opacity: 1;
    transform: scaleY(1);
}

.estimate-item-header-row.collapsing,
.estimate-item-row.collapsing {
    opacity: 0;
    transform: scaleY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.estimate-item-header-row.collapsing td,
.estimate-item-row.collapsing td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden;
    transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        line-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.estimate-item-row.collapsing td * {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    transform-origin: center;
}

.expand-icon.expanded {
    transform: rotate(90deg);
}

/* 発注一覧は「▶/▼」の文字で表現しているため、回転はしない（位置ズレ防止） */
#orders-table .expand-icon.expanded {
    transform: none;
}

/* ==================== 発注：EPLリンク（モダン表示） ==================== */
.orders-epl-link {
    /* 見積管理のリンク表現に寄せる（チップ表現はやめる） */
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--sidebar-transition);
    border-bottom: 1px solid transparent;
}

.orders-epl-link:hover {
    color: var(--color-hover);
    border-bottom-color: var(--color-hover);
}

.orders-epl-link:active {
    opacity: 0.9;
}

/* ==================== 発注：ツリー表示（├─等の文字を廃止） ==================== */
#orders-table .order-tree-marker {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    position: relative;
    vertical-align: middle;
}

/* 子行: ├ のイメージ（縦線＋横線） */
#orders-table .order-tree-marker.is-child::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -10px;
    bottom: -10px;
    width: 1px;
    background: rgba(212, 201, 184, 0.9);
}

#orders-table .order-tree-marker.is-child::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 10px;
    height: 1px;
    background: rgba(212, 201, 184, 0.9);
}

/* 孫行: └ のイメージ（上から縦線＋横線、下は切る） */
#orders-table tr.order-item-row.grandchild .order-tree-marker.is-grandchild::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -10px;
    bottom: 8px;
    width: 1px;
    background: rgba(212, 201, 184, 0.9);
}

#orders-table tr.order-item-row.grandchild .order-tree-marker.is-grandchild::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 10px;
    height: 1px;
    background: rgba(212, 201, 184, 0.9);
}

/* ==================== レスポンシブ ==================== */
@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-width-expanded);
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }

    .sidebar:hover~.main-content {
        margin-left: 0;
        width: 100%;
    }

    .header-left h1 {
        font-size: 18px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    #modal-form {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-3col {
        grid-template-columns: 1fr;
    }

    .form-grid-3col .form-group {
        margin-bottom: 20px;
    }

    /* モバイルでは1カラムなので全幅にする */
    .form-grid-3col .form-group.notes-two-col {
        grid-column: 1 / -1;
    }

    .form-grid-4col {
        grid-template-columns: 1fr;
    }

    .form-grid-4col .form-group {
        margin-bottom: 20px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 24px;
        width: 95%;
    }
}

@media (max-width: 480px) {
    .main-header {
        padding: 0 16px;
    }

    .header-left h1 {
        font-size: 16px;
    }

    .section-header h2 {
        font-size: 22px;
    }

    .table-wrapper {
        padding: 16px;
    }

    .data-table th,
    .data-table td {
        padding: 12px 8px;
        font-size: 12px;
    }
}

/* ==================== CSVアップロード関連スタイル ==================== */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.mapping-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
}

.history-entry {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.history-entry h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 18px;
}

.history-entry p {
    margin: 5px 0;
    color: var(--color-text);
}

.history-entry details {
    margin-top: 10px;
}

.history-entry summary {
    cursor: pointer;
    color: var(--color-accent);
    font-weight: 500;
}

.history-entry ul {
    margin-top: 10px;
    padding-left: 20px;
}

.history-entry li {
    color: var(--color-text-light);
    margin: 5px 0;
}

/* ==================== トースター通知 ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: var(--color-white);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px var(--color-shadow);
    min-width: 300px;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid var(--color-primary);
}

.toast.success {
    border-left-color: var(--color-accent);
}

.toast.error {
    border-left-color: #d32f2f;
}

.toast.warning {
    border-left-color: #f57c00;
}

.toast.info {
    border-left-color: var(--color-primary);
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: var(--color-accent);
}

.toast.error .toast-icon {
    color: #d32f2f;
}

.toast.warning .toast-icon {
    color: #f57c00;
}

.toast.info .toast-icon {
    color: var(--color-primary);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
}

.toast-message {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: var(--color-background);
    color: var(--color-text);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}


/* 商品分類検索フィールド */
.category-search-container {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
}

.category-search-container input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-white);
    color: var(--color-text);
    transition: all 0.2s;
}

.category-search-container input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.btn-add-category {
    padding: 10px 16px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-add-category:hover {
    background: var(--color-hover);
    transform: scale(1.05);
}

.btn-add-category:active {
    transform: scale(0.95);
}

.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-shadow);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
}

/* 追加ボタンがある場合の調整（商品分類用） */
.category-search-container .btn-add-category~.category-dropdown {
    right: 60px;
}

.category-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    line-height: 1.4;
}

.category-dropdown-item:last-child {
    border-bottom: none;
}

.category-dropdown-item:hover {
    background: var(--color-background);
}

.category-dropdown-item:active {
    background: var(--color-border);
}

/* YOMI */
.yomi-section {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fafafa;
}

.yomi-section-header {
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

.yomi-allocation-body {
    margin-bottom: 10px;
}

.yomi-allocation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.yomi-allocation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.yomi-allocation-row select {
    flex: 1;
}

.yomi-allocation-rate {
    width: 90px;
    text-align: right;
}

.yomi-allocation-remove {
    border: none;
    background: transparent;
    color: #9b1c1c;
    cursor: pointer;
    font-size: 12px;
}

.yomi-allocation-fixed {
    font-size: 12px;
    color: #666;
}

.yomi-allocation-total-wrap {
    font-size: 12px;
    color: #555;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* ==================== 権限管理 ==================== */
.permissions-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==================== マイページ ==================== */
.mypage-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.mypage-layout .section-header h2 {
    color: #f8fafc;
}

.mypage-back-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.35;
    filter: blur(1px) saturate(1.05);
    pointer-events: none;
}

.mypage-back-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 20% 20%, rgba(15, 23, 42, 0.65), transparent 60%),
        linear-gradient(120deg, rgba(8, 15, 40, 0.78), rgba(30, 41, 59, 0.5));
    pointer-events: none;
}

.mypage-hero-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 260px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    z-index: 2;
}

.mypage-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    will-change: transform;
}

.mypage-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(8, 15, 40, 0.85), rgba(30, 41, 59, 0.6));
    mix-blend-mode: normal;
}


.mypage-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    color: #f8fafc;
}

.mypage-hero-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mypage-hero-sub {
    font-size: 12px;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 14px;
}

.mypage-rank-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 12px;
}

.mypage-rank-filter .label {
    font-weight: 700;
    color: rgba(248, 250, 252, 0.85);
}

.mypage-rank-filter .hint {
    color: rgba(248, 250, 252, 0.55);
    font-size: 11px;
}

.mypage-rank-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mypage-rank-buttons button {
    border-radius: 999px;
    border: 1px solid rgba(248, 250, 252, 0.35);
    background: rgba(15, 23, 42, 0.25);
    color: rgba(248, 250, 252, 0.9);
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mypage-rank-buttons button.active {
    background: rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.7);
    color: #f8fafc;
}

.mypage-hero-metrics {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.mypage-hero-submetrics {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.mypage-submetric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(248, 250, 252, 0.92);
    font-size: 12px;
}

.mypage-submetric strong {
    font-size: 15px;
    color: #f8fafc;
}

.mypage-submetric small {
    font-size: 11px;
    color: rgba(248, 250, 252, 0.7);
}

.mypage-metric span {
    display: block;
    font-size: 11px;
    color: rgba(248, 250, 252, 0.6);
}

.mypage-metric strong {
    font-size: 18px;
    font-weight: 700;
}

.mypage-donut-wrap {
    position: relative;
    width: 180px;
    height: 180px;
}

.mypage-donut-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.4));
}

.mypage-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f8fafc;
    font-weight: 700;
}

.mypage-donut-center span {
    font-size: 22px;
}

.mypage-donut-center small {
    font-size: 11px;
    color: rgba(248, 250, 252, 0.7);
}

.mypage-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mypage-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 230px;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
    z-index: 2;
}

.mypage-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
    color: #f8fafc;
}

.mypage-card-title {
    font-size: 15px;
    font-weight: 700;
}

.mypage-card-message {
    font-size: 12px;
    color: rgba(248, 250, 252, 0.75);
}

.mypage-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 140px;
    overflow: auto;
}

.mypage-link-item {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #f8fafc;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mypage-link-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.mypage-link-sub {
    font-size: 11px;
    color: rgba(248, 250, 252, 0.6);
}

.mypage-card-cta {
    align-self: flex-start;
    margin-top: auto;
}


@media (max-width: 1100px) {
    .mypage-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .mypage-cards {
        grid-template-columns: 1fr;
    }
}

.permissions-roles .table-wrapper {
    margin-bottom: 0;
}

.permissions-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.permissions-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #3b3b3b;
}

.permissions-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(90, 130, 170, 0.2);
    color: #2b4f6f;
    font-size: 13px;
    font-weight: 700;
}

.permissions-role-table th,
.permissions-role-table td {
    white-space: nowrap;
}

.permissions-role-table .action-buttons {
    text-align: center;
}

.permissions-role-table td:nth-child(2) {
    white-space: normal;
    min-width: 160px;
}

.permissions-role-table tr.is-active {
    background: rgba(90, 130, 170, 0.12);
}

.permissions-editor {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.permissions-editor-empty {
    padding: 24px;
    text-align: center;
    color: #666;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: 1px dashed rgba(160, 160, 160, 0.4);
}

.permissions-editor-body {
    display: none;
}

.permissions-editor.is-active .permissions-editor-body {
    display: block;
}

.permissions-editor.is-active .permissions-editor-empty {
    display: none;
}

.permissions-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.permissions-matrix-table th,
.permissions-matrix-table td {
    text-align: center;
}

.permissions-matrix-table td:first-child,
.permissions-matrix-table th:first-child {
    text-align: left;
}

.permissions-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.permissions-matrix-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.permissions-matrix-table {
    min-width: 520px;
}

.permissions-actions {
    justify-content: flex-end;
    gap: 10px;
}

.table-empty {
    text-align: center;
    padding: 30px 12px;
    color: #666;
}

@media (max-width: 1100px) {
    .permissions-layout {
        gap: 20px;
    }
}

/* ==================== モーダル共通スタイル ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--color-white);
    border-radius: 14px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease-out;
    max-height: 90vh;
    /* 画面内に収める */
    overflow-y: auto;
    /* 内部スクロール */
}

/* 見積もり作成ステップフォーム用（横長） */
#modal.estimate-step-modal .modal-content {
    max-width: 900px !important;
    /* フォームが3列など横に広いので拡張 */
    width: 95% !important;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 242, 236, 0.5);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 0 4px;
}

.modal-close-btn:hover {
    color: var(--color-text);
}

.modal-body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.modal-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-text-light);
    background: rgba(0, 0, 0, 0.03);
    padding: 10px;
    border-radius: 8px;
}

.modal-details {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-background);
    border-radius: 8px;
    font-size: 13px;
}

.modal-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.modal-detail-row:last-child {
    margin-bottom: 0;
}

.modal-detail-label {
    color: var(--color-text-light);
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(245, 242, 236, 0.3);
}

/* ==================== 破棄ステータス行（棒線+グレーアウト） ==================== */
tr.row-discarded td,
tr.row-discarded td * {
    text-decoration: line-through !important;
    color: #aaa !important;
}

/* ステータス選択は操作可能に維持 */
tr.row-discarded td select.status-select,
tr.row-discarded td select.cpl-parent-invoice-status {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

tr.row-discarded td a,
tr.row-discarded td .orders-epl-link,
tr.row-discarded td button {
    pointer-events: none;
    color: #aaa !important;
}

tr.row-discarded td .estimate-item-cell,
tr.row-discarded td .estimate-item-cell * {
    text-decoration: line-through !important;
    color: #aaa !important;
}

/* 枝番行のステータスセルも操作可能に */
tr.row-discarded td .estimate-item-cell select.status-select {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: auto !important;
}

tr.row-discarded td select:not(.status-select):not(.cpl-parent-invoice-status),
tr.row-discarded td input {
    text-decoration: line-through !important;
    color: #aaa !important;
    pointer-events: none;
}

/* モーダル内の破棄行（STEP2フォーム） */
.estimate-item-row.row-discarded {
    position: relative;
}

.estimate-item-row.row-discarded * {
    text-decoration: line-through !important;
    color: #aaa !important;
}

/* STEP2モーダルでもステータスは操作可能に */
.estimate-item-row.row-discarded select.status-select {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: auto !important;
}

.estimate-item-row.row-discarded input,
.estimate-item-row.row-discarded select:not(.status-select),
.estimate-item-row.row-discarded textarea,
.estimate-item-row.row-discarded button {
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   請求発行管理タブ (bsched-*)
   ══════════════════════════════════════════════════════════════ */

.bsched-wrap {
    padding: 0 0 80px;
    position: relative;
}

/* ─── KPIバー ─── */
.bsched-kpi-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bsched-kpi-item {
    flex: 1;
    min-width: 160px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    border: 1.5px solid #e8e0d4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s;
}

.bsched-kpi-item:hover {
    transform: translateY(-2px);
}

.bsched-kpi-pending {
    border-left: 4px solid #8B7355;
}

.bsched-kpi-overdue {
    border-left: 4px solid #B05A45;
    background: #FCF5F3;
}

.bsched-kpi-issued {
    border-left: 4px solid #6B804C;
}

.bsched-kpi-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bsched-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.2;
}

.bsched-kpi-amount {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* ─── ツールバー ─── */
.bsched-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bsched-toolbar-left,
.bsched-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpl-prefix-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: #f0f0f0;
    padding: 3px;
    border-radius: 20px;
    width: fit-content;
}

.cpl-prefix-tabs button {
    border: none;
    background: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.cpl-prefix-tabs button:hover {
    color: #333;
}

.cpl-prefix-tabs button.active {
    background: #333;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bsched-subtabs {
    display: flex;
    background: #f0ece6;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.bsched-subtab {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bsched-subtab.active {
    background: #fff;
    color: #2c2c2c;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.bsched-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #8B7355;
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.bsched-badge-issued {
    background: #4A8B7F;
}

.bsched-label {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.bsched-date {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    color: #2c2c2c;
    background: #fff;
    transition: border-color 0.2s;
}

.bsched-date:focus {
    outline: none;
    border-color: #8B7355;
}

.bsched-sep {
    color: #aaa;
    font-size: 13px;
}

/* ─── 発行モードバー ─── */
.bsched-mode-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    background: #faf8f4;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #e8e0d4;
}

.bsched-segmented {
    display: flex;
    background: #ede8e0;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.bsched-seg-btn {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.bsched-seg-btn.active {
    background: #fff;
    color: #2c2c2c;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ─── グループ ─── */
.bsched-group {
    border-radius: 12px;
    border: 1.5px solid #e8e0d4;
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
}

.bsched-group:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.bsched-group-overdue {
    border-color: #f5a0a0;
    background: #fff9f9;
}

.bsched-group-overdue .bsched-group-header {
    background: linear-gradient(135deg, #fff9f9 0%, #fff3f3 100%);
}

.bsched-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f1eb 100%);
    user-select: none;
    transition: background 0.2s;
    gap: 8px;
    flex-wrap: wrap;
}

.bsched-group-header:hover {
    background: linear-gradient(135deg, #f5f0e8 0%, #ede8e0 100%);
}

.bsched-group-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bsched-group-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bsched-chevron {
    font-size: 10px;
    color: #888;
    transition: transform 0.2s;
    display: inline-block;
}

.bsched-chevron.open {
    transform: rotate(90deg);
}

.bsched-overdue-badge {
    background: #d94040;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    animation: bsched-pulse 2s infinite;
}

@keyframes bsched-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.75;
    }
}

.bsched-group-date {
    font-weight: 700;
    font-size: 14px;
    color: #2c2c2c;
}

.bsched-group-count {
    font-size: 12px;
    background: #e8e0d4;
    border-radius: 12px;
    padding: 2px 10px;
    color: #666;
    font-weight: 600;
}

.bsched-group-amount {
    font-size: 13px;
    color: #4A8B7F;
    font-weight: 700;
}

.bsched-check-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.bsched-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.bsched-group-body.open {
    max-height: 2000px;
}

/* ─── テーブル ─── */
.bsched-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bsched-table thead tr {
    background: #f8f5f1;
}

.bsched-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e8e0d4;
    white-space: nowrap;
}

.bsched-th-check {
    width: 36px;
    text-align: center !important;
}

.bsched-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0ece6;
    vertical-align: middle;
    color: #2c2c2c;
}

.bsched-row {
    transition: background 0.15s;
}

.bsched-row:hover {
    background: #faf8f4;
}

.bsched-row:last-child td {
    border-bottom: none;
}

.bsched-row-selected {
    background: #f0f8f6 !important;
}

.bsched-right {
    text-align: right !important;
}

.bsched-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #2c6b5e;
    white-space: nowrap;
}

.bsched-apl-tag {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bsched-m {
    background: #EDF4FF;
    color: #2563EB;
}

.bsched-n {
    background: #F5F0EA;
    color: #8B7355;
}

.bsched-epl-parent,
.bsched-epl-branch {
    font-family: monospace;
    font-size: 12px;
}

.bsched-epl-branch {
    color: #666;
}

.bsched-client {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bsched-item-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555;
}

.bsched-cpl-link {
    color: #2563EB;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bsched-cpl-link:hover {
    color: #1d4ed8;
}

/* ─── ボタン ─── */
.bsched-btn-primary {
    background: linear-gradient(135deg, #8B7355 0%, #6E5B42 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
    white-space: nowrap;
}

.bsched-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(139, 115, 85, 0.4);
}

.bsched-btn-primary:disabled {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
}

.bsched-btn-secondary {
    background: #fff;
    color: #555;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bsched-btn-secondary:hover {
    border-color: #8B7355;
    color: #2c2c2c;
}

.bsched-btn-ghost {
    background: transparent;
    color: #888;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bsched-btn-ghost:hover {
    color: #2c2c2c;
    border-color: #888;
}

.bsched-btn-sm-primary {
    background: linear-gradient(135deg, #8B7355 0%, #6E5B42 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bsched-btn-sm-primary:hover {
    opacity: 0.88;
}

.bsched-btn-sm-ghost {
    background: transparent;
    color: #8B7355;
    border: 1.5px solid #8B7355;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bsched-btn-sm-ghost:hover {
    background: #8B7355;
    color: #fff;
}

/* ─── 一括操作バー ─── */
.bsched-bulk-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2c3440 0%, #1e2830 100%);
    color: #fff;
    border-radius: 16px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 9900;
    animation: bsched-slideup 0.25s ease;
    min-width: 380px;
}

@keyframes bsched-slideup {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.bsched-bulk-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.bsched-bulk-sep {
    color: rgba(255, 255, 255, 0.3);
}

.bsched-bulk-info #bsched-bulk-amount {
    font-weight: 700;
    color: #7ce8da;
    font-size: 15px;
}

.bsched-bulk-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ─── スケルトン ─── */
.bsched-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bsched-skeleton {
    height: 64px;
    background: linear-gradient(90deg, #f0ece6 25%, #e8e0d4 50%, #f0ece6 75%);
    background-size: 200% 100%;
    animation: bsched-shimmer 1.5s infinite;
    border-radius: 12px;
}

@keyframes bsched-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ─── 空状態 ─── */
.bsched-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 15px;
    background: #faf8f4;
    border-radius: 12px;
    border: 2px dashed #e0d8ce;
}

/* ─── モーダル ─── */
.bsched-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
    animation: bsched-fadein 0.2s ease;
}

@keyframes bsched-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bsched-modal {
    background: #fff;
    border-radius: 18px;
    width: 480px;
    max-width: 94vw;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: bsched-popup 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bsched-popup {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

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

.bsched-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid #f0ece6;
    background: linear-gradient(135deg, #faf8f4 0%, #f5f1eb 100%);
}

.bsched-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c2c2c;
}

.bsched-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #888;
    border-radius: 6px;
    padding: 4px 8px;
    transition: all 0.15s;
}

.bsched-modal-close:hover {
    background: #e8e0d4;
    color: #2c2c2c;
}

.bsched-modal-body {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.bsched-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f0ece6;
    justify-content: flex-end;
}

.bsched-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.bsched-confirm-row {
    background: #faf8f4;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bsched-confirm-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bsched-confirm-val {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
}

.bsched-highlight {
    color: #4A8B7F !important;
    font-size: 18px !important;
}

.bsched-confirm-breakdown {
    background: #faf8f4;
    border-radius: 10px;
    padding: 14px;
}

.bsched-confirm-breakdown-title {
    font-size: 12px;
    color: #888;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.bsched-confirm-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e8e0d4;
    color: #2c2c2c;
}

.bsched-confirm-table tr:last-child td {
    border-bottom: none;
}

.bsched-confirm-table .bsched-right {
    text-align: right;
    font-weight: 700;
    color: #4A8B7F;
}

/* ─── チェックボックス ─── */
.bsched-check {
    width: 16px;
    height: 16px;
    accent-color: #4A8B7F;
    cursor: pointer;
}

/* ==========================================
   仕訳帳ページ (.journal-*)
   ========================================== */
#journal-ledger .section-description {
    color: var(--color-text-muted, #888);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.journal-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-surface, #f8f7f5);
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.journal-period-select label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text, #3d3529);
}

.journal-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #d4cbc0);
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.journal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.journal-progress-bar {
    background: var(--color-surface, #f8f7f5);
    border: 1px solid var(--color-accent, #a99070);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
}

.journal-progress-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--color-accent, #a99070);
}

.journal-progress-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-accent-light, #d4c4a8);
    border-top-color: var(--color-accent, #a99070);
    border-radius: 50%;
    animation: journalSpin 0.8s linear infinite;
    flex-shrink: 0;
}

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

.journal-error-msg {
    background: #fff5f5;
    border: 1px solid #f87171;
    border-radius: 8px;
    padding: 12px 16px;
    color: #dc2626;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* サマリカード */
.journal-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.journal-card {
    background: white;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.journal-card-accent {
    background: linear-gradient(135deg, #f7f0e8 0%, #ede5d8 100%);
    border-color: var(--color-accent, #a99070);
}

.journal-card-label {
    font-size: 0.8rem;
    color: var(--color-text-muted, #888);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.journal-card-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text, #3d3529);
}

.journal-card-accent .journal-card-value {
    color: var(--color-accent-dark, #7a6650);
}

/* セクションタイトル */
.journal-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #3d3529);
    margin-bottom: 12px;
}

/* 科目別集計 */
.journal-by-account {
    margin-bottom: 32px;
}

.journal-account-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 10px;
}

.journal-account-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.journal-account-table th {
    background: var(--color-surface, #f8f7f5);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted, #6b6560);
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    white-space: nowrap;
}

.journal-account-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    vertical-align: middle;
}

.journal-account-table tr:hover td {
    background: var(--color-hover, #faf8f5);
}

.journal-row-selling td {
    background: #fffbf5 !important;
}

.journal-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-selling {
    background: #d4edda;
    color: #155724;
}

.badge-other {
    background: var(--color-surface, #f0ece6);
    color: var(--color-text-muted, #888);
}

/* 仕訳明細テーブル */
.journal-lines-section {
    margin-bottom: 32px;
}

.journal-lines-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.journal-lines-count {
    font-size: 0.85rem;
    color: var(--color-text-muted, #888);
}

.journal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 10px;
    max-height: 500px;
    overflow-y: auto;
}

.journal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 1000px;
}

.journal-table thead th {
    background: var(--color-surface, #f8f7f5);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted, #6b6560);
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.journal-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    white-space: nowrap;
    vertical-align: middle;
}

.journal-table tr:hover td {
    background: var(--color-hover, #faf8f5);
}

.journal-entry-no {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-text-muted, #888);
}

.journal-date {
    font-variant-numeric: tabular-nums;
}

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

.text-center {
    text-align: center !important;
}

/* ページネーション */
.journal-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.journal-page-btn {
    padding: 6px 16px;
    border: 1px solid var(--color-border, #d4cbc0);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background 0.2s;
}

.journal-page-btn:hover {
    background: var(--color-surface, #f8f7f5);
}

.journal-page-info {
    color: var(--color-text-muted, #888);
    font-size: 0.88rem;
}

/* 空 state */
.journal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--color-text-muted, #aaa);
    text-align: center;
}

.journal-empty-state svg {
    opacity: 0.3;
}

/* 科目マッピング */
.journal-mapping-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted, #888);
    margin-bottom: 16px;
}

.journal-mapping-list {
    max-height: 400px;
    overflow-y: auto;
}

.journal-mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.journal-mapping-table th {
    background: var(--color-surface, #f8f7f5);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    position: sticky;
    top: 0;
    z-index: 1;
}

.journal-mapping-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    vertical-align: middle;
}

.journal-category-input {
    border: 1px solid var(--color-border, #d4cbc0);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    width: 120px;
}

/* トグルスイッチ */
.journal-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.journal-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.journal-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-border, #d4cbc0);
    border-radius: 20px;
    transition: background 0.2s;
}

.journal-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.journal-toggle input:checked+.journal-toggle-slider {
    background: #4ade80;
}

.journal-toggle input:checked+.journal-toggle-slider::before {
    transform: translateX(16px);
}

.journal-empty-text {
    color: var(--color-text-muted, #aaa);
    text-align: center;
    padding: 32px;
}

.journal-error-text {
    color: #dc2626;
    text-align: center;
    padding: 16px;
}

code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: var(--color-surface, #f0ece6);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

/* モーダル large */
.modal-large {
    max-width: 800px !important;
    width: 90vw !important;
}

/* ==========================================
   仕訳帳 内部タブ
   ========================================== */
.journal-inner-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border, #e5e0d8);
    margin-bottom: 24px;
}

.journal-inner-tab {
    padding: 10px 22px;
    border: none;
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s;
}

.journal-inner-tab:hover {
    color: var(--color-text, #3d3529);
}

.journal-inner-tab.active {
    color: var(--color-accent, #a99070);
    border-bottom-color: var(--color-accent, #a99070);
    background: var(--color-surface, #faf8f5);
}

.journal-tab-pane {
    animation: jTabFade 0.18s ease;
}

@keyframes jTabFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================
   取り込みタブ ヘッダー
   ========================================== */
.journal-import-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.journal-import-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.journal-import-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #3d3529);
}

.journal-import-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted, #aaa);
}

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

/* ==========================================
   月リスト (jm-*)
   ========================================== */
.journal-month-list {
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 12px;
    overflow: hidden;
}

.jm-header,
.jm-row {
    display: grid;
    grid-template-columns: 140px 120px 100px 160px 1fr;
    align-items: center;
    gap: 0;
}

.jm-header {
    background: var(--color-surface, #f8f7f5);
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border, #e5e0d8);
}

.jm-row {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    transition: background 0.12s;
}

.jm-row:last-child {
    border-bottom: none;
}

.jm-row:hover {
    background: #faf8f5;
}

.jm-row-done {
    background: #fdfcfa;
}

.jm-cell {
    padding: 0 6px;
    font-size: 0.88rem;
}

.jm-cell-month {
    font-weight: 700;
    color: var(--color-text, #3d3529);
}

.jm-cell-rows {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #666);
}

.jm-cell-date {
    font-size: 0.82rem;
    color: var(--color-text-muted, #888);
}

.jm-cell-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.jm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
}

.jm-badge-done {
    background: #dcfce7;
    color: #15803d;
}

.jm-badge-running {
    background: #fef9c3;
    color: #a16207;
}

.jm-badge-none {
    background: var(--color-surface, #f0ece6);
    color: #aaa;
}

.jm-btn {
    padding: 6px 14px;
    border: 1.5px solid var(--color-border, #d4cbc0);
    border-radius: 7px;
    background: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.jm-btn-import {
    border-color: var(--color-accent, #a99070);
    color: var(--color-accent, #a99070);
}

.jm-btn-import:hover {
    background: var(--color-accent, #a99070);
    color: white;
}

.jm-btn-detail {
    border-color: #6b8fb8;
    color: #6b8fb8;
}

.jm-btn-detail:hover {
    background: #6b8fb8;
    color: white;
}

/* ==========================================
   インポートモーダル
   ========================================== */
.journal-import-modal-content {
    max-width: 520px;
    width: 94vw;
}

.journal-import-target-info {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent, #a99070);
    margin-bottom: 18px;
    text-align: center;
}

.journal-import-confirm p {
    font-size: 0.92rem;
    color: var(--color-text, #3d3529);
    line-height: 1.7;
}

/* シーケンスプログレスバー */
.journal-seq-progress {
    padding: 8px 0;
}

.journal-seq-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 4px;
}

.journal-seq-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.journal-seq-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: var(--color-border, #e5e0d8);
    z-index: 0;
}

.seq-step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-border, #e5e0d8);
    border: 2px solid var(--color-border, #d4cbc0);
    z-index: 1;
    transition: all 0.3s;
}

.journal-seq-step-active .seq-step-dot {
    background: var(--color-accent, #a99070);
    border-color: var(--color-accent, #a99070);
    box-shadow: 0 0 0 4px rgba(169, 144, 112, 0.2);
    animation: seqPulse 1s infinite;
}

.journal-seq-step-done .seq-step-dot {
    background: #22c55e;
    border-color: #22c55e;
}

.journal-seq-step-done::after,
.journal-seq-step-active::after {
    background: var(--color-accent, #a99070) !important;
}

@keyframes seqPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(169, 144, 112, 0.2);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(169, 144, 112, 0.1);
    }
}

.seq-step-label {
    font-size: 0.72rem;
    color: var(--color-text-muted, #aaa);
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

.journal-seq-step-active .seq-step-label,
.journal-seq-step-done .seq-step-label {
    color: var(--color-text, #3d3529);
}

.journal-seq-bar-wrap {
    height: 8px;
    background: var(--color-border-light, #f0ece6);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}

.journal-seq-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #a99070), #c8a87a);
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

.journal-seq-status {
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-text-muted, #888);
    font-weight: 500;
}

/* 完了 / エラー */
.journal-import-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    animation: jImportDone 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jImportDone {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

.journal-import-done-icon {
    font-size: 2.5rem;
}

.journal-import-done-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #15803d;
    text-align: center;
}

.journal-import-err {
    background: #fff5f5;
    border: 1px solid #f87171;
    border-radius: 8px;
    padding: 12px 16px;
    color: #dc2626;
    font-size: 0.88rem;
}

/* ==========================================
   詳細モーダル
   ========================================== */
.journal-detail-summary {
    font-size: 0.88rem;
    color: var(--color-text-muted, #888);
    margin-bottom: 12px;
}

/* ==========================================
   PLダッシュボード
   ========================================== */
.journal-pl-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.journal-pl-import-hint {
    font-size: 0.88rem;
    color: var(--color-text-muted, #888);
}

.journal-pl-import-link {
    background: none;
    border: none;
    color: var(--color-accent, #a99070);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}

/* KPIカード */
.journal-pl-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.journal-pl-kpi {
    background: white;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 14px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}

.journal-pl-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.journal-pl-kpi-revenue::before {
    background: #4A8B7F;
}

.journal-pl-kpi-expense::before {
    background: #c8a87a;
}

.journal-pl-kpi-profit::before {
    background: #6b8fb8;
}

.journal-pl-kpi-loss::before {
    background: #dc2626 !important;
}

.journal-pl-kpi-label {
    font-size: 0.78rem;
    color: var(--color-text-muted, #888);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.journal-pl-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text, #3d3529);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* チャートレイアウト */
.journal-pl-charts {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    margin-bottom: 24px;
}

.journal-pl-chart-card {
    background: white;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 14px;
    padding: 18px 20px;
}

.journal-pl-chart-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted, #666);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journal-pl-chart-wrap {
    height: 220px;
    position: relative;
}

.journal-pl-chart-donut {
    height: 220px;
}

/* PLテーブル */
.journal-pl-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.journal-pl-table-card {
    background: white;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 14px;
    overflow: hidden;
}

.journal-pl-table-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    background: var(--color-surface, #f8f7f5);
    border-bottom: 1px solid var(--color-border, #e5e0d8);
}

.journal-pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.journal-pl-table thead th {
    background: var(--color-surface, #f8f7f5);
    padding: 9px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--color-text-muted, #888);
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journal-pl-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    vertical-align: middle;
}

.journal-pl-table tr:hover td {
    background: #faf8f5;
}

.journal-pl-table tfoot .pl-total-row td {
    background: var(--color-surface, #f8f7f5);
    font-weight: 700;
    border-top: 2px solid var(--color-border, #e5e0d8);
    border-bottom: none;
    font-size: 0.9rem;
}

/* 構成比バー */
.pl-pct {
    position: relative;
    min-width: 80px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #888);
}

.pl-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-accent, #a99070);
    border-radius: 1px;
    transition: width 0.4s ease;
}

@media (max-width: 900px) {
    .journal-pl-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .journal-pl-charts {
        grid-template-columns: 1fr;
    }

    .journal-pl-tables {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   PLダッシュボード 期間プリセットボタン
   ========================================== */
.journal-pl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.journal-pl-period-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.journal-pl-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.journal-pl-preset {
    padding: 6px 14px;
    border: 1.5px solid var(--color-border, #d4cbc0);
    border-radius: 99px;
    background: white;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.journal-pl-preset:hover {
    border-color: var(--color-accent, #a99070);
    color: var(--color-accent, #a99070);
}

.journal-pl-preset.active {
    background: var(--color-accent, #a99070);
    border-color: var(--color-accent, #a99070);
    color: white;
    box-shadow: 0 2px 8px rgba(169, 144, 112, 0.3);
}

.journal-pl-period-range {
    font-size: 0.82rem;
    color: var(--color-text-muted, #aaa);
    margin-left: 4px;
    font-style: italic;
}

/* ==========================================
   ピボットテーブル（リストタブ）
   ========================================== */
.journal-pivot-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.journal-pivot-wrap {
    width: 100%;
}

.journal-pivot-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 12px;
}

.journal-pivot-table {
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}

.journal-pivot-table thead th {
    background: var(--color-surface, #f8f7f5) !important;
    padding: 10px 14px;
    font-weight: 700;
    color: var(--color-text-muted, #666);
    text-align: right;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
    z-index: 20;
}

.journal-pivot-table thead th::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--color-border, #e5e0d8);
    z-index: 25;
}

.pv-account-head {
    text-align: left !important;
}

.journal-pivot-table thead .pv-account-head {
    z-index: 30;
    top: 0;
    left: 0;
    min-width: 160px;
    background: var(--color-surface, #f8f7f5) !important;
}

.journal-pivot-table thead .pv-account-head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid var(--color-border, #e5e0d8);
}

.pv-total-head {
    background: #f0ece8 !important;
    white-space: nowrap;
}

.journal-pivot-table thead .pv-total-head {
    z-index: 30;
    top: 0;
    right: 0;
}

.journal-pivot-table thead .pv-total-head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 2px solid var(--color-border, #d4cbc0);
}

.pv-month {
    min-width: 88px;
}

.journal-pivot-table tbody tr {
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
    transition: background 0.1s;
}

.journal-pivot-table tbody tr:hover td {
    background: #faf8f5;
}

.journal-pivot-table tbody tr:hover .pv-account {
    background: #f5f1ea;
}

.pv-account {
    padding: 9px 14px;
    font-weight: 600;
    color: var(--color-text, #3d3529);
    position: sticky;
    left: 0;
    background: white;
    border-right: 1px solid var(--color-border, #e5e0d8);
    z-index: 1;
    min-width: 160px;
}

.pv-cell {
    padding: 9px 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pv-total-cell {
    background: #faf7f3;
    font-weight: 700;
    border-left: 2px solid var(--color-border, #d4cbc0);
}

.pv-pos {
    color: inherit;
}

.pv-neg {
    color: inherit;
}

.pv-zero {
    color: #ccc;
}

.pv-total-pos {
    font-size: 0.88rem;
}

.pv-total-neg {
    font-size: 0.88rem;
}

/* ==========================================
   ピボット カテゴリ見出し・小計・合計行
   ========================================== */
.pv-cat-header td {
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pv-cat-income td,
.pv-cat-income .pv-cat-label {
    background: #e8f4ee !important;
    color: #15803d;
    border-top: 2px solid #86efac;
}

.pv-cat-expense td,
.pv-cat-expense .pv-cat-label {
    background: #fef3ee !important;
    color: #c2410c;
    border-top: 2px solid #fdba74;
}

.pv-cat-other td,
.pv-cat-other .pv-cat-label {
    background: #f5f3f0 !important;
    color: #78716c;
    border-top: 2px solid #d6d3d1;
}

.pv-cat-label {
    position: sticky;
    left: 0;
    z-index: 2;
}

/* 小計行 */
.pv-subtotal-row td {
    font-weight: 700;
}

.pv-subtotal-label {
    font-style: italic;
    padding-left: 24px !important;
}

.pv-cat-income-sub td,
.pv-cat-income-sub .pv-subtotal-label {
    background: #f0faf4 !important;
    border-bottom: 1.5px solid #86efac;
}

.pv-cat-expense-sub td,
.pv-cat-expense-sub .pv-subtotal-label {
    background: #fff8f5 !important;
    border-bottom: 1.5px solid #fdba74;
}

.pv-subtotal-cell {
    font-size: 0.86rem !important;
}

/* 合計行 */
.pv-grand-total-row td {
    background: #2d2926 !important;
    color: white !important;
    font-weight: 800;
    font-size: 0.9rem;
    border-top: 2px solid #1a1714;
    border-bottom: none;
}

.pv-grand-total-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #2d2926 !important;
    padding: 12px 14px !important;
    letter-spacing: 0.04em;
}

.pv-grand-total-cell span {
    color: white !important;
}

/* ==========================================
   管理PL（Management P&L）スタイル
   ========================================== */

/* ── ツールバー ── */
.mpl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    margin-bottom: 16px;
}

.mpl-toolbar-left,
.mpl-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mpl-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.mpl-period-group,
.mpl-granularity-group,
.mpl-col-toggle-group,
.mpl-export-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mpl-select {
    padding: 6px 10px;
    border: 1.5px solid var(--color-border, #d4cbc0);
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
}

.mpl-sep {
    color: var(--color-text-muted, #aaa);
    font-size: 0.85rem;
}

.mpl-toggle {
    display: flex;
    border: 1.5px solid var(--color-border, #d4cbc0);
    border-radius: 8px;
    overflow: hidden;
}

.mpl-toggle-btn {
    padding: 5px 12px;
    border: none;
    background: white;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    transition: all 0.15s;
}

.mpl-toggle-btn.active {
    background: var(--color-accent, #a99070);
    color: white;
}

.mpl-col-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    white-space: nowrap;
}

.mpl-col-toggle input {
    accent-color: var(--color-accent, #a99070);
}

.mpl-export-btn {
    padding: 7px 14px;
    border: 1.5px solid var(--color-border, #d4cbc0);
    border-radius: 8px;
    background: white;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text, #3d3529);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.mpl-export-btn:hover {
    background: var(--color-accent, #a99070);
    color: white;
    border-color: var(--color-accent, #a99070);
}

.mpl-export-secondary {
    color: var(--color-text-muted, #888);
}

/* ── テーブルラッパー ── */
.mpl-table-wrap {
    width: 100%;
}

.mpl-table-outer {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: 12px;
}

.mpl-table {
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}

/* ── ヘッダー共通 ── */
.mpl-table thead th {
    background: var(--color-surface, #f8f7f5) !important;
    padding: 9px 14px;
    font-weight: 700;
    color: var(--color-text-muted, #666);
    text-align: right;
    font-size: 0.78rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.mpl-table thead th::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--color-border, #e5e0d8);
    z-index: 25;
}

.mpl-row-label {
    text-align: left !important;
}

.mpl-table thead .mpl-row-label {
    z-index: 30;
    top: 0;
    left: 0;
}

.mpl-month-group {
    background: var(--color-surface, #f8f7f5) !important;
    text-align: center !important;
    top: 0;
}

.mpl-month-group::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid var(--color-border, #e5e0d8);
}

.mpl-cumulative-head {
    background: #f0ece8 !important;
    top: 0;
}

.mpl-cumulative-head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 2px solid var(--color-border, #d4cbc0);
}

.mpl-sub-head {
    min-width: 90px;
    top: 37px;
    /* 1st row height + border */
}

.mpl-sub-head.mpl-mom,
.mpl-sub-head.mpl-yoy {
    color: #6b7280;
}

/* ── 行ラベル ── */
.mpl-table tbody tr {
    border-bottom: 1px solid var(--color-border-light, #f0ece6);
}

.mpl-table tbody tr:hover td {
    background: #faf8f5 !important;
}

.mpl-row-label {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
    padding: 8px 14px;
    color: var(--color-text, #3d3529);
    min-width: 220px;
    border-right: 1px solid var(--color-border, #e5e0d8);
}

.mpl-indent-1 {
    padding-left: 20px !important;
}

.mpl-indent-2 {
    padding-left: 28px !important;
    font-size: 0.78rem;
    color: var(--color-text-muted, #555);
}

.mpl-indent-3 {
    padding-left: 36px !important;
    font-size: 0.76rem;
    color: var(--color-text-muted, #666);
}

.mpl-indent-4 {
    padding-left: 44px !important;
    font-size: 0.74rem;
    color: var(--color-text-muted, #777);
}

.mpl-indent-3 {
    padding-left: 40px !important;
    font-size: 0.78rem;
}

/* ── セクション行 ── */
.mpl-section-row td {
    font-weight: 700;
    cursor: pointer;
}

.mpl-section-row .mpl-row-label:hover {
    background: #f5f1ea !important;
}

.mpl-revenue-row td {
    background: #edfaf3;
}

.mpl-revenue-row .mpl-row-label {
    background: #edfaf3;
}

.mpl-cogs-row td {
    background: #fdf5ee;
}

.mpl-cogs-row .mpl-row-label {
    background: #fdf5ee;
}

.mpl-sga-row td {
    background: #f0f4ff;
}

.mpl-sga-row .mpl-row-label {
    background: #f0f4ff;
}

.mpl-nonop-row td {
    background: #fafafa;
}

.mpl-nonop-row .mpl-row-label {
    background: #fafafa;
}

.mpl-special-row td {
    background: #faf8e8;
}

.mpl-special-row .mpl-row-label {
    background: #faf8e8;
}

.mpl-tax-row td {
    background: #faf5f5;
}

.mpl-tax-row .mpl-row-label {
    background: #faf5f5;
}

.mpl-unclassified-row td {
    background: #fff0f0;
}

.mpl-unclassified-row .mpl-row-label {
    background: #fff0f0;
}

.mpl-arrow {
    display: inline-block;
    width: 14px;
    color: var(--color-text-muted, #aaa);
}

.mpl-cat-row {
    cursor: pointer;
}

.mpl-cat-row td {
    font-weight: 600;
}

.mpl-hidden {
    display: none !important;
}

/* ── 利益行 ── */
.mpl-profit-row td {
    font-weight: 800;
    font-size: 0.87rem;
}

.mpl-profit-label {
    background: #f8f7f5 !important;
    border-top: 2px solid var(--color-border, #d4cbc0);
    border-bottom: 2px solid var(--color-border, #d4cbc0);
}

.mpl-gross-profit td {
    background: #e8f7ee;
}

.mpl-gross-profit .mpl-row-label {
    background: #e8f7ee;
}

.mpl-operating-profit td {
    background: #e8f0ff;
}

.mpl-operating-profit .mpl-row-label {
    background: #e8f0ff;
}

.mpl-ordinary-profit td {
    background: #eef5e8;
}

.mpl-ordinary-profit .mpl-row-label {
    background: #eef5e8;
}

.mpl-pretax-profit td {
    background: #f5f0e8;
}

.mpl-pretax-profit .mpl-row-label {
    background: #f5f0e8;
}

.mpl-net-profit td {
    background: #2d2926 !important;
    color: white !important;
}

.mpl-net-profit .mpl-row-label {
    background: #2d2926 !important;
    color: white !important;
}

.mpl-net-profit span {
    color: white !important;
}

/* 利益率行 */
.mpl-ratio-row td {
    background: transparent;
    font-size: 0.78rem;
    color: var(--color-text-muted, #666);
}

.mpl-ratio-row .mpl-row-label {
    background: white !important;
    font-style: italic;
}

/* EBITDA・指標行 */
.mpl-ebitda-row td {
    background: #f5f8ff;
    font-weight: 600;
}

.mpl-ebitda-row .mpl-row-label {
    background: #f5f8ff;
}

.mpl-metric-row td {
    background: #fafafa;
}

.mpl-metric-row .mpl-row-label {
    background: #fafafa;
}

.mpl-divider-row td {
    text-align: center;
    color: var(--color-text-muted, #aaa);
    font-size: 0.75rem;
    background: var(--color-surface, #f8f7f5);
    padding: 6px;
    border-top: 1px dashed var(--color-border, #e5e0d8) !important;
}

/* ── セル ── */
.mpl-cell {
    padding: 8px 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mpl-cell.mpl-mom {
    color: var(--color-text-muted, #888);
}

.mpl-cell.mpl-yoy {
    color: var(--color-text-muted, #888);
}

.mpl-cell.mpl-cumulative {
    background: #faf7f3;
    font-weight: 700;
    border-left: 2px solid var(--color-border, #d4cbc0);
}

/* 数値色 */
.mpl-pos {
    color: inherit;
}

.mpl-neg {
    color: inherit;
}

.mpl-zero {
    color: #ccc;
}

/* ==========================================
   PL管理ダッシュボード (pld-*) スタイル
   アースカラー / アニメーション豊富
   ========================================== */

/* ── ページ全体 ── */
.pld-page {
    padding: 24px 28px 48px;
    max-width: 1600px;
}

/* ── ヘッダー ── */
.pld-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid #d4cbc0;
    animation: pld-fade-down 0.4s ease both;
}

.pld-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pld-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #3d3529;
    letter-spacing: -0.03em;
    margin: 0;
}

.pld-subtitle {
    font-size: 0.82rem;
    color: #8c8074;
    font-weight: 600;
}

.pld-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── フィルタ ── */
.pld-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pld-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pld-filter-sep {
    color: #aaa;
    font-size: 0.82rem;
}

.pld-select {
    padding: 7px 10px;
    border: 1.5px solid #d4cbc0;
    border-radius: 8px;
    font-size: 0.83rem;
    background: white;
    color: #3d3529;
    cursor: pointer;
    transition: border-color 0.15s;
}

.pld-select:focus {
    outline: none;
    border-color: #a07850;
}

.pld-select-sm {
    padding: 4px 8px;
    font-size: 0.78rem;
}

.pld-reload-btn {
    padding: 8px 16px;
    border: 1.5px solid #a07850;
    border-radius: 8px;
    background: white;
    color: #6b4f2e;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.pld-reload-btn:hover {
    background: #a07850;
    color: white;
}

/* ── セクションラベル ── */
.pld-section-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a5c3a;
    margin: 32px 0 12px;
    padding-left: 10px;
    border-left: 3px solid #c08a40;
}

/* ── アラートパネル ── */
.pld-alert-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    animation: pld-slide-down 0.3s ease both;
}

.pld-alert {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.5;
}

.pld-alert--warn {
    background: #fff8e8;
    border: 1.5px solid #c08a40;
    color: #6b4f2e;
}

.pld-alert--crit {
    background: #fff0ee;
    border: 1.5px solid #8a3020;
    color: #5a1810;
}

/* ── 経営サマリーカード ── */
.pld-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.pld-card {
    background: white;
    border: 1.5px solid #e5e0d8;
    border-radius: 14px;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(.22, .68, 0, 1.2),
        box-shadow 0.2s ease,
        border-color 0.2s;
    animation: pld-card-in 0.5s ease both;
    position: relative;
    overflow: hidden;
}

.pld-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c08a40, #a07850);
    opacity: 0;
    transition: opacity 0.2s;
}

.pld-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(107, 79, 46, 0.15);
}

.pld-card:hover::before {
    opacity: 1;
}

.pld-card--selected {
    border-color: #a07850;
    box-shadow: 0 4px 16px rgba(160, 120, 80, 0.2);
    transform: translateY(-2px);
}

.pld-card--selected::before {
    opacity: 1;
}

.pld-card--emphasis {
    border-color: #c08a40;
}

.pld-card--green {
    background: #f0f9f0;
    border-color: #7e9660;
}

.pld-card--green-hi {
    background: #e4f5e4;
    border-color: #5a6e48;
}

.pld-card--red {
    background: #fdf5f0;
    border-color: #a05840;
}

.pld-card--red-hi {
    background: #fdecea;
    border-color: #8a3020;
}

.pld-card-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.pld-card-value {
    font-size: 1.35rem;
    font-weight: 900;
    color: #3d3529;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 4px;
}

.pld-card-margin {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a5c3a;
    margin-bottom: 8px;
}

.pld-card-mom {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8c8074;
}

.pld-card-mom.pos span {
    color: #5a6e48;
    font-weight: 700;
}

.pld-card-mom.neg span {
    color: #8a3020;
    font-weight: 700;
}

.pld-card-mom-abs {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 2px;
}

/* nth-child animate stagger */
.pld-card:nth-child(1) {
    animation-delay: 0.0s;
}

.pld-card:nth-child(2) {
    animation-delay: 0.07s;
}

.pld-card:nth-child(3) {
    animation-delay: 0.14s;
}

.pld-card:nth-child(4) {
    animation-delay: 0.21s;
}

.pld-card:nth-child(5) {
    animation-delay: 0.28s;
}

.pld-card:nth-child(6) {
    animation-delay: 0.35s;
}

/* ── 構造モニタリング ── */
.pld-structure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.pld-monitor-card {
    background: white;
    border: 1.5px solid #e5e0d8;
    border-radius: 12px;
    padding: 16px 18px 12px;
    animation: pld-card-in 0.5s ease both;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pld-monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(107, 79, 46, 0.12);
}

.pld-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pld-monitor-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pld-flag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    white-space: nowrap;
}

.pld-flag--warn {
    background: #fff0d4;
    color: #8a5a00;
    border: 1px solid #c08a40;
}

.pld-flag--crit {
    background: #fdecea;
    color: #8a3020;
    border: 1px solid #c04030;
}

.pld-monitor-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #3d3529;
    letter-spacing: -0.04em;
    margin-bottom: 4px;
}

.pld-monitor-mom {
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.pld-monitor-mom.pos {
    color: #5a6e48;
}

.pld-monitor-mom.neg {
    color: #8a3020;
}

.pld-sparkline-wrap {
    overflow: hidden;
}

.pld-sparkline {
    width: 100%;
    height: 44px;
    display: block;
}

/* ── ウォーターフォール・チャートカード ── */
.pld-waterfall-area {
    margin-bottom: 4px;
}

.pld-chart-card {
    background: white;
    border: 1.5px solid #e5e0d8;
    border-radius: 14px;
    padding: 20px 22px 16px;
    animation: pld-card-in 0.5s ease both;
    transition: box-shadow 0.2s;
}

.pld-chart-card:hover {
    box-shadow: 0 4px 16px rgba(107, 79, 46, 0.12);
}

.pld-waterfall-card {
    width: 100%;
}

.pld-waterfall-card canvas {
    max-height: 260px;
}

.pld-chart-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #7a5c3a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.pld-chart-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* 2カラム */
.pld-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .pld-two-col {
        grid-template-columns: 1fr;
    }
}

/* ── シナリオエリア ── */
.pld-scenario-area {
    background: white;
    border: 1.5px solid #d4cbc0;
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    animation: pld-card-in 0.5s ease 0.2s both;
}

.pld-scenario-controls {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pld-scenario-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pld-scenario-label {
    width: 70px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b4f2e;
    white-space: nowrap;
}

.pld-range {
    flex: 1;
    accent-color: #c08a40;
    height: 4px;
    cursor: pointer;
}

.pld-range-val {
    width: 48px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #3d3529;
    text-align: right;
}

.pld-scenario-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 160px;
}

.pld-scen-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.pld-scen-value {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #3d3529;
    transition: color 0.3s, transform 0.2s;
}

.pld-scen-value.pos {
    color: #5a6e48;
}

.pld-scen-value.neg {
    color: #8a3020;
}

/* ── ローディング・エラー ── */
.pld-loading {
    color: #8c8074;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 24px;
    animation: pld-pulse 1.4s ease-in-out infinite;
}

.pld-loading-cards {
    text-align: center;
    padding: 40px;
}

.pld-error {
    color: #8a3020;
    background: #fff0ee;
    border: 1.5px solid #c04030;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── pos/neg 数値色 ── */
.pld-num.pos {
    color: #5a6e48;
}

.pld-num.neg {
    color: #8a3020;
}

/* ── アニメーション定義 ── */
@keyframes pld-fade-down {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pld-card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

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

@keyframes pld-slide-down {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 400px;
    }
}

@keyframes pld-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ==========================================
   PLドリルパネル / パンくず / 明細テーブル
   ========================================== */

/* ─ pld-rootコンテナを相対配置 ─ */
#pl-dashboard.pld-root {
    position: relative;
    overflow: hidden;
}

/* ─ 右スライドパネル ─ */
.pld-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 90vw);
    background: white;
    border-left: 2px solid #d4cbc0;
    box-shadow: -8px 0 32px rgba(61, 53, 41, 0.18);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.22, .68, 0, 1.1);
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pld-panel--open {
    transform: translateX(0);
}

.pld-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1.5px solid #e5e0d8;
    background: #faf8f5;
    flex-shrink: 0;
}

.pld-panel-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #3d3529;
}

.pld-panel-close {
    padding: 6px 12px;
    border: 1.5px solid #d4cbc0;
    border-radius: 6px;
    background: white;
    color: #6b4f2e;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.pld-panel-close:hover {
    background: #6b4f2e;
    color: white;
}

.pld-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ─ オーバーレイ ─ */
.pld-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(61, 53, 41, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 899;
}

.pld-panel--open~.pld-panel-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ─ パンくず ─ */
.pld-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 0 4px;
    font-size: 0.78rem;
    font-weight: 600;
    min-height: 24px;
}

.pld-bc-item {
    color: #7a5c3a;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.pld-bc-item:hover {
    background: #f0ece6;
}

.pld-bc-root {
    color: #a07850;
    font-weight: 700;
}

.pld-bc-active {
    color: #3d3529;
    cursor: default;
    font-weight: 800;
}

.pld-bc-active:hover {
    background: none;
}

.pld-bc-sep {
    color: #c8ad8c;
    font-size: 0.9rem;
}

/* ─ ウォーターフォールヒント ─ */
.pld-waterfall-hint {
    font-size: 0.74rem;
    color: #8c8074;
    font-weight: 500;
    margin: -8px 0 10px;
    padding-left: 10px;
}

/* ─ カードのドリルヒント ─ */
.pld-card-drill-hint {
    font-size: 0.68rem;
    color: #a07850;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.15s;
}

.pld-card:hover .pld-card-drill-hint {
    opacity: 1;
}

/* ─ モニターカードのドリルヒント ─ */
.pld-monitor-drill-hint {
    font-size: 0.7rem;
    color: #a07850;
    font-weight: 700;
    margin-top: 6px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.15s;
}

.pld-monitor-card:hover .pld-monitor-drill-hint {
    opacity: 1;
}

/* ─ ドリルコンテンツ ─ */
.pld-drill-title {
    padding: 16px 20px 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #3d3529;
    border-bottom: 1px solid #e5e0d8;
}

.pld-drill-loading {
    padding: 32px 20px;
    color: #8c8074;
    font-size: 0.84rem;
    text-align: center;
    font-weight: 600;
}

.pld-drill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.pld-drill-table thead th {
    padding: 8px 12px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid #e5e0d8;
    background: #faf8f5;
    text-align: left;
}

.pld-drill-table thead th.text-right {
    text-align: right;
}

.pld-drill-row {
    cursor: pointer;
    border-bottom: 1px solid #f0ece6;
    transition: background 0.12s;
}

.pld-drill-row:hover {
    background: #faf8f5;
}

.pld-drill-row td {
    padding: 10px 12px;
    vertical-align: middle;
}

.pld-drill-label {
    color: #3d3529;
    font-weight: 600;
    max-width: 180px;
}

.pld-drill-bar-col {
    width: 80px;
}

.pld-drill-bar {
    height: 6px;
    border-radius: 3px;
    min-width: 2px;
    transition: width 0.3s;
}

.pld-drill-bar.pos-bar {
    background: #5a6e48;
}

.pld-drill-bar.neg-bar {
    background: #a05840;
}

.pld-drill-next {
    font-size: 0.7rem;
    color: #a07850;
    font-weight: 700;
    white-space: nowrap;
}

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

.pos {
    color: #5a6e48;
    font-weight: 700;
}

.neg {
    color: #8a3020;
    font-weight: 700;
}

.pld-drill-lines-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 12px 20px;
    padding: 10px;
    border: 1.5px solid #d4cbc0;
    border-radius: 8px;
    background: white;
    color: #6b4f2e;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.pld-drill-lines-btn:hover {
    background: #f0ece6;
    border-color: #a07850;
}

/* ─ 取引明細テーブル ─ */
.pld-lines-wrap {
    overflow-x: auto;
    padding: 0 4px;
}

.pld-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
    white-space: nowrap;
}

.pld-lines-table thead th {
    padding: 8px 10px 6px;
    background: #faf8f5;
    font-size: 0.69rem;
    font-weight: 800;
    color: #8c8074;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid #e5e0d8;
    text-align: left;
}

.pld-lines-table tbody tr {
    border-bottom: 1px solid #f0ece6;
}

.pld-lines-table tbody tr:hover {
    background: #faf8f5;
}

.pld-lines-table td {
    padding: 7px 10px;
}

.pld-line-date {
    color: #8c8074;
    white-space: nowrap;
}

.pld-line-memo {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5a4a38;
}

.pld-lines-more {
    padding: 10px 20px;
    font-size: 0.75rem;
    color: #8c8074;
    text-align: center;
    font-weight: 600;
}

/* ─ アラートクリック性 ─ */
.pld-alert {
    cursor: pointer;
}

.pld-alert-link {
    font-size: 0.72rem;
    font-weight: 800;
    color: #6b4f2e;
    text-decoration: underline;
    margin-left: 8px;
}

.pld-alert:hover {
    opacity: 0.85;
}

/* ==========================================
   PLダッシュボード v3：全勘定科目カード・カードトレンド・右パネルFlexレイアウト
   ========================================== */

/* ─ pld-root を横並びFlexにして右パネル同居 ─ */
/* .activeクラス付きのときのみflex（tab-contentのdisplay:noneを上書きしない） */
#pl-dashboard.pld-root.active {
    display: flex;
    align-items: flex-start;
    overflow: visible;
    position: relative;
}

.pld-page {
    flex: 1;
    min-width: 0;
    overflow-y: visible;
    transition: max-width 0.3s ease;
}

/* パネル開時に本文を縮小 */
#pl-dashboard.pld-root--panel-open .pld-page {
    max-width: calc(100% - 420px);
}

/* ─ 右ドリルパネル（オーバーレイなし・Flow内） ─ */
.pld-panel {
    position: sticky;
    top: 0;
    width: 0;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: white;
    border-left: 0 solid #d4cbc0;
    transition: width 0.3s cubic-bezier(.22, .68, 0, 1.1), border-left-width 0.3s, min-width 0.3s;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.pld-panel--open {
    width: 420px;
    min-width: 420px;
    border-left-width: 2px;
    box-shadow: -6px 0 20px rgba(61, 53, 41, 0.12);
}

/* オーバーレイは非表示 */
.pld-panel-overlay {
    display: none !important;
}

/* ─ カードの前月比絶対値表示 ─ */
.pld-card-mom-abs {
    font-size: 0.72rem;
    font-weight: 600;
    color: inherit;
    margin-left: 4px;
    opacity: 0.8;
}

/* ─ カードクリック後の月次推移グラフ ─ */
.pld-card-trend {
    background: white;
    border: 1.5px solid #e5e0d8;
    border-radius: 12px;
    padding: 16px 20px 14px;
    margin: 4px 0 20px;
    min-height: 0;
    transition: all 0.25s ease;
}

.pld-card-trend:empty {
    display: none;
}

.pld-card-trend-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.pld-card-trend-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #3d3529;
}

.pld-card-trend-note {
    font-size: 0.72rem;
    color: #8c8074;
}

.pld-card-trend-canvas-wrap {
    height: 160px;
    position: relative;
}

/* ─ 全勘定科目グリッド ─ */
.pld-acc-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pld-acc-group-header {
    font-size: 0.7rem;
    font-weight: 900;
    color: #a07850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 12px 6px;
    border-bottom: 1.5px solid #e5e0d8;
    margin-top: 8px;
    background: #faf8f5;
    border-radius: 6px 6px 0 0;
}

.pld-acc-group-header:first-child {
    margin-top: 0;
}

.pld-acc-card {
    display: grid;
    grid-template-columns: 1fr auto auto 120px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #f0ece6;
    cursor: pointer;
    transition: background 0.12s;
    background: white;
}

.pld-acc-card:hover {
    background: #faf8f5;
}

.pld-acc-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #3d3529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pld-acc-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3d3529;
    text-align: right;
    white-space: nowrap;
}

.pld-acc-mom {
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 60px;
    text-align: right;
    white-space: nowrap;
}

.pld-acc-sparkline svg {
    display: block;
    width: 120px;
    height: 32px;
}


/* ─ 勘定科目タイルカード ─ */
.pld-acc-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 6px;
}

.pld-acc-tile {
    flex: 0 0 calc(25% - 8px);
    min-width: 180px;
    background: white;
    border: 1.5px solid #e5e0d8;
    border-radius: 10px;
    padding: 14px 16px 10px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.2s;
}

.pld-acc-tile:hover {
    box-shadow: 0 4px 14px rgba(107, 79, 46, 0.14);
}

.pld-acc-tile-name {
    font-size: 0.76rem;
    font-weight: 700;
    color: #7a5c3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.pld-acc-tile-value {
    font-size: 1.1rem;
    font-weight: 900;
    color: #3d3529;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.pld-acc-tile-mom {
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.pld-acc-tile-spark {
    height: 32px;
}

.pld-acc-tile-spark svg {
    display: block;
    width: 100%;
    height: 32px;
}

@media (max-width: 1200px) {
    .pld-acc-tile {
        flex: 0 0 calc(33.33% - 8px);
    }
}

@media (max-width: 900px) {
    .pld-acc-tile {
        flex: 0 0 calc(50% - 6px);
    }
}

/* ─ ドリルパネル上下二段 ─ */
.pld-panel-upper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    border-bottom: 1.5px solid #e5e0d8;
}

.pld-panel-lower {
    flex-shrink: 0;
    height: 220px;
    background: #faf8f5;
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
}

.pld-panel-lower-header {
    font-size: 0.72rem;
    font-weight: 800;
    color: #7a5c3a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.pld-panel-lower-canvas {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* ─ カード: 月平均・累計期間 ─ */
.pld-card-avg {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7a5c3a;
    margin-top: 4px;
}

.pld-card-avg strong {
    font-weight: 900;
    color: #3d3529;
}

.pld-card-period {
    font-size: 0.68rem;
    font-weight: 700;
    color: #a07850;
    margin-top: 2px;
    letter-spacing: 0.04em;
}

/* ─ 科目タイル: 月平均 ─ */
.pld-acc-tile-avg {
    font-size: 0.72rem;
    font-weight: 600;
    color: #7a5c3a;
    margin-bottom: 6px;
}

.pld-acc-tile-avg strong {
    font-weight: 900;
    color: #3d3529;
}

/* ─ 科目タイル: 支出ラベル ─ */
.pld-acc-tile-type {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

.pld-type-expense {
    background: #fdecea;
    color: #8a3020;
    border: 1px solid #c04030;
}

.pld-type-income {
    background: #edf5ea;
    color: #5a6e48;
    border: 1px solid #7e9660;
}

/* ==========================================
   CPL発行管理 サブタブ
   ========================================== */

.sub-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--color-border, #e2ddd7);
    margin-bottom: 14px;
}

.sub-tab-button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light, #8c8074);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sub-tab-button:hover {
    color: var(--color-primary, #8B7355);
    background: rgba(139, 115, 85, 0.06);
}

.sub-tab-button.active {
    color: var(--color-primary, #8B7355);
    border-bottom-color: var(--color-primary, #8B7355);
    background: transparent;
}

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

.sub-tab-content:not(.active) {
    display: none;
}