/* Mobile-first responsive styles */
/* Shrink the root font from Bootstrap's 16px default to 14px so all rem-based
 * sizing (text, buttons, table padding, headings, form controls) scales down
 * uniformly — gives the dense list page more breathing room. */
html {
    font-size: 14px;
}
body {
    background-color: #f5f7fa;
}

.card {
    border: none;
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}

/* Upload area */
.upload-area {
    border: 3px dashed #ccc;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: #0d6efd;
    background: #f0f7ff;
}

.upload-area i {
    font-size: 3rem;
    color: #6c757d;
}

/* Image preview */
.invoice-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: filter 0.25s ease-out;
}
/* edit ページで先にサムネ (400px) を表示してから原図を裏で読み込む。
   サムネを拡大表示している間は微ボケて、原図の onload で置き換え後ぼけ解除。
   ユーザー体感: "白くて何もない" → "ぼんやり全体見える" → "クリア" */
.invoice-image.is-thumb-loading {
    filter: blur(2px);
}

/* Loading overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

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

.loading-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

/* Responsive table */
@media (max-width: 768px) {
    .table-responsive-custom thead {
        display: none;
    }

    .table-responsive-custom tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 12px;
        background: white;
    }

    .table-responsive-custom tbody td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border: none;
    }

    .table-responsive-custom tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }
}

/* Global: use a wider container starting at md breakpoint so tables and the
 * edit layout get more breathing room on tablets and up. */
@media (min-width: 768px) {
    .container {
        max-width: 95% !important;
    }
}

.edit-image-sticky {
    position: sticky;
    top: 1rem;
}

.edit-image-box {
    max-height: calc(100vh - 200px);
    overflow: auto;
    cursor: zoom-in;
}

.edit-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* === Edit page: image lightbox (iOS-safe fullscreen viewer) === */
.edit-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    padding: 16px;
    justify-content: center;
    align-items: center;
}
.edit-lightbox.active { display: flex; }
.edit-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Pinch-zoom on touch; mouse wheel + drag handled by JS. */
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    cursor: grab;
    transform-origin: center center;
    will-change: transform;
}
.edit-lightbox img.is-panning { cursor: grabbing; }
.edit-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edit-lightbox-close:hover,
.edit-lightbox-close:focus { background: #fff; outline: none; }

/* === Edit page: mobile-friendly tweaks (PC layout untouched) === */

/* (1) On phones / tablets, the receipt image becomes a centered thumbnail
 *     so it doesn't dominate the screen. Tap-to-fullscreen is preserved by
 *     the existing img onclick handler. */
@media (max-width: 991.98px) {
    .edit-image-sticky { position: static; }
    .edit-image-box {
        max-height: 200px;
        text-align: center;
    }
    .edit-image-box img {
        width: auto;
        max-width: 100%;
        max-height: 200px;
        margin: 0 auto;
    }
}

/* (2) 項目明細 — on mobile, allow horizontal swipe so 税金 columns stay
 *     readable. On desktop, the main form is wide enough so no horizontal
 *     scroll is needed. */
@media (max-width: 991.98px) {
    .items-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .items-scroll-inner { min-width: 720px; }
}

/* (3) Edit page top toolbar: sticky so prev/next/確認済/保存 stay reachable
 *     as the user scrolls through long item lists. */
.edit-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: saturate(180%) blur(6px);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s, border-color 0.2s;
}
.edit-topbar.review-topbar-unconfirmed {
    background-color: #fff4cc;
    border-color: #ffd966;
}
.edit-topbar.review-topbar-confirmed {
    background-color: #d7f5df;
    border-color: #8fcfa1;
}
.edit-topbar .btn-close { font-size: 1rem; }

/* Bottom review-status toggle bar: two large segmented buttons whose container
 * background mirrors the choice (yellow 要確認 / green 確認完了). */
