/*
===============================================================================
Enterprise Order System

Application CSS

Tabler Enterprise Layout

===============================================================================
*/


/* ==================================================
   Global
================================================== */


html,
body {

    min-height:100%;

}


body {

    margin:0;

    overflow-x:hidden;

    background:#f6f8fb;

}


a {

    text-decoration:none;

}


/* ==================================================
   Page Layout
================================================== */


.page {

    min-height:100vh;

}


/* ==================================================
   Sidebar

   Desktop Full Height
================================================== */


.sidebar {

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    width:260px;

    background:#ffffff;

    border-right:1px solid #e6e8eb;

    z-index:1050;

    overflow-y:auto;

}


/* ==================================================
   Sidebar Logo

   DO NOT TOUCH
================================================== */


.sidebar-header {

    height:56px;

    display:flex;

    align-items:center;

    padding-left:20px;

    padding-right:20px;

    border-bottom:1px solid #e6e8eb;

}


.sidebar-logo {

    height:56px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    font-weight:700;

    color:#111827;

}


/* ==================================================
   Desktop Sidebar Menu
================================================== */


.sidebar .navbar-nav {

    padding-top:12px;

}


.sidebar .nav-item {

    margin:0;

}


.sidebar .nav-link {

    display:flex;

    align-items:center;

    gap:10px;

    margin:4px 12px;

    padding:10px 14px;

    color:#4b5563;

    border-radius:8px;

    transition:

        background-color .15s ease,

        color .15s ease;

}


.sidebar .nav-link:hover {

    background:#f1f5f9;

    color:#111827;

}


.sidebar .nav-link.active {

    background:#e7f1ff;

    color:#206bc4;

}


/* ==================================================
   Navbar
================================================== */


.enterprise-navbar {

    position:fixed;

    top:0;

    left:260px;

    right:0;

    height:56px;

    background:#ffffff;

    border-bottom:1px solid #e6e8eb;

    z-index:1040;

}


.enterprise-navbar .container-fluid {

    height:56px;

    display:flex;

    align-items:center;

}


/* ==================================================
   Page Wrapper
================================================== */


.page-wrapper {

    margin-left:260px;

    padding-top:56px;

    min-height:100vh;

}


.page-body {

    min-height:calc(100vh - 56px);

}


.container-fluid {

    padding:24px;

}


/* ==================================================
   User Dropdown
================================================== */


.user-menu-wrapper {

    position:relative;

}


.user-dropdown-menu {

    position:absolute;

    top:calc(100% + 8px);

    right:0;

    width:220px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:10px;

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

    padding:8px;

    display:none;

    z-index:3000;

}


.user-dropdown-menu.show {

    display:block;

}


/*
==================================================
User Dropdown Item Hover Enhancement

Enterprise UX
==================================================
*/


.user-dropdown-menu .dropdown-item {

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    padding:10px 12px;

    border-radius:8px;

    color:#374151;

    transition:

        background-color .15s ease,

        color .15s ease,

        transform .15s ease;

}


.user-dropdown-menu .dropdown-item:hover {

    background:#eaf3ff;

    color:#206bc4;

    transform:translateX(3px);

}


.user-dropdown-menu .dropdown-item:hover span,
.user-dropdown-menu .dropdown-item:hover i {

    color:#206bc4;

}


/*
Logout Danger
*/


.user-dropdown-menu .dropdown-item.text-danger {

    color:#dc2626;

}


.user-dropdown-menu .dropdown-item.text-danger:hover {

    background:#fff1f2;

    color:#dc2626;

}


.user-dropdown-menu .dropdown-divider {

    margin:6px 0;

    border-color:#e5e7eb;

}


/* ==================================================
   Overlay
================================================== */


.sidebar-overlay {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:1065;

}


.sidebar-overlay.show {

    display:block;

}


/* ==================================================
   Mobile Drawer
================================================== */


