/* ZPlanner Custom Styles */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 68px;
}

body {
    font-family: 'Inter', 'Microsoft JhengHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    overflow-y: auto;
    transition: all 0.3s;
    z-index: 1000;
}

.sidebar .logo {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .logo h3 {
    margin: 0;
    font-weight: bold;
    color: white;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ZPN01P2201-113：這裡是 flex 而不是 block，而且**所有**選單項目都要走同一種排版。
   原本只有帶待審核徽章的兩項（異動 BU／指派 PM）在 HTML 上掛 d-flex（徽章要用
   ms-auto 推到右邊），其餘 17 項是 block。但 flex 容器會忽略子元素之間的空白節點、
   block 會把原始碼的換行＋縮排渲染成一個空格，於是那兩項的文字比其他項左移約 4px：

       block：[icon 20px][margin 10px][空格 ~4px]文字
       flex ：[icon 20px][margin 10px]文字

   統一由這條 CSS 給 flex，HTML 就不需要個別掛 d-flex，也不會再有「只有某幾項不一樣」
   的分歧。⚠ 改回 block 會讓徽章的 ms-auto 失效。 */
.sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-left-color: #ffc107;
}

.sidebar-menu li a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.sidebar-section-label {
    padding: 12px 20px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    pointer-events: none;
}

.sidebar-collapse-btn {
    position: absolute;
    top: 22px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    color: #2a5298;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 1001;
    padding: 0;
    font-size: .75rem;
}

.sidebar-collapse-btn i { transition: transform 0.3s; }

/* Main Content Styles */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left 0.3s;
}

/* Collapsed sidebar (desktop only) — icon-only rail, state remembered via localStorage.
   Scoped to min-width:769px so a leftover collapsed flag from a desktop session never
   fights the mobile off-canvas behavior below. */
@media (min-width: 769px) {
    html.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
    html.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }
    html.sidebar-collapsed .logo-text,
    html.sidebar-collapsed .logo-subtitle,
    html.sidebar-collapsed .sidebar-menu span,
    html.sidebar-collapsed .sidebar-section-label { display: none; }
    /* ZPN01P2201-113：連結一律是 flex（見上面 .sidebar-menu li a 的說明），
       所以置中要用 justify-content 而不是 text-align——後者對 flex 子項無效，
       圖示會貼在最左邊。原本這裡是 text-align:center 再為 .d-flex 補一條例外，
       現在沒有例外了，一條就夠。 */
    html.sidebar-collapsed .sidebar-menu li a { justify-content: center; padding: 15px 0; }
    /* !important 是因為個別圖示有掛 Bootstrap 的 me-1/me-2 utility class，
       那些本身就是 !important，沒有 !important 蓋不掉，圖示會偏一邊 */
    html.sidebar-collapsed .sidebar-menu li a i { margin-right: 0 !important; }
    html.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
}