.review-action-bar {
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.review-action-bar.review-action-unconfirmed {
    background-color: #fff4cc;
    border-color: #ffd966;
}
.review-action-bar.review-action-confirmed {
    background-color: #d7f5df;
    border-color: #8fcfa1;
}
.review-big-btn {
    padding: 0.9rem 1rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
/* Visual pressed/raised state for the two big review-action buttons.
 * `.is-active` is toggled by JS to mirror the current review_status. */
.review-btn-unconfirmed {
    border: 1.5px solid #ffc107;
    color: #a87418;
    background-color: #fff;
}
.review-btn-unconfirmed.is-active {
    background-color: #ffc107;
    color: #3a2a00;
    border-color: #dba653;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.18);
    transform: translateY(1px);
}
.review-btn-unconfirmed:not(.is-active) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.review-btn-confirmed {
    border: 1.5px solid #198754;
    color: #146c43;
    background-color: #fff;
}
.review-btn-confirmed.is-active {
    background-color: #198754;
    color: #fff;
    border-color: #146c43;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.18);
    transform: translateY(1px);
}
.review-btn-confirmed:not(.is-active) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* モバイル tap 後、Bootstrap のデフォルト :focus shadow が灰色で残って
 * 「取消後に灰色ボタンが貼り付いている」ように見える問題を解消。
 * キーボード操作（:focus-visible）では通常通り outline を表示。 */
.tag-chip:focus:not(:focus-visible) { box-shadow: none !important; outline: none !important; }

/* モバイルで「押下中は灰色、指を離すと白」問題の完全封じ込め。
 * タッチデバイス（hover: none）では .tag-chip の :active / :focus 時の
 * Bootstrap 既定 hover/active 色塗りを全て無効化し、brightness 変化で
 * 軽い押下反馈だけ残す。 */
@media (hover: none) {
    .tag-chip { -webkit-tap-highlight-color: transparent; }
    .tag-chip:hover,
    .tag-chip:active,
    .tag-chip:focus {
        background-color: inherit !important;
        color: inherit !important;
        border-color: inherit !important;
        box-shadow: none !important;
    }
    /* btn-primary / btn-outline-secondary それぞれの base 色を維持するため、
     * 上の inherit より後に base classes の色を再指定。 */
    .tag-chip.btn-primary:hover,
    .tag-chip.btn-primary:active,
    .tag-chip.btn-primary:focus {
        background-color: var(--bs-primary) !important;
        color: #fff !important;
        border-color: var(--bs-primary) !important;
    }
    .tag-chip.btn-outline-secondary:hover,
    .tag-chip.btn-outline-secondary:active,
    .tag-chip.btn-outline-secondary:focus {
        background-color: transparent !important;
        color: var(--bs-secondary) !important;
        border-color: var(--bs-secondary) !important;
    }
    .tag-chip:active { filter: brightness(0.9); }
}

/* Tag modal 共通の 24 色パレット（list.html / upload.html / edit.html で
 * 共用）。以前は list.html 局所 style だったが、入口統一で 3 ページで
 * 使うため global に移動。 */
.color-palette { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: #212529; box-shadow: 0 0 0 2px #fff inset; }

/* 手机端纵向堆叠（PC 保持横排）: btn-group 默认横排，小屏下挤 —
 * 两按钮各占一行，按钮圆角独立化。576px 未満 = Bootstrap sm 以下 ≒ 手机竖屏。 */
@media (max-width: 575.98px) {
    .review-action-bar .btn-group {
        flex-direction: column;
    }
    .review-action-bar .btn-group > .review-big-btn {
        width: 100%;
        border-radius: 0.375rem !important;
    }
    .review-action-bar .btn-group > .review-big-btn + .review-big-btn {
        margin-top: 0.5rem;
        margin-left: 0;
    }
}

/* Edit modal: theme-matched iframe background + loading overlay.
 * Cuts down the white flash when navigating prev/next on slow servers. */
.edit-modal-content {
    position: relative;
    background-color: #f5f5f5;
}
body.theme-kawaii .edit-modal-content { background-color: #faf3e8; }
body.theme-dark   .edit-modal-content { background-color: #1a1d23; }
body.theme-retro  .edit-modal-content { background-color: #f6efd8; }

.edit-nav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.edit-nav-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.edit-nav-spinner {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 28px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
}

/* Floating crop button overlay on the image top-right corner. */
.crop-floating-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    transition: background 0.15s, transform 0.1s;
}
.crop-floating-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

/* === List page: mobile card view (< md) === */
.invoice-card-mobile {
    border: 1px solid #e5e7eb;
}
.invoice-card-mobile.row-highlight {
    background-color: #fff3cd;
}
.mob-tax-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}
.mob-tax-chip {
    white-space: nowrap;
}

/* Upload page: floating panel for in-flight + recently-finished OCR jobs.
 * Sits at the bottom (right of the floating save button on mobile, anywhere
 * else otherwise) and stacks newer jobs on top. */
.ocr-queue-panel {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 1040;
    width: 320px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column-reverse;  /* newest on top */
    gap: 8px;
    pointer-events: none;             /* let clicks through except on items */
}
.ocr-queue-item {
    background: #fff;
    border: 1px solid #d6d6d6;
    border-left: 4px solid #0d6efd;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: ocr-queue-slide-in 0.25s ease-out;
}
.ocr-queue-item.success { border-left-color: #198754; }
.ocr-queue-item.error   { border-left-color: #dc3545; }
.ocr-queue-item .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}
.ocr-queue-item i.bi { font-size: 1.2rem; }
@keyframes ocr-queue-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* List page: clamp 発行者 column to up to 3 lines on PC. The text-clamp
 * works in all evergreen browsers via -webkit-line-clamp (ratified in
 * CSS Overflow 3). title attribute on the cell shows the full string on hover. */
.issuer-clamp {
    max-width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.25;
}

/* Invoice list: compact cells so many columns stay readable without
 * horizontal scrolling on normal laptops. */
@media (min-width: 768px) {
    .invoice-table-area .table-responsive-custom {
        font-size: 0.95rem;
    }
    .invoice-table-area .table-responsive-custom thead th {
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
    }
    .invoice-table-area .table-responsive-custom tbody td {
        padding: 0.4rem 0.5rem;
        vertical-align: middle;
    }
    .issuer-clamp {
        max-width: 180px;
        -webkit-line-clamp: 2;
    }
}
/* Mobile card already truncates issuer with .text-truncate (1 line) — leave that. */

/* =====================================================================
 * Kawaii theme (和風 UI) — opt-in Japanese cartoon/game style.
 * Scope: everything under `.theme-kawaii`. Layout untouched; only colors,
 * radii, borders, and font face change. Enabled via the 🎨 toggle in the
 * navbar; preference persisted in localStorage('ui-theme').
 * ===================================================================== */
.theme-kawaii {
    --kw-bg: #faf3e8;
    --kw-panel: #fff9ef;
    --kw-panel-peach: #fff1e0;
    --kw-panel-pink: #ffe9e9;
    --kw-panel-mint: #e7f5ea;
    --kw-border: #d8b78a;
    --kw-border-soft: #ecd9bb;
    --kw-text: #5a4632;
    --kw-accent: #e89b6a;
    --kw-accent-hover: #d98653;
    --kw-success: #9ac99a;
    --kw-warning: #f5c16c;
    --kw-danger: #e08a8a;
}
body.theme-kawaii {
    background: var(--kw-bg) !important;
    color: var(--kw-text);
    font-family: 'Zen Maru Gothic', 'Kosugi Maru', 'M PLUS Rounded 1c',
                 system-ui, -apple-system, sans-serif;
}

/* Cute decorative sprinkles on the page background (tiny petals). */
body.theme-kawaii::before {
    content: "🌸";
    position: fixed;
    top: 80px;
    right: 18px;
    font-size: 1.4rem;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}
body.theme-kawaii::after {
    content: "🌸";
    position: fixed;
    bottom: 24px;
    left: 18px;
    font-size: 1.2rem;
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}

/* Navbar — warm brown instead of primary blue. */
body.theme-kawaii .navbar.bg-primary {
    background: linear-gradient(90deg, #e89b6a, #d98653) !important;
}

/* Cards: warm cream panels with a soft brown border + rounded corners. */
body.theme-kawaii .card {
    background-color: var(--kw-panel);
    border: 2px solid var(--kw-border);
    border-radius: 18px;
    box-shadow: 0 3px 0 rgba(216, 183, 138, 0.35);
}
body.theme-kawaii .card-header {
    background-color: var(--kw-panel-peach) !important;
    border-bottom: 1.5px solid var(--kw-border-soft);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: var(--kw-text);
    font-weight: 600;
}
/* Rotate accent color for the 3 main edit-page cards so they have
 * distinct pastel tints like in the mockup. */
body.theme-kawaii .col-lg-7 > .card { background-color: var(--kw-panel-peach); }
body.theme-kawaii .col-lg-5 > .card { background-color: var(--kw-panel-pink); }
body.theme-kawaii .col-lg-5 > .card > .card-header { background-color: #ffd9d9 !important; }
body.theme-kawaii .col-12 > .card { background-color: var(--kw-panel-mint); }
body.theme-kawaii .col-12 > .card > .card-header { background-color: #d4edd8 !important; }

/* Inputs: warm tinted backgrounds + rounded. */
body.theme-kawaii .form-control,
body.theme-kawaii .form-select {
    background-color: #fff5f0;
    border: 1.5px solid var(--kw-border-soft);
    border-radius: 10px;
    color: var(--kw-text);
}
body.theme-kawaii .form-control:focus,
body.theme-kawaii .form-select:focus {
    background-color: #fff;
    border-color: var(--kw-accent);
    box-shadow: 0 0 0 0.2rem rgba(232, 155, 106, 0.25);
}

/* Buttons: softer pastel fills + pill radius. */
body.theme-kawaii .btn {
    border-radius: 999px;
    font-weight: 500;
    border-width: 1.5px;
}
body.theme-kawaii .btn-primary {
    background-color: var(--kw-accent);
    border-color: var(--kw-accent-hover);
    color: #fff;
}
body.theme-kawaii .btn-primary:hover {
    background-color: var(--kw-accent-hover);
    border-color: var(--kw-accent-hover);
}
body.theme-kawaii .btn-outline-secondary {
    border-color: var(--kw-border);
    color: var(--kw-text);
    background-color: #fff9ef;
}
body.theme-kawaii .btn-outline-primary {
    border-color: var(--kw-accent);
    color: var(--kw-accent-hover);
    background-color: #fff4ea;
}
body.theme-kawaii .btn-outline-success { border-color: var(--kw-success); color: #4e8a4e; }
body.theme-kawaii .btn-outline-warning { border-color: var(--kw-warning); color: #a87418; }
body.theme-kawaii .btn-outline-danger  { border-color: var(--kw-danger);  color: #a14d4d; }
body.theme-kawaii .btn-success { background-color: var(--kw-success); border-color: #7eae7e; color: #fff; }
body.theme-kawaii .btn-warning { background-color: var(--kw-warning); border-color: #dba653; color: #5a4632; }
body.theme-kawaii .btn-danger  { background-color: var(--kw-danger);  border-color: #c06e6e; color: #fff; }

/* Edit-page top toolbar: warm cream instead of white. */
body.theme-kawaii .edit-topbar {
    border-radius: 16px;
    border: 2px solid var(--kw-border);
}
body.theme-kawaii .edit-topbar.review-topbar-unconfirmed {
    background-color: #ffe9c2;
    border-color: #e5b96c;
}
body.theme-kawaii .edit-topbar.review-topbar-confirmed {
    background-color: #d4edd8;
    border-color: #8fcfa1;
}

/* Bottom big toggle bar: matching warm pastels. */
body.theme-kawaii .review-action-bar {
    border-radius: 16px;
    border-width: 2px;
}
body.theme-kawaii .review-action-bar.review-action-unconfirmed {
    background-color: #ffe0bf;
    border-color: #e5b96c;
}
body.theme-kawaii .review-action-bar.review-action-confirmed {
    background-color: #d4edd8;
    border-color: #8fcfa1;
}
body.theme-kawaii .review-big-btn {
    border-radius: 14px !important;
    font-size: 1.15rem;
}

/* Tag sidebar chips get warm tones. */
body.theme-kawaii .tag-chip,
body.theme-kawaii [data-tag-id] {
    border-radius: 12px;
}

/* List table: warm header + softer row dividers. */
body.theme-kawaii .table-light {
    --bs-table-bg: #fff1e0;
    --bs-table-color: var(--kw-text);
}
body.theme-kawaii .table { color: var(--kw-text); }

/* Review row tints: slightly warmer pastels in kawaii theme. */
body.theme-kawaii tr.review-unconfirmed > td { background-color: #fff1cf !important; }
body.theme-kawaii tr.review-confirmed > td { background-color: #dff4e2 !important; }

/* Badges: rounded pill. */
body.theme-kawaii .badge { border-radius: 999px; font-weight: 500; }

/* Pagination: warm pastel pills with brown accent for active page. */
body.theme-kawaii .pagination { gap: 4px; }
body.theme-kawaii .page-link {
    background-color: #fff9ef;
    border: 1.5px solid var(--kw-border-soft);
    color: var(--kw-accent-hover);
    border-radius: 999px !important;
    min-width: 38px;
    text-align: center;
    font-weight: 500;
    margin: 0;
}
body.theme-kawaii .page-link:hover {
    background-color: #ffe8d2;
    border-color: var(--kw-accent);
    color: var(--kw-accent-hover);
}
body.theme-kawaii .page-item.active .page-link {
    background-color: var(--kw-accent);
    border-color: var(--kw-accent-hover);
    color: #fff;
    box-shadow: 0 2px 4px rgba(216, 134, 83, 0.3);
}
body.theme-kawaii .page-item.disabled .page-link {
    background-color: #f5ead6;
    border-color: var(--kw-border-soft);
    color: #b8a580;
}

/* Floating crop button + image area border. */
body.theme-kawaii .crop-floating-btn {
    border-color: var(--kw-border);
    background: rgba(255, 249, 239, 0.95);
}

/* Title: small sparkle before "レシート編集" text. */
body.theme-kawaii .edit-topbar .fw-semibold::before {
    content: "🌸 ";
}

/* Navbar theme-toggle button icon color tweak under kawaii. */
body.theme-kawaii #themeToggleBtn {
    color: #fff4ea !important;
}

/* =====================================================================
 * Dark theme (ダーク) — low-light, eye-friendly. No decorations.
 * ===================================================================== */
.theme-dark {
    --dk-bg:         #1a1d23;
    --dk-panel:      #252a33;
    --dk-panel-2:    #2d3340;
    --dk-border:     #3a4150;
    --dk-text:       #e8eaed;
    --dk-text-muted: #9ca3af;
    --dk-accent:     #4f8eff;
    --dk-accent-hv:  #76a8ff;
}
body.theme-dark {
    background: var(--dk-bg) !important;
    color: var(--dk-text);
}
body.theme-dark .navbar.bg-primary {
    background: #14171d !important;
    border-bottom: 1px solid var(--dk-border);
}
body.theme-dark .card,
body.theme-dark .modal-content {
    background-color: var(--dk-panel);
    border: 1px solid var(--dk-border);
    color: var(--dk-text);
}
body.theme-dark .card-header,
body.theme-dark .bg-light {
    background-color: var(--dk-panel-2) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-text);
}
body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: var(--dk-panel-2);
    border: 1px solid var(--dk-border);
    color: var(--dk-text);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: var(--dk-panel);
    border-color: var(--dk-accent);
    color: var(--dk-text);
    box-shadow: 0 0 0 0.2rem rgba(79, 142, 255, 0.25);
}
body.theme-dark .form-control::placeholder,
body.theme-dark .form-select::placeholder { color: var(--dk-text-muted); }
body.theme-dark .text-muted,
body.theme-dark .text-body-secondary { color: var(--dk-text-muted) !important; }
body.theme-dark .btn-primary { background-color: var(--dk-accent); border-color: var(--dk-accent); }
body.theme-dark .btn-primary:hover { background-color: var(--dk-accent-hv); border-color: var(--dk-accent-hv); }
body.theme-dark .btn-outline-primary { color: var(--dk-accent-hv); border-color: var(--dk-accent); }
body.theme-dark .btn-outline-primary:hover { background-color: var(--dk-accent); color: #fff; }
body.theme-dark .btn-outline-secondary { color: var(--dk-text); border-color: var(--dk-border); background: var(--dk-panel); }
body.theme-dark .btn-outline-secondary:hover { background-color: var(--dk-panel-2); }
body.theme-dark .table { color: var(--dk-text); background-color: var(--dk-panel); --bs-table-bg: var(--dk-panel); --bs-table-color: var(--dk-text); }
body.theme-dark .table-light { --bs-table-bg: var(--dk-panel-2); --bs-table-color: var(--dk-text); }
body.theme-dark .table-hover > tbody > tr:hover { --bs-table-hover-bg: var(--dk-panel-2); --bs-table-hover-color: var(--dk-text); }
body.theme-dark .table > :not(caption) > * > * { border-bottom-color: var(--dk-border); }
body.theme-dark tr.review-unconfirmed > td { background-color: #3d3420 !important; }
body.theme-dark tr.review-confirmed > td { background-color: #1f3a2b !important; }
body.theme-dark .invoice-card-mobile.review-unconfirmed { background-color: #3d3420 !important; }
body.theme-dark .invoice-card-mobile.review-confirmed { background-color: #1f3a2b !important; }
body.theme-dark .edit-topbar.review-topbar-unconfirmed { background-color: #3d3420; border-color: #645424; }
body.theme-dark .edit-topbar.review-topbar-confirmed { background-color: #1f3a2b; border-color: #2f6b45; }
body.theme-dark .review-action-bar.review-action-unconfirmed { background-color: #3d3420; border-color: #645424; }
body.theme-dark .review-action-bar.review-action-confirmed { background-color: #1f3a2b; border-color: #2f6b45; }
body.theme-dark .review-action-bar .btn-check:not(:checked) + .btn { background-color: var(--dk-panel); color: var(--dk-text); }
body.theme-dark .dropdown-menu {
    background-color: var(--dk-panel);
    border: 1px solid var(--dk-border);
}
body.theme-dark .dropdown-item { color: var(--dk-text); }
body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item.active { background-color: var(--dk-panel-2); color: var(--dk-accent-hv); }
body.theme-dark .page-link { background-color: var(--dk-panel); border-color: var(--dk-border); color: var(--dk-accent-hv); }
body.theme-dark .page-link:hover { background-color: var(--dk-panel-2); }
body.theme-dark .page-item.active .page-link { background-color: var(--dk-accent); border-color: var(--dk-accent); color: #fff; }
body.theme-dark .page-item.disabled .page-link { background-color: var(--dk-panel); color: var(--dk-text-muted); border-color: var(--dk-border); }
body.theme-dark .edit-topbar {
    background-color: var(--dk-panel) !important;
    border-color: var(--dk-border);
}
body.theme-dark .crop-floating-btn {
    background: rgba(37, 42, 51, 0.92);
    color: var(--dk-text);
    border-color: var(--dk-border);
}
body.theme-dark .badge.bg-body-secondary {
    background-color: var(--dk-panel-2) !important;
    color: var(--dk-text-muted) !important;
}
/* Sticky action row background — each theme override so the row matches
   the page when pinned (otherwise a stark white strip breaks the look). */
body.theme-dark   { --list-action-row-bg: var(--dk-bg); }
body.theme-kawaii { --list-action-row-bg: #faf3e8; }
body.theme-retro  { --list-action-row-bg: #f6efd8; }
body.theme-slate  { --list-action-row-bg: var(--sl-bg); }
body.theme-dark .list-action-row { box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
/* 標籤 sidebar 内の「全て」行も暗色で統一 */
body.theme-dark .tag-node:hover { background: var(--dk-panel-2); }
body.theme-dark .tag-node.active { background: #2b3a56; color: var(--dk-accent-hv); }
body.theme-dark .tag-section-header { color: var(--dk-text-muted) !important; }
/* 入力グループの左端 (アイコンボックス) */
body.theme-dark .input-group-text {
    background-color: var(--dk-panel-2);
    border-color: var(--dk-border);
    color: var(--dk-text-muted);
}
/* フィルタ用 warning / info ボタンの薄色バリアント (要確認 / 今日) */
body.theme-dark .btn-outline-warning { color: #ffce5c; border-color: #5a4a1e; }
body.theme-dark .btn-outline-warning:hover { background-color: #5a4a1e; color: #fff; }
body.theme-dark .btn-outline-info { color: #6ec9d9; border-color: #1e4a55; }
body.theme-dark .btn-outline-info:hover { background-color: #1e4a55; color: #fff; }
body.theme-dark .btn-warning { background-color: #b88a1a; border-color: #b88a1a; color: #1a1d23; }
body.theme-dark .btn-info { background-color: #2b7a8c; border-color: #2b7a8c; color: #fff; }
/* 「完了」など緑バッジを暗色 bg でも見やすく */
body.theme-dark .badge.bg-success { background-color: #2d6a4f !important; }
body.theme-dark .badge.bg-warning { background-color: #c89320 !important; color: #1a1d23 !important; }
body.theme-dark .badge.bg-secondary { background-color: var(--dk-panel-2) !important; color: var(--dk-text-muted) !important; }
body.theme-dark .tag-chip {
    background: #2d3340 !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border);
}
/* Review rows: deepen so yellow/green aren't eye-burning on dark bg */
body.theme-dark tr.review-unconfirmed > td { background-color: #3d3420 !important; color: var(--dk-text) !important; }
body.theme-dark tr.review-confirmed > td { background-color: #1f3a2b !important; color: var(--dk-text) !important; }

/* =====================================================================
 * Slate theme (藍墨 / Navy + Graphite) — flat, professional.
 * No shadows, no gradients; borders only. Deep navy as the single
 * accent, graphite gray for secondary surfaces and muted text.
 * ===================================================================== */
.theme-slate {
    --sl-bg:         #eef0f3;
    --sl-panel:      #ffffff;
    --sl-panel-2:    #f3f5f8;
    --sl-border:     #cfd4db;
    --sl-text:       #1f2430;
    --sl-text-muted: #5d6470;
    --sl-accent:     #22345a;   /* 深蓝 */
    --sl-accent-hv:  #2f4879;
    --sl-graphite:   #454a52;   /* 石墨灰 */
    --sl-graphite-2: #5c626b;
}
html.theme-slate { background-color: var(--sl-bg); }
body.theme-slate {
    background: var(--sl-bg) !important;
    color: var(--sl-text);
}
/* Flatten all cards and modals — no shadow, just a thin border. */
body.theme-slate .card,
body.theme-slate .modal-content,
body.theme-slate .shadow,
body.theme-slate .shadow-sm,
body.theme-slate .shadow-lg {
    background-color: var(--sl-panel);
    border: 1px solid var(--sl-border);
    box-shadow: none !important;
    border-radius: 4px;
}
body.theme-slate .card-header,
body.theme-slate .bg-light {
    background-color: var(--sl-panel-2) !important;
    border-bottom-color: var(--sl-border) !important;
    color: var(--sl-text);
    font-weight: 500;
}
/* Navbar — deep navy, flat */
body.theme-slate .navbar.bg-primary {
    background: var(--sl-accent) !important;
    border-bottom: 1px solid var(--sl-accent-hv);
    box-shadow: none;
}
/* Form controls */
body.theme-slate .form-control,
body.theme-slate .form-select,
body.theme-slate .input-group-text {
    background-color: var(--sl-panel);
    border: 1px solid var(--sl-border);
    color: var(--sl-text);
    border-radius: 3px;
}
body.theme-slate .form-control:focus,
body.theme-slate .form-select:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 0.15rem rgba(34, 52, 90, 0.15);
}
body.theme-slate .text-muted,
body.theme-slate .text-body-secondary { color: var(--sl-text-muted) !important; }
/* Buttons — flat, sharp corners */
body.theme-slate .btn {
    border-radius: 3px;
    box-shadow: none !important;
}
body.theme-slate .btn-primary {
    background-color: var(--sl-accent);
    border-color: var(--sl-accent);
    color: #fff;
}
body.theme-slate .btn-primary:hover,
body.theme-slate .btn-primary:focus {
    background-color: var(--sl-accent-hv);
    border-color: var(--sl-accent-hv);
}
body.theme-slate .btn-outline-primary {
    color: var(--sl-accent);
    border-color: var(--sl-accent);
}
body.theme-slate .btn-outline-primary:hover {
    background-color: var(--sl-accent);
    color: #fff;
}
body.theme-slate .btn-outline-secondary:not(:hover) {
    color: var(--sl-graphite);
    border-color: var(--sl-border);
    background: var(--sl-panel);
}
body.theme-slate .btn-outline-secondary:hover {
    background-color: var(--sl-graphite);
    border-color: var(--sl-graphite);
    color: #fff;
}
body.theme-slate .btn-outline-success,
body.theme-slate .btn-outline-info,
body.theme-slate .btn-outline-warning,
body.theme-slate .btn-outline-danger {
    border-width: 1px;
}
/* Tables — flat with muted header */
body.theme-slate .table {
    color: var(--sl-text);
    --bs-table-bg: var(--sl-panel);
}
body.theme-slate .table-light {
    --bs-table-bg: var(--sl-panel-2);
    --bs-table-color: var(--sl-text);
    border-bottom: 1px solid var(--sl-border);
}
body.theme-slate .table-hover > tbody > tr:hover {
    --bs-table-hover-bg: #e5e8ee;
    --bs-table-hover-color: var(--sl-text);
}
body.theme-slate .table > :not(caption) > * > * { border-bottom-color: var(--sl-border); }
/* Review status rows — cool, muted palette that complements the navy accent.
   要確認 = warm sand (needs attention), 登録 = cool slate-blue (settled). */
body.theme-slate tr.review-unconfirmed > td { background-color: #f6ecd2 !important; }
body.theme-slate tr.review-confirmed > td { background-color: #dbe4ef !important; }
body.theme-slate .invoice-card-mobile.review-unconfirmed { background-color: #f6ecd2 !important; }
body.theme-slate .invoice-card-mobile.review-confirmed { background-color: #dbe4ef !important; }
body.theme-slate .edit-topbar.review-topbar-unconfirmed {
    background-color: #f6ecd2 !important;
    border-color: #d8c98d !important;
}
body.theme-slate .edit-topbar.review-topbar-confirmed {
    background-color: #dbe4ef !important;
    border-color: #8aa4c6 !important;
}
body.theme-slate .review-action-bar.review-action-unconfirmed {
    background-color: #f6ecd2;
    border-color: #d8c98d;
}
body.theme-slate .review-action-bar.review-action-confirmed {
    background-color: #dbe4ef;
    border-color: #8aa4c6;
}
body.theme-slate .review-action-bar .btn-check:not(:checked) + .btn {
    background-color: var(--sl-panel);
    color: var(--sl-graphite);
    border-color: var(--sl-border);
}
/* Badges — flat */
body.theme-slate .badge { border-radius: 3px; }
body.theme-slate .badge.bg-primary { background-color: var(--sl-accent) !important; }
/* Dropdowns */
body.theme-slate .dropdown-menu {
    background-color: var(--sl-panel);
    border: 1px solid var(--sl-border);
    border-radius: 3px;
    box-shadow: none;
}
body.theme-slate .dropdown-item:hover,
body.theme-slate .dropdown-item.active {
    background-color: var(--sl-panel-2);
    color: var(--sl-accent);
}
/* Pagination */
body.theme-slate .page-link {
    color: var(--sl-accent);
    border-color: var(--sl-border);
    background-color: var(--sl-panel);
}
body.theme-slate .page-item.active .page-link {
    background-color: var(--sl-accent);
    border-color: var(--sl-accent);
    color: #fff;
}
/* Edit modal background so it matches the theme */
body.theme-slate .edit-modal-content { background-color: var(--sl-bg); }
/* Edit topbar + crop floating button */
body.theme-slate .edit-topbar {
    background-color: var(--sl-panel) !important;
    border-color: var(--sl-border);
}
body.theme-slate .crop-floating-btn {
    background: rgba(255, 255, 255, 0.92);
    color: var(--sl-graphite);
    border-color: var(--sl-border);
}
/* Sticky action row background for slate theme — handled via
   --list-action-row-bg CSS var (set in the dark-theme section above). */

/* =====================================================================
 * Retro ledger theme (レトロ帳簿) — old paper + serif, fits receipt domain.
 * ===================================================================== */
.theme-retro {
    --rt-bg:      #f6efd8;
    --rt-panel:   #fdf8e7;
    --rt-panel-2: #ede0b8;
    --rt-border:  #c4a878;
    --rt-border-dark: #8b6b4a;
    --rt-text:    #3d2e1f;
    --rt-muted:   #856a4d;
    --rt-accent:  #8b4513;
    --rt-accent-hv: #6e3610;
    --rt-green:   #6b8340;
    --rt-amber:   #b38020;
}
body.theme-retro {
    background: var(--rt-bg) !important;
    color: var(--rt-text);
    font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
}
/* Subtle ledger paper lines in the background. */
body.theme-retro {
    background-image: linear-gradient(to bottom, transparent 0, transparent 31px, rgba(139, 107, 74, 0.08) 32px);
    background-size: 100% 32px;
}
body.theme-retro .navbar.bg-primary {
    background: #6e3610 !important;
    border-bottom: 3px double #c4a878;
}
body.theme-retro .card {
    background-color: var(--rt-panel);
    border: 2px solid var(--rt-border-dark);
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(139, 107, 74, 0.25);
}
body.theme-retro .card-header {
    background-color: var(--rt-panel-2) !important;
    border-bottom: 2px double var(--rt-border-dark);
    color: var(--rt-text);
    font-weight: 700;
    letter-spacing: 0.05em;
}
body.theme-retro .form-control,
body.theme-retro .form-select {
    background-color: var(--rt-panel);
    border: 1px solid var(--rt-border);
    border-radius: 2px;
    color: var(--rt-text);
}
body.theme-retro .form-control:focus,
body.theme-retro .form-select:focus {
    background-color: #fffcf0;
    border-color: var(--rt-accent);
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.2);
}
body.theme-retro .btn { border-radius: 2px; font-weight: 500; letter-spacing: 0.03em; }
body.theme-retro .btn-primary { background-color: var(--rt-accent); border-color: var(--rt-accent-hv); }
body.theme-retro .btn-primary:hover { background-color: var(--rt-accent-hv); }
body.theme-retro .btn-outline-primary { color: var(--rt-accent); border-color: var(--rt-accent); }
body.theme-retro .btn-outline-primary:hover { background-color: var(--rt-accent); color: #fff; }
body.theme-retro .btn-outline-secondary { color: var(--rt-text); border-color: var(--rt-border-dark); background: var(--rt-panel); }
body.theme-retro .btn-outline-secondary:hover { background-color: var(--rt-panel-2); }
body.theme-retro .btn-success { background-color: var(--rt-green); border-color: #4d6029; }
body.theme-retro .btn-warning { background-color: var(--rt-amber); border-color: #8b6014; color: #fff; }
body.theme-retro .table {
    color: var(--rt-text);
    --bs-table-bg: var(--rt-panel);
    --bs-table-color: var(--rt-text);
}
body.theme-retro .table-light { --bs-table-bg: var(--rt-panel-2); --bs-table-color: var(--rt-text); }
body.theme-retro .table > tbody > tr:nth-child(even) > td { background-color: rgba(196, 168, 120, 0.08); }
body.theme-retro .table-hover > tbody > tr:hover { --bs-table-hover-bg: rgba(196, 168, 120, 0.25); --bs-table-hover-color: var(--rt-text); }
body.theme-retro tr.review-unconfirmed > td { background-color: #f2e4a8 !important; }
body.theme-retro tr.review-confirmed > td { background-color: #d5e5c4 !important; }
body.theme-retro .edit-topbar {
    background-color: var(--rt-panel) !important;
    border: 2px solid var(--rt-border-dark);
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(139, 107, 74, 0.25);
}
body.theme-retro .edit-topbar.review-topbar-unconfirmed { background-color: #f2e4a8 !important; border-color: #b8923a; }
body.theme-retro .edit-topbar.review-topbar-confirmed { background-color: #d5e5c4 !important; border-color: #7a9555; }
body.theme-retro .review-action-bar { border-radius: 2px; border: 2px solid var(--rt-border-dark); }
body.theme-retro .review-action-bar.review-action-unconfirmed { background-color: #f2e4a8; border-color: #b8923a; }
body.theme-retro .review-action-bar.review-action-confirmed { background-color: #d5e5c4; border-color: #7a9555; }
body.theme-retro .review-big-btn { border-radius: 2px !important; }
body.theme-retro .badge { border-radius: 2px; font-weight: 500; }
body.theme-retro .dropdown-menu {
    background-color: var(--rt-panel);
    border: 1.5px solid var(--rt-border-dark);
    border-radius: 2px;
}
body.theme-retro .dropdown-item { color: var(--rt-text); }
body.theme-retro .dropdown-item:hover,
body.theme-retro .dropdown-item.active { background-color: var(--rt-panel-2); color: var(--rt-accent); }
body.theme-retro .page-link {
    background-color: var(--rt-panel);
    border: 1px solid var(--rt-border-dark);
    color: var(--rt-accent);
    border-radius: 2px !important;
    font-weight: 500;
}
body.theme-retro .page-link:hover { background-color: var(--rt-panel-2); }
body.theme-retro .page-item.active .page-link { background-color: var(--rt-accent); border-color: var(--rt-accent-hv); color: #fff; }
body.theme-retro .crop-floating-btn {
    background: rgba(253, 248, 231, 0.95);
    border: 1.5px solid var(--rt-border-dark);
    color: var(--rt-text);
    border-radius: 2px;
}
body.theme-retro h2, body.theme-retro h3, body.theme-retro h4, body.theme-retro h5 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
}