@media(max-width:991px) {

    .sidebar {

        width:260px;

        transform:translateX(-100%);

        z-index:1060;

    }


    .sidebar.show {

        transform:translateX(0);

    }


    .enterprise-navbar {

        left:0;

    }


    .enterprise-navbar .container-fluid {

        padding:0 12px;

        height:56px;

        align-items:center;

    }


    .page-wrapper {

        margin-left:0;

        padding-top:56px;

    }


    .container-fluid {

        padding:16px;

    }


    /*
    Mobile Sidebar Menu

    Logo 不影響
    */


    .sidebar .navbar-nav {

        width:100%;

        padding:12px 0 0 0 !important;

        margin:0 !important;

    }


    .sidebar .nav-item {

        width:100%;

        padding:0 !important;

        margin:0 !important;

    }


    .sidebar .nav-link {

        width:100%;

        margin:0 !important;

        padding-left:16px !important;

        padding-right:16px !important;

        border-radius:0 !important;

        justify-content:flex-start !important;

    }


    .sidebar .nav-link-icon {

        margin-left:0 !important;

        margin-right:8px !important;

    }


    .sidebar .nav-link span {

        margin-left:0 !important;

    }

}


/* ==================================================
   Small Screen
================================================== */


@media(max-width:576px) {

    .container-fluid {

        padding:12px;

    }

}


/*
===============================================================================
Password Input Eye Toggle
Tabler Icon Font Version
===============================================================================
*/


.input-group.input-group-flat {

    display:flex !important;

    align-items:stretch !important;

    width:100% !important;

}


.input-group.input-group-flat .form-control {

    flex:1 1 auto !important;

    width:1% !important;

    min-width:0 !important;

    border-top-right-radius:0 !important;

    border-bottom-right-radius:0 !important;

}


.input-group.input-group-flat .input-group-text {

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:0 0 auto !important;

    height:auto !important;

    padding:0 12px !important;

}


/*
===============================================================================
Password Toggle Button
===============================================================================
*/


.password-toggle {

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border:0 !important;

    background:none !important;

    padding:0 !important;

    margin:0 !important;

    color:#6c757d;

    cursor:pointer;

}


.password-toggle i {

    font-size:20px;

    line-height:1;

    display:inline-flex;

}


/*
===============================================================================
Tabler Icon Font
===============================================================================
*/


.ti {

    font-family:"tabler-icons" !important;

    font-style:normal;

    font-weight:normal;

    font-display:block;

}


.password-toggle:hover {

    color:#206bc4;

}


/*
===============================================================================
Light Mode Table Typography

Enterprise Table Readability

Only adjusts:
- Table header font size
- Table header text color
- Table body font size
- Table body text color

Does not change:
- Table structure
- Table spacing
- Table business logic
- Table data
===============================================================================
*/


.table thead th,
.table thead td {

    font-size:0.9375rem;

    font-weight:600;

    color:#1f2937;

}


.table tbody td {

    font-size:0.9375rem;

    color:#374151;

}


/*
===============================================================================
Dark Mode Table
===============================================================================
*/


[data-theme="dark"] table {

    color:#E2E8F0;

    background:#0F172A;

}


[data-theme="dark"] .table {

    --tblr-table-bg:#0F172A;

    --tblr-table-color:#E2E8F0;

    --bs-table-bg:#0F172A;

    --bs-table-color:#E2E8F0;

}


/*
===============================================================================
Table Header
===============================================================================
*/


