:root {
    /* ─── Color Palette ─────────────────────────────── */
    --primary-color: #4f46e5;
    /* Indigo 600 */
    --primary-hover: #4338ca;
    /* Indigo 700 */
    --secondary-color: #64748b;
    /* Slate 500 */
    --background-color: #f8fafc;
    /* Slate 50  */
    --surface-color: #ffffff;
    --text-color: #1e293b;
    /* Slate 800 */
    --text-muted: #64748b;
    /* Slate 500 */
    --text-subtle: #94a3b8;
    /* Slate 400（メール・メタ情報など） */
    --border-color: #e2e8f0;
    /* Slate 200 */
    --success-color: #10b981;
    /* Emerald 500 */
    --danger-color: #ef4444;
    /* Red 500 */

    /* ─── Surface / BG Variants ─────────────────────── */
    --bg-table-header: #f8fafc;
    /* テーブルヘッダー背景 */
    --bg-row-hover: #f1f5f9;
    /* テーブル行ホバー */
    --bg-section-divider: #f1f5f9;
    /* セクション区切り線色 */
    --bg-nav-hover: #f1f5f9;
    /* ナビホバー背景 */
    --bg-danger-hover: #fef2f2;
    /* 削除系ホバー背景 */
    --bg-primary-focus-ring: rgba(79, 70, 229, 0.1);
    /* フォーカスリング */

    /* ─── Hero Gradient ──────────────────────────────── */
    --hero-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --hero-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);

    /* ─── Typography ─────────────────────────────────── */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.8rem;
    /* 12.8px */
    --font-size-sm2: 0.85rem;
    /* 13.6px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-md: 1.1rem;
    /* 17.6px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.75rem;
    /* 28px */
    --font-size-4xl: 2rem;
    /* 32px */

    /* ─── Spacing ────────────────────────────────────── */
    --spacing-xs: 0.25rem;
    /*  4px */
    --spacing-sm: 0.5rem;
    /*  8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */

    /* ─── Border Radius ──────────────────────────────── */
    --radius-sm: 0.375rem;
    /*  6px */
    --radius-md: 0.5rem;
    /*  8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-pill: 9999px;
    /* 丸ボタン・バッジ用 */

    /* ─── Shadows ────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* モバイルカード行 */
    --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* FABボタン */

    /* ─── Mobile Card & History Row Grid ────────────── */
    --mobile-grid-checkbox: 40px;
    /* チェックボックス列幅 */
    --mobile-card-padding: 12px;
    /* カード行内padding */
    --mobile-card-gap-row: 12px;
    /* カード行間のgap */
    --mobile-card-gap-col: 12px;
    /* グリッド列間のgap */

    /* ─── Action Column（先日の修正で苦労した箇所） ─── */
    --mobile-action-width-card: 110px;
    /* 名刺一覧の操作エリア幅 */
    --mobile-action-width-history: 100px;
    /* 送信履歴の操作エリア幅 */
    --action-gap-pc: 8px;
    /* PC版ボタン間隔 */
    --action-gap-mobile: 4px;
    /* モバイル版ボタン間隔 */

    /* ─── Mobile Button Typography ───────────────────── */
    --action-font-size-mobile: 0.75rem;
    /* モバイルボタン文字サイズ */
    --action-line-height-mobile: 1.2;
    /* モバイルボタン行高 */

    /* ─── History Table Column Widths (PC) ───────────── */
    --history-col-checkbox: 50px;
    --history-col-date: 150px;
    --history-col-recipient: 250px;
    --history-col-user: 120px;
    --history-col-action: 100px;

    /* ─── Layout ──────────────────────────────────────── */
    --nav-width: 280px;
    /* モバイルナビ引き出し幅 */
    --fab-height: 100px;
    /* フローティングアクションバー高さ */
    --max-width: 1200px;
    /* mainコンテンツ最大幅 */
}

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

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary-hover);
}

