html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* スマホ専用調整ここから */
@media (max-width: 576px) {
    h2, h4 {
        font-size: 1.2rem;
    }

    .card {
        padding: 1rem;
    }

    .btn {
        font-size: 0.9rem;
    }

    footer .container {
        font-size: 0.85rem;
    }
}
@media (max-width: 576px) {
    .form-control,
    .form-select,
    .btn {
        font-size: 1rem;
    }

    .btn-lg {
        font-size: 1.1rem;
        padding: 0.75rem;
    }
}

/* スマホ専用調整ここまで */

/* ===============================
   Funect Portal - Dashboard Layout
   =============================== */

.admin-dashboard .tile-link {
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .admin-dashboard .tile-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.08);
    }

.admin-dashboard .tile-icon {
    width: 54px;
    height: 54px;
    background: #f3f5f7;
    border-radius: 50%;
}

.admin-dashboard .tile-disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* コードやURLの選択しやすさ */
.selectable {
    user-select: all;
    background: #fafafa;
    padding: 2px 6px;
    border-radius: 4px;
}

/* コピー後アニメーション */
.copy-btn.copied {
    filter: brightness(1.15);
    transition: filter .2s ease;
}

/* 見出しやカード間のバランス */
.admin-dashboard h2.h4 {
    font-weight: 600;
}

.admin-dashboard .card {
    border: 1px solid #e7e7e7;
    border-radius: 0.75rem;
}

    .admin-dashboard .card h3 {
        font-size: 1.1rem;
        font-weight: 600;
    }

/* モバイル調整（既存ルールを継承） */

@media (max-width: 576px) {
    .admin-dashboard .tile-icon {
        width: 46px;
        height: 46px;
    }

    .admin-dashboard .tile-link .fw-semibold {
        font-size: 0.95rem;
    }

    .admin-dashboard .card {
        padding: 1rem;
    }

    .admin-dashboard code.small {
        word-break: break-all;
    }
}
/* 行内情報（ラベル＋値＋コピー） */
.inline-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap; /* PCは必ず1行 */
}

    /* ラベルの見た目（小さめ・ややグレー） */
    .inline-info .label {
        white-space: nowrap;
        font-weight: 600;
        color: #6c757d;
        font-size: .9rem;
    }

    /* 長い値でも1行のまま横スクロールで崩さない */
    .inline-info .code-scroll {
        display: inline-block;
        max-width: 100%;
        overflow: auto; /* スマホで横スクロール可 */
        white-space: nowrap; /* 折り返さない */
        background: #fafafa;
        padding: 2px 6px;
        border-radius: 4px;
    }

/* スマホ微調整 */
@media (max-width: 576px) {
    .inline-info {
        gap: .4rem;
    }
}
/* 運用状況のステータス表示 */
.status-ok {
    color: #198754; /* Bootstrap text-success と同じ緑 */
    font-weight: 600;
}

.status-ng {
    color: #dc3545; /* Bootstrap text-danger と同じ赤 */
    font-weight: 600;
}
/* ===== ステータス全体 ===== */
.status-grid {
    display: grid;
    grid-template-columns: 120px auto; /* ← 左列を固定幅にするのがポイント */
    row-gap: .6rem;
    align-items: center;
}

/* 左：ラベル */
.status-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 500;
    color: #333;
}

/* 右：状態 */
.status-value {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ランプ */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.ok {
        background: #28a745;
    }

    .dot.warn {
        background: #adb5bd;
    }

    .dot.ng {
        background: #dc3545;
    }

/* テキスト色 */
.status-text {
    font-size: .85rem;
    font-weight: 600;
}

.ok-text {
    color: #28a745;
}
/* ← 稼働中を緑に */
.warn-text {
    color: #6c757d;
}

.ng-text {
    color: #dc3545;
}

/* ===== Dashboard Tiles - 1行横並び・高さ統一 ===== */
.admin-dashboard {
    margin-top: 0.25rem !important; /* ← ここを追加／調整 */
}

    .admin-dashboard .d-flex .tile-link {
        flex: 1 1 0;
        min-width: 160px;
        max-width: 200px;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease;
    }

    .admin-dashboard .d-flex {
        flex-wrap: nowrap !important;
        gap: 0.1rem; /* ← ボタン同士の横間隔を限界まで詰める */
        overflow-x: auto;
        margin-top: 0.25rem;
    }

        .admin-dashboard .d-flex .tile-link {
            flex: 1 1 0;
            min-width: 160px;
            max-width: 200px;
            height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
            margin-right: 0 !important; /* ← Bootstrapの内部margin無効化 */
            border-radius: 0.75rem;
        }

/* ============================================================
   Portal - カルテ編集ページ専用スタイル
   ============================================================ */

/* 全体レイアウト */
.karte-page {
    display: flex;
    gap: 1rem;
}

.karte-left {
    width: 260px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border-right: 1px solid #e5e5e5;
    padding-right: 0.75rem;
}

.karte-right {
    flex: 1;
    min-width: 0;
}

/* 左側：基本情報一覧 */
.karte-basic-item {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.15s ease;
}

    .karte-basic-item:hover {
        background: #f8f9fa;
    }

    .karte-basic-item.active {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13,110,253,.2);
    }

