/* ============================================================
   PGS Layout — replaces Ace Admin sidebar/navbar layout CSS
   Bootstrap 5 + custom sidebar, no Ace dependency
   Light Sky-Blue / Grey Theme matching the reference site (http://61.219.193.171/)
   ============================================================ */

/* ── Page Chrome ───────────────────────────────────────────── */
html, body { height: 100%; }
body { overflow-x: hidden; background-color: #f5f5f5; }

/* ── Top Navbar ─────────────────────────────────────────────── */
#navbar {
    height: 45px;
    min-height: 45px;
    background-color: #7cb5d2 !important; /* Soft light-blue matching the first image */
    z-index: 1030;
    padding: 0 8px;
    border-bottom: 1px solid #6fa8dc;
}
#navbar .navbar-brand {
    color: #ffffff; /* White brand text */
    font-weight: bold;
    font-size: 15px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#navbar .navbar-brand:hover { color: #fff; }
#navbar .nav {
    height: 100%;
}
#navbar .nav-item.dropdown {
    background-color: #629cc3; /* Slightly darker blue block for user menu matching the first image */
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid #6fa8dc;
}
#navbar .nav-link.dropdown-toggle {
    color: #ffffff;
    font-weight: bold;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
}
#navbar .nav-link.dropdown-toggle:hover {
    background-color: #538db4; /* Elegant hover color for user menu block */
    color: #ffffff;
}
#navbar .dropdown-menu { min-width: 180px; }
#menu-toggler {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
}
#menu-toggler:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ── Main Container (sidebar + content) ─────────────────────── */
.main-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 45px);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sidebar {
    width: 190px;
    min-width: 190px;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    transition: width 0.2s ease, min-width 0.2s ease;
}

/* ── Collapsed: icon-only 52px ───────────────────────────────── */
#sidebar.sidebar-collapsed {
    width: 52px;
    min-width: 52px;
}
#sidebar.sidebar-collapsed .nav-list > li > a,
#sidebar.sidebar-collapsed .nav-list > li > .nav-link-parent {
    justify-content: center;
    padding: 13px 0;
}
#sidebar.sidebar-collapsed .menu-icon { margin-right: 0; font-size: 16px; }
#sidebar.sidebar-collapsed .menu-text {
    max-width: 0;
    opacity: 0;
}
#sidebar.sidebar-collapsed .arrow { opacity: 0; }
#sidebar.sidebar-collapsed .submenu { display: none !important; }

/* Sidebar nav list */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.nav-list > li {
    border-bottom: 1px solid #e5e5e5;
}
.nav-list > li > a,
.nav-list > li > .nav-link-parent {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: #585858;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    border-left: 3px solid transparent;
}
.nav-list > li > a:hover,
.nav-list > li > .nav-link-parent:hover {
    background-color: #e5edf3;
    color: #1963aa;
}
.nav-list > li.active > a,
.nav-list > li.active > .nav-link-parent {
    background-color: #ffffff;
    color: #2b7dbc;
    font-weight: bold;
    border-left: 3px solid #2b7dbc;
}
.menu-icon {
    width: 18px;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}
.menu-text {
    flex: 1;
    max-width: 160px;
    overflow: hidden;
    transition: max-width 0.15s ease, opacity 0.12s ease;
}
.arrow { margin-left: auto; font-style: normal; transition: transform 0.2s, opacity 0.12s ease; }
.nav-list > li.open > a .arrow { transform: rotate(-90deg); }

