/**
 * EXPOT Tabler Custom Styles
 * Tabler純正スタイルベース
 *
 * トンマナカラー: #5E67AE (R:94 G:103 B:174)
 */

/* ==========================================================================
   Color Theme - EXPOT Brand Color
   ========================================================================== */

:root {
    --tblr-primary: #5E67AE;
    --tblr-primary-rgb: 94, 103, 174;
    --tblr-primary-darken: #4a5299;
    --tblr-primary-lighten: #7a82bf;
}

/* ==========================================================================
   Sidebar / Navigation - 余裕を持たせる
   ========================================================================== */

.navbar-vertical.navbar-dark {
    background: linear-gradient(180deg, #5E67AE 0%, #4a5299 100%);
}

/* ロゴエリア */
.navbar-vertical .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar-vertical .navbar-brand a {
    display: block;
}

.navbar-vertical .navbar-brand-image {
    max-height: 56px;
    width: auto;
}

/* PC時にサイドバー幅いっぱいにブランドエリアを表示 */
@media (min-width: 992px) {
    .navbar-vertical .container-fluid {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }

    .navbar-vertical .navbar-brand {
        padding: 1rem 1.5rem;
        justify-content: center !important;
        width: 100%;
    }

    .navbar-vertical .navbar-brand a {
        display: block;
        width: 100%;
    }

    .navbar-vertical .navbar-brand-image {
        display: block;
        margin-left: 0.5rem !important;
        margin-right: auto !important;
        width: 75% !important;
        max-width: 75% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* ナビリンク - 上下の余白を増やす */
.navbar-vertical .nav-link {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.navbar-vertical .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
}

/* ナビアイテム間のスペース */
.navbar-vertical .navbar-nav > .nav-item {
    margin-bottom: 0.125rem;
}

/* ドロップダウンメニュー */
.navbar-vertical .dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.25rem 0 0.5rem 1rem;
    margin: 0;
}

.navbar-vertical .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.125rem;
}

.navbar-vertical .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.navbar-vertical .dropdown-item.active {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
}

/* ==========================================================================
   Page Layout
   ========================================================================== */

.page-body {
    padding-top: 0;
    padding-bottom: 1rem;
}

.container-xl {
    max-width: 1320px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(94, 103, 174, 0.15);
}

.card-header {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #5E67AE 0%, #7a82bf 100%);
    border-bottom: none;
}

.card-header .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.card-header .card-actions .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.card-header .card-actions .btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

.card-header .card-actions .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.card-header .card-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.card-body {
    padding: 1.25rem;
}

/* カードフッター - 左右マージンなしの罫線 */
.card-footer {
    padding: 1rem 1.25rem;
    background-color: transparent;
    border-top: 1px solid #dadfe5;
}

/* ダッシュボード統計カードのサブヘッダー */
.subheader {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #626976;
    text-transform: none;
    letter-spacing: 0;
}

/* バッジの配色調整 - 白文字で統一 */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-green,
.badge.bg-yellow,
.badge.bg-orange,
.badge.bg-red,
.badge.bg-azure {
    color: #fff !important;
}

/* ==========================================================================
   Alert - ステータス表示用（白文字＋背景ベタ塗り）
   ========================================================================== */

/* Flashメッセージ用 alert-important */
.alert-important {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-important .alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-important .alert-icon i {
    font-size: 1.25rem;
}

.alert-important .alert-content {
    flex: 1;
}

.alert-important .btn-close {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
    padding: 0.5rem;
}

/* アラート - 左ボーダーアクセント + ライト背景スタイル */
.alert-success {
    background-color: rgba(47, 179, 68, 0.1);
    border: 1px solid rgba(47, 179, 68, 0.3);
    border-left: 4px solid #2fb344;
    color: #1e7a2e;
}

.alert-warning {
    background-color: rgba(245, 159, 0, 0.1);
    border: 1px solid rgba(245, 159, 0, 0.3);
    border-left: 4px solid #f59f00;
    color: #946000;
}

.alert-danger {
    background-color: rgba(214, 57, 57, 0.1);
    border: 1px solid rgba(214, 57, 57, 0.3);
    border-left: 4px solid #d63939;
    color: #a02727;
}

.alert-info {
    background-color: rgba(66, 153, 225, 0.1);
    border: 1px solid rgba(66, 153, 225, 0.3);
    border-left: 4px solid #4299e1;
    color: #2b6cb0;
}

.alert-secondary {
    background-color: rgba(108, 122, 145, 0.1);
    border: 1px solid rgba(108, 122, 145, 0.3);
    border-left: 4px solid #6c7a91;
    color: #4a5568;
}

/* オレンジ色のアラート（未提出・期限オーバー用） */
.alert-orange {
    background-color: rgba(253, 126, 20, 0.1);
    border: 1px solid rgba(253, 126, 20, 0.3);
    border-left: 4px solid #fd7e14;
    color: #c05600;
}

.badge.bg-success {
    background-color: #2fb344 !important;
}

.badge.bg-warning {
    background-color: #f59f00 !important;
}

.badge.bg-danger {
    background-color: #d63939 !important;
}

.badge.bg-info {
    background-color: #4299e1 !important;
}

.badge.bg-secondary {
    background-color: #6c7a91 !important;
}

/* カードホバーエフェクト */
.card-link-pop {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link-pop:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Tables - Tabler標準に寄せる
   ========================================================================== */

.table {
    font-size: 0.875rem;
}

/* ストライプ（縞模様）テーブル */
.table tbody tr:nth-child(odd) {
    background-color: rgba(94, 103, 174, 0.03);
}

.table tbody tr:nth-child(even) {
    background-color: #fff;
}

/* ホバー効果 */
.table tbody tr:hover {
    background-color: rgba(94, 103, 174, 0.08);
}

.table th,
.table thead th,
.card-table th,
.card-table thead th {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #8a9199;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    border-bottom-width: 1px;
    background-color: transparent;
}

/* テーブルヘッダー内のリンクも薄い色に */
.table th a,
.table thead th a,
.card-table th a,
.card-table thead th a {
    color: #8a9199;
    text-decoration: none;
}

.table th a:hover,
.table thead th a:hover,
.card-table th a:hover,
.card-table thead th a:hover {
    color: #6c7a91;
    text-decoration: none;
}

/* ソート可能なカラムヘッダー - Tabler風 */
.table th a,
.table thead th a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ソート矢印アイコン - Paginatorソートリンク用（asc/descクラス、またはsortableクラスがある場合のみ表示） */
/* ソート可能だがまだソートされていない状態（両方向矢印） */
.table th a.sortable::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 15l5 5 5-5'/%3e%3cpath d='M7 9l5-5 5 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.table th a.sortable:hover::after {
    opacity: 1;
}

/* 昇順ソート中（asc） - Paginatorが自動付与 */
.table th a.asc::after,
.table th.asc a::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E67AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 9l5-5 5 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
}

/* 降順ソート中（desc） - Paginatorが自動付与 */
.table th a.desc::after,
.table th.desc a::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E67AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 15l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
}

/* ソート可能なリンク色をブランドカラーに（通常リンクと区別） */
.table th a.sortable,
.table th a.asc,
.table th a.desc,
.table th.asc a,
.table th.desc a,
.table thead th a.sortable,
.table thead th a.asc,
.table thead th a.desc,
.table thead th.asc a,
.table thead th.desc a,
.card-table th a.sortable,
.card-table th a.asc,
.card-table th a.desc,
.card-table th.asc a,
.card-table th.desc a {
    color: #5E67AE;
}

.table th a.sortable:hover,
.table th a.asc:hover,
.table th a.desc:hover,
.table th.asc a:hover,
.table th.desc a:hover,
.table thead th a.sortable:hover,
.table thead th a.asc:hover,
.table thead th a.desc:hover,
.table thead th.asc a:hover,
.table thead th.desc a:hover,
.card-table th a.sortable:hover,
.card-table th a.asc:hover,
.card-table th a.desc:hover,
.card-table th.asc a:hover,
.card-table th.desc a:hover {
    color: #4a5299;
}

.table td {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.table td.actions {
    white-space: nowrap;
}

/* テーブル内アクションリンク - Tabler風 */
.table td.actions a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #626976;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid #dadfe5;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.table td.actions a:hover {
    color: #5E67AE;
    border-color: #5E67AE;
    background-color: rgba(94, 103, 174, 0.05);
}

/* 編集リンク */
.table td.actions a[href*="edit"],
.table td.actions a[href*="Edit"] {
    color: #206bc4;
    border-color: rgba(32, 107, 196, 0.3);
}

.table td.actions a[href*="edit"]:hover,
.table td.actions a[href*="Edit"]:hover {
    color: #1a569d;
    border-color: #206bc4;
    background-color: rgba(32, 107, 196, 0.08);
}

/* 削除リンク */
.table td.actions a[href="#"],
.table td.actions a[data-confirm-message],
.table td.actions a[onclick*="confirm"] {
    color: #d63939;
    border-color: rgba(214, 57, 57, 0.3);
}

.table td.actions a[href="#"]:hover,
.table td.actions a[data-confirm-message]:hover,
.table td.actions a[onclick*="confirm"]:hover {
    color: #b52d2d;
    border-color: #d63939;
    background-color: rgba(214, 57, 57, 0.08);
}

/* 詳細・閲覧リンク */
.table td.actions a[href*="view"],
.table td.actions a[href*="View"] {
    color: #2fb344;
    border-color: rgba(47, 179, 68, 0.3);
}

.table td.actions a[href*="view"]:hover,
.table td.actions a[href*="View"]:hover {
    color: #268f38;
    border-color: #2fb344;
    background-color: rgba(47, 179, 68, 0.08);
}

/* その他の管理系リンク */
.table td.actions a[href*="index"],
.table td.actions a[href*="config"],
.table td.actions a[href*="Config"],
.table td.actions a[href*="log"],
.table td.actions a[href*="Log"],
.table td.actions a[href*="categor"] {
    color: #626976;
    border-color: #dadfe5;
}

.table td.actions a[href*="index"]:hover,
.table td.actions a[href*="config"]:hover,
.table td.actions a[href*="Config"]:hover,
.table td.actions a[href*="log"]:hover,
.table td.actions a[href*="Log"]:hover,
.table td.actions a[href*="categor"]:hover {
    color: #5E67AE;
    border-color: #5E67AE;
    background-color: rgba(94, 103, 174, 0.05);
}

/* card-table (カード内テーブル) */
.card-table {
    margin-bottom: 0;
}

.card-table th:first-child,
.card-table td:first-child {
    padding-left: 1.25rem;
}

.card-table th:last-child,
.card-table td:last-child {
    padding-right: 1.25rem;
}

/* ==========================================================================
   Forms - 余裕のあるレイアウト
   ========================================================================== */

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-control,
.form-select {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* パスワード表示アイコン等の中央揃え */
.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-text a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* input-group-flat のアイコン中央揃え */
.input-group-flat .input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.75rem !important;
}

.input-group-flat .input-group-text a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1;
}