/* Layout */
header {
    background-color: var(--surface-color);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

nav {
    display: flex;
    gap: var(--spacing-md);
}

nav a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

nav a:hover,
nav a.active {
    background-color: var(--bg-nav-hover);
    color: var(--primary-color);
}

nav a.logout {
    color: var(--danger-color);
}

nav a.logout:hover {
    background-color: var(--bg-danger-hover);
}

main {
    flex-grow: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

footer {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: var(--font-size-sm2);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

/* Components */
.card {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
    line-height: 1;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-block {
    width: 100%;
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-color);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--bg-primary-focus-ring);
}

/* Utilities */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-4 {
    margin-top: var(--spacing-xl);
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 0.5rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* アイコンと文字の間の隙間 */
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-color);
}

.menu-icon {
    color: var(--primary-color);
    /* アイコンに色をつけるとかっこいいです */
}

/* Responsive */
@media (max-width: 640px) {
    header {
        padding: var(--spacing-md);
        flex-wrap: wrap;
        /* Allow wrapping */
        align-items: center;
        gap: 0;
    }

    .logo {
        flex-grow: 1;
    }

    .mobile-menu-btn {
        display: block;
    }

    nav {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        position: fixed;
        top: 0;
        right: calc(-1 * var(--nav-width));
        /* Hidden by default */
        width: var(--nav-width);
        height: 100vh;
        background-color: var(--surface-color);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: var(--spacing-xl) var(--spacing-md);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        margin-top: 0;
        border-top: none;
    }

    nav.active {
        right: 0;
    }

    nav a {
        display: block;
        padding: 0.75rem;
        text-align: center;
        width: 100%;
    }

    h1 {
        font-size: var(--font-size-3xl);
    }

    .card {
        padding: var(--spacing-lg);
    }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.item-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-lg);
    margin-bottom: 0;
}

.company-name {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-name {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

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

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

/* Dashbord Specific */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.dashboard-section {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.dashboard-section h2 {
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--bg-section-divider);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-list {
    list-style: none;
}

.dashboard-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bg-section-divider);
}

.dashboard-list-item:last-child {
    border-bottom: none;
}

.dashboard-list-item .info {
    display: flex;
    flex-direction: column;
}

.dashboard-list-item .name {
    font-weight: 600;
    color: var(--text-color);
}

.dashboard-list-item .meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.dashboard-list-item .date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Premium Enhancements */
.hero-card {
    background: var(--hero-gradient);
    color: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--hero-shadow);
}

.hero-card h1 {
    color: white;
    margin-bottom: 0.5rem;
}

.hero-card p {
    opacity: 0.9;
}

.upload-area:hover {
    border-color: var(--primary-color) !important;
    background-color: #f0f7ff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.badge-primary {
    background-color: #e0e7ff;
    color: #4338ca;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

/* Existing Utility */
.mt-auto {
    margin-top: auto;
}

/* Card Table (Desktop Base Styles) */
.card-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.card-table th,
.card-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.card-table th {
    background-color: var(--bg-table-header);
    font-weight: 600;
    color: var(--text-muted);
}

.card-table tr:hover {
    background-color: var(--bg-row-hover);
}

.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable:hover {
    background-color: var(--bg-row-hover) !important;
    color: var(--primary-color) !important;
}

.sort-icon::after {
    content: "↕";
    margin-left: 5px;
    font-size: 0.8rem;
    color: #cbd5e1;
}

th.asc .sort-icon::after {
    content: "↑";
    color: var(--primary-color);
}

th.desc .sort-icon::after {
    content: "↓";
    color: var(--primary-color);
}

/* Search Container */
.search-container {
    margin-bottom: var(--spacing-md);
    position: relative;
}

.search-input {
    width: 100%;
    /* User requested 50px padding to prevent icon overlap */
    padding: 12px 20px 12px 50px !important;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    font-size: var(--font-size-base);
    transition: box-shadow 0.2s;
    box-shadow: none;
    background-color: var(--surface-color);
}

#searchInput.search-input:hover,
#searchInput.search-input:focus {
    outline: none;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    pointer-events: none;
    z-index: 10;
}