/* Submenus — hidden until group is opened */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fafafa;
    border-top: 1px solid #e5e5e5;
    display: none;
}
.submenu.open { display: block; }
.submenu li { border-bottom: 1px solid #eeeeee; }
.submenu li a {
    display: block;
    padding: 8px 14px 8px 36px;
    font-size: 12.5px;
    color: #616161;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid transparent;
}
.submenu li a:hover { color: #1963aa; background-color: #e8edf3; }
.submenu li.active a {
    color: #2b7dbc;
    background-color: #edf3f7;
    font-weight: bold;
    border-right: 3px solid #2b7dbc;
}

/* Sidebar collapse toggle at bottom */
.sidebar-toggle {
    padding: 8px 14px;
    background-color: #e5e5e5;
    cursor: pointer;
    text-align: center;
    border-top: 1px solid #d5d5d5;
    color: #555;
    font-size: 13px;
    user-select: none;
}
.sidebar-toggle:hover { background-color: #d8d8d8; color: #333; }

/* ── Sidebar Flyout Panel ─────────────────────────────────────── */
#sidebar-flyout {
    position: fixed;
    left: 52px;
    top: 45px; /* overridden by JS to align with hovered item */
    width: 180px;
    background: #fff;
    border-right: 1px solid #d5d5d5;
    box-shadow: 3px 0 8px rgba(0,0,0,0.10);
    z-index: 99;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}
#sidebar-flyout.show { display: flex; }
.flyout-header {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: bold;
    color: #2b5b84;
    background: #f2f2f2;
    border-bottom: 2px solid #7cb5d2;
    flex-shrink: 0;
}
.flyout-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.flyout-list li { border-bottom: 1px solid #eee; }
.flyout-list li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
}
.flyout-list li a:hover { background: #e8edf3; color: #1963aa; }
.flyout-list li.active a {
    color: #2b7dbc;
    font-weight: bold;
    background: #edf3f7;
}
.flyout-list li.active a::before { content: "► "; }

/* ── Main Content ────────────────────────────────────────────── */
.main-content {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}
.main-content-inner { flex: 1; padding: 8px; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
    background-color: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    padding: 6px 16px;
    font-size: 12px;
    color: #8f8f8f;
    text-align: center;
}

/* ── Scroll-to-top button ────────────────────────────────────── */
#btn-scroll-up {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 999;
    display: none;
}

/* ── BS5 utility patches ─────────────────────────────────────── */
/* keep .hidden class working (used in permission logic) */
[style*="display: none"] { display: none !important; }

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.breadcrumbs {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    min-height: 41px;
    line-height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
}
.breadcrumb > li {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #555;
}
.breadcrumb > li a {
    color: #4c8fbd;
    text-decoration: none;
}
.breadcrumb > li a:hover {
    color: #6fa3c7;
    text-decoration: underline;
}
/* Beautiful angle bracket divider between breadcrumb items */
.breadcrumb > li + li::before {
    font-family: "FontAwesome" !important;
    content: "\f105" !important; /* fa-angle-right caret */
    padding: 0 10px;
    color: #a0a0a0;
    font-size: 14px;
    display: inline-block;
}
.breadcrumb > li i {
    margin-right: 6px;
}

/* ── Accordion customization ────────────────────────────────── */
.accordion-button {
    background-color: #edf3f7 !important;
    color: #4c8fbd !important;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #dcebf7 !important;
    padding: 10px 15px;
}
.accordion-button:not(.collapsed) {
    box-shadow: none !important;
    border-bottom: 1px solid #dcebf7 !important;
}
.accordion-button::after {
    display: none !important; /* Hide default BS5 arrow to use custom icons */
}

/* ── Dropdown Toggle Caret Fix ────────────────────────────── */
#navbar .nav-link.dropdown-toggle::after {
    display: none !important;
}

/* ── Form Inputs (Signature Style) ────────────────────────── */
.signature-input {
    border: none !important;
    border-bottom: 2px solid #ced4da !important;
    background-color: transparent !important;
    padding: 6px 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease-in-out;
    color: #495057;
    font-size: 14px;
}
.signature-input:focus {
    border-bottom: 2px solid #7cb5d2 !important;
    box-shadow: none !important;
}

/* ── Tables & Grid Refinements ────────────────────────────── */
.table {
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
}
.table thead th {
    background-color: #f9fbfd !important;
    border-bottom: 2px solid #7cb5d2 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #2b5b84 !important; /* Elegant blue-grey text for table header */
    font-weight: bold !important;
    padding: 10px 8px !important;
    font-size: 13.5px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.table tbody td {
    padding: 8px !important;
    font-size: 13px !important;
    color: #4a5568 !important;
    vertical-align: middle !important;
    border: 1px solid #e2e8f0 !important;
    text-align: center !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fcfdfe !important;
}
.table-hover tbody tr:hover {
    background-color: #f0f7fc !important;
    transition: background-color 0.15s ease-in-out;
}

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 16px;
    padding: 6px 0 10px 12px;
}
.page-header h1 {
    font-size: 20px;
    font-weight: bold;
    color: #2b5b84;
    margin: 0;
}

/* ── Pagination — theme sky-blue (PagedList + DataTables) ── */
/* Override BS5 CSS variables at the .pagination scope */
.pagination {
    --bs-pagination-color: #4c8fbd;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-hover-color: #2b5b84;
    --bs-pagination-hover-bg: #eef3f7;
    --bs-pagination-hover-border-color: #7cb5d2;
    --bs-pagination-focus-color: #2b5b84;
    --bs-pagination-focus-bg: #eef3f7;
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(124,181,210,.35);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #7cb5d2;
    --bs-pagination-active-border-color: #6aa7c8;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
}
/* Explicit fallback for PagedList-rendered anchors/spans */
.pagination .page-item a,
.pagination .page-item span {
    display: block;
    padding: 4px 10px;
    color: #4c8fbd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.pagination .page-item a:hover,
.pagination .page-item span:hover {
    color: #2b5b84;
    background-color: #eef3f7;
    border-color: #7cb5d2;
}
.pagination .page-item.active a,
.pagination .page-item.active span {
    color: #fff;
    background-color: #7cb5d2;
    border-color: #6aa7c8;
}
.pagination .page-item.disabled a,
.pagination .page-item.disabled span {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* ── Table column left-align override ────────────────────── */
.table thead th.col-text-start,
.table tbody td.col-text-start { text-align: left !important; }

/* ── ON/OFF Toggle Button ─────────────────────────────────── */
.pgs-toggle {
    display: inline-flex;
    cursor: pointer;
    margin: 0;
}
.pgs-toggle input[type="checkbox"] {
    display: none;
}
.pgs-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    border: 1px solid #ccc;
    background-color: #e5e5e5;
    color: #555;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.pgs-toggle input:checked ~ .pgs-toggle-label {
    background-color: #3a87ad;
    border-color: #2a6d8d;
    color: #fff;
}
.pgs-toggle .pgs-on { display: none; }
.pgs-toggle .pgs-off { display: inline-flex; align-items: center; gap: 4px; }
.pgs-toggle input:checked ~ .pgs-toggle-label .pgs-on { display: inline-flex; align-items: center; gap: 4px; }
.pgs-toggle input:checked ~ .pgs-toggle-label .pgs-off { display: none; }
.pgs-toggle input:disabled ~ .pgs-toggle-label { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Override DataTables 2.x sort icons for better visual integration */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
    padding-right: 20px !important;
}

/* ── Buttons — flat-modern, sky-blue theme ─────────────────────
   Shape set once on .btn; colors via BS5.3 --bs-btn-* vars.     */
.btn {
    --bs-btn-border-radius: 6px;
    --bs-btn-border-width: 0;
    font-weight: 600;
    transition: background-color .15s ease, box-shadow .18s ease, color .15s ease;
}
.btn:hover { box-shadow: 0 4px 12px var(--pgs-btn-halo, rgba(0,0,0,.18)); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,181,210,.40);
}
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .55; }
.btn[class*="btn-outline-"] { --bs-btn-border-width: 1px; }