.topbar {
    background: white;
    padding: 15px 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-wrapper {
    padding: 30px;
}

/* Card Styles */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.card-header {
    background: white;
    border-bottom: 2px solid #f0f0f0;
    font-weight: 600;
    padding: 15px 20px;
}

/* Stats Cards */
.stat-card {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    color: white;
    margin-bottom: 20px;
}

.stat-card.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.success {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.warning {
    background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
    color: #333;
}

.stat-card.info {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    color: #333;
}

.stat-card h3 {
    font-size: 2rem;
    font-weight: bold;
    margin: 10px 0;
}

.stat-card p {
    margin: 0;
    opacity: 0.9;
}

/* Table Styles */
.table-responsive {
    border-radius: 10px;
    overflow: hidden;
}

.table {
    margin-bottom: 0;
}

.table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Button Styles */
.btn {
    border-radius: 5px;
    font-weight: 500;
}

/* ZPN01P2201-83：改用 CSS 變數覆寫 padding，讓 .btn-sm／.btn-lg 繼續生效。
 *
 * 直接寫死 `padding` 會跟 Bootstrap 的 `.btn-sm`／`.btn-lg` 在 specificity 相同
 * （都是單一 class）時，靠「style.css 在 Bootstrap 之後載入」贏過它們，蓋掉
 * -sm／-lg 想要的尺寸。改成只覆寫 `--bs-btn-padding-y`／`--bs-btn-padding-x`
 * 這兩個 Bootstrap 自己讀的變數，讓實際的 `padding` 屬性只由 Bootstrap 的
 * `.btn { padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); }` 設定一次。
 *
 * ⚠ 但光改成變數還不夠：`.btn-sm`／`.btn-lg` 設的也是同一組變數、specificity
 * 也相同，一樣會被「後載入」的這條蓋掉（已用 Playwright 實測驗證過）。所以要用
 * `:where()` 把 -sm／-lg 排除在外——`:where()` 本身不計入 specificity，
 * 排除後兩者就不再跟 Bootstrap 的 .btn-sm／.btn-lg 競爭這兩個變數，
 * 讓它們能用回 Bootstrap 原生的小／大尺寸。
 */
.btn:where(:not(.btn-sm)):where(:not(.btn-lg)) {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 20px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Badge Styles */
.badge {
    padding: 5px 12px;
    font-weight: 500;
    border-radius: 20px;
}

/* Form Styles */
.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.form-control,
.form-select {
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

/* ZPN01P2201-83：padding 只套用在沒有 -sm／-lg 的情況，讓 .form-control-sm／
 * .form-select-sm／-lg 能用回 Bootstrap 原生尺寸。
 *
 * ⚠ 跟 .btn 不同，Bootstrap 5.3.0 的 .form-control／.form-select 本身沒有
 * 把 padding 包成 CSS 變數（`--bs-form-control-*` 之類的變數不存在，查過編譯後
 * 的 bootstrap.min.css 確認），.form-control-sm／.form-select-sm 也是直接寫死
 * padding，所以這裡沒有變數可以覆寫，只能跟 .btn 一樣改用 `:where()` 把
 * -sm／-lg 排除在這條規則外，不要跟它們競爭 padding。
 */
.form-control:where(:not(.form-control-sm)):where(:not(.form-control-lg)),
.form-select:where(:not(.form-select-sm)):where(:not(.form-select-lg)) {
    padding: 10px 15px;
}

/* ZPN01P2201-118：select 的右 padding 要另外留給下拉箭頭。
 *
 * ⚠ 不要把這條併回上面的 shorthand。Bootstrap 的 .form-select 是
 * `padding: .375rem 2.25rem .375rem .75rem`，右邊那 2.25rem 就是箭頭的位置；
 * 箭頭本身是 background-image、畫在 `right .75rem center`，**不受 padding 影響**。
 * 上面那條 shorthand 會把右 padding 蓋成 15px，箭頭照樣畫在原處，於是壓到文字上。
 * （style.css 在 base.html 裡排在 Bootstrap CDN 之後，所以我們這邊一定贏。）
 *
 * 壞的是全站每一個 .form-select，但有固定寬度或滿版的 select 文字後面還有空白，
 * 箭頭剛好落在空白處，看起來沒事——那是僥倖。`style="width:auto"` 的 select
 * （全站 16 處，各頁的「每頁筆數」下拉幾乎都是）寬度縮到剛好容納文字＋padding，
 * 沒有空白可站，就一定壓字。使用者是在主管專區的年／月／狀態三個下拉發現的。
 */
.form-select {
    padding-right: 36px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Login Page Styles */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 450px;
    width: 100%;
}

.login-card .logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-card .logo h2 {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 10px;
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s;
    text-decoration: none;
    color: #333;
}

.google-btn:hover {
    background: #f8f9fa;
    border-color: var(--primary-color);
    color: #333;
}

.google-btn img {
    width: 20px;
    height: 20px;
}

/* Pagination Styles */
.pagination {
    margin-top: 20px;
}

.page-link {
    color: var(--primary-color);
    border: 1px solid #dee2e6;
    padding: 8px 15px;
}

.page-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Loading Spinner */
.spinner-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.spinner-wrapper.show {
    display: flex;
}

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

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

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

    .content-wrapper {
        padding: 15px;
    }
}

/* Alert Styles */
.alert {
    border-radius: 8px;
    border: none;
}

.alert-dismissible .btn-close {
    padding: 12px;
}

/* User Dropdown */
.user-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s;
}

.user-dropdown:hover {
    background: #f8f9fa;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}


/* Issue Description Images */
.issue-description img { max-width: 100%; height: auto; border-radius: 4px; }

/* Issue Hours Bar */
.hours-bar-wrap { min-width: 140px; max-width: 180px; }
.hours-bar-track {
    position: relative;
    height: 18px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.hours-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.2s ease;
}
.hours-bar-fill.ok   { background: #198754; }
.hours-bar-fill.over { background: #dc3545; }
.hours-bar-label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* Prevent Bootstrap components embedded in rich-text descriptions from rendering */
.issue-description .modal,
.issue-description .offcanvas,
.issue-description .dropdown-menu { display: none !important; }

/* Issue 列表分頁（ZPN01P2201-46）：跟頁面上方「專案資訊／成員管理／Issues…」主
   頁籤同一套 nav-tabs「檔案夾頁籤」形狀語言（選中項底邊透明、接到下方白底內容），
   只縮小字級/內距，避免兩層頁籤長得一樣分不出主從——只加這一條限定 class，不改
   .nav-tabs／.nav-link 本身，不影響頁面上其他地方的頁籤。

   選中項另外填上站內既有的主色語彙（--primary-color，跟 331 行 pagination 的
   .page-item.active 同一套「active＝主色底、白字」慣例，不是新挑一個顏色）；
   未選中項改成偏淡的灰字，跟 active 拉開對比、明顯退居後方。查證過：Bootstrap
   nav-tabs 預設的 active 狀態本身就沒有顏色（只有白底+外框，文字維持深灰/黑），
   不是被這個專案的什麼規則蓋掉才變單調——所以需要主動加色，不是「查清楚就好」
   的情況。 */
.issue-subtabs .nav-link {
    padding: .25rem .65rem;
    font-size: .8rem;
}
.issue-subtabs .nav-link.active {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.issue-subtabs .nav-link:not(.active) {
    color: #6c757d;
}

/* Impersonation banner */
.impersonation-banner {
    background: #ffc107;
    color: #000;
    text-align: center;
    padding: 6px 16px;
    font-size: 13px;
    border-bottom: 1px solid #e0a800;
}