/* Zoom Modal */
.zoom-modal {
    width: 90%;
    max-width: 900px;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.zoom-modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.zoom-modal img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Responsive */
@media (max-width: 768px) {

    /* Layout Adjustments */
    .card {
        padding: var(--spacing-md) !important;
        /* Keep card padding */
        border: 1px solid var(--border-color) !important;
        /* Keep border */
        box-shadow: var(--shadow-sm) !important;
        /* Keep shadow */
        background: white !important;
        /* Keep background */
        margin-bottom: var(--spacing-md);
    }

    main {
        padding: var(--spacing-md) !important;
        /* Add margin to outside */
    }

    /* Card Table Transformation */
    .card-table,
    .card-table tbody,
    .card-table tr,
    .card-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .card-table thead {
        display: none !important;
    }

    /* Card Row Style via Grid */
    .card-table tr {
        display: grid !important;
        grid-template-columns: var(--mobile-grid-checkbox) 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 4px var(--mobile-card-gap-col);
        position: relative;
        background: var(--surface-color);
        margin-bottom: var(--mobile-card-gap-row);
        padding: var(--mobile-card-padding);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border-color);
        align-items: center;
    }

    /* Checkbox Column - Row 1-3, Col 1 */
    .card-table td:first-child {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        background: transparent;
        border: none;
    }

    .card-checkbox {
        transform: scale(1.3);
        margin: 0;
    }

    /* Name: Row 1, Col 2 - Prominent */
    .card-table td[data-label="氏名"] {
        grid-column: 2;
        grid-row: 1;
        font-size: var(--font-size-md);
        font-weight: 700;
        color: var(--text-color);
        padding: 0 !important;
        border: none;
        line-height: 1.4;
    }

    /* Company Name: Row 2, Col 2 - Subtle */
    .card-table td[data-label="会社名"] {
        grid-column: 2;
        grid-row: 2;
        font-size: var(--font-size-sm2);
        color: var(--text-muted);
        padding: 0 !important;
        border: none;
        line-height: 1.2;
    }

    /* Email: Row 3, Col 2 - Subtle */
    .card-table td[data-label="Email"] {
        grid-column: 2;
        grid-row: 3;
        font-size: var(--font-size-sm);
        color: var(--text-subtle);
        word-break: break-all;
        padding: 0 !important;
        border: none;
        line-height: 1.2;
    }

    /* Actions: Row 1-3, Col 3 */
    .card-table td[data-label="操作"] {
        display: flex !important;
        /* Unhide */
        grid-column: 3;
        grid-row: 1 / span 3;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: flex-end;
        padding: 0 !important;
        border: none;
        text-align: right;
    }

    /* Hide redundant elements */
    .mobile-company-name,
    .card-table td::before,
    .desktop-only,
    .card-table td[data-label="登録者"] {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* Adjust buttons for mobile */
    .card-table td[data-label="操作"] .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        width: 100%;
        /* Make buttons full width in their column if needed, or keeping them auto */
        white-space: nowrap;
    }

    /* Ensure icons in buttons are aligned */
    .card-table td[data-label="操作"] .btn svg {
        margin-right: 0;
    }

    /* Hide text on very small screens if needed, usually icon is enough */
    @media (max-width: 380px) {
        .btn-text {
            display: none;
        }

        .card-table td[data-label="操作"] .btn svg {
            margin-right: 0;
        }
    }
}

/* ============================================
   FLOATING ACTION BAR - DISPLAY-FREE DESIGN
   displayを一切使わない、物理的に隠して表示する
   ============================================ */

/* display:noneをやめ、透明度と位置だけで制御する */
/* ============================================
   FLOATING ACTION BAR (Mobile Only)
   ============================================ */
@media (max-width: 768px) {
    .floating-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--fab-height);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        transform: translateY(50px);
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .floating-action-bar.visible {
        opacity: 1;
        transform: translateY(-20px);
        visibility: visible;
        pointer-events: auto;
    }

    .floating-action-buttons {
        display: flex;
        gap: 15px;
        pointer-events: auto;
        background: transparent;
        margin: 0 auto;
    }

    .fab-btn {
        display: inline-flex;
        padding: 0.6rem 1.2rem;
        border-radius: var(--radius-pill);
        font-size: 0.9rem;
        font-weight: 600;
        justify-content: center;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        border: none;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: var(--shadow-fab);
    }

    .btn-danger.fab-btn {
        background-color: var(--danger-color);
        color: white;
    }

    .btn-primary.fab-btn {
        background-color: var(--primary-color);
        color: white;
    }

    .fab-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .fab-btn svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
}

@media (min-width: 769px) {

    .floating-action-bar,
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block;
    }
}

