/* 後台字級級距
   基準 16px，各級為美工(Veronica)於 2026-08-21 實機微調後確認的實際值。
   使用方式：一律以 var(--fs-xxx) 引用，勿再寫死 px。
   設定類頁面(基本設定/系統設定/帳號/公告編輯)刻意不套用 —— 表單欄位密集，
   放大反而降低可用性；該類頁面已移除原本的 13px 設定，改吃 :root 的 16px。 */
:root {
    font-size: 16px;      /* 基準：未指定字級的元素吃這個 */

    --fs-caption: 12px;   /* 場域代碼、標籤、儀表小字 */
    --fs-note: 14px;      /* 輔助說明、單位、次要連結 */
    --fs-body: 16px;      /* 內文、表格、按鈕 */
    --fs-lead: 18px;      /* 選單、場域名稱、區塊說明 */
    --fs-title: 20px;     /* 卡片標題、量測單位 */
    --fs-brand: 22px;     /* 系統標題 */
    --fs-bar: 26px;       /* 廁紙/洗手乳數值(美工未調整，暫留原值) */
    --fs-metric: 36px;    /* 主要數值 */
}
/* 基礎設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #F3F6FB; /* 淺藍灰底色 #f4f7fc*/
    height: 100vh;
    overflow: hidden;
}

/* 滿版後台版面配置 */
.app-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* ========================================== */
/* 左側導覽列樣式 (Sidebar) */
/* ========================================== */
.sidebar {
    width: 240px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.sidebar-brand {
    font-size: var(--fs-brand);
    font-weight: bold;
    color: #1e3a8a; /* 深藍色標題 */
    padding: 0 24px 25px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-menu {
    flex: 1;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 選單按鈕項目 */
.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #334155;
    text-decoration: none;
    font-size: var(--fs-lead);
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.menu-item .icon {
    margin-right: 12px;
    font-size: var(--fs-body);
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* 被選取的動態樣式（數據總覽預設選取） */
.menu-item.active {
    background-color: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-weight: bold;
}

.menu-item:hover:not(.active) {
    background-color: #eaeff8;
    color: #1e40af;
}

/* 導覽列底部區塊 */
.sidebar-footer {
    padding: 20px 16px 10px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    background-color: #1e293b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-icon {
    color: #ffffff;
    font-size: var(--fs-note);
}

.username {
    font-size: var(--fs-note);
    color: #334155;
    font-weight: bold;
}

/* 登出系統按鈕 */
.btn-logout {
    width: 100%;
    padding: 10px;
    background-color: #0b57d0; /* 原圖對應的深藍色按鈕 */
    color: #ffffff;
    border: none;
    border-radius: 20px; /* 圓角膠囊型按鈕 */
    font-size: var(--fs-note);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-logout:hover {
    background-color: #0842a0;
}

/* ========================================== */
/* 右側主內容呈現區 (Main Content) */
/* ========================================== */
.main-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

.welcome-message {
    text-align: center;
    margin-top: 15vh;
    color: #64748b;
}

.welcome-message h2 {
    color: #1e3a8a;
    margin-bottom: 10px;
}

/* 外層容器 */
.container {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

/* 響應式 RWD：當螢幕寬度小於 600px 時自動轉為單欄 */
@media (max-width: 600px) {
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .empty-cell {
        display: none; /* 手機板隱藏空格子 */
    }
}

/* ========================================== */
/* 表單驗證訊息 (asp-validation-for 預設帶出的 class) */
/* ========================================== */
.text-danger {
    color: #dc3545 !important;
}