/* タブのスタイル */
.karte-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
    overflow-x: auto;
    gap: 4px;
}

.karte-tab {
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-bottom: none;
    transition: background .15s ease;
}

    .karte-tab.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        font-weight: bold;
    }

    .karte-tab:hover {
        background: #eaeaea;
    }

/* フォーム内要素 */
.karte-form {
    padding: 0.5rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

    .karte-form .form-group {
        margin-bottom: 1rem;
    }

/* 画像アップロード欄 */
.karte-image-box {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    background: #f8fafc;
    border: 2px dashed #c8d7e1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all .15s ease;
}

    .karte-image-box:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
    }

.karte-image-preview {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* 履歴カード */
.karte-history-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 12px;
    background: #fff;
}

.karte-history-header {
    font-weight: bold;
    margin-bottom: 6px;
}
/* --- カルテ一覧（左ペイン） --- */

.karte-list {
    overflow-y: auto;
    height: calc(100vh - 160px); /* 必要に応じて調整 */
}

/* 1行全体のレイアウト */
.karte-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: default; /* ← 矢印のまま */
    transition: background-color .15s ease, color .15s ease;
}

    /* ホバー時に薄いグレー背景 */
    .karte-item:hover {
        background-color: #f3f4f6;
    }

    /* 選択中（active）の行は青背景＋白文字 */
    .karte-item.active {
        background-color: #2563eb;
        color: #ffffff;
    }

        .karte-item.active .karte-item-meta {
            color: #e5e7eb !important;
        }

        .karte-item.active .badge {
            background-color: #f97373; /* NEWバッジは少し明るめにしてもOK */
        }

/* アバターアイコン */
.karte-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background-color: #e5e7eb;
}

/* テキストブロック */
.karte-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.karte-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.karte-item-meta {
    font-size: 0.75rem;
}
/* カルテ検索ボックスを丸く＆プレースホルダーを薄く */
.karte-search-input {
    border-radius: 999px; /* 丸み MAX（pill 形状） */
    padding-inline: 12px; /* 左右に少し余白 */
    font-size: 0.9rem;
}

    /* プレースホルダー文字を薄く */
    .karte-search-input::placeholder {
        color: #9ca3af; /* 薄いグレー */
        opacity: 1; /* 一部ブラウザ対策 */
    }
.karte-photo-thumb-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 8px;
}

.karte-photo-thumb {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
}
.karte-rating-star {
    font-size: 1.1rem;
}

    .karte-rating-star.filled {
        color: #f59e0b; /* ゴールドっぽい色 */
    }

    .karte-rating-star.empty {
        color: #d1d5db; /* 薄いグレー */
    }
/* 項目設定のサブメニュー（デフォルト非表示） */
.settings-group {
    position: relative;
}

.settings-sublist {
    display: none;
}

/* 親に .settings-open が付いているときだけ表示 */
.settings-group.settings-open .settings-sublist {
    display: block;
}

/* 少しインデントしたい場合はお好みで */
.settings-sublist .list-group-item {
    padding-left: 2.5rem;
    font-size: 0.9rem;
}
.settings-group.settings-open .settings-parent {
    background-color: #f8fafc; /* 薄いグレー程度 */
    font-weight: 600;
}
/* カルテ基本情報項目設定用のカード風レイアウト */
.kb-item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    background-color: #ffffff;
}

.kb-item-header {
    /* ここをスッキリさせる */
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: none; /* いったん線も消す */
}

.kb-description {
    margin-top: 0;
    white-space: normal;
}

.kb-order-badge {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.kb-actions .btn {
    padding-inline: 0.35rem;
}

/* 画面が狭いときは縦に積んで見やすく */
@media (max-width: 992px) {
    .kb-item {
        padding: 8px;
    }
}

/* ============================================================
   Portal - 問い合わせンメニュー専用スタイル
   ============================================================ */
.dropdown-toggle::after {
    display: none;
}

.dropdown-item:hover {
    background: #f6f7f9;
}

.navbar-brand {
    font-size: 1.2rem;
}
#helpMenu:hover {
    background-color: #f5f8ff;
    transform: scale(1.05);
    transition: 0.15s ease;
}
@media (max-width: 576px) {
    #helpMenu i {
        font-size: 1.6rem;
    }
}

/* 左ペインの製品リスト：選択時の文字色を白くする */
.list-group-item.active,
.list-group-item.active .small,
.list-group-item.active .text-muted {
    color: #fff !important;
}

    /* アイコンも白にしたい場合はこれ */
    .list-group-item.active i {
        color: #fff !important;
    }
.product-list-pane .input-group-sm .btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

/* ============================================================
   Portal - メニュー表専用スタイル
   ============================================================ */
.menu-sheet-card {
    background-color: #f8f7f5;
}

.menu-category-title {
    font-size: 1.3rem;
    letter-spacing: .15em;
}

.menu-category-body {
    padding-left: .25rem;
}

.menu-row + .menu-row {
    border-top: 1px solid #e5e7eb;
}

/* ============================================================
   Portal - 設定画面トップ専用スタイル
   ============================================================ */
.list-group-item i {
    opacity: .75;
    font-size: 1.1rem;
}

.settings-parent i {
    font-size: 1.2rem;
}