/* チェックボックスとラベルを横並びにする */
.form-group:has(.form-check-input) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-group .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.form-group .form-check-label,
.form-group span.form-check-label {
    margin: 0;
    display: inline;
}

/* フォームグループの間隔 */
.mb-3 {
    margin-bottom: 1.25rem !important;
}

/* 水平フォーム（row形式）の各行に下余白 */
.card-body > .row {
    margin-bottom: 1rem;
}

.card-body > .row:last-child {
    margin-bottom: 0;
}

/* form-horizontal内の行間隔 */
.form-horizontal .row {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.form-horizontal .row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ラベルの垂直中央揃え */
.form-horizontal .col-form-label {
    padding-top: 0.5rem;
    font-weight: 500;
}

/* セレクトボックスのスタイル（Tabler風） - すべてのselectに適用 */
select,
.form-select,
select.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1d273b;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23626976' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #dadfe5;
    border-radius: 4px;
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select:focus,
.form-select:focus,
select.form-control:focus {
    border-color: #5E67AE;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(94, 103, 174, 0.25);
}

/* form-group の旧Material互換 */
.form-group {
    margin-bottom: 1rem;
}

.form-group.has-default {
    margin-bottom: 0;
}

/* Bootstrap 4 form-inline互換（Bootstrap 5では廃止） */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.5rem;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline .btn {
    vertical-align: middle;
}

/* 必須マーク */
.required label::after,
label.required::after {
    content: " *";
    color: var(--tblr-danger);
}

/* 必須バッジ (span.req, span.requiredMark, span.required-mark) - Tabler風 */
span.req,
.req,
span.requiredMark,
.requiredMark,
span.required-mark,
.required-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background-color: #d63939;
    border-radius: 4px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* 任意バッジ */
span.optional,
.optional,
span.optionalMark,
.optionalMark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background-color: #6c7a91;
    border-radius: 4px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ==========================================================================
   Checkboxes - Tabler Style
   ========================================================================== */

/* CakePHP FormHelperが出力するチェックボックスをTabler風に */
.form-group input[type="checkbox"],
.checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    margin-right: 0.5rem;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #dadfe5;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-group input[type="checkbox"]:checked,
.checkbox input[type="checkbox"]:checked {
    background-color: #5E67AE;
    border-color: #5E67AE;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
}

.form-group input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus {
    border-color: #5E67AE;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(94, 103, 174, 0.25);
}

.form-group input[type="checkbox"]:disabled,
.checkbox input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* チェックボックスのラベル */
.form-group input[type="checkbox"] + label,
.checkbox label {
    display: inline;
    font-weight: 400;
    cursor: pointer;
}

/* Tabler form-check スタイル */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-inline-start: 2rem;
    margin-bottom: 0.5rem;
    user-select: none;
}