/* History Table (PC Fixed Layout - Strict 50,150,250,auto,100) */
/* History Table (PC Fixed Layout - Strict 50,150,250,auto,100) */
@media (min-width: 769px) {
    .history-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: var(--spacing-md);
        table-layout: fixed;
    }

    .history-table th,
    .history-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-table th {
        background-color: var(--bg-table-header);
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
    }

    /* Strictly Defined Columns (PC) */
    .history-table th:nth-child(1),
    .history-table td:nth-child(1) {
        width: var(--history-col-checkbox);
        text-align: center;
    }

    /* Checkbox */
    .history-table th:nth-child(2) {
        width: var(--history-col-date);
    }

    /* Date */
    .history-table th:nth-child(3) {
        width: var(--history-col-recipient);
    }

    /* Recipient */
    .history-table th:nth-child(4) {
        width: auto;
    }

    /* Subject (Fluid) */
    /* If User column exists (5th), give it fixed width, but if not, Action is last */
    .history-table th.user-header {
        width: var(--history-col-user);
    }

    .history-table th:last-child {
        width: var(--history-col-action);
        text-align: right;
    }

    /* Action */

    .history-table tr:hover {
        background-color: var(--bg-row-hover);
    }
}

/* History Mobile Layout (Card Style - Strict Grid: 40px 1fr auto) */
@media (max-width: 768px) {
    .history-table {
        border: none;
        margin-top: 0;
    }

    .history-table thead {
        display: none !important;
    }

    .history-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .history-table tr {
        display: grid !important;
        grid-template-columns: var(--mobile-grid-checkbox) 1fr var(--mobile-action-width-history) !important;
        /* 第3列を100pxに固定してボタンを表示 */
        grid-template-rows: auto auto auto !important;
        /* Date, Recipient, Subject */
        gap: 0 var(--mobile-card-gap-col);
        background: var(--surface-color);
        padding: var(--mobile-card-padding);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border-color);
        width: 100%;
        margin-bottom: 0;
        align-items: center;
    }

    /* 1. Checkbox: Col 1, Span 3 */
    .checkbox-col,
    .history-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 3;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        border: none;
        height: 100%;
    }

    .history-checkbox {
        transform: scale(1.3);
        margin: 0;
    }

    /* 2. Date: Col 2, Row 1 (Top) */
    .date-col,
    .history-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        padding: 0 !important;
        border: none;
        line-height: 1.4;
        align-self: end;
    }

    /* 3. Recipient: Col 2, Row 2 (Middle) */
    .recipient-col,
    .history-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        padding: 4px 0 !important;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.3;
    }

    .recipient-name {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--text-color);
    }

    .recipient-company {
        font-size: var(--font-size-sm2);
        color: var(--text-muted);
    }

    .recipient-email {
        font-size: var(--font-size-sm);
        color: var(--text-subtle);
    }

    /* 4. Subject: Col 2, Row 3 (Bottom) */
    .subject-col,
    .history-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        padding: 0 !important;
        border: none;
        align-self: start;
        width: 100%;
        min-width: 0;
    }

    .subject-text {
        font-size: var(--font-size-sm2);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
    }

    /* 5. User Col (Hidden) */
    .user-col {
        display: none !important;
    }


    /* Action: Col 3, Span 3 (Right) */
    .action-col {
        grid-column: 3;
        grid-row: 1 / span 3;
        display: flex !important;
        justify-content: center !important;
        /* Vertically center in grid cell */
        align-items: center !important;
        /* Horizontally center */
        flex-direction: column !important;
        padding: 0 !important;
        border: none;
        height: 100%;
        gap: 8px;
        /* Gap for mobile */
    }

    .card-table td[data-label="操作"] {
        /* Legacy target, ensure matches action-col behavior */
        grid-column: 3;
        grid-row: 1 / span 3;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        padding: 0 !important;
        border: none;
        height: 100%;
        gap: 8px;
        /* Gap 10px */
        text-align: right;
    }

    .history-table .action-col .btn,
    .card-table .btn {
        /* Ensure buttons fit */
        margin: 0;
        white-space: nowrap !important;
        /* Prevent wrapping */
    }

    /* Compact Body Button on Mobile */
    .history-table .action-col .view-body-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
        width: auto !important;
        min-width: 60px;
    }

    /* Hide Labels */
    .history-table td::before,
    .card-table td::before {
        display: none !important;
    }
}

