/* =====================================================
   AYStyle.css - TPERC 客製樣式（勿改第三方檔，客製一律加在此）
   2026-07-15 偉銘 - 建檔，AYGrid(DevExtreme) 樣式比照 TCEGIR
   ===================================================== */

/* ---------- 後台側邊功能列配色（白底淺灰系，依 DOC/參考資料/user_maintenance.html） ---------- */
.sidebar {
    background-color: #fff;
    scrollbar-color: #d5dbe1 transparent;
    border-right: 1px solid #e3e9ef;
}

.sidebar::-webkit-scrollbar {
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #d5dbe1;
}

.sidebar-nav li {
    background-color: #fff;
}

/* 功能群組之間的分隔線 */
.sidebar-nav > li.nav-item {
    border-bottom: 1px solid #e9edf2;
}

.sidebar-nav .nav-heading {
    color: #8a8a8a;
}

/* 功能列三大分類標題（依 iMOD_PK 區間：網站/學校/中心功能）：無底色，左右加分隔線 ---標題--- */
.sidebar-nav .nav-section {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 15px 6px;
    margin-bottom: 0;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-nav .nav-section::before,
.sidebar-nav .nav-section::after {
    content: "";
    flex: 1;
    border-top: 1px solid #c9d2da;
}

.sidebar-nav .nav-section-gap {
    margin-top: 22px;
}

/* 三大分類以底色區分：網站功能（淡藍）、學校功能（淡綠）、中心功能（淡黃） */
.sidebar-nav li.nav-sec-1,
.sidebar-nav li.nav-sec-1 .nav-link.collapsed {
    background-color: #eaf3fb;
}

.sidebar-nav .nav-section.nav-sec-1 {
    color: #1f5893;
}

.sidebar-nav li.nav-sec-2,
.sidebar-nav li.nav-sec-2 .nav-link.collapsed {
    background-color: #eaf6ee;
}

.sidebar-nav .nav-section.nav-sec-2 {
    color: #1b6e5f;
}

.sidebar-nav li.nav-sec-3,
.sidebar-nav li.nav-sec-3 .nav-link.collapsed {
    background-color: #fdf6e3;
}

.sidebar-nav .nav-section.nav-sec-3 {
    color: #8a6d1a;
}

/* 展開中的主選單（文字深灰），文字統一 1.125rem */
.sidebar-nav .nav-link {
    color: #495057;
    background: #eef1f5;
    font-size: 1.125rem;
}

.sidebar-nav .nav-content a {
    font-size: 1.125rem;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link svg {
    color: #495057;
}

/* 收合狀態的主選單 */
.sidebar-nav .nav-link.collapsed {
    color: #495057;
    background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
    color: #6c757d;
}

.sidebar-nav .nav-link:hover {
    color: #212529;
    background: #eef1f5;
}

.sidebar-nav .nav-link:hover i {
    color: #212529;
}

/* 子選單 */
.sidebar-nav .nav-content a {
    color: #495057;
}

.sidebar-nav .nav-content a:hover {
    color: #212529;
    font-weight: 700;
}

/* 目前所在功能（active）改藍色字體，加淺灰底 */
.sidebar-nav .nav-content a.active {
    color: #21588b;
    font-weight: 700;
    background-color: #eef1f5;
    border-radius: 6px;
}

.sidebar-nav .nav-content a.active i,
.sidebar-nav .nav-content a.active svg {
    color: #21588b;
}

/* ---------- 狀態列 emoji 風格（依 DOC/參考資料/user_maintenance.html） ---------- */
.header {
    background-color: #f7f8fa;
}

/* logo 區塊右側分隔線，寬度對齊側邊功能列（300px） */
@media (min-width: 1200px) {
    .header .logo {
        width: 300px;
    }
}

.header .logo {
    height: 60px;
    padding: 0 16px;
    margin-left: -20px;
    border-right: 1px solid #e3e9ef;
}

.header .toggle-sidebar-btn {
    color: #4a635b;
}

.header .search-form span,
.header #logoutCountdown {
    color: #4a635b;
}

/* 狀態列文字統一 1.125rem */
.header .search-form input,
.header .search-form span,
.header #logoutCountdown,
.header .nav-profile span,
.header .btn-backfront {
    font-size: 1.125rem;
}

.header .search-form input {
    border: 1px solid #9fcdc4;
    border-radius: 6px 0 0 6px;
    height: 38px;
    background-color: #fff;
}

.header .search-form button {
    background: #5b8fc9;
    border: 0;
    border-radius: 0 6px 6px 0;
    width: 40px;
    height: 38px;
    margin-left: -1px;
    font-size: 1.05rem;
    line-height: 1;
}

.header .emoji-icon {
    font-size: 1.35rem;
    font-style: normal;
    line-height: 1;
}

.header .nav-profile .emoji-icon {
    font-size: 1.5rem;
}

/* 未讀公告下拉（狀態列對話鈕） */
.header-nav .dropdown-menu.messages {
    min-width: 400px;
}

/* 回到前台按鈕（卡其色系，配合側邊淡黃） */
.btn-backfront {
    background-color: #d9cfae;
    border-color: #c8bd97;
    color: #3a4238;
    font-weight: 600;
}

.btn-backfront:hover {
    background-color: #cec294;
    border-color: #b8ac82;
    color: #212529;
}

/* ---------- 作業畫面配色（依 DOC/參考資料/user_maintenance.html 畫面) ---------- */

/* 功能頁整體底色 */
body {
    background: #f2f3f5;
}

/* 頁面標題 1.25rem */
.pagetitle h1 {
    font-size: 1.25rem;
}

/* 內容卡片完整 1px 灰框線（上圓角配合標題帶） */
.cardEdit,
.cardQuery {
    border: 1px solid #adb5bd;
    border-radius: 0.125rem 0.125rem 5px 5px;
}

/* 查詢卡標題列：黃底 #f5e2a6，高度同資料區標題列（44px） */
.cardQuery-header {
    padding: 0 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 0.125rem 0.125rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    background-color: #f5e2a6;
}

/* 編輯卡標題列改淺灰底深色字＋深灰藍左緣、圓角上緣 */
.cardEdit-header {
    padding: 0 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
    background-color: #e4e7ec;
    color: #344054;
    border-left: 4px solid #3a4a5a;
    border-bottom: 1px solid #d5dae2;
    border-radius: 0.125rem 0.125rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* 表單標籤格：淺灰底深色字、框線調淡 */
.col-form-label {
    background-color: #f5f6f8;
    border-color: #e3e7ee;
    color: #3f4a5a;
}

.col-form-element {
    border-color: #e3e7ee;
}

/* 底部按鈕列：深灰改淺灰，配合整體色系 */
.cardEdit-footer {
    background-color: #f0f2f5;
    border-color: #e3e7ee;
}

.cardQuery-footer {
    background-color: #f0f2f5;
    border-color: #e3e7ee;
}

/* 底部按鈕列文字 1.125rem */
.cardEdit-footer .btn,
.cardQuery-footer .btn {
    font-size: 1.125rem;
}

/* 2026-07-28 S263974 - 頁面跳轉按鈕圖示（.Next 前往、.Back 返回）
   機制與 Nice/style.css 的 .Previous/.Reset/.Save 相同，改用 <i> 元素會矮 0.5~2.3px 而與其他按鈕不等高 */
.Next::before {
    content: "\f138";
    font-family: "bootstrap-icons" !important;
    display: inline-block;
    vertical-align: middle;
}

.Back::before {
    content: "\f12f";
    font-family: "bootstrap-icons" !important;
    display: inline-block;
    vertical-align: middle;
}

/* 後台表單欄位文字統一 1.125rem */
.cardEdit-body .col-form-label,
.cardEdit-body .col-form-element,
.cardEdit-body .form-control,
.cardEdit-body .form-select,
.cardQuery .col-form-label,
.cardQuery .col-form-element,
.cardQuery .form-control,
.cardQuery .form-select {
    font-size: 1.125rem;
}

/* 新增（工具列）、編輯（grid 內）按鈕改藍色系 #3679cd */
.Grid-Caption .btn-info,
.dx-datagrid .btn-info {
    background-color: #3679cd;
    border-color: #2f6cb8;
    color: #fff;
}

.Grid-Caption .btn-info:hover, .Grid-Caption .btn-info:focus, .Grid-Caption .btn-info:active,
.dx-datagrid .btn-info:hover, .dx-datagrid .btn-info:focus, .dx-datagrid .btn-info:active {
    background-color: #2f6cb8;
    border-color: #285fa3;
    color: #fff;
}

/* Grid 上方工具列（新增按鈕容器），底色淡藍 */
.Grid-Caption {
    text-align: left !important;
    padding: 0.5rem 1rem;
    border-top: 1px #c8cdd3 solid;
    border-left: 1px #c8cdd3 solid;
    border-right: 1px #c8cdd3 solid;
    background-color: #d8e9f7;
}

/* dxDataGrid 外觀覆寫（灰白系表頭、淡框線、深色分頁列） */
.dx-scrollable-scroll.dx-state-invisible { background-color: #bfd1c4 }

.dx-scrollbar-horizontal .dx-scrollable-scroll { height: 80px; }

/* 分頁列：淺灰底 */
.dx-pager, .dx-pagination { border: solid 1px #aab3bd; background-color: #f5f6f8; color: #344054; }

.dx-datagrid-borders > .dx-pager { margin-top: 0px; }

.dx-pager .dx-page-sizes, .dx-pagination .dx-page-sizes { padding-left: 10px; }

.dx-pager .dx-page-size, .dx-pager .dx-page,
.dx-pagination .dx-page-size, .dx-pagination .dx-page {
    background-color: #fff;
    color: #344054;
    border: 1px solid #c8cdd3;
    border-radius: 4px;
}

.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection,
.dx-pagination .dx-page-sizes .dx-selection, .dx-pagination .dx-pages .dx-selection {
    background-color: #8a939b;
    color: #fff;
}

.dx-pager .dx-info, .dx-pagination .dx-info { color: #344054; }

/* 分頁列按鈕文字 1rem */
.dx-pager .dx-page-size, .dx-pager .dx-page,
.dx-pagination .dx-page-size, .dx-pagination .dx-page,
.dx-pager .dx-navigate-button, .dx-pagination .dx-navigate-button {
    font-size: 1rem;
}

.dx-pager .dx-navigate-button, .dx-pagination .dx-navigate-button {
    background-color: #fff;
    color: #344054;
    border-radius: 4px;
}

.dx-datagrid { color: #222; line-height: inherit; }

/* 表頭：淺灰底深色字 */
.dx-datagrid-borders .dx-datagrid-headers .dx-datagrid-table { background-color: #eef0f2; color: #344054; }

/* 表頭文字置中 */
.dx-datagrid-headers .dx-header-row > td { text-align: center !important; }

.dx-datagrid-rowsview .dx-row-alt > td { background-color: #fafbfc; }

.dx-widget { font-size: 1.125rem; }

.dx-pager .dx-pages .dx-next-button::before, .dx-pager .dx-pages .dx-prev-button::before,
.dx-pagination .dx-pages .dx-next-button::before, .dx-pagination .dx-pages .dx-prev-button::before { margin-top: -6.5px; }

.dx-datagrid .dx-column-lines > td { border-left: 1px solid #c3cad2; border-right: 1px solid #c3cad2; }

/* 資料列底線 */
.dx-datagrid-rowsview .dx-row > td { border-bottom: 1px solid #c3cad2; }

/* 儲存格內容過長時強制換行（Email/網址等無空白字串也斷行），不以 ... 截斷 */
.dx-datagrid-rowsview .dx-row > td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 條件欄位標籤：因上層選「有」才出現的欄位，標籤加此 class 以底色區別 */
.conditional-label {
    background-color: #ecebff;
}

/* 雙線框表格（用藥明細等子表清單用） */
.table-double-border,
.table-double-border th,
.table-double-border td {
    border: 3px double #8a8f98 !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td { border-bottom: 1px solid #c3cad2; border-top: 1px solid #c3cad2; }

.dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer { border-left: 1px solid #aab3bd; border-right: 1px solid #aab3bd; }

.tableForm {
    width: 100%;
    margin-bottom: 0;
    font-size: 1.125rem;
    color: #3f4a5a;
}

.tableForm > thead > tr > th {
    border: solid 1px #e3e7ee;
    background-color: #f5f6f8;
    color: #3f4a5a;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    padding: 8px 5px;
}

.tableForm > tbody > tr > td {
    border: solid 1px #e3e7ee;
    vertical-align: middle;
    padding: 5px;
}

.tableForm .form-control,
.tableForm .form-select {
    font-size: 1.125rem;
}

/* 多列輸入表格上方的工具列沿用 .Grid-Caption（清單頁的新增／重新整理那條），
   底色與三邊框線由 .Grid-Caption 提供，表格補上底線後即為完整外框 */
.Grid-Caption + .table-responsive > .tableForm {
    border-top: none;
}