.form-check .form-check-input {
    float: left;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    margin-inline-start: -2rem;
    margin-top: 0.125rem;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
    border: 1px solid #dadfe5;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-check .form-check-input:checked {
    background-color: #5E67AE;
    border-color: #5E67AE;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
}

.form-check .form-check-input:focus {
    border-color: #5E67AE;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(94, 103, 174, 0.25);
}

.form-check .form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-check .form-check-label,
.form-check span.form-check-label,
.form-group span.form-check-label,
span.form-check-label,
.form-check-label {
    display: block !important;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.5;
}

/* 一覧ページのチェックボックス（テーブル内） */
.table input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #dadfe5;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.table input[type="checkbox"]:checked {
    background-color: #5E67AE;
    border-color: #5E67AE;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
}

.table input[type="checkbox"]:focus {
    border-color: #5E67AE;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(94, 103, 174, 0.25);
}

/* テーブル内チェックボックスとラベルの間隔 */
.table .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table .form-check .form-check-input {
    margin: 0;
}

.table .form-check .form-check-label {
    margin: 0;
    padding-left: 0;
}

/* ファイルアップロードプレビュー */
.file-preview {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 0.25rem;
    background: #fff;
}

/* フォーム内のボタン間隔 */
.form-footer {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--tblr-border-color);
}

