/* === 海洋魚塭配色變數 === */
:root {
    --ocean-deep: #0A3D62;
    --ocean-deep-light: #0E4D78;
    --ocean-water: #1B9CFC;
    --ocean-green: #55E6C1;
    --ocean-warm: #F39C12;
    --ocean-sand: #F8F9FA;
    --ocean-text: #2C3E50;
    --sidebar-text: #CBD5E1;
    --sidebar-width: 240px;
    --header-height: 60px;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

body {
    margin: 0;
    padding: 0;
    color: var(--ocean-text);
    background-color: var(--ocean-sand);
}

/* === 頂部列 === */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(135deg, var(--ocean-deep) 0%, #0C4A75 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.top-header .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.top-header .brand:hover {
    color: var(--ocean-green);
}

.top-header .brand-icon {
    font-size: 1.5rem;
}

.top-header .user-menu .dropdown-toggle {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.top-header .user-menu .dropdown-toggle:hover {
    color: var(--ocean-green);
}

.top-header .user-menu .dropdown-toggle::after {
    display: none;
}

/* 漢堡按鈕 */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
}

.sidebar-toggle:hover {
    color: var(--ocean-green);
}

/* === 左側選單 === */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--ocean-deep);
    color: var(--sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1020;
    transition: transform 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* sidebar 捲軸美化 */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* 選單樣式 */
.sidebar-nav {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.sidebar-nav .menu-parent > button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.2rem;
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sidebar-nav .menu-parent > button:hover {
    background: var(--ocean-deep-light);
    color: #fff;
}

.sidebar-nav .menu-parent > button[aria-expanded="true"] {
    color: #fff;
}

.sidebar-nav .menu-parent > button .bi {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.sidebar-nav .menu-parent > button[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

/* 子選單 */
.sidebar-nav .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.15);
}

.sidebar-nav .submenu a {
    display: block;
    padding: 0.6rem 1.2rem 0.6rem 2.2rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.sidebar-nav .submenu a:hover {
    background: var(--ocean-deep-light);
    color: #fff;
    border-left-color: var(--ocean-water);
}

.sidebar-nav .submenu a.active {
    color: #fff;
    background: var(--ocean-deep-light);
    border-left-color: var(--ocean-green);
    font-weight: 500;
}

/* 無子項的主選單連結 */
.sidebar-nav .menu-single a {
    display: block;
    padding: 0.75rem 1.2rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
}

.sidebar-nav .menu-single a:hover {
    background: var(--ocean-deep-light);
    color: #fff;
}

/* 遮罩 */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0, 0, 0, 0.4);
    z-index: 1019;
}

/* === 內容區 === */
.content-wrapper {
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper > main {
    flex: 1;
    padding: 1.5rem;
}

.content-wrapper > .footer {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.85rem;
    border-top: 1px solid #dee2e6;
}

/* === RWD === */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .sidebar-toggle {
        display: block;
    }

    .content-wrapper {
        margin-left: 0;
    }
}

/* === 按鈕配色覆寫 === */
.btn-primary {
    color: #fff;
    background-color: var(--ocean-deep);
    border-color: var(--ocean-deep);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ocean-deep-light);
    border-color: var(--ocean-deep-light);
}

.btn-outline-primary {
    color: var(--ocean-deep);
    border-color: var(--ocean-deep);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ocean-deep);
    border-color: var(--ocean-deep);
    color: #fff;
}

a {
    color: var(--ocean-water);
}

a:hover {
    color: var(--ocean-deep);
}

/* === Focus 狀態 === */
.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 var(--ocean-water);
}

/* === 表單樣式 === */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================
   內容區配色（海洋風格統一覆寫）
   ============================================ */

/* --- 頁面標題 h4 + hr --- */
.content-wrapper main > h4:first-child,
.content-wrapper main > h3:first-child {
    color: var(--ocean-deep-light);
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ocean-water);
    margin-bottom: 1rem;
}

.content-wrapper main > h4:first-child + hr,
.content-wrapper main > h3:first-child + hr {
    display: none;
}

/* --- 搜尋篩選區（覆寫 Bootstrap bg-warning-subtle）--- */
.bg-warning-subtle {
    background-color: #EBF5FB !important;
}

/* --- 表格表頭（覆寫 Bootstrap table-warning）--- */
.table-warning {
    --bs-table-bg: #3498DB !important;
    --bs-table-color: #fff !important;
    --bs-table-border-color: #2980B9 !important;
}

.table-warning th {
    background-color: #3498DB !important;
    color: #fff !important;
    border-color: #2980B9 !important;
}

/* --- 表格 thead.table-light 也統一 --- */
.table thead.table-light th {
    background-color: #3498DB !important;
    color: #fff !important;
    border-color: #2980B9 !important;
}

/* --- 表格條紋與 hover --- */
.table-bordered > tbody > tr:nth-child(odd) {
    background-color: #F2F9FF;
}

.table-bordered > tbody > tr:nth-child(even) {
    background-color: #FFFFFF;
}

.table-hover > tbody > tr:hover {
    background-color: #D6EAF8 !important;
    --bs-table-hover-bg: #D6EAF8;
}

/* --- 分頁列 --- */
.card-footer.bg-warning-subtle {
    background-color: #EBF5FB !important;
    border-top: 1px solid #D6EAF8;
}

/* --- container-fluid 黃底覆寫（帳號管理等頁面）--- */
.container-fluid[style*="FFFACD"],
.container-fluid[style*="fffacd"] {
    background-color: #EBF5FB !important;
}

/* --- 卡片 info header --- */
.card-header.bg-info-subtle {
    background-color: #D6EAF8 !important;
    color: var(--ocean-text);
    border-bottom: 1px solid #AED6F1;
}

/* --- 頁面內的 h4/h5 標題色 --- */
.content-wrapper h4,
.content-wrapper h5 {
    color: var(--ocean-deep-light);
}