<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#1E293B">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="裝修管理">
    <link rel="manifest" href="<?php echo BASE_URL; ?>/manifest.json">
    <link rel="apple-touch-icon" href="<?php echo BASE_URL; ?>/icon_gen.php?s=192">
    <title><?php echo APP_NAME; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        'on-primary': '#FFFFFF',
                        'primary-container': '#EEF2FF',
                        'on-primary-container': '#312E81',
                        secondary: '#64748B',
                        'on-secondary': '#FFFFFF',
                        'secondary-container': '#F1F5F9',
                        'on-secondary-container': '#1E293B',
                        tertiary: '#0EA5E9',
                        'tertiary-container': '#E0F2FE',
                        surface: '#FAFAFA',
                        'surface-container': '#FFFFFF',
                        'surface-container-high': '#F1F5F9',
                        'on-surface': '#0F172A',
                        'on-surface-variant': '#475569',
                        outline: '#CBD5E1',
                        'outline-variant': '#E2E8F0',
                        error: '#EF4444',
                        'error-container': '#FEF2F2',
                    },
                    fontFamily: {
                        'display': ['"Plus Jakarta Sans"', 'Noto Sans TC', 'sans-serif'],
                        'body': ['Noto Sans TC', 'sans-serif'],
                    },
                    borderRadius: {
                        'xs': '4px',
                        'sm': '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '28px',
                        'full': '9999px',
                    },
                    boxShadow: {
                        'm3-1': '0 1px 2px rgba(0,0,0,0.05)',
                        'm3-2': '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)',
                        'm3-3': '0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)',
                        'm3-4': '0 6px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)',
                        'm3-5': '0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04)',
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after {
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }
        body {
            font-family: 'Noto Sans TC', 'Plus Jakarta Sans', sans-serif;
            background-color: #FAFAFA;
            color: #0F172A;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 1.6;
        }

        /* ===== Typography Scale ===== */
        .m3-display { font-family: 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
        .m3-headline { font-family: 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
        .m3-title { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
        .m3-title-sm { font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; }
        .m3-body { font-size: 0.875rem; font-weight: 400; line-height: 1.6; }
        .m3-body-sm { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }
        .m3-label { font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; }

        /* ===== Sidebar - Navigation Drawer ===== */
        .sidebar {
            background: #FFFFFF;
            border-right: 1px solid #F1F5F9;
            height: 100vh;
            height: 100dvh;
        }
        .sidebar nav {
            padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
        }
        .sidebar a {
            font-weight: 500;
            font-size: 0.875rem;
            padding: 5px 16px;
            margin: 5px 8px;
            border-radius: 12px;
            color: #475569;
            transition: all 0.15s ease;
            text-decoration: none;
        }
        .sidebar a:hover {
            background: #F1F5F9;
            color: #0F172A;
        }
        .sidebar a.sidebar-active {
            background: #EEF2FF;
            color: #4F46E5;
            font-weight: 600;
        }
        .sidebar a i {
            width: 20px;
            font-size: 1rem;
            text-align: center;
            flex-shrink: 0;
        }
        .sidebar-section-title {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            color: #94A3B8;
            text-transform: uppercase;
            padding: 0 16px;
            margin-top: 20px;
            margin-bottom: 4px;
        }

        /* ===== Top App Bar ===== */
        .m3-topbar {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid #F1F5F9;
        }

        /* ===== Card (Surface Container) ===== */
        .m3-card {
            background: #FFFFFF;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s ease, transform 0.15s ease;
        }
        .m3-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
        }
        .m3-card-2 {
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            border: 1px solid #F1F5F9;
        }

        /* ===== Table ===== */
        .m3-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        .m3-table thead th {
            font-size: 0.75rem;
            font-weight: 600;
            color: #64748B;
            letter-spacing: 0.04em;
            padding: 12px 16px 10px;
            background: transparent;
            border-bottom: 1px solid #F1F5F9;
        }
        .m3-table tbody td {
            padding: 14px 16px;
            border-bottom: 1px solid #F8FAFC;
            font-size: 0.875rem;
            vertical-align: middle;
        }
        .m3-table tbody tr:last-child td {
            border-bottom: none;
        }
        .m3-table tbody tr:active {
            background: #F8FAFC;
        }

        /* ===== Button (Material You) ===== */
        .m3-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            font-weight: 600;
            font-size: 0.875rem;
            border-radius: 9999px;
            padding: 10px 24px;
            border: none;
            cursor: pointer;
            transition: all 0.15s ease;
            text-decoration: none;
            line-height: 1.4;
        }
        .m3-btn:active {
            transform: scale(0.97);
        }
        .m3-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        /* Filled */
        .m3-btn-filled {
            background: #4F46E5;
            color: white;
            box-shadow: 0 1px 3px rgba(79,70,229,0.3);
        }
        .m3-btn-filled:hover {
            background: #4338CA;
            box-shadow: 0 2px 6px rgba(79,70,229,0.35);
        }
        /* Tonal */
        .m3-btn-tonal {
            background: #EEF2FF;
            color: #4F46E5;
        }
        .m3-btn-tonal:hover {
            background: #E0E7FF;
        }
        /* Text */
        .m3-btn-text {
            background: transparent;
            color: #4F46E5;
            padding: 10px 16px;
        }
        .m3-btn-text:hover {
            background: #F1F5F9;
        }
        /* Success */
        .m3-btn-success {
            background: #10B981;
            color: white;
            box-shadow: 0 1px 3px rgba(16,185,129,0.3);
        }
        .m3-btn-success:hover {
            background: #059669;
            box-shadow: 0 2px 6px rgba(16,185,129,0.35);
        }
        .m3-btn-sm {
            padding: 6px 16px;
            font-size: 0.8125rem;
        }

        /* ===== Chip ===== */
        .m3-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            background: #F1F5F9;
            color: #475569;
            border: none;
        }
        .m3-chip-primary {
            background: #EEF2FF;
            color: #4F46E5;
        }
        .m3-chip-success {
            background: #ECFDF5;
            color: #059669;
        }
        .m3-chip-error {
            background: #FEF2F2;
            color: #EF4444;
        }

        /* ===== Input ===== */
        .m3-input {
            width: 100%;
            padding: 12px 16px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            font-size: 0.875rem;
            font-family: inherit;
            outline: none;
            transition: all 0.15s ease;
            color: #0F172A;
        }
        .m3-input:focus {
            background: #FFFFFF;
            border-color: #4F46E5;
            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
        }
        .m3-input::placeholder { color: #94A3B8; }
        .m3-select {
            width: 100%;
            padding: 12px 40px 12px 16px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            font-size: 0.875rem;
            font-family: inherit;
            outline: none;
            transition: all 0.15s ease;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            cursor: pointer;
            color: #0F172A;
        }
        .m3-select:focus {
            background-color: #FFFFFF;
            border-color: #4F46E5;
            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
        }
        .m3-textarea {
            width: 100%;
            padding: 12px 16px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            font-size: 0.875rem;
            font-family: inherit;
            outline: none;
            transition: all 0.15s ease;
            resize: vertical;
            color: #0F172A;
        }
        .m3-textarea:focus {
            background: #FFFFFF;
            border-color: #4F46E5;
            box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
        }
        .m3-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 500;
            color: #64748B;
            margin-bottom: 4px;
        }

        /* ===== Action Group ===== */
        .action-group {
            display: inline-flex;
            gap: 2px;
            align-items: center;
        }
        .action-group a,
        .action-group button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 9999px;
            color: #94A3B8;
            transition: all 0.12s ease;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
            text-decoration: none;
        }
        .action-group a:hover,
        .action-group button:hover {
            background: #F1F5F9;
            color: #4F46E5;
        }

        /* ===== Modal (Dialog) ===== */
        .m3-overlay {
            background: rgba(15,23,42,0.35);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .m3-dialog {
            background: #FFFFFF;
            border-radius: 28px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            overflow: hidden;
        }

        /* ===== Alert Banner ===== */
        .m3-banner {
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .m3-banner-success {
            background: #ECFDF5;
            border: 1px solid #D1FAE5;
            color: #065F46;
        }
        .m3-banner-error {
            background: #FEF2F2;
            border: 1px solid #FECACA;
            color: #991B1B;
        }

        /* ===== Status Dot ===== */
        .m3-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        /* ===== Scrollbar ===== */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

        /* ===== Table Responsive ===== */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .table-responsive table { min-width: 640px; }

        /* ===== Mobile ===== */
        @media (max-width: 640px) {
            .table-responsive table { min-width: 540px; }
            .m3-headline { font-size: 1.25rem !important; }
            .m3-display { font-size: 1.5rem !important; }
            .container { padding-left: 1rem !important; padding-right: 1rem !important; }
            th, td { padding-left: 12px !important; padding-right: 12px !important; }
            td .truncate-mobile {
                max-width: 100px; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; display: block;
            }
            .action-group a, .action-group button { width: 32px; height: 32px; font-size: 0.85rem; }
        }
        @media (max-width: 480px) {
            .table-responsive table { min-width: 460px; }
            td .truncate-mobile { max-width: 70px; }
            .hide-on-mobile { display: none !important; }
        }

        @media print {
            aside, header, .no-print { display: none !important; }
            main { width: 100% !important; margin: 0 !important; padding: 0 !important; }
            .container { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
            body { background-color: white !important; }
        }

        /* ===== Ripple Effect ===== */
        .ripple {
            position: relative;
            overflow: hidden;
        }
        .ripple::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(79,70,229,0.12) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        .ripple:active::after {
            opacity: 1;
        }
    </style>
</head>
<body>
    <?php if (isLoggedIn()): ?>
    <div class="flex min-h-screen">
        <!-- Sidebar - Material Navigation Drawer -->
        <aside id="sidebar" class="sidebar w-72 overflow-y-auto hidden flex-col md:flex transition-all duration-300 z-50 md:z-0 fixed md:sticky top-0 left-0 shrink-0">
            <div class="flex-shrink-0 px-5 py-5 flex justify-between items-center border-b border-[#F1F5F9]">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-[#4F46E5] to-[#6366F1] flex items-center justify-center text-white text-xs font-bold shadow-sm">M</div>
                    <h1 class="text-base font-bold text-[#0F172A] tracking-tight"><?php echo APP_NAME; ?></h1>
                </div>
                <button id="close-sidebar-btn" class="md:hidden text-[#94A3B8] hover:text-[#0F172A] p-1 rounded-lg hover:bg-[#F1F5F9]">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
            <nav class="flex-1 overflow-y-auto py-3">
                <div class="sidebar-section-title">工程管理</div>
                <a href="index.php"><i class="fas fa-home"></i><span>首頁概覽</span></a>
                <a href="work_entry.php"><i class="fas fa-user-clock"></i><span>開工登記</span></a>
                <a href="sub_work_entry.php"><i class="fas fa-user-tie"></i><span>判工登記</span></a>
                <a href="work_records.php"><i class="fas fa-history"></i><span>開工紀錄</span></a>
                <a href="bills.php"><i class="fas fa-file-invoice-dollar"></i><span>帳單報銷</span></a>

                <div class="sidebar-section-title">資源管理</div>
                <a href="employees.php"><i class="fas fa-users"></i><span>員工管理</span></a>
                <a href="subcontractors.php"><i class="fas fa-briefcase"></i><span>判工管理</span></a>
                <a href="sites.php"><i class="fas fa-map-marker-alt"></i><span>地盤管理</span></a>
                <a href="site_docs.php"><i class="fas fa-folder-open"></i><span>地盤文件</span></a>
                <a href="google_drive_docs.php"><i class="fab fa-google-drive"></i><span>雲端檔案</span></a>
                <a href="finance.php"><i class="fas fa-chart-line"></i><span>財報計算</span></a>

                <div class="sidebar-section-title">報價及財務</div>
                <a href="quotations.php"><i class="fas fa-file-contract"></i><span>報價系統</span></a>
                <a href="quote_settings.php"><i class="fas fa-sliders-h"></i><span>報價設定</span></a>
                <a href="invoices.php"><i class="fas fa-file-invoice"></i><span>發票生成</span></a>
                <a href="receipts.php"><i class="fas fa-receipt"></i><span>收據生成</span></a>
                <a href="accounts.php"><i class="fas fa-user-shield"></i><span>帳號管理</span></a>

                <div class="mt-5 pt-4 border-t border-[#F1F5F9]">
                    <a href="settings.php"><i class="fas fa-cog"></i><span>系統設定</span></a>
                    <a href="logout.php" class="!text-[#EF4444] hover:!bg-[#FEF2F2] hover:!text-[#DC2626]"><i class="fas fa-sign-out-alt"></i><span>登出系統</span></a>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#FAFAFA] min-h-screen">
            <!-- Mobile Top Bar -->
            <header class="m3-topbar px-4 py-3 flex justify-between items-center md:hidden sticky top-0 z-20">
                <button id="mobile-menu-btn" class="text-[#4F46E5] p-2 -ml-2 rounded-xl hover:bg-[#EEF2FF] transition">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-[#4F46E5] to-[#6366F1] flex items-center justify-center text-white text-[10px] font-bold">M</div>
                    <span class="text-sm font-bold text-[#0F172A]"><?php echo APP_NAME; ?></span>
                </div>
                <div class="w-9"></div>
            </header>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-5 md:py-8">
    <?php endif; ?>
