/* wwwroot/css/new-layout.css */

/* --- Custom Font --- */

@font-face {
    font-family: 'BMWGroupTNProTT-Bold';
    src: url('../fonts/BMWGroupTN_Web/WebWOFF2/BMWGroupTNPro-2_701-WOFF2/BMWGroupTNPro-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BMWGroupTNProTT-Regular';
    src: url('../fonts/BMWGroupTN_Web/WebWOFF2/BMWGroupTNPro-2_701-WOFF2/BMWGroupTNPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BMWGroupTNCondensedProTT-Regular';
    src: url('../fonts/BMWGroupTN_Web/WebWOFF2/BMWGroupTNCondensedPro-2_701-WOFF2/BMWGroupTNCondensedPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 60px;
    --top-bar-height: 60px;
    --footer-height: 40px;
    --sidebar-bg: #f8f9fa; /* Light grey, adjust as needed */
    --sidebar-link-color: #495057;
    --sidebar-link-hover-bg: #e9ecef;
    --sidebar-link-active-bg: #dee2e6;
    --top-bar-bg: #ffffff;
    --top-bar-border: #dee2e6;
    --footer-bg: #f8f9fa;
    --footer-border: #dee2e6;
    --footer-text-color: #6c757d;
}

body {
    /* Remove padding-left, positioning handled by margins/fixed elements */
    background-color: #e9ecef; /* Light background for the main content area */
    padding-top: var(--top-bar-height); /* Space for fixed top bar */
    padding-bottom: var(--footer-height); /* Space for fixed footer */
    margin-bottom: auto !important;
    font-family: 'BMWGroupTNProTT-Regular', sans-serif !important;
}

.page-wrapper {
    display: flex;
    position: relative; /* Needed? Maybe not if all children are fixed/absolute */
    /* min-height removed, body padding handles overall height */
}

/* --- Top Bar (Full Width) --- */
.top-bar {
    position: fixed;
    top: 0;
    left: 0; /* Start from far left */
    right: 0; /* Extend to far right */
    height: var(--top-bar-height);
    background-color: var(--top-bar-bg);
    border-bottom: 1px solid var(--top-bar-border);
    padding: 0 20px;
    z-index: 1030; /* Above sidebar */
    display: flex;
    align-items: center;
    /* Remove transition: left */
}

/* --- Sidebar (Below Top Bar) --- */
.sidebar {
    position: fixed;
    top: var(--top-bar-height); /* Position below top bar */
    left: 0;
    height: calc(100vh - var(--top-bar-height) - var(--footer-height)); /* Adjust height */
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--top-bar-border);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 1020; /* Below top bar, above content */
    overflow-y: auto; /* Enable scroll within sidebar */
    box-shadow: 2px 0 12px rgba(13,110,253,0.07);
}

    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
    }

        .sidebar.collapsed .sidebar-nav span,
        .sidebar.collapsed .sidebar-nav .dropdown-toggle::after {
            display: none; /* Hide text and dropdown arrows when collapsed */
        }

        .sidebar.collapsed .sidebar-nav .sidebar-link {
            text-align: center;
        }

            .sidebar.collapsed .sidebar-nav .sidebar-link i {
                margin-right: 0 !important; /* Remove margin from icon when collapsed */
            }

        .sidebar.collapsed .sidebar-bottom {
            justify-content: center;
        }

.sidebar-nav {
    flex-grow: 1;
    /* Remove padding-top: var(--top-bar-height); */
    /* overflow-y: auto; moved to .sidebar */
}

    .sidebar-nav ul {
        padding-left: 0;
    }

    .sidebar-nav .sidebar-link {
        display: block;
        padding: 10px 15px;
        color: var(--sidebar-link-color);
        text-decoration: none;
        font-size: 0.95rem;
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow when collapsing */
        text-overflow: ellipsis;
    }

        .sidebar-nav .sidebar-link i {
            width: 20px; /* Fixed width for icons */
            text-align: center;
        }

        .sidebar-nav .sidebar-link:hover {
            background-color: var(--sidebar-link-hover-bg);
        }

        .sidebar-nav .sidebar-link.active {
            background-color: var(--sidebar-link-active-bg);
            font-weight: 500;
        }

    /* Style nested lists */
    .sidebar-nav ul ul {
        padding-left: 25px; /* Indent submenus */
        background-color: #f1f3f5; /* Slightly different bg for submenus */
    }

        .sidebar-nav ul ul a {
            padding: 8px 15px;
            font-size: 0.9rem;
        }

    /* Dropdown Toggle Arrow */
    .sidebar-nav .dropdown-toggle::after {
        float: right;
        margin-top: 8px;
        transition: transform 0.3s ease;
        color: #adb5bd;
        font-size: 1.1em;
        margin-left: 6px;
        margin-top: 0;
        font-weight: bold;
    }

    .sidebar-nav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(90deg);
    }

    /* ยกเลิกการเปลี่ยนสีเมนูหลักเมื่อ active/expanded */
    .sidebar-nav .dropdown-toggle[aria-expanded="true"] {
        /* background: #e3f0ff; */
        /* color: #0d6efd; */
        /* font-weight: 600; */
    }