/* Primary — site sky-blue (matches navbar) */
.btn-primary {
    --bs-btn-bg: #439ac5; --bs-btn-border-color: #439ac5;
    --bs-btn-hover-bg: #6aa7c8; --bs-btn-hover-border-color: #6aa7c8;
    --bs-btn-active-bg: #5e9cbf; --bs-btn-active-border-color: #5e9cbf;
    --bs-btn-disabled-bg: #439ac5; --bs-btn-disabled-border-color: #439ac5;
    --pgs-btn-halo: rgba(124,181,210,.45);
}
/* Danger — refined red (查詢 / delete) */
.btn-danger {
    --bs-btn-bg: #d9655f; --bs-btn-border-color: #d9655f;
    --bs-btn-hover-bg: #cb564f; --bs-btn-hover-border-color: #cb564f;
    --bs-btn-active-bg: #bd4a44; --bs-btn-active-border-color: #bd4a44;
    --bs-btn-disabled-bg: #d9655f; --bs-btn-disabled-border-color: #d9655f;
    --pgs-btn-halo: rgba(217,101,95,.40);
}
/* Success — muted green */
.btn-success {
    --bs-btn-bg: #5aa75a; --bs-btn-border-color: #5aa75a;
    --bs-btn-hover-bg: #4f964f; --bs-btn-hover-border-color: #4f964f;
    --bs-btn-active-bg: #468646; --bs-btn-active-border-color: #468646;
    --bs-btn-disabled-bg: #5aa75a; --bs-btn-disabled-border-color: #5aa75a;
    --pgs-btn-halo: rgba(90,167,90,.38);
}
/* Warning — warm amber, white text */
.btn-warning {
    --bs-btn-bg: #e6a23c; --bs-btn-border-color: #e6a23c; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #d8941f; --bs-btn-hover-border-color: #d8941f; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #c2871a; --bs-btn-active-border-color: #c2871a; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #e6a23c; --bs-btn-disabled-border-color: #e6a23c; --bs-btn-disabled-color: #fff;
    --pgs-btn-halo: rgba(230,162,60,.38);
}
/* Info — distinct teal */
.btn-info {
    --bs-btn-bg: #4ca6bd; --bs-btn-border-color: #4ca6bd; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #3e94aa; --bs-btn-hover-border-color: #3e94aa; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #368499; --bs-btn-active-border-color: #368499; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #4ca6bd; --bs-btn-disabled-border-color: #4ca6bd; --bs-btn-disabled-color: #fff;
    --pgs-btn-halo: rgba(76,166,189,.38);
}
/* Secondary — clean grey */
.btn-secondary {
    --bs-btn-bg: #868e96; --bs-btn-border-color: #868e96;
    --bs-btn-hover-bg: #767e85; --bs-btn-hover-border-color: #767e85;
    --bs-btn-active-bg: #666d74; --bs-btn-active-border-color: #666d74;
    --bs-btn-disabled-bg: #868e96; --bs-btn-disabled-border-color: #868e96;
    --pgs-btn-halo: rgba(134,142,150,.35);
}
/* Outline-secondary — refined, theme-blue hover */
.btn-outline-secondary {
    --bs-btn-color: #5a6169; --bs-btn-border-color: #b9c0c7;
    --bs-btn-hover-bg: #eef3f7; --bs-btn-hover-color: #2b5b84; --bs-btn-hover-border-color: #439ac5;
    --bs-btn-active-bg: #e2ecf3; --bs-btn-active-color: #2b5b84; --bs-btn-active-border-color: #439ac5;
    --pgs-btn-halo: rgba(124,181,210,.28);
}