/* =========================================
   DataTables 排版修正
   ========================================= */

/* 1. 強制內容換行 */
table.dataTable tbody td {
    white-space: normal !important;  /* 允許文字換行 */
    word-break: break-word;          /* 強制長單字(如URL)斷行，避免撐開 */
    overflow-wrap: break-word;       /* 現代瀏覽器斷行標準 */
    vertical-align: top;             /* 多行時靠上對齊比較美觀 */
}

/* 2. (選用) 限制最大寬度，避免單一欄位過寬 */
/* 如果您希望某些欄位不要太寬，可以限制 max-width */
/*
table.dataTable tbody td {
    max-width: 400px; 
}
*/

/* =========================================
   Volt 迷你側邊欄 (Mini Sidebar) 設定
   ========================================= */

:root {
    /* 展開時的寬度 */
    --sidebar-width: 220px; 
    /* 收合時的寬度 (只顯示 Icon) */
    --sidebar-mini-width: 70px; 
}

/* 1. 基礎設定 */
.sidebar {
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    width: var(--sidebar-width) !important;
    transition: all 0.3s ease-in-out; /* 加入過渡動畫 */
    overflow-x: hidden; /* 隱藏超出的文字 */
}

.content {
    margin-left: var(--sidebar-width) !important;
    transition: margin-left 0.3s ease-in-out;
}

/* 2. 針對桌機版 (lg 以上) 的收合行為 */
@media (min-width: 992px) {
    
    /* --- 當 Body 有 sidebar-toggled 時 (收合狀態) --- */

    /* A. 縮小側邊欄寬度 */
    body.sidebar-toggled #sidebarMenu {
        min-width: var(--sidebar-mini-width) !important;
        max-width: var(--sidebar-mini-width) !important;
        width: var(--sidebar-mini-width) !important;
        margin-left: 0 !important; /* 確保不隱藏 */
    }

    /* B. 調整內容區左邊距 */
    body.sidebar-toggled .content {
        margin-left: var(--sidebar-mini-width) !important;
    }

    /* C. 隱藏文字標籤 */
    body.sidebar-toggled .sidebar-text,
    body.sidebar-toggled .navbar-brand-text,
    body.sidebar-toggled .caption,
    body.sidebar-toggled .dropdown-toggle::after { /* 隱藏下拉箭頭 */
        display: none !important;
        opacity: 0;
        transition: opacity 0.2s;
    }

    /* D. 調整 Icon 位置 (置中) */
    body.sidebar-toggled .nav-link {
        justify-content: center; /* Flex 置中 */
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }

    body.sidebar-toggled .sidebar-icon {
        margin-right: 0 !important; /* 移除 Icon 右邊距 */
        font-size: 1.2rem; /* 稍微放大 Icon */
    }
    
    /* E. 調整 Logo 區域 */
    body.sidebar-toggled .navbar-brand {
        padding: 0;
        margin: 0;
        justify-content: center;
    }
    
    body.sidebar-toggled .navbar-brand img {
        margin: 0 auto;
    }

    /* F. 調整內部 Padding，避免太擠 */
    body.sidebar-toggled .sidebar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* G. (選用) 滑鼠移過去時自動展開 */
    /* 如果您希望滑鼠移過去就自動展開，可以取消下面這段註解 */
    /*
    body.sidebar-toggled #sidebarMenu:hover {
        min-width: var(--sidebar-width) !important;
        max-width: var(--sidebar-width) !important;
        width: var(--sidebar-width) !important;
    }
    body.sidebar-toggled #sidebarMenu:hover .sidebar-text,
    body.sidebar-toggled #sidebarMenu:hover .navbar-brand-text {
        display: inline-block !important;
        opacity: 1;
    }
    body.sidebar-toggled #sidebarMenu:hover .nav-link {
        justify-content: flex-start;
        padding-left: 1rem !important;
    }
    body.sidebar-toggled #sidebarMenu:hover .sidebar-icon {
        margin-right: 0.5rem !important;
    }
    */
}

/* =========================================
   Summernote 適配 Volt 樣板修正補丁
   ========================================= */

/* 1. 修正編輯器內的彈出視窗 (Popover) - 例如點擊連結時出現的小框框 */
.note-popover .popover-content,
.note-popover .popover-body {
    background-color: #ffffff !important; /* 強制白底 */
    color: #333333 !important;            /* 強制深灰字 */
    border: 1px solid #e5e7eb !important; /* 加上邊框 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* 2. 修正彈出視窗內的連結文字顏色 */
.note-popover a,
.note-popover .note-link-url {
    color: #0d6efd !important; /* 藍色連結 */
}

/* 3. 修正對話框 (Modal) - 例如插入連結/圖片的視窗 */
.note-modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
}

.note-modal-header {
    border-bottom: 1px solid #e5e7eb !important;
    background-color: #f8f9fa !important;
    color: #333333 !important;
}

.note-modal-footer {
    border-top: 1px solid #e5e7eb !important;
    background-color: #f8f9fa !important;
}

/* 4. 修正對話框內的標籤 (Label) */
.note-form-label {
    color: #333333 !important;
    font-weight: 600 !important;
}

