/* ============================================================
   admin-shared.css — admin.html 與 company-admin.html 共用樣式
   抽取條件：兩頁逐字節相同的連續規則區塊
   頁面專屬樣式仍留在各頁 <style> 內，並可覆蓋此檔（載入順序在前）
   ============================================================ */


    :root {
      color-scheme: dark;
      --bg: #060a11;
      --bg-surface: #0c1220;
      --bg-card: #111827;
      --bg-card-hover: #162033;
      --bg-input: #0d1526;
      --accent: #00b4d8;
      --accent-dim: rgba(0,180,216,0.12);
      --accent-glow: rgba(0,180,216,0.25);
      --accent2: #0077b6;
      --success: #34d399;
      --success-dim: rgba(52,211,153,0.12);
      --warn: #fbbf24;
      --warn-dim: rgba(251,191,36,0.12);
      --danger: #f87171;
      --danger-dim: rgba(248,113,113,0.12);
      --purple: #a78bfa;
      --purple-dim: rgba(167,139,250,0.12);
      --text: #e2e8f0;
      --text-secondary: #94a3b8;
      --text-dim: #64748b;
      --border: rgba(255,255,255,0.06);
      --border-strong: rgba(255,255,255,0.10);
      --radius: 10px;
      --radius-lg: 14px;
      --sidebar-w: 240px;
      --header-h: 60px;
      --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'DM Sans','Noto Sans TC',system-ui,sans-serif; }
    ::selection { background:var(--accent); color:#000; }
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.15); }


    .layout { display:flex; height:100%; }

    /* Sidebar */
    .sidebar {
      width:var(--sidebar-w); height:100%; background:var(--bg-surface);
      border-right:1px solid var(--border); display:flex; flex-direction:column;
      flex-shrink:0; position:relative; z-index:100;
    }
    .sidebar-brand {
      height:var(--header-h); display:flex; align-items:center; padding:0 20px; gap:10px;
      border-bottom:1px solid var(--border); flex-shrink:0;
    }
    .sidebar-brand .logo {
      width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent2));
      display:flex; align-items:center; justify-content:center;
    }
    .sidebar-brand .logo .material-icons-round { font-size:18px; color:#fff; }
    .sidebar-brand span { font-size:15px; font-weight:700; letter-spacing:-0.3px; }

    .sidebar-nav { flex:1; padding:12px 10px; overflow-y:auto; }
    .sidebar-section { margin-bottom:20px; }
    .sidebar-section-label {
      font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
      color:var(--text-dim); padding:0 10px; margin-bottom:6px;
    }
    .nav-item {
      display:flex; align-items:center; gap:10px; padding:10px 12px;
      border-radius:8px; cursor:pointer; transition:var(--transition);
      color:var(--text-secondary); font-size:13px; font-weight:500;
      border:1px solid transparent; user-select:none;
    }
    .nav-item:hover { background:rgba(255,255,255,0.04); color:var(--text); }
    .nav-item.active {
      background:var(--accent-dim); color:var(--accent);
      border-color:rgba(0,180,216,0.15);
    }
    .nav-item .material-icons-round { font-size:19px; }
    .nav-item .badge {
      margin-left:auto; background:var(--accent-dim); color:var(--accent);
      font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;
    }

    .sidebar-footer {
      padding:16px 20px; border-top:1px solid var(--border);
      font-size:11px; color:var(--text-dim); flex-shrink:0;
    }
    .sidebar-footer .admin-name {
      display:flex; align-items:center; gap:8px; margin-bottom:8px;
      font-size:13px; color:var(--text-secondary); font-weight:500;
    }
    .sidebar-footer .admin-name .dot { width:8px; height:8px; border-radius:50%; background:var(--success); }
    .logout-btn {
      display:flex; align-items:center; gap:6px; padding:6px 0;
      color:var(--text-dim); font-size:12px; cursor:pointer; transition:var(--transition);
      background:none; border:none; font-family:inherit;
    }
    .logout-btn:hover { color:var(--danger); }

    /* Main Content Area */
    .main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

    /* Header */
    .header {
      height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
      padding:0 32px; border-bottom:1px solid var(--border); flex-shrink:0;
      background:var(--bg-surface);
    }
    .header h2 { font-size:18px; font-weight:700; letter-spacing:-0.3px; }
    .header-actions { display:flex; align-items:center; gap:10px; }

    /* Content */
    .content { flex:1; overflow-y:auto; padding:28px 32px; }

    /* Pages */
    .page { display:none; animation:pageIn 0.3s ease; }
    .page.active { display:block; }
    @keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ===== STATS CARDS ===== */
    .stats-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
      gap:16px; margin-bottom:32px;
    }
    .stat-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:22px 20px;
      transition:var(--transition); position:relative; overflow:hidden;
    }
    .stat-card:hover { border-color:var(--border-strong); transform:translateY(-2px); }
    .stat-card .stat-icon {
      width:40px; height:40px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:14px;
    }
    .stat-card .stat-icon .material-icons-round { font-size:20px; }
    .stat-card .stat-value { font-size:28px; font-weight:700; letter-spacing:-1px; margin-bottom:4px; }
    .stat-card .stat-label { font-size:12px; color:var(--text-dim); font-weight:500; }

    .stat-card.cyan .stat-icon { background:var(--accent-dim); color:var(--accent); }
    .stat-card.green .stat-icon { background:var(--success-dim); color:var(--success); }
    .stat-card.yellow .stat-icon { background:var(--warn-dim); color:var(--warn); }
    .stat-card.purple .stat-icon { background:var(--purple-dim); color:var(--purple); }
    .stat-card.cyan .stat-value { color:var(--accent); }
    .stat-card.green .stat-value { color:var(--success); }
    .stat-card.yellow .stat-value { color:var(--warn); }
    .stat-card.purple .stat-value { color:var(--purple); }

    /* ===== DATA TABLE ===== */
    .section-head {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:18px;
    }
    .section-head h3 { font-size:15px; font-weight:700; }
    .table-wrap {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px;
    }
    table { width:100%; border-collapse:collapse; font-size:13px; }
    thead { background:rgba(255,255,255,0.03); }
    th { padding:12px 16px; text-align:left; font-weight:600; color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:0.8px; border-bottom:1px solid var(--border); }
    td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
    tr:last-child td { border-bottom:none; }
    tr:hover td { background:rgba(255,255,255,0.02); }
    .badge-type {
      display:inline-block; padding:3px 10px; border-radius:6px;
      font-size:11px; font-weight:600;
    }
    .badge-type.cyan { background:var(--accent-dim); color:var(--accent); }
    .badge-type.green { background:var(--success-dim); color:var(--success); }
    .badge-type.yellow { background:var(--warn-dim); color:var(--warn); }


    .empty-state {
      text-align:center; padding:48px 20px; color:var(--text-dim); font-size:13px;
    }
    .empty-state .material-icons-round { font-size:40px; margin-bottom:12px; display:block; opacity:0.3; }

    /* ===== FORM ===== */
    .form-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:24px; margin-bottom:28px;
    }
    .form-card h4 { font-size:14px; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
    .form-card h4 .material-icons-round { font-size:18px; color:var(--accent); }
    .form-row { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
    .form-group { flex:1; min-width:160px; }
    .form-group label { display:block; font-size:11px; color:var(--text-secondary); margin-bottom:5px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
    .form-group input, .form-group select {
      width:100%; padding:9px 12px; background:var(--bg-input); border:1px solid var(--border-strong);
      border-radius:7px; color:var(--text); font-size:13px; outline:none; transition:var(--transition);
      font-family:inherit;
    }
    .form-group input:focus, .form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
    .form-group select { cursor:pointer; }
    .form-group select option { background:var(--bg-card); color:var(--text); }

    /* ===== BUTTONS ===== */
    .btn {
      display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
      border-radius:7px; font-size:12px; font-weight:600; cursor:pointer;
      transition:var(--transition); border:1px solid transparent;
      font-family:inherit; white-space:nowrap;
    }
    .btn .material-icons-round { font-size:15px; }
    .btn-primary { background:var(--accent); color:#000; }
    .btn-primary:hover { background:#00c9f0; transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); }
    .btn-success { background:var(--success); color:#000; }
    .btn-success:hover { background:#4ade80; }
    .btn-ghost { background:transparent; color:var(--text-secondary); border-color:var(--border-strong); }
    .btn-ghost:hover { background:rgba(255,255,255,0.05); color:var(--text); }
    .btn-danger-ghost { background:transparent; color:var(--danger); border-color:var(--danger-dim); }
    .btn-danger-ghost:hover { background:var(--danger-dim); }
    .btn-sm { padding:5px 10px; font-size:11px; }
    .btn-sm .material-icons-round { font-size:14px; }

    /* Action btns in table */
    .action-btns { display:flex; gap:6px; }

    /* ===== TOAST ===== */
    #toastBox { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:8px; }
    .toast {
      padding:12px 20px; border-radius:10px; font-size:13px; font-weight:500;
      animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
      display:flex; align-items:center; gap:8px; min-width:220px;
      border:1px solid var(--border);
    }
    .toast .material-icons-round { font-size:18px; }
    .toast.success { background:rgba(52,211,153,0.15); color:var(--success); border-color:rgba(52,211,153,0.2); }
    .toast.error { background:rgba(248,113,113,0.15); color:var(--danger); border-color:rgba(248,113,113,0.2); }
    .toast.info { background:rgba(0,180,216,0.15); color:var(--accent); border-color:rgba(0,180,216,0.2); }
    @keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
    @keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(-10px)} }


    .modal-overlay {
      position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,0.6);
      display:none; align-items:center; justify-content:center;
      backdrop-filter:blur(4px);
    }
    .modal-overlay.show { display:flex; }
    .modal {
      background:var(--bg-card); border:1px solid var(--border-strong);
      border-radius:16px; padding:32px; width:480px; max-width:90vw;
      max-height:90vh; overflow-y:auto; animation:modalIn 0.25s ease;
    }
    @keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
    .modal h3 { font-size:16px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
    .modal h3 .material-icons-round { color:var(--accent); }
    .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }


    /* ===== UPLOAD ===== */
    .upload-zone {
      border:2px dashed var(--border-strong); border-radius:var(--radius-lg);
      padding:32px; text-align:center; cursor:pointer; transition:var(--transition);
      margin-bottom:16px; position:relative;
    }
    .upload-zone:hover, .upload-zone.dragover { border-color:var(--accent); background:var(--accent-dim); }
    .upload-zone .material-icons-round { font-size:36px; color:var(--text-dim); margin-bottom:8px; }
    .upload-zone p { color:var(--text-dim); font-size:13px; }
    .upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }

    /* ===== QUICK LINKS ===== */
    .quick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
    .quick-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
      padding:18px; cursor:pointer; transition:var(--transition);
      display:flex; align-items:center; gap:14px;
    }
    .quick-card:hover { border-color:var(--accent); background:var(--bg-card-hover); transform:translateY(-2px); }
    .quick-card .qi { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .quick-card .qt { font-size:13px; font-weight:600; }
    .quick-card .qd { font-size:11px; color:var(--text-dim); margin-top:2px; }

    /* Confirm dialog */
    .confirm-text { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:8px; }