/*
 * ファイル名: styles.css (最終調整版)
 * 場所: public_html/assets/css/
 */

/* -------------------------------------------
 * 全体的なリセットとダークテーマの適用
 * ------------------------------------------- */
body { 
    font-family: sans-serif; 
    margin: 0;
    background-color: #111 !important; /* 背景を黒く強調 */
    color: #ddd; /* 明るい文字色 */
}

/* Bootstrapの標準スタイルを上書きして完全にダーク化 */
.bg-dark, .navbar-dark, footer.bg-dark {
    background-color: #000 !important;
}

/* アクセントカラー */
.text-emphasis {
    color: #ff3333 !important; /* 強制的に赤を適用 */
}

/* リンクの基本色 */
a {
    color: #ccc;
    text-decoration: none;
}
a:hover {
    color: #ff3333; /* ホバーで赤に */
}
/* Bootstrapの.nav-linkも上書き */
.nav-link {
    color: #ccc !important;
}
.nav-link:hover {
    color: #ff3333 !important;
}

/* -------------------------------------------
 * レイアウト要素 (コントラスト強化)
 * ------------------------------------------- */

/* 【重要修正】フッターとヘッダーの間にあるメインコンテナの背景色を統一 */
.container {
    background-color: #111 !important;
    padding-top: 20px;
}

/* 【重要修正】パンくずリストの背景色を黒に */
.breadcrumb {
    background-color: #1a1a1a !important; 
    border: 1px solid #333;
}
.breadcrumb-item a {
    color: #ddd !important;
}
.breadcrumb-item.active {
    color: #ff3333 !important; /* 現在地を赤で強調 */
}

.sidebar {
    background-color: #222 !important;
    padding: 15px;
    border-radius: .25rem;
    border: 1px solid #333;
    color: #ddd;
}

.main-content-card {
    background-color: #222 !important;
    padding: 20px;
    border-radius: .5rem;
    color: #ddd;
}

/* -------------------------------------------
 * ナビゲーション コンパクトスタイル
 * ------------------------------------------- */
.navbar-compact .navbar-brand, 
.navbar-compact .navbar-text, 
.navbar-compact .btn, 
.navbar-compact .form-control {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    font-size: 0.8rem;
    line-height: 1.2;
    height: auto !important;
}

.navbar-compact.navbar {
    padding-top: 0.3rem; 
    padding-bottom: 0.3rem;
    align-items: center;
}

.login-form-compact .form-control-sm {
    width: 100px;
}

.login-form-compact {
    flex-wrap: nowrap;
    margin-left: 10px;
}

/* ===============================================
 * フッター領域の視認性改善
 * =============================================== */

/* フッターコンテナ全体 */
footer {
    /* 現在の背景色 #111 よりも少し明るい背景色を設定し、浮き上がらせる */
    background-color: #1a1a1a !important; 
    
    /* 上部に細い区切り線を入れ、メインコンテンツとフッターを明確に分ける */
    border-top: 2px solid #333 !important; 
    
    /* 上下のパディングを増やし、領域を確保 */
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    
    /* テキスト全体を明るい色にする */
    color: #cccccc !important;
    font-size: 0.9rem;
}

/* 著作権表示（Copyright）部分 */
.copyright-text {
    color: #999999 !important; /* 著作権表示は少し暗いトーンで */
    font-size: 0.8rem;
    margin-top: 15px; /* 上部に余白を追加 */
}

/* フッター内のリンク */
footer a {
    color: #ffcccc !important; /* リンクを明るい赤/ピンク系にして目立たせる */
    text-decoration: none; /* 下線をなくし、モダンに */
    transition: color 0.2s;
}

footer a:hover {
    color: #ff3333 !important; /* ホバー時に強い赤で強調 */
    text-decoration: underline; /* ホバー時のみ下線を表示 */
}

/* フッターの各セクションのタイトル */
.footer-title {
    color: #ffffff !important; /* タイトルを純粋な白にして強調 */
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #333; /* タイトルの下に細い線 */
    padding-bottom: 5px;
}

/* style.css (例) */

.work-card .card-footer a {
    /* リンク全体をブロック要素にしてフッター全体に広げる */
    display: block; 
    /* 左右のパディングでリンクのクリック領域を確保 */
    padding: 0.5rem; 
    /* 背景色とテキスト色の調整 */
    background-color: #343a40; /* bg-secondary と同等 */
    color: #fff; /* テキストを白色に */
    text-align: center;
    
    /* リンクテキストが長すぎる場合の処理 */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出した部分を隠す */
    text-overflow: ellipsis; /* ... で省略記号を表示 */
}

.work-card .card-footer a:hover {
    background-color: #495057; /* ホバー時の色変更 */
    text-decoration: none;
}