/* 基礎佈局 */
.bh-page-layout {
    display: flex;
    gap: 0px;
    padding: 20px 0px;
    max-width: 1600px;
    /* 這裡拉大到 1600px 甚至更多 */
    margin: 0;
    /* 👈 關鍵修正：把 auto 改成 0，強制靠左 */
}

.bh-grid-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- 大框區樣式 --- */
.bh-main-card {
    display: flex;
    border: 4px solid #004d00;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.card-logo {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 這裡就是您要的「外邊距」：讓灰框跟綠色大框保持距離 */
    padding: 20px !important;

    background: #fff;
    border-right: none;
    /* 移除分割線，讓 Logo 方塊獨立浮現 */
}

.card-logo img {
    /* 圖片撐滿整個灰框 */
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* --- 核心修正：內邊距設為 0，讓圖撞到灰框邊緣 --- */
    padding: 0 !important;

    /* 這是您要的淡灰框線 */
    border: 1px solid #ddd;

    background: #fff;
    box-sizing: border-box;
}

/* 讓 LOGO 預設透明，載入好再顯現 */
#team-logo-img {
    opacity: 0;
    transition: opacity 0.3s ease; /* 讓它現身時有個漂亮的淡入效果 */
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 3. 初始讓圖片透明度為 0 */
#team_logo {
    opacity: 0;
    transition: opacity 0.3s ease-in; /* 讓圖片跑出來的時候平滑一點 */
    max-width: 100%;
    max-height: 100%;
}


.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 15px !important;
}

.card-team-name {
    padding: 20px 25px 12px 0px;
    /* 上、右、下、左 的間距 */
    background: #ffffff;

    /* --- 這就是那條「霸氣長底線」 --- */
    border-bottom: 2px solid #004d00;
    margin-right: 20px;
    margin-left: 20px;
}

.card-team-name h1 {
    margin: 0;
    font-size: 32px;
    /* 放大隊名，更有張力 */
    color: #004d00;
    font-weight: 900;
    /* 加粗字體 */
    letter-spacing: 1px;
    /* 稍微拉開字距 */
}

.card-info-row {
    display: flex;
    flex: 1;
}

.info-cell {
    flex: 1;
    padding: 15px 25px;
    font-size: 15px;
    line-height: 1.8;
}

.info-cell:last-child {
    border-right: none;
}

/* 請確保 pages.css 有這幾段 */
.color-item {
    display: inline-block !important;
    text-align: center !important;
    margin-right: 0px !important;
}

#c-p, #c-s {
    width: 40px !important;
    height: 40px !important;
    border-radius: 5px !important; /* 方形微圓角 */
    border: 1px solid #000 !important; /* 黑框 */
    display: block !important;
    margin: 0 auto -5px auto !important;
}

/* 為了美觀，最後一個色塊不要有右邊距 */
.color-item:last-child {
    margin-right: 0 !important;
}

/* 讓隱藏的調色盤稍微往左偏移，避免彈窗遮擋右側 */
.color-item input[type="color"] {
    left: -50px !important; /* 🌟 往左偏移，彈窗就會跟著往左移 */
    width: 200% !important; /* 確保點擊範圍還是涵蓋整個色塊 */
}

.color-label {
    font-size: 12px !important;
    color: #666 !important;
}

/* --- 平行格子樣式 (Row 3 & 4) --- */
.bh-stats-honors-row,
.bh-extra-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    /* 戰績框對齊 Logo 寬度 */
    gap: 15px;
}

.bh-extra-row {
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: 0;
}

/* 第四層平分三格 */

.grid-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.item-honor {
    border-top: none
}

.box-label {
    font-weight: bold;
    color: #666;
    font-size: 13px;
    margin-bottom: 8px;
}

/* 頭像與數據微調 */
.honor-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eee;
    margin: 8px 0;
}

.stat-main {
    font-size: 22px;
    font-weight: bold;
    color: #004d00;
    margin: 5px 0;
}

/* --- 右側面板 --- */
.bh-side-panel {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.admin-header {
    background: #004d00;
    color: #fff;
    padding: 12px 15px;
    font-weight: bold;
}

.admin-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.admin-links li a {
    display: block !important;
    padding: 6px 15px !important;
    /* 🌟 強制縮小上下內距至 2px */
    text-decoration: none !important;
    color: #444 !important;
    line-height: 1.2 !important;
    /* 🌟 強制縮小行高 */
    font-size: 14px !important;
}

.admin-links li a::before {
    content: "▶";
    color: #004d00;
    margin-right: 10px;
    font-size: 10px;
}

/* 顏色球 */
.color-swatches {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* 1. 徹底移除右側容器的綠線與背景 */
.side-panel {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 0px !important;
}

/* 右側管理面板主體 */
/* 右側管理面板主體 - 修正版 */
/* 1. 強制鎖定外殼，確保背景色優先權最高 */
div#admin-card {
    background-color: #e7e7e7 !important; 
    border-radius: 8px !important;
    padding: 12px !important;
    margin-left: 25px !important;
    width: 130px !important;
    min-width: 130px !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: visible !important; /* 🌟 改成 visible，防止負邊距把內容切掉 */
    position: relative !important; /* 🌟 確保它是一個獨立的層級 */
    z-index: 1 !important;
}

/* 2. 標題鎖定 */
/* ==========================================
   [FINAL LOCK] 100% 恢復昨天最完美的面板樣式
   ========================================== */

/* 1. 強制鎖定外殼 (使用最強權重選擇器) */
div#admin-card {
    background-color: #e7e7e7 !important; 
    border-radius: 8px !important;
    padding: 12px !important;
    margin-left: 15px !important;
    width: 130px !important;
    min-width: 130px !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: visible !important; 
    position: relative !important; 
    z-index: 1 !important;
}

/* 2. 標題鎖定 (恢復昨天完美的負邊距) */
.admin-title {
    background-color: #aaaaaa !important;
    color: #333 !important;
    padding: 10px 12px !important;
    /* 🌟 恢復成昨天最完美的 -12px 12px 比例 */
    margin: -12px -12px 12px -12px !important; 
    font-size: 16px !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center;
    border-radius: 8px 8px 0 0 !important;
}

/* 3. 強制選單區域透明 */
.admin-links {
    background: transparent !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

/* 4. 補回選單文字樣式 (確保文字顏色不會跑掉) */
.admin-links li a {
    display: block !important;
    padding: 8px 0 !important;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.admin-links li a:hover {
    transform: translateX(5px);
    transition: all 0.2s ease !important;
}

/* 管理面板內的純資訊文字樣式 */
.admin-info-item {
    /* 🌟 把原本的 10px 加大到 20px 或 25px */
    margin-top: 40px !important; 
    
    padding-top: 10px !important;
    border-top: 1px solid #eee; 
    font-size: 12px !important;  /* 你剛才縮小後的尺寸 */
    color: #888 !important;
    list-style: none !important;
    text-align: center;
    line-height: 1.6;
}