/* Global Action Buttons Styles */
.btn-icon {
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-danger-outline {
    color: var(--danger-color);
    background: transparent;
    border: 1px solid var(--border-color);
    /* Subtle border like secondary */
}

.btn-danger-outline:hover {
    background-color: var(--bg-danger-hover);
    border-color: var(--danger-color);
}


/* ============================================
   ACTION BUTTONS COMPONENT (Refactored)
   ============================================ */

/* === Common Styles (All Devices) === */
.action-col {
    vertical-align: middle;
}

.action-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.btn-action-mail,
.btn-action-view,
.btn-action-delete {
    white-space: nowrap;
}

/* === PC Styles (min-width: 769px) === */
@media (min-width: 769px) {
    .action-col {
        padding: 4px 12px;
        width: 220px;
    }

    .action-container {
        gap: var(--action-gap-pc);
        min-height: 44px;
    }

    /* Page-specific alignment */
    .action-container--card-list {
        justify-content: flex-end;
        /* 右寄せ */
    }

    .action-container--history {
        flex-direction: row !important;
        /* PC版は横並び */
        justify-content: center;
        /* 中央 */
    }

    /* History table specific - PC横並び */
    .history-table .action-container--history {
        flex-direction: row !important;
        /* PC版は横並び */
    }

    /* Row-2 wrapper for PC (horizontal layout) */
    .action-row-2 {
        display: flex;
        gap: var(--action-gap-pc);
        align-items: center;
    }

    /* Button sizing for PC */
    .btn-action-mail {
        padding: 0.25rem 0.5rem;
        font-size: var(--font-size-sm);
    }

    .btn-action-view {
        padding: 0.25rem 0.5rem;
        font-size: var(--font-size-sm);
    }

    /* .btn-action-delete: Inherits styles from .btn-icon; mobile overrides in @media (max-width: 768px) */
}

/* === Mobile Styles (max-width: 768px) === */
@media (max-width: 768px) {
    .action-col {
        padding: 0;
        border: none;
    }

    /* Card List: 2-row compact layout */
    .card-table .action-col {
        text-align: right;
        /* Push container to right */
    }

    .card-table .action-container--card-list {
        flex-direction: column;
        width: var(--mobile-action-width-card);
        /* 110px */
        gap: var(--action-gap-mobile);
        /* 4px */
        margin-left: auto;
        /* Align to right edge */
        padding: 6px 0;
    }

    .card-table .btn-action-mail {
        width: 100%;
        font-size: var(--action-font-size-mobile);
        /* 0.75rem */
        line-height: var(--action-line-height-mobile);
        /* 1.2 */
        padding: 4px 2px;
        text-align: center;
    }

    .card-table .action-row-2 {
        display: flex;
        gap: var(--action-gap-mobile);
        /* 4px */
        width: 100%;
    }

    .card-table .btn-action-view {
        flex: 1;
        font-size: var(--action-font-size-mobile);
        line-height: var(--action-line-height-mobile);
        padding: 4px 2px;
        text-align: center;
    }

    .card-table .btn-action-delete {
        flex: 1;
        /* 1:1 ratio with detail button */
        padding: 4px 2px;
        font-size: 0.7rem;
        /* Slightly smaller icon */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-table .btn-action-delete svg {
        width: 14px;
        height: 14px;
    }


    /* Mobile FAB Select All */
    .mobile-select-all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background-color: #fff;
        border: 1px solid var(--border-color);
        color: var(--text-color);
        font-weight: 600;
        font-size: 0.85rem;
        padding: 0 1rem;
        border-radius: 9999px;
        height: 44px;
        /* Ensure same height as buttons */
        white-space: nowrap;
        flex: 0 0 auto;
        /* Fixed width based on content */
        box-shadow: var(--shadow-sm);
    }

    .mobile-select-all input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary-color);
        margin: 0;
    }

    .mobile-select-all label {
        margin: 0;
        padding: 0;
        line-height: 1;
        /* Force line-height to match font-size for centering */
        display: block;
        /* Ensure it behaves as a block for alignment */
        cursor: pointer;
        padding-top: 2px;
        /* Micro-adjustment to push text down slightly if needed */
    }

    .floating-action-buttons {
        display: flex;
        gap: 8px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 0 8px;
        /* Add padding to container */
    }

    .fab-btn {
        flex: 1;
        /* Grow to fill remaining space equally */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        /* Match select all button */
        white-space: nowrap;
    }

    /* History: Vertical stack layout */
    /* 1. td（セル）の性質を固定 */
    .history-table td.action-col {
        text-align: right;
        min-height: 80px !important;
        /* 高さを確保 */
        width: var(--mobile-action-width-history) !important;
        /* ボタン表示のため明示的に幅を設定 */
        min-width: var(--mobile-action-width-history) !important;
    }

    /* 2. コンテナの引き伸ばしと中央揃え */
    .history-table .action-container--history {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* 垂直方向の中央 */
        align-items: center !important;
        /* 水平方向の中央 */
        height: 100% !important;
        /* 親のtdいっぱいに広げる */
        min-height: 60px;
        /* 潰れないように最低高さを確保 */
        width: var(--mobile-action-width-history);
        gap: 6px;
        margin: 0 0 0 auto;
        /* 右寄せのみ、垂直マージンは排除 */
        padding: 0;
    }

    /* 3. 余計なマージンの排除 + 表示保証 */
    .history-table .btn-action-view,
    .history-table .btn-action-delete {
        display: inline-block !important;
        /* 最重要: ボタンを表示 */
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        font-size: var(--action-font-size-mobile);
        line-height: var(--action-line-height-mobile);
        padding: 4px 2px;
        text-align: center;
        margin-top: 0;
        /* 上側に偏る要因を排除 */
        margin-bottom: 0;
    }

    /* Ensure all table cells maintain vertical alignment */
    table td {
        vertical-align: middle;
    }
}