.sidebar-bottom {
    padding: 10px;
    border-top: 1px solid var(--top-bar-border);
    display: flex;
    justify-content: flex-end; /* Align button to the right by default */
    transition: justify-content 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

.sidebar-collapse-btn {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* --- Main Content Area (Right of Sidebar) --- */
.main-content {
    flex-grow: 1;
    margin-left: var(--sidebar-width); /* Space for fixed sidebar */
    /* Remove padding-top and padding-bottom, handled by body */
    /* min-height: 100vh; removed */
    /* position: relative; removed */
    transition: margin-left 0.3s ease; /* Smooth transition when sidebar collapses */
}

/* Style the actual content container inside main-content */
.page-content {
    /* background-color: #ffffff; White background for content area */
    margin-top: 10px !important;
    margin: 15px; /* Add some margin around the content */
    padding: 10px; /* Padding inside the content area */
    border-radius: 4px; /* Optional rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow */
    min-height: calc(100vh - var(--top-bar-height) - var(--footer-height) - 30px); /* Adjust based on margin */
}

main.page-content.container-fluid.py-4 {
    margin: 0px !important;
}

/* --- Footer (Full Width) --- */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0; /* Start from far left */
    right: 0; /* Extend to far right */
    height: var(--footer-height);
    background-color: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--footer-text-color);
    z-index: 1020; /* Below top-bar, can be same as sidebar */
    /* Remove transition: left */
    /* Add padding to match sidebar width if needed, but text is aligned */
    padding-left: calc(var(--sidebar-width) + 20px); /* Add sidebar width + original padding */
    transition: padding-left 0.3s ease; /* Transition padding */
}


/* Adjustments when sidebar is collapsed */
/* Remove body.sidebar-collapsed rules */

/* Adjust main-content margin when sidebar collapses */
.sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Adjust footer padding when sidebar collapses */
.sidebar.collapsed ~ .app-footer { /* Use ~ general sibling combinator */
    padding-left: calc(var(--sidebar-collapsed-width) + 20px);
}


/* Logo and Title Styles (already in .top-bar section) */
.top-bar-logo {
    height: 49px; /* Adjust logo height as needed */
    width: auto;
}

.app-title {
    font-weight: 500;
    color: #343a40;
}

h1 {
    font-family: 'BMWGroupTNCondensedProTT-Regular', sans-serif !important;
    font-size: 54px !important;
}

h2 {
    font-family: 'BMWGroupTNCondensedProTT-Regular', sans-serif !important;
    font-size: 34px !important;
}

h3 {
    font-family: 'BMWGroupTNCondensedProTT-Regular', sans-serif !important;
    font-size: 30px !important;
}

h4 {
    font-family: 'BMWGroupTNCondensedProTT-Regular', sans-serif !important;
    font-size: 18px !important;
}

a {
    font-family: 'BMWGroupTNProTT-Bold', sans-serif !important;
    font-size: 15px !important;
}

.top-bar-btn {
    border: 1px solid #ced4da !important; /* Override default bootstrap outline */
    color: #495057 !important;
    padding: 5px 10px;
}

    .top-bar-btn:hover {
        background-color: #e9ecef !important;
    }

.top-bar .dropdown-menu {
    font-size: 0.9rem;
}


/* Mobile sidebar toggle button - hidden by default on desktop */
.mobile-sidebar-toggle {
    display: none;
}

/* Overlay backdrop for mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1035; /* Between sidebar (1040) and top-bar (1030) */
}

.sidebar-overlay.active {
    display: block;
}