/* panel-footer（旧Material Dashboard互換） - card-body内で左右いっぱいに罫線を表示 */
.panel-footer {
    margin-top: 1.5rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1rem 1.25rem 0;
    border-top: 1px solid #dadfe5;
}

/* ==========================================================================
   Form Validation Errors - Tabler Style
   ========================================================================== */

/* CakePHP FormHelper エラーメッセージ */
.error-message,
.invalid-feedback,
.form-group .error,
div.error,
p.error {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #d63939;
}

/* エラー状態の入力フィールド（input, select） */
.is-invalid,
.has-danger .form-control,
.has-danger .form-select,
.form-control.error,
.form-select.error,
.form-control.form-error,
.form-select.form-error,
input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #d63939;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d63939'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* エラー状態のtextarea（アイコンなし、枠線のみ） */
textarea.is-invalid,
textarea.form-error,
textarea.error,
textarea[aria-invalid="true"] {
    border-color: #d63939;
    background-image: none;
}

.is-invalid:focus,
.has-danger .form-control:focus,
.has-danger .form-select:focus,
.form-control.form-error:focus,
.form-select.form-error:focus,
[aria-invalid="true"]:focus {
    border-color: #d63939;
    box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25);
}

/* has-danger クラスでのラベル色変更 */
.has-danger label {
    color: #d63939;
}

