/**
 * 雀帳（じゃんちょう）- カスタムスタイル
 * 麻雀対局点数管理Webアプリケーション用CSS
 */

/* その他の共通スタイル */
.seat-name {
    font-size: 0.75rem;
    color: #666;
}

/* ログイン画面のロゴ画像スタイル */
.login-logo-image {
    max-width: 200px;
    height: auto;
    margin-bottom: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ログイン画面の上部余白調整 */
body.login-page {
    min-height: 100vh;
    padding-top: 1rem;
}

body.login-page .login-box {
    margin-top: 1rem;
}

/* スマホでの表示調整 */
@media (max-width: 768px) {
    .seat-name {
        font-size: 0.7rem;
    }

    .table td {
        padding: 0.5rem 0.5rem;
    }

    .table th {
        font-size: 0.85rem;
        padding: 0.5rem 0.5rem;
    }

    /* ログイン画面のスマホ対応 */
    .login-box, .register-box {
        margin-top: 1rem !important;
        width: 95% !important;
        margin-bottom: 1rem !important;
    }

    .login-logo {
        margin-bottom: 1rem !important;
    }

    .login-logo-image {
        max-width: 150px;
        margin-bottom: 8px;
    }

    /* ログイン画面の上部余白を調整 */
    body.login-page {
        padding-top: 0.5rem !important;
        min-height: 100vh !important;
    }

    /* ログインボックス全体の位置調整 */
    body.login-page .login-box {
        margin: -6rem auto 1rem auto !important;
    }
}
.h5, h5 {
    font-size: 1.1rem !important;
    font-weight: 700;
}

.card-header {
    padding: .45rem 1.25rem !important;
    height: 3rem;
}
.card-header > h2,
.card-header > h3 {
    margin-top: 0.4rem !important;
}

/* 雀帳ロゴのサイズ調整 */
.brand-image {
    max-height: 2.1rem !important;
    max-width: 2.1rem !important;
    opacity: 0.8 !important;
}

/* テーブル内の入力フィールドのマージン調整 */
.table td .form-control {
    margin-bottom: 0 !important;
}

/* スマホでのテーブル表示改善 */
@media (max-width: 768px) {
    .table-responsive table {
        min-width: 300px;
    }
    .table-responsive table tr th {
        font-size: 1rem;
    }
    .card-body {
        padding: 1rem;
    }

    .form-control-sm {
        font-size: 14px;
    }

    .input-group-sm .input-group-text {
        font-size: 12px;
        padding: 0.25rem 0.4rem;
    }

    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .info-box .info-box-content {
        padding: 0;
    }
}

/* 順位バッジのカスタムカラー */
.badge-rank-1 {
    background-color: #FBDA02 !important;
    color: #000 !important;
    border: 1px solid #fce75b !important;
    border-radius: 0 !important;
}

.badge-rank-2 {
    background-color: #D9D9D9 !important;
    color: #000 !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 0 !important;
}

.badge-rank-3 {
    background-color: #E9935D !important;
    color: #000 !important;
    border: 1px solid #e9a980 !important;
    border-radius: 0 !important;
}

.badge-rank-4 {
    background-color: #c3b8d0 !important;
    color: #000 !important;
    border: 1px solid #c9c2d1 !important;
    border-radius: 0 !important;
}

/* 順位テキストのカスタムカラー */
.text-rank-1 {
    color: #E6C200 !important;
    font-weight: bold;
}

.text-rank-2 {
    color: #A8A8A8 !important;
    font-weight: bold;
}

.text-rank-3 {
    color: #B87333 !important;
    font-weight: bold;
}

.text-rank-4 {
    color: #8B6DB0 !important;
    font-weight: bold;
}

/* 一覧画面のアクションボタン統一スタイル */
.btn-table-action {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
}

/* モバイルでのアクションボタン */
@media (max-width: 768px) {
    .btn-table-action {
        padding: 0.375rem 0.75rem;
        min-width: 70px;
    }
}

/* 一覧画面のカード間隔統一 */
.index-card {
    margin-bottom: 1rem;
}

.index-card .card-body {
    padding: 1rem;
}

/* ウマバッジの横幅統一 */
.badge-uma {
    min-width: 60px;
    display: inline-block;
    text-align: center;
}

.card-secondary:not(.card-outline)>.card-header {
    background-color: #1C4479;
}
.btn-info {
    background-color: #44A5CC;
    border-color: #44A5CC;
}
.btn-success {
    background-color: #3BB111;
    border-color: #3BB111;
}
.btn-primary {
    background-color: #2962AD;
    border-color: #2962AD;
}
.btn-danger {
    background-color: #CF2620;
    border-color: #CF2620;
}
.btn-mail {
    color: #FFF;
    background-color: #6FBB18;
    border-color: #6FBB18;
}
.btn-result {
    color: #fff;
    background-color: #9677BC;
    border-color: #9677BC;
}
.btn-clear {
    background-color: #B9DFEE;
    border-color: #B9DFEE;
}

.bg-info {
    background-color: #44A5CC !important;
}
.bg-warning {
    background-color: #F3C759 !important;
}
.bg-success,
.badge-success {
    background-color: #4AC44A !important;
}
.bg-primary,
.badge-primary {
    background-color: #628EC8 !important;
}
.bg-danger {
    background-color: #DF6561 !important;
}
.bg-success2 {
    background-color: #98D257 !important;
}

.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
}
.alert-success {
    color: #0a3622;
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}
.alert-danger {
    color: #58151c;
    background-color: #f8d7da;
    border-color: #f1aeb5;
}
.alert-warning {
    background-color: #cff4fc;
    border-color: #9eeaf9;
    color:#055160;
}
.alert-secondary {
    background-color: #cff4fc;
    border-color: #9eeaf9;
    color:#055160;
}
.alert-info {
    background-color: #cff4fc;
    border-color: #9eeaf9;
    color:#055160;
}
.alert-light {
    --bs-alert-color: var(--bs-light-text-emphasis);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-light-border-subtle);
    --bs-alert-link-color: var(--bs-light-text-emphasis);
}
.alert-dark {
    --bs-alert-color: var(--bs-dark-text-emphasis);
    --bs-alert-bg: var(--bs-dark-bg-subtle);
    --bs-alert-border-color: var(--bs-dark-border-subtle);
    --bs-alert-link-color: var(--bs-dark-text-emphasis);
}
.page-item.active .page-link {
    color: #fff;
    background-color: #628EC8;
    border-color: #628EC8;
}
div.dataTables_info {
    font-size: 0.8rem;
}