/* Responsive adjustments (example) */
@media (max-width: 768px) {
    body {
        padding-left: 0; /* Ensure no padding */
        /* Keep top/bottom padding */
    }

    .sidebar {
        /* Mobile: Overlay */
        left: -100%; /* Hide sidebar off-screen */
        width: var(--sidebar-width); /* Keep original width when it slides in */
        transition: left 0.3s ease;
        z-index: 1040; /* Above everything when shown */
        height: 100vh; /* Full height overlay */
        top: 0; /* Start from top */
        border-right: none; /* Maybe remove border */
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

        .sidebar.collapsed {
            /* Collapsed state might not be used visually on mobile, only toggled */
            width: var(--sidebar-width); /* Force full width even if collapsed class is present */
            /* Or handle via JS toggle class e.g. .sidebar.mobile-toggled */
        }

        .sidebar.toggled { /* Class added by JS to show sidebar on mobile */
            left: 0;
        }

    .main-content {
        margin-left: 0; /* Full width */
        transition: none; /* No transition needed */
    }

    .app-footer {
        left: 0;
        padding-left: 20px; /* Reset padding */
        transition: none;
    }

    /* Adjustments for when sidebar is collapsed */
    .sidebar.collapsed + .main-content {
        margin-left: 0;
    }

    .sidebar.collapsed ~ .app-footer {
        padding-left: 20px;
    }


    /* Consider adding a hamburger button to toggle sidebar on small screens */
    /* Hide the standard collapse button on small screens */
    .sidebar-collapse-btn {
        display: none;
    }

    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        border: none;
        background: none;
        font-size: 1.4rem;
        color: #495057;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .mobile-sidebar-toggle:hover {
        background-color: #e9ecef;
    }

    /* ป้องกัน left-section กินพื้นที่จน right-section หลุดออกนอกจอ */
    .top-bar .left-section {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    /* ล็อก right-section ไว้ด้านขวาเสมอ */
    .top-bar .right-section {
        flex-shrink: 0;
    }

    .app-title {
        display: none !important;
    }

    .top-bar-logo {
        height: 32px;
        flex-shrink: 0;
    }

    /* ย่อปุ่ม user บน mobile */
    .top-bar-btn {
        font-size: 0.78rem !important;
        padding: 4px 8px !important;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- Custom Submenu Style (Vertical Bar Active - Gray) --- */
.sidebar-link-item {
    text-decoration: none !important;
    color: #495057;
    /* background: #335b79; */
    background: transparent;
    padding: 8px 22px 8px 32px;
    display: block;
    border-radius: 6px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    font-size: 1.04rem;
    position: relative;
    margin-bottom: 2px;
}

/* Allow submenu/group labels to wrap instead of ellipsis */
.sidebar-nav .sidebar-link.sidebar-link-item {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

    .sidebar-link-item:hover, .sidebar-link-item:focus {
        background: #f1f3f5;
        color: #010202;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(13,110,253,0.07);
    }

    .sidebar-link-item.active {
        background: #e4e7e9;
        color: #495057 !important;
        font-weight: 600;
    }

        .sidebar-link-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 5px;
            border-radius: 4px;
            background: #3b82f6;
        }

            /* ลบ caret-right เดิม */
            .sidebar-link-item.active::after,
            .sidebar-link-item.active::before[content='\\f0da'] {
                content: none;
            }

/* เพิ่ม divider ระหว่างกลุ่มเมนู */
.sidebar-nav .menu-divider {
    border-top: 1px solid #e3e6ea;
    margin: 12px 0 10px 0;
}

/* ปรับ dropdown arrow ของเมนูหลักให้ใช้สี default */
.sidebar-nav .dropdown-toggle::after {
    font-size: 1.1em;
    margin-left: 6px;
    margin-top: 0;
    font-weight: bold;
    /* color: #0d6efd;  ลบออกเพื่อใช้สี default */
}

.sidebar-nav .dropdown-toggle[aria-expanded="true"] {
    /* background: #e3f0ff; */
    /* color: #0d6efd; */
    /* font-weight: 600; */
}

/* เพิ่มเงาให้ sidebar */
.sidebar {
    box-shadow: 2px 0 12px rgba(13,110,253,0.07);
}

.container {
    width: 83vw !important;
    max-width: unset !important;
}

/* ให้ flex item ยอมย่อ ไม่ดันหน้ากว้างเกิน */
.page-wrapper .main-content {
    min-width: 0;
}

    .page-wrapper .main-content .page-content,
    .page-wrapper .main-content .card,
    .page-wrapper .main-content .card-body,
    .page-wrapper .main-content .container-fluid {
        min-width: 0;
    }

.card-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt-top, .dt-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .dt-top > *, .dt-bottom > * {
        min-width: 0;
    }

.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

table.dataTable > .table-responsive {
    width: max-content !important;
    table-layout: auto !important;
}

table.dataTable th,
table.dataTable td {
    white-space: nowrap !important;
}

table.dataTable thead th span.dt-column-order {
    right: 0 !important;
    margin-left: auto;
}

table.dataTable thead th .dt-column-header {
    flex-direction: row !important;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: auto;
}

.toast {
    min-width: 300px;
    max-width: 400px;
    word-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toast-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* สำหรับหน้าจอเล็ก (Mobile) */
@media (max-width: 576px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: 100%;
        padding: 0 !important;
    }

    .toast {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* สำหรับหน้าจอกลาง (Tablet) */
@media (min-width: 577px) and (max-width: 768px) {
    .toast-container {
        max-width: 350px;
    }

    .toast {
        min-width: 280px;
        max-width: 350px;
    }
}

/* สำหรับหน้าจอใหญ่ (Desktop) */
@media (min-width: 769px) {
    .toast-container {
        max-width: 400px;
    }

    .toast {
        min-width: 300px;
        max-width: 400px;
    }
}

.checkbox-size {
    width: 20px !important;
    height: 20px !important;
}