/* Vue.jsやJS用のエラー表示 */
.text-danger.error,
.error.text-danger {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

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

.btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* ボタングループ */
.btn-group-actions {
    display: flex;
    gap: 0.375rem;
}

/* テキスト右寄せのボタングループに下マージン */
.text-right .btn-group,
.text-end .btn-group {
    margin-bottom: 1rem;
}

.text-right > .btn-group:last-child,
.text-end > .btn-group:last-child {
    margin-bottom: 1rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    gap: 0.25rem;
}

.page-link {
    font-size: 0.875rem;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

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

.nowrap {
    white-space: nowrap;
}

/* ギャップユーティリティ */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* ==========================================================================
   Row Cards (カードグリッド)
   ========================================================================== */

.row-cards > [class*="col-"] {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* ==========================================================================
   旧テンプレート互換
   ========================================================================== */

/* material-icons は表示しない */
.material-icons {
    display: none;
}

/* ==========================================================================
   Template Edit (Vue draggable)
   ========================================================================== */

/* draggableのulリストマーカーを非表示 */
draggable[tag="ul"],
ul[data-draggable],
.card-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* template-editのチェックボックス中央寄せ */
.form-check.text-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-check.text-center .form-check-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ドラッグ&ドロップ アニメーション */
.flip-list-move {
    transition: transform 0.3s ease;
}

/* ドラッグ中のゴースト要素（元の位置に残る影） */
.draggable-ghost {
    opacity: 0.4;
    background: #f0f4ff;
    border: 2px dashed #5E67AE;
    border-radius: 8px;
}

/* ドラッグで選択された要素 */
.draggable-chosen {
    background: #fff;
    box-shadow: 0 8px 25px rgba(94, 103, 174, 0.3);
    border-radius: 8px;
    transform: scale(1.02);
}

/* ドラッグ中の要素 */
.draggable-drag {
    opacity: 1;
    background: #fff;
    box-shadow: 0 12px 35px rgba(94, 103, 174, 0.4);
    border-radius: 8px;
}

/* 旧card-header-iconスタイルをブランドカラーに */
.card-header-icon {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #5E67AE 0%, #7a82bf 100%);
    border-bottom: none;
}

.card-header-icon .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* 旧カラークラスもブランドカラーに統一 */
.card-header-primary,
.card-header-info,
.card-header-success,
.card-header-warning,
.card-header-danger {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #5E67AE 0%, #7a82bf 100%);
    border-bottom: none;
}

.card-header-primary .card-title,
.card-header-info .card-title,
.card-header-success .card-title,
.card-header-warning .card-title,
.card-header-danger .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* ==========================================================================
   Tabs - Tabler Style
   ========================================================================== */

/* タブナビゲーション */
.nav-tabs {
    border-bottom: 1px solid #dadfe5;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #626976;
    background-color: transparent;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
}

/* 非活性タブに枠線を表示 */
.nav-tabs .nav-link:not(.active) {
    border-color: #dadfe5 #dadfe5 transparent;
    background-color: rgba(0, 0, 0, 0.02);
}

/* ホバー時 */
.nav-tabs .nav-link:hover:not(.active) {
    border-color: #dadfe5 #dadfe5 transparent;
    background-color: rgba(0, 0, 0, 0.04);
}

/* 活性タブ */
.nav-tabs .nav-link.active {
    color: #5E67AE;
    background-color: #fff;
    border-color: #dadfe5 #dadfe5 #fff;
    font-weight: 500;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .page-body {
        padding-top: 0;
        padding-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .table {
        font-size: 0.8125rem;
    }

    .table th,
    .table td {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.5rem;
    }
}

/* ==========================================================================
   Table Scroll Indicator - 横スクロールインジケーター
   ========================================================================== */

.table-responsive {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-indicator.visible {
    opacity: 0.85;
}

.scroll-indicator-inner {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.scroll-indicator-inner i {
    font-size: 1.25rem;
}

/* フリーテキスト内のテーブル（TinyMCEで作成された表のborderを復元） */
.freetext-content table {
    border-collapse: collapse;
    width: auto;
    margin-bottom: 1rem;
}
.freetext-content table td,
.freetext-content table th {
    border: 1px solid #ccc;
    padding: 6px 10px;
}
.freetext-content table th {
    background-color: #f5f5f5;
}

/*
 * 外部サイトからコピペされたHTMLによる表示崩れを防止する
 * Tabler 本体が <pre> に背景色を当てるため「黒塗り」現象が発生するケースや、
 * インラインで極端な font-size が指定されるケースを .freetext-content 配下で正規化する
 */
.freetext-content pre {
    background-color: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.freetext-content [style*="font-size"] {
    font-size: inherit !important;
}