[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {

    background:#1E293B !important;

    color:#F8FAFC !important;

    border-color:#334155 !important;

    font-weight:600;

}


/*
===============================================================================
Table Body
===============================================================================
*/


[data-theme="dark"] .table tbody td {

    background:#0F172A;

    color:#E2E8F0;

    border-color:#334155;

}


/*
===============================================================================
Table Hover
===============================================================================
*/


[data-theme="dark"] .table-hover tbody tr:hover {

    background:rgba(56,189,248,.08);

    color:#F8FAFC;

}


/*
===============================================================================
Table Border
===============================================================================
*/


[data-theme="dark"] .table > :not(caption) > * > * {

    border-bottom-color:#334155;

}


/* ==================================================
   Bootstrap / Tabler Modal Layering

   Keep Modal above Sidebar on mobile/tablet.

   Layer order:
   Sidebar         1060
   Overlay         1065
   Modal Backdrop  1070
   Modal           1075
================================================== */


.modal-backdrop {

    z-index:1070 !important;

}


.modal {

    z-index:1075 !important;

}


/*
===============================================================================
Badge Readability

Enterprise UI

Ensure secondary badges maintain readable text contrast
against the secondary background.

Does not change:
- Business logic
- Badge structure
- Badge status
- Other badge variants
===============================================================================
*/


.badge.bg-secondary,
.badge.bg-danger,
.badge.bg-primary {

    color:#ffffff !important;

}


/*
===============================================================================
Sidebar Management Buttons

Purpose:
- Visually distinguish management menu buttons.
- Preserve existing permission conditions.
- Preserve existing active-state behavior.
- Do not affect ordinary sidebar buttons.
===============================================================================
*/

/* 管理按鈕：一般狀態 */
#sidebar .navbar-nav .nav-link.nav-link-admin {
    color: #7E22CE !important;
}

/* 管理按鈕圖示與文字 */
#sidebar .navbar-nav .nav-link.nav-link-admin .nav-link-icon,
#sidebar .navbar-nav .nav-link.nav-link-admin > span:last-child,
#sidebar .navbar-nav .nav-link.nav-link-admin .nav-link-icon .ti {
    color: inherit !important;
}

/* 管理按鈕：滑鼠移入 */
#sidebar .navbar-nav .nav-link.nav-link-admin:hover {
    background: #F3E8FF !important;
    color: #6B21A8 !important;
}

/* 管理按鈕：目前所在頁面 */
#sidebar .navbar-nav .nav-link.nav-link-admin.active {
    background: #F3E8FF !important;
    color: #6B21A8 !important;
    box-shadow: inset 4px 0 0 #9333EA !important;
}

/*
===============================================================================
Sidebar Management Buttons - Dark Mode
===============================================================================
*/

/* 管理按鈕：深色模式一般狀態 */
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin {
    color: #C084FC !important;
}

/* 管理按鈕：深色模式圖示與文字 */
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin .nav-link-icon,
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin > span:last-child,
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin .nav-link-icon .ti {
    color: inherit !important;
}

/* 管理按鈕：深色模式滑鼠移入 */
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin:hover {
    background: rgba(192, 132, 252, 0.14) !important;
    color: #D8B4FE !important;
}

/* 管理按鈕：深色模式目前所在頁面 */
[data-theme="dark"] #sidebar .navbar-nav .nav-link.nav-link-admin.active {
    background: rgba(192, 132, 252, 0.18) !important;
    color: #D8B4FE !important;
    box-shadow: inset 4px 0 0 #C084FC !important;
}

/* =========================================================
   團單申請提醒 Modal：暗色模式
   只修正視窗背景、稍後處理區塊及邊框
   不影響既有通知與申請流程
   ========================================================= */

[data-theme="dark"]
#order-group-application-notification-modal .modal-content {
    background-color: var(--bg-card, #151F30);
    color: var(--text-primary, #E5EDF8);
    border-color: var(--border-color, #29384D);
}

[data-theme="dark"]
#order-group-application-notification-modal .modal-header,
[data-theme="dark"]
#order-group-application-notification-modal .modal-footer {
    background-color: var(--bg-card, #151F30);
    border-color: var(--border-color, #29384D);
}

[data-theme="dark"]
#order-group-application-notification-modal .modal-body {
    background-color: var(--bg-card, #151F30);
    color: var(--text-primary, #E5EDF8);
}

[data-theme="dark"]
#order-group-application-notification-modal .text-secondary {
    color: var(--text-secondary, #B2C1D6) !important;
}

[data-theme="dark"]
#order-group-application-notification-modal .list-group-item {
    background-color: var(--bg-card, #151F30);
    color: var(--text-primary, #E5EDF8);
    border-color: var(--border-color, #29384D);
}