/* 5. 修正對話框內的輸入框 (Input) - 這是最常看不清楚的地方 */
.note-modal-body input.note-input,
.note-modal-body input.form-control,
.note-modal-body textarea.note-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ced4da !important;
}

/* 修正輸入框 focus 狀態 */
.note-modal-body input.note-input:focus,
.note-modal-body textarea.note-input:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 6. 修正按鈕顏色 (避免 Volt 的按鈕樣式干擾) */
.note-btn-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

.note-btn-primary:hover {
    background-color: #0b5ed7 !important;
}

/* 7. 修正 Checkbox 文字顏色 */
.note-modal-body .checkbox label {
    color: #333333 !important;
}
/* =========================================
   Summernote Toolbar (工具列) 配色修正
   ========================================= */

/* 1. 工具列背景容器 */
.note-editor .note-toolbar {
    background-color: #f2f4f6 !important; /* 淺灰背景，區隔編輯區 */
    border-bottom: 1px solid #e5e7eb !important; /* 底部邊框 */
    padding: 10px 5px !important;
    border-radius: 0.5rem 0.5rem 0 0; /* 上方圓角 */
}

/* 2. 工具列按鈕 (預設狀態) */
.note-editor .note-btn {
    background-color: #ffffff !important; /* 白底 */
    border: 1px solid #d1d5db !important; /* 灰色邊框 */
    color: #4b5563 !important;            /* 深灰圖示 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* 微陰影 */
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 0.375rem !important;   /* 圓角 */
}

/* 3. 工具列按鈕 (滑鼠移過 Hover) */
.note-editor .note-btn:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important; /* 變黑 */
}

/* 4. 工具列按鈕 (啟用/按下 Active) - 例如「粗體」被選中時 */
.note-editor .note-btn.active,
.note-editor .note-btn:active,
.note-editor .note-btn:focus {
    background-color: #e5e7eb !important; /* 深灰底代表按下 */
    border-color: #6b7280 !important;
    color: #000000 !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; /* 內陰影 */
}

/* 5. 下拉選單 (Dropdown) - 例如字體大小、段落格式 */
.note-editor .note-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem 0;
}

/* 6. 下拉選單項目 */
.note-editor .note-dropdown-item,
.note-editor .note-dropdown-item h1,
.note-editor .note-dropdown-item h2,
.note-editor .note-dropdown-item h3,
.note-editor .note-dropdown-item h4,
.note-editor .note-dropdown-item h5,
.note-editor .note-dropdown-item h6,
.note-editor .note-dropdown-item p,
.note-editor .note-dropdown-item pre {
    color: #374151 !important; /* 文字顏色 */
    margin: 0 !important;
    background-color: transparent !important;
}

/* 7. 下拉選單項目 (Hover) */
.note-editor .note-dropdown-item:hover {
    background-color: #f3f4f6 !important; /* 淺灰底 */
    color: #111827 !important; /* 黑字 */
    text-decoration: none !important;
}

/* 8. 修正選單中「打勾」圖示的顏色 (如果有) */
.note-editor .note-dropdown-item.checked {
    font-weight: bold;
    background-color: #eff6ff !important; /* 淺藍底 */
}

/* =========================================
   Gform Builder 底部固定工具列修正
   ========================================= */

.builder-sticky-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    /* 預設：左邊距 = 側邊欄寬度 (使用我們之前定義的變數) */
    /* 如果沒定義變數，Volt 預設約為 260px */
    left: var(--sidebar-width, 260px); 
    z-index: 99; /* 確保浮在內容之上，但低於 Modal (1050) */
    border-radius: 0 !important; /* 貼底時移除圓角 */
    border-top: 1px solid #e5e7eb;
    background-color: #ffffff;
    transition: left 0.3s ease-in-out; /* 配合側邊欄動畫 */
}

/* 1. 當側邊欄收合時 (Mini Sidebar) */
body.sidebar-toggled .builder-sticky-footer {
    /* 左邊距 = 迷你側邊欄寬度 */
    left: var(--sidebar-mini-width, 70px) !important;
}

/* 2. 手機版 (Sidebar 隱藏時) */
@media (max-width: 991.98px) {
    .builder-sticky-footer {
        left: 0 !important; /* 手機版佔滿全寬 */
    }
}

/* 3. 避免內容被底部 Bar 擋住 */
/* 給主要內容區塊加一個下邊距，確保最後的元素看得到 */
.content {
    padding-bottom: 80px !important;
}
/* =========================================
   忘記密碼頁面 (Forget Password)
   ========================================= */

#forget, #login-page {
    /* 設定背景圖 (相對路徑：從 css 資料夾跳出去找 Volt 資料夾) */
    background-image: url('assets/img/illustrations/keelungCity.svg');
    
    /* 背景圖屬性 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 滿版設定 */
    width: 100%;
    min-height: 100vh;

}
/* 【新增】針對手機版的修正 */
@media (max-width: 768px) {
    #login-page, #forget {
        /* 手機版改為 auto，讓內容撐開高度，避免內容被切掉 */
        min-height: auto !important; 
        padding-bottom: 50px; /* 底部留白 */
    }
}
section{
	background-color: #eeecf1;
}