.alert a {
    color: #fff;
    text-decoration: none;
}

/* 二重送信防止: ボタン無効化スタイル */
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:disabled:hover {
    opacity: 0.65;
}

/* 送信中のスピナーアニメーション */
.fa-spinner.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* メンバー成績ボタンのスタイル */
.view-stats-btn {
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-stats-btn i {
    font-size: 14px;
}

/* モバイルでの成績ボタン調整 */
@media (max-width: 768px) {
    .view-stats-btn {
        width: 30px;
        height: 30px;
    }

    .view-stats-btn i {
        font-size: 12px;
    }
}

/* info-boxのアイコンサイズを小さく調整 */
.info-box-icon {
    font-size: 1.5rem !important;
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
}

.info-box-icon i {
    font-size: 1.5rem !important;
}

/* 順位分布のレスポンシブ対応 */
.rank-distribution-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
    justify-content: center;
}

.rank-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

/* タブレット・PC: 4列表示 */
@media (min-width: 769px) {
    .rank-item {
        max-width: 25%;
    }
}

/* スマホ横向き: 4列表示 */
@media (max-width: 768px) and (orientation: landscape) {
    .rank-item {
        max-width: 25%;
    }
}

/* スマホ縦向き: 2列表示（2行） */
@media (max-width: 768px) and (orientation: portrait) {
    .rank-item {
        max-width: 50%;
    }

    .rank-item:nth-child(3),
    .rank-item:nth-child(4) {
        margin-top: 10px;
    }
}

/* スマホでの調整 */
@media (max-width: 768px) {
    .info-box-icon {
        font-size: 1.2rem !important;
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
    }

    .info-box-icon i {
        font-size: 1.2rem !important;
    }
}