﻿/* Deep-blue gradient skin to match header/footer */
:root {
    --sidebar-width: 260px; /* 你可調整側欄寬度 */
    --bs-card-border-radius: 0; /*全站卡片都關掉圓角*/
    /* 也建議把通用圓角一併歸零，避免其它元件圓角 */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --content-gap: 10px; /* 右邊外邊距 */
}

.card {
    border-radius: 0 !important;
}

.sidebar-skin .card {
    background: linear-gradient(135deg, #0a2e6b 0%, #0d6efd 100%);
    /*border-radius: 0.75rem;*/
}

.sidebar-skin .list-group-item {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255,255,255,0.15);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

    .sidebar-skin .list-group-item.sidebar-trigger {
        font-weight: 600;
        letter-spacing: .2px;
    }

    .sidebar-skin .list-group-item:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }

.sidebar-skin .sidebar-link.active {
    background: rgba(0,0,0,0.25);
    color: #fff;
    border-left: 4px solid rgba(255,255,255,0.9);
    padding-left: 1.25rem;
}

.sidebar-skin .sidebar-link {
    transition: background .2s ease, padding-left .2s ease, color .2s ease;
}

.sidebar-skin .menu-caret {
    transition: transform .2s ease, color .2s ease;
    color: #ffffff;
    opacity: .9;
}
/* rotate caret based on aria-expanded */
a[aria-expanded="true"] .menu-caret {
    transform: rotate(0deg);
}

a[aria-expanded="false"] .menu-caret {
    transform: rotate(-90deg);
}

/* Card shadow tweak to match theme */
.manage-sidebar .card {
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* 固定貼齊最左側（桌機/平板） */
@media (min-width: 768px) {
    .admin-sidebar {
        position: fixed;
        top: 56px; /* 如果你的 navbar 是 fixed-top，改成 top: 56px 或實際高度 */
        left: 0;
        width: var(--sidebar-width);
        height: calc(100vh - 56px); /* 貼滿除導覽列外的高度 */        
        overflow-y: auto;
        z-index: 1030; /* 高於一般內容，低於 offcanvas/modal */
        border-right: 1px solid rgba(0,0,0,.1);
    }

    /* 右側內容統一右移，避免被側欄遮住 */
    .admin-content {
        position: relative;
        top: -8px;
        margin-left: var(--sidebar-width); /* 與側欄對齊 */
        padding: 0; /* 不留空白 */
        background-color: #f8f9fa;
        /*height: calc(100vh - 80px);
        display: flex;
        flex-direction: column;
        overflow: auto;*/
    }

    /* 移除 Bootstrap 預設 body margin */
   /* body {
        margin: 0 !important;
        padding: 0 !important;
    }*/

    /* 防止 container 被 Bootstrap 撐開間距 */
    /*.admin-content .container,
    .admin-content .container-fluid,
    .admin-content .row {
        margin: 0 !important;
        padding: 0 !important;
    }*/

        /* 避免 Bootstrap 預設 gutter 撐開 */
        .admin-content .row {
            --bs-gutter-x: 0;
        }
}

/* Responsive spacing */
/* 手機斷點以下：不固定，跟著版面流動（避免遮擋） */
@media (max-width: 767.98px) {
    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        overflow: visible;
        margin-bottom: 1rem;
    }

    .admin-content {
        margin: 0 12px;
    }   
}

/* 子選單（sidebar-link）改為白底黑字 */
.sidebar-skin .collapse .list-group-item.sidebar-link {
    background: #fff !important;
    color: #212529 !important; /* 黑字 */
    border-color: #e9ecef !important;
}

    /* 子選單 hover/active 效果 */
    .sidebar-skin .collapse .list-group-item.sidebar-link:hover {
        background: #f8f9fa !important; /* 淺灰 */
        color: #0a2e6b !important; /* 深藍字 */
    }

    .sidebar-skin .collapse .list-group-item.sidebar-link.active {
        background: #eef4ff !important; /* 很淡的藍 */
        color: #0a2e6b !important;
        border-left: 4px solid #0d6efd !important;
        padding-left: 1.25rem; /* 跟先前一致 */
    }