/* === Global Button Rule === */
.btn {
    white-space: nowrap;
}

/* --- 履歴一覧：各行のボタン強制表示設定 --- */

/* 1. セル（td）の構造を固定 */
.history-table td.action-col {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 10px !important;
    min-width: var(--history-col-action) !important;
    /* ボタンが消えないための最小幅 */
}

/* 2. ボタンを包むコンテナを「見える状態」にする */
.action-container--history {
    display: flex !important;
    flex-direction: column !important;
    /* スマホで縦並びにする */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    /* 消えている最大の原因を排除 */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
}

/* 3. ボタン自体の表示を保証 */
.btn-action-view,
.btn-action-delete {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ============================================
   UTILITY CLASSES (Inline Style Elimination)
   インラインスタイル撲滅のためのユーティリティ
   ============================================ */

/* ─── ページヘッダー（両ページ共通）────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.page-header__actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* ─── ボタン: sm サイズ ───────────────────────────── */
/* .btn-sm は既存定義あり。padding/font-sizeを上書き */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ─── ボタン: 危険色 (page-header用) ─────────────── */
.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

/* ─── ボタン内SVGアイコン整列 ─────────────────────── */
.btn-icon-left {
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* ─── Utility: Hidden State (Important) ──────────────── */
.is-hidden {
    display: none !important;
}

.btn-icon-inline {
    margin-right: 3px;
    vertical-align: middle;
}

/* ─── 管理者フィルターフォーム（両ページ共通）────── */
.filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

.filter-select {
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    flex-grow: 1;
}

/* ─── バッジ: lg サイズ（履歴ページヘッダー）─────── */
.badge-lg {
    font-size: 0.9rem;
}

/* ============================================
   HISTORY FAB (history.html <style>ブロックから移行)
   ============================================ */

/* 履歴画面専用の強制スタイル：他への影響を遮断 */
/* Moved to main FAB section */

/* ─── CSVインポートセクション ─────────────────────── */
.import-section {
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.import-section__title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-section__note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.import-form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.import-file-input {
    font-size: 0.85rem;
    flex: 1;
    min-width: 200px;
}

/* ─── テーブルスクロールラッパー ─────────────────── */
.table-scroll {
    overflow-x: auto;
}

/* ─── テーブルヘッダー列幅 ─────────────────────── */
.th-checkbox {
    width: 40px;
    text-align: center;
}

.td-checkbox {
    text-align: center;
}

.th-action {
    width: 200px;
    text-align: right;
}

/* ─── 登録者サブテキスト（管理者用）────────────── */
.user-sub-name {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ─── 空データ表示 ────────────────────────────── */
.empty-state {
    padding: var(--spacing-xl);
}

.empty-state p {
    color: var(--text-muted);
}

/* ─── ズームモーダルフッター ─────────────────── */
.zoom-modal-footer {
    text-align: center;
    margin-top: 10px;
}

.zoom-close-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px 20px;
    cursor: pointer;
}

/* ─── ローディングタイトル色 ─────────────────── */
.loading-title {
    color: var(--primary-color);
}

/* ─── プロフィールフォームグリッド（profile.html <style>から移行）── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .full-width {
        grid-column: span 2;
    }
}


/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    min-height: 80vh;
}

.login-card {
    width: 100%;
    max-width: 400px;
}

.login-title {
    color: var(--primary-color);
}

.login-subtitle {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.alert-error {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #fef2f2;
    color: var(--danger-color);
    border-radius: var(--radius-md);
    text-align: center;
}


/* ============================================
   PROFILE PAGE
   ============================================ */

/* カード全体の幅制限 */
.profile-card {
    max-width: 800px;
    margin: 0 auto;
}

/* ページタイトル下線 */
.profile-title {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* 姓・名 横並びコンテナ */
.name-row {
    display: flex;
    gap: 10px;
}

/* フォームのヒントテキスト */
.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* 送信方法選択 BOX */
.send-method-box {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.send-method-box__label {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: block;
}

.send-method-box__options {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
}

.send-method-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.radio-auto {
    width: auto;
}

.send-method-box__note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Gmail設定 BOX */
.gmail-settings-box {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #f0f7ff;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}

.gmail-settings-box__label {
    color: var(--primary-color);
    font-weight: 600;
}

.gmail-guide {
    margin-top: var(--spacing-sm);
    font-size: 0.85rem;
    color: #1e40af;
}

.gmail-guide__title {
    margin-bottom: 5px;
    font-weight: 600;
}

.gmail-guide__list {
    padding-left: 20px;
    margin-bottom: 5px;
}

.gmail-guide__link {
    text-decoration: underline;
}

/* 保存ボタン: lg サイズ */
.btn-lg {
    padding: 0.75rem 2rem;
}

/* キャンセルリンクの左マージン */
.ml-md {
    margin-left: var(--spacing-md);
}


/* ============================================
   INDEX (DASHBOARD) PAGE
   ============================================ */

/* 送信上限ステータス BOX */
.limit-box {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.limit-bar-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.progress-bg {
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

/* progress-fill の width は Jinja2 動的計算のためインラインに残す */
.progress-fill {
    height: 100%;
    background: #43e97b;
    box-shadow: 0 0 10px rgba(67, 233, 123, 0.5);
    transition: width 0.5s ease-out;
}

.limit-warning {
    color: #ff9a9e;
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 600;
}

/* ダッシュボード: グリッド列幅制御 */
.dashboard-span-1 {
    grid-column: span 1;
}

/* ファイルアップロードエリア */
.upload-area {
    display: block;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--background-color);
}

.upload-icon {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.upload-text {
    font-weight: 500;
    color: var(--text-color);
}

/* Android カメラボタンコンテナ（JS制御・初期非表示） */
.android-camera-container {
    margin-top: var(--spacing-md);
}

.android-camera-label {
    cursor: pointer;
}

.android-camera-icon {
    margin-right: 8px;
}

/* 画像プレビュー */
.preview-container {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.preview-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* 「すべて表示」リンク */
.more-link {
    font-size: 0.875rem;
}

/* 空リスト時のテキスト */
.empty-list {
    text-align: center;
    padding: 2rem 0;
}

/* ─── 汎用インラインブロック ─────────────────── */
.inline-block {
    display: inline-block;
}

/* ─── マージン下: sm ──────────────────────────── */
.mb-sm {
    margin-bottom: var(--spacing-sm);
}

/* ─── モーダルヘッダータイトル（余白リセット）── */
.modal-header__title {
    margin: 0;
}

/* ─── モーダルボディ（本文表示）──────────────── */
.modal-body {
    padding: var(--spacing-lg);
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

/* ─── 履歴テーブル列幅 ────────────────────────── */
.th-hist-date {
    width: 150px;
}

.th-hist-recipient {
    width: 250px;
}

.th-hist-user {
    width: 120px;
}


/* ============================================
   CREATE EMAIL PAGE
   ============================================ */

.email-card {
    max-width: 800px;
    margin: 0 auto;
}

.email-card__title {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.email-card__subtitle {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--text-muted);
    margin-left: 10px;
}

/* AIリライトセクション */
.rewrite-box {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.rewrite-box__label {
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rewrite-box__input-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.rewrite-box__input {
    flex: 1;
}

/* 送信ボタン: xl サイズ */
.btn-xl {
    font-size: 1.1rem;
    padding: 1rem;
}

/* textarea: メール本文用 */
.textarea-email {
    font-family: inherit;
    line-height: 1.6;
}

/* Send button SVG icon */
.btn-icon-left {
    margin-right: 8px;
}


/* ============================================
   CARD DETAIL PAGE
   ============================================ */

.detail-card {
    max-width: 800px;
    margin: 0 auto;
}

/* 詳細ヘッダー（会社名・氏名 ＋ 操作ボタン）*/
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--spacing-lg);
}

.detail-header__title {
    margin-bottom: var(--spacing-xs);
}

.detail-header__subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.detail-header__actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* 削除ボタン（danger fill）*/
.btn-danger-fill {
    background-color: var(--danger-color);
    color: white;
}

/* 画像エリア上部グリッド */
.detail-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.detail-image-section {
    grid-column: span 2;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/* 名刺画像 ズームラッパー */
.card-image-wrapper {
    display: inline-block;
    position: relative;
    cursor: zoom-in;
}

.card-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.card-image__zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* 画像なしプレースホルダー */
.no-image-placeholder {
    padding: var(--spacing-xl);
    background: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

/* 情報グリッド（2カラム）*/
.detail-info-grid {
    display: grid;
    gap: var(--spacing-md);
}

/* セクション見出し（下線あり）*/
.detail-section-title {
    font-size: 1.25rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* ラベル（data label風）*/
.detail-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* CTAエリア（メール作成ボタン など）*/
.detail-cta {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.detail-back {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.detail-back__link {
    color: var(--text-muted);
}

/* ズームモーダル */
.zoom-modal-dialog {
    width: 90%;
    max-width: 900px;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.zoom-modal-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.zoom-modal-footer {
    text-align: center;
    margin-top: 10px;
}

.zoom-modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px 20px;
    cursor: pointer;
}

#zoomModal::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

@media (max-width: 640px) {
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }
}


/* ============================================
   CARD EDIT PAGE
   ============================================ */

.edit-card {
    max-width: 600px;
    margin: 0 auto;
}

/* フォームボタン行（右寄せ）*/
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Utility class for hiding elements with high specificity */
.is-hidden,
.history-table tr.is-hidden,
.card-table tr.is-hidden {
    display: none !important;
}

/* ============================================
   TEMPLATE LIST MOBILE (Card Style)
   ============================================ */
@media (max-width: 768px) {

    /* Reset basic table display for templates */
    .template-table,
    .template-table tbody,
    .template-table tr,
    .template-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .template-table thead {
        display: none !important;
    }

    /* Template Card Style */
    .template-table tr {
        display: grid !important;
        grid-template-columns: 100% !important;
        /* Force single column */
        gap: 8px;
        background: var(--surface-color);
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border-color);
        position: relative;
    }

    /* 1. Template Name (Top) */
    .template-table td[data-label="テンプレート名"] {
        display: block !important;
        font-weight: 700;
        font-size: var(--font-size-md);
        color: var(--text-color);
        padding: 0 !important;
        border: none;
        width: 100% !important;
        grid-column: 1 / -1 !important;
        order: 1 !important;
        /* Override any first-child rules */
    }

    /* 2. Content (Middle) - Truncate with 2-3 lines */
    .template-table td[data-label="内容"] {
        display: block !important;
        font-size: var(--font-size-sm2);
        color: var(--text-muted);
        padding: 4px 0 !important;
        border: none;
        width: 100% !important;
        max-width: 100% !important;
        /* Ensure it doesn't overflow */
        white-space: normal;
        /* Allow wrapping */
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        order: 2 !important;
    }

    /* 3. Actions (Bottom Right) */
    .template-table td[data-label="操作"] {
        display: flex !important;
        flex-direction: row !important;
        /* Override column */
        justify-content: flex-end !important;
        /* Right align */
        align-items: center;
        gap: 8px;
        padding: 8px 0 0 0 !important;
        border: none;
        border-top: 1px solid var(--bg-section-divider);
        width: 100% !important;
        margin-top: 4px;
        grid-column: 1 / -1 !important;
        order: 3 !important;
    }

    .template-table td[data-label="操作"] .btn {
        width: auto !important;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Override any interfering card-table styles */
    /* Checkbox styles removal */
    .template-table .card-checkbox {
        display: none !important;
    }

    /* Force all cells to be full width if not specified otherwise */
    .template-table td {
        min-width: 0;
    }
}