/* static/admin/css/custom_admin.css */
/* なぎの木 管理画面カスタムCSS */

/* ダークモード対応 */
:root {
    --primary-color: #0c4b33;
    --secondary-color: #44b78b;
    --hover-color: rgba(68, 183, 139, 0.1);
}

/* ヘッダーカスタマイズ */
#header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* サイドバーのスタイル改善 */
.nav-sidebar .module caption,
.nav-sidebar .module h2,
.module caption,
.module h2,
tbody th[scope="row"],
tbody tr:first-child th {
    position: relative;
    transition: background-color 0.2s;
}

/* 折りたたみアイコンのスタイル */
.menu-toggle-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    transition: transform 0.2s ease;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    margin-right: 5px;
    user-select: none;
}

.menu-toggle-icon:hover {
    color: var(--secondary-color);
}

/* モジュールヘッダーのホバー効果 */
.module caption:hover,
.module h2:hover,
tbody th[scope="row"]:hover {
    background-color: var(--hover-color);
    cursor: pointer;
}

/* 折りたたみ時のアニメーション */
.module tr,
.nav-sidebar .module tr {
    transition: opacity 0.2s ease, height 0.2s ease;
}

.module tr.collapsing {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* メインコンテンツエリアのモジュール */
#content-main .module {
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#content-main .module caption,
#content-main .module h2 {
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

#content-main .module caption:hover,
#content-main .module h2:hover {
    background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
}

/* ダークモード対応（システム設定に従う） */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #1a5c42;
        --secondary-color: #5ec49e;
        --hover-color: rgba(94, 196, 158, 0.2);
    }
    
    #content-main .module caption,
    #content-main .module h2 {
        background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
        color: #e0e0e0;
    }
    
    #content-main .module caption:hover,
    #content-main .module h2:hover {
        background: linear-gradient(135deg, #333333, #222222);
    }
    
    .menu-toggle-icon {
        color: #aaa;
    }
    
    .menu-toggle-icon:hover {
        color: var(--secondary-color);
    }
}

/* 管理画面インデックスページのモジュール */
.dashboard .module table {
    width: 100%;
}

.dashboard .module tbody {
    display: table-row-group;
}

/* アニメーション改善 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* 展開・折りたたみ時のアニメーション */
.expanding {
    animation: slideDown 0.3s ease;
}

.collapsing {
    animation: slideUp 0.3s ease;
}