/* KW-CMT Piling DB System - Design Tokens & Base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: #1a2035;
  --bg-card-hover: #1e2844;
  --bg-input: #0f1629;
  --border: #2a3454;
  --border-focus: #6366f1;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #9aa9be;
  --accent: #6366f1;
  --primary: #6366f1;
  --text-accent: #a5b4fc;
  --accent-hover: #818cf8;
  --accent-glow: rgba(99,102,241,0.15);
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --orange: #f97316;
  --cyan: #06b6d4;
  --purple: #8b5cf6;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.22);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --transition: all 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Layout */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 500;
  transition: transform 0.3s ease;
}
.sidebar-header {
  padding: 24px 20px; border-bottom: 1px solid var(--border);
}
.sidebar-logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary);
}
.sidebar-logo .logo-icon {
  width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: white;
}
.sidebar-logo .logo-text h1 { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.sidebar-logo .logo-text p { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-section { margin-bottom: 24px; }
.nav-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-muted); padding: 0 12px; margin-bottom: 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: var(--transition); cursor: pointer; margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-item.active {
  background: var(--accent-glow); color: var(--accent-hover);
  border: 1px solid rgba(99,102,241,0.2);
}
.nav-item .nav-icon { font-size: 18px; width: 24px; text-align: center; }
.nav-item .nav-badge {
  margin-left: auto; background: var(--accent); color: white; font-size: 11px;
  padding: 2px 8px; border-radius: 10px; font-weight: 600;
}

.sidebar-footer {
  padding: 16px; border-top: 1px solid var(--border);
}
.user-card {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.user-card:hover { background: var(--bg-card); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--cyan));
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white;
}
.user-info { flex: 1; }
.user-info .name { font-size: 13px; font-weight: 600; }
.user-info .role { font-size: 11px; color: var(--text-muted); }

.main-content { flex: 1; margin-left: 260px; min-height: 100vh; }

.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; border-bottom: 1px solid var(--border); background: var(--bg-secondary);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
}
.top-bar h2 { font-size: 20px; font-weight: 700; }
.top-bar-actions { display: flex; align-items: center; gap: 12px; }

.page-content { padding: 32px; }

/* Cards */
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: var(--transition);
}
.card:hover { border-color: rgba(99,102,241,0.3); }
.card-header {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 16px; font-weight: 600; }
.card-body { padding: 24px; }

/* Detail Panel Enhancements */
.detail-panel { width: 520px; }
.detail-section { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.detail-section:last-child { border-bottom: none; }
.detail-section-header { 
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: var(--cyan); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-field { margin-bottom: 0; } /* Reset margin in grid */
.field-label { color: var(--text-muted); font-size: 11px; margin-bottom: 4px; font-weight: 600; }
.field-value { color: var(--text-primary); font-size: 14px; font-weight: 500; min-height: 20px; }
.field-value.highlight { color: var(--cyan); font-weight: 700; }

.status-update-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; margin-top: 24px;
}

@media (max-width: 600px) {
  .detail-panel { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Stat Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; position: relative; overflow: hidden; transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(99,102,241,0.3); box-shadow: var(--shadow); }
.stat-card .stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.stat-card .stat-value { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.stat-card .stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }
.stat-card .stat-glow {
  position: absolute; top: -30px; right: -30px; width: 100px; height: 100px;
  border-radius: 50%; opacity: 0.08; filter: blur(20px);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: var(--transition); font-family: inherit;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-danger { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* Inputs */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-input, .form-select {
  width: 100%; max-width: 100%; min-width: 0; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 16px;
  font-family: inherit; transition: var(--transition); outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder { color: var(--text-muted); }
/* Date/time picker icon is black by default — invisible on the dark theme. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { filter: invert(1); }

/* Material (工字) searchable picker — Components.attachMaterialPicker */
.material-picker-wrap { position: relative; }
.material-picker-results {
  position: absolute; top: 100%; left: 0; right: 0; min-width: 220px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  z-index: 9999; max-height: 220px; overflow-y: auto; display: none; box-shadow: var(--shadow-lg);
}
.material-picker-results .search-result-item {
  padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px;
}
.material-picker-results .search-result-item:hover,
.material-picker-results .search-result-item.active { background: rgba(99,102,241,0.15); }
.material-picker-results .mp-disabled { opacity: 0.45; cursor: not-allowed; }
.material-picker-results .mp-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.material-picker-results .mp-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Search Bar */
.search-container { position: relative; max-width: 560px; margin: 0 auto 32px; }
.search-container .search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--text-muted); pointer-events: none;
}
.search-input {
  width: 100%; padding: 16px 20px 16px 50px; background: var(--bg-card);
  border: 2px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary);
  font-size: 16px; font-family: inherit; transition: var(--transition); outline: none;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow); }
.search-input::placeholder { color: var(--text-muted); }

/* Table */
.table-container { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--bg-secondary); }
th {
  padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td {
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px;
  white-space: nowrap;
}
tbody tr { transition: var(--transition); cursor: pointer; }
tbody tr:hover { background: var(--bg-card-hover); }
tbody tr:last-child td { border-bottom: none; }

/* Status Badge */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* Modal / Login */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
}
.modal-box h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.modal-box .subtitle { color: var(--text-secondary); font-size: 14px; text-align: center; margin-bottom: 32px; }
.login-error { color: var(--danger); font-size: 13px; text-align: center; min-height: 20px; margin-bottom: 8px; }

/* Pile Detail Panel */
.detail-panel {
  position: fixed; top: 0; right: -480px; width: 480px; height: 100vh;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  z-index: 200; transition: right 0.3s ease; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.detail-panel.open { right: 0; }
.detail-panel-header {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--bg-secondary); z-index: 1;
}
.detail-panel-body { padding: 24px; }
.detail-field { margin-bottom: 16px; }
.detail-field .field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.detail-field .field-value { font-size: 15px; font-weight: 500; }

/* Filter Bar */
.filter-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.filter-chip {
  padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: var(--transition);
}
.filter-chip:hover { border-color: var(--chip-color, var(--accent)); color: var(--text-primary); }
.filter-chip.active { background: var(--chip-color, var(--accent)); border-color: var(--chip-color, var(--accent)); color: white; }
.filter-chip .chip-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: rgba(255,255,255,0.12); font-size: 11px; font-weight: 700; text-align: center;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,0.28); }

/* Site/Block Selector */
.site-selector {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 24px; flex-wrap: wrap;
}
.site-selector label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.site-selector .form-select {
  width: auto; min-width: 140px; padding: 8px 12px; font-size: 13px;
}
.site-selector .divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* Progress Bar */
.progress-bar-wrap { background: var(--bg-input); border-radius: 6px; height: 8px; overflow: hidden; margin-top: 8px; }
.progress-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width 0.6s ease; }

/* Tab content */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Empty State */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }

/* Toast */
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 14px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); animation: slideIn 0.3s ease; min-width: 280px;
}
.toast-success { background: #065f46; color: #a7f3d0; border: 1px solid #10b981; }
.toast-error { background: #7f1d1d; color: #fca5a5; border: 1px solid #ef4444; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Responsive — Mobile-first for site use */
.menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 24px; cursor: pointer; }

/* Sidebar overlay backdrop */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 99; backdrop-filter: blur(2px);
}

/* Responsive Control Bar */
.top-controls { 
  display: flex; justify-content: space-between; align-items: center; 
  margin-bottom: 24px; background: var(--bg-secondary); padding: 16px; 
  border-radius: var(--radius-md); border: 1px solid var(--border);
}

@media (max-width: 768px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .top-controls { flex-direction: column; align-items: flex-start; gap: 12px; }
  .top-controls > div { width: 100%; }
}


@media (max-width: 768px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  /* Sidebar: overlay mode */
  .sidebar { transform: translateX(-100%); z-index: 200; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.active { display: block; }

  /* Ensure main content doesn't overflow mobile viewport */
  .main-content { margin-left: 0; max-width: 100vw; overflow-x: hidden; }
  .menu-toggle { display: block; }

  /* Top bar */
  .top-bar { padding: 12px 16px; }
  .top-bar h2 { font-size: 16px; }
  .top-bar-actions { gap: 6px; }
  .top-bar-actions .btn { font-size: 12px; padding: 6px 10px; }

  /* Page content */
  .page-content { padding: 16px 12px; max-width: 100%; }

  /* Stats grid: 2 columns on phone */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 24px; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 18px; margin-bottom: 10px; }
  .stat-card .stat-label { font-size: 11px; }

  /* Search */
  .search-container { margin-bottom: 20px; max-width: 100%; }
  .search-input { font-size: 16px; padding: 12px 14px 12px 42px; border-radius: var(--radius); }
  .search-container .search-icon { left: 14px; font-size: 16px; }

  /* Filter bar: horizontal scroll */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 8px; margin-bottom: 16px; width: 100%; }
  .filter-chip { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }

  /* Site selector: Site + Block side by side (2 columns) to save vertical space.
     DOM order is label, select, divider, label, select — placed explicitly. */
  .site-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 12px;
  }
  .site-selector .divider { display: none; }
  .site-selector label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .site-selector select:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .site-selector label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .site-selector select:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .site-selector .form-select { width: 100%; }
  .site-selector label { font-size: 11px; }

  /* Cards */
  .card { border-radius: var(--radius-sm); max-width: 100%; }
  .card-header { padding: 14px 16px; }
  .card-header h3 { font-size: 14px; }
  .card-body { padding: 16px; }

  /* Admin Import Layout Fixes */
  div[style*="display:flex;gap:20px;"] { flex-direction: column !important; gap: 12px !important; }

  /* Tables: horizontal scroll + touch-friendly rows */
  .table-container { border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; overflow-x: auto; max-width: 100%; }
  th { padding: 10px 12px; font-size: 10px; }
  td { padding: 12px; font-size: 13px; white-space: nowrap; }
  tbody tr { cursor: pointer; }
  tbody tr:active { background: var(--accent-glow); }

  /* Detail panel: full screen overlay */
  .detail-panel { width: 100%; right: -100%; }
  .detail-panel.open { right: 0; }
  .detail-panel-header { padding: 16px; }
  .detail-panel-header h3 { font-size: 16px; }
  .detail-panel-body { padding: 16px; }
  .detail-section { margin-bottom: 16px; padding-bottom: 12px; }
  .detail-section-header { font-size: 12px; margin-bottom: 12px; }
  .detail-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field-label { font-size: 10px; }
  .field-value { font-size: 13px; }

  /* Forms */
  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 12px; }
  .form-input, .form-select { padding: 10px 12px; font-size: 14px; }

  /* Admin form: single column on mobile */
  #addPileForm div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .form-section-header h4 { font-size: 14px; }

  /* Admin tab nav */
  .filter-bar[style*="margin-bottom:24px"] { gap: 6px; }

  /* Modal */
  .modal-box { padding: 28px 20px; margin: 0 12px; }
  .modal-box h2 { font-size: 20px; }

  /* Toast: bottom of screen on mobile */
  .toast-container { top: auto; bottom: 24px; right: 12px; left: 12px; }
  .toast { min-width: auto; font-size: 13px; padding: 12px 16px; }

  /* Status update in detail panel */
  .detail-panel > div:last-child { padding: 0 16px 24px !important; }

  /* Strata Row Fix for Mobile */
  .strata-row { 
    display: grid;
    grid-template-columns: 1fr 1fr !important; 
    gap: 12px !important; 
    padding: 12px; 
    background: rgba(255,255,255,0.03); 
    border-radius: var(--radius-sm); 
    border: 1px solid var(--border);
  }
  .strata-row div:nth-child(3) { grid-column: span 2; } /* Soil type full width */
  .strata-row button { grid-column: span 2; width: 100%; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px !important; }

  /* Final Set Grid Fix */
  .fs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* --- UX & Mobile Optimization Additions --- */
  
  /* 1. Touch Targets (Apple HIG) */
  .btn, .form-input, .form-select, .filter-chip { min-height: 44px; }
  .btn-sm { min-height: 36px; }

  /* 2. Sticky Bottom Bar */
  .sticky-bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 16px; background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 1000; display: flex; gap: 12px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  .has-sticky-bottom { padding-bottom: 100px !important; }

  /* 3. Mobile Card Table */
  .mobile-card-table table, 
  .mobile-card-table tbody, 
  .mobile-card-table tr, 
  .mobile-card-table td { display: block; width: 100%; }
  table.mobile-card-table,
  .mobile-card-table > table {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
  }
  
  .mobile-card-table thead { display: none; }
  
  .mobile-card-table tr {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin-bottom: 16px; padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); position: relative;
  }
  
  .mobile-card-table td {
    padding: 8px 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.03);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    white-space: normal;
  }
  .mobile-card-table td:last-child { border-bottom: none; }
  
  .mobile-card-table td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0; width: 100px;
  }
  
  /* Horizontal scroll hint */
  .scroll-hint { display: block; text-align: center; font-size: 12px; color: var(--text-muted); padding-bottom: 8px; animation: pulse 2s infinite; }
  @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

  /* 4. Master Summary date filter: stack vertically */
  .top-controls .date-filter-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }
  .top-controls .date-filter-group span.date-sep { display: none; }
  .top-controls .date-filter-group input[type="date"] { width: 100% !important; }
  .top-controls .date-filter-group .btn-icon { align-self: flex-end; }

  /* 5. Glass panel: stack on mobile */
  .glass-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .glass-panel .form-group { min-width: 0 !important; }
  .glass-panel input[type="date"] { max-width: 100% !important; width: 100% !important; }

  /* 6. Resources form: keep 工種/名稱 and 人數 side by side (not stacked),
     mirroring the header row, with the remove button at the end. */
  .item-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 12px !important;
    align-items: center !important;
  }
  .item-name { flex: 2 1 0 !important; min-width: 0 !important; width: auto !important; }
  .item-qty { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  .item-action { flex: 0 0 auto !important; width: auto !important; justify-content: center !important; align-self: center !important; }

  /* 7. Batch table: card mode on mobile */
  .batch-table-wrap { overflow: visible !important; }
  table.batch-table,
  table.batch-table tbody,
  table.batch-table tr,
  table.batch-table td { display: block; width: 100%; }
  table.batch-table thead { display: none; }
  table.batch-table tr {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin-bottom: 16px; padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); position: relative;
  }
  table.batch-table td {
    padding: 8px 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    white-space: normal;
  }
  table.batch-table td:last-child { border-bottom: none; }
  table.batch-table td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0; min-width: 80px;
  }
  table.batch-table td input,
  table.batch-table td select { width: 100% !important; max-width: none !important; }
  table.batch-table td .row-search-wrap { width: 100%; }
  table.batch-table td .row-search-wrap input { width: 100% !important; }

  /* 8. Batch save button: sticky bottom */
  .batch-save-wrap {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 16px; background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 1000; display: flex; justify-content: center;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  .batch-save-wrap .btn { width: 100%; }
}

/* Extra small: single column detail grid */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card .stat-value { font-size: 20px; }
  .detail-grid { grid-template-columns: 1fr; gap: 8px; }
  .top-bar h2 { font-size: 14px; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .detail-panel > div:last-child {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .toast-container {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ==========================================
   FILE GALLERY & UPLOAD SYSTEM
   ========================================== */

/* File Section Container */
.pile-files-section { margin-top: 8px; }
.pile-files-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.pile-files-header h4 { font-size: 14px; font-weight: 700; color: var(--cyan); margin: 0; }
.pile-files-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Upload Buttons Group */
.file-upload-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.file-upload-actions .btn {
  font-size: 12px; padding: 7px 14px; border-radius: 8px;
}
.file-upload-actions input[type="file"] { display: none; }

.pile-file-groups { display: flex; flex-direction: column; gap: 20px; }
.pile-file-group {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: rgba(17, 24, 39, 0.25);
}
.pile-file-group-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary);
}
.pile-file-group-heading h5 { margin: 0; font-size: 13px; color: var(--text-primary); }
.pile-file-group-heading span { font-size: 11px; color: var(--text-muted); font-weight: 700; }

.file-document-list { display: flex; flex-direction: column; }
.file-document-row {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.file-document-row:last-child { border-bottom: none; }
.file-document-row:hover { background: rgba(99, 102, 241, 0.06); }
.file-document-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.file-document-icon { font-size: 24px; flex: 0 0 auto; }
.file-document-details { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.file-document-details strong {
  overflow: hidden; color: var(--text-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.file-document-details span { color: var(--text-muted); font-size: 11px; }
.file-document-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* File Gallery Grid */
.file-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; padding: 12px;
}
.file-gallery-empty {
  grid-column: 1 / -1; text-align: center; padding: 32px 16px;
  color: var(--text-muted); font-size: 13px;
}
.file-gallery-empty .empty-file-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.5; }

/* File Card */
.file-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-secondary);
  transition: var(--transition); cursor: pointer;
}
.file-card:hover {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Image Preview */
.file-card-preview {
  width: 100%; height: 120px; object-fit: cover;
  display: block; background: var(--bg-primary);
}

/* PDF Preview Card */
.file-card-pdf-preview {
  width: 100%; height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.05));
}
.file-card-pdf-icon { font-size: 32px; }
.file-card-pdf-label {
  font-size: 10px; font-weight: 700; color: #ef4444;
  text-transform: uppercase; letter-spacing: 1px;
}

/* File Card Info */
.file-card-info {
  padding: 8px 10px;
}
.file-card-name {
  font-size: 11px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.file-card-meta {
  font-size: 10px; color: var(--text-muted);
}

/* File Card Delete Button */
.file-card-delete {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(239,68,68,0.85); color: #fff;
  border: none; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}
.file-card:hover .file-card-delete { opacity: 1; }
.file-card-delete:hover { background: #ef4444; transform: scale(1.1); }

/* Upload Progress Overlay */
.file-upload-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
.file-upload-spinner {
  width: 48px; height: 48px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.file-upload-text { color: var(--text-primary); font-size: 15px; font-weight: 600; }

/* ==========================================
   LIGHTBOX MODAL
   ========================================== */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px); z-index: 3000;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.lightbox-overlay.active { opacity: 1; pointer-events: all; }

.lightbox-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; background: rgba(0,0,0,0.5);
}
.lightbox-title { color: #fff; font-size: 14px; font-weight: 600; }
.lightbox-actions { display: flex; gap: 8px; }
.lightbox-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.lightbox-btn:hover { background: rgba(255,255,255,0.2); }

.lightbox-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 20px; cursor: grab;
}
.lightbox-body:active { cursor: grabbing; }
.lightbox-body img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition: transform 0.3s ease; border-radius: 4px;
}

/* ==========================================
   WEBCAM CAPTURE MODAL
   ========================================== */
.webcam-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px); z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.webcam-overlay.active { opacity: 1; pointer-events: all; }

.webcam-container {
  width: 100%; max-width: 640px; background: var(--bg-card);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.webcam-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.webcam-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text-primary); }
.webcam-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #ef4444; font-weight: 600;
}
.webcam-live-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }

.webcam-video-wrap {
  position: relative; width: 100%; background: #000;
  display: flex; justify-content: center; align-items: center;
}
.webcam-video-wrap video, .webcam-video-wrap canvas {
  width: 100%; max-height: 60vh; object-fit: contain; display: block;
}
.webcam-video-wrap canvas { display: none; }

/* Document Scanner Overlay Effects */
.webcam-scanner-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: scan 2s linear infinite; opacity: 0.5;
}
@keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

.webcam-scanner-corners {
  position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px;
  border: 2px solid rgba(255,255,255,0.2); pointer-events: none;
}
.webcam-scanner-corners::before, .webcam-scanner-corners::after,
.webcam-scanner-corners span::before, .webcam-scanner-corners span::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--accent); border-style: solid;
}
.webcam-scanner-corners::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.webcam-scanner-corners::after { top: -2px; right: -2px; border-width: 3px 3px 0 0; }

.webcam-controls { padding: 16px 20px; background: var(--bg-secondary); }
.webcam-device-select {
  width: 100%; padding: 10px; margin-bottom: 16px; background: var(--bg-primary);
  border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); outline: none;
}
.webcam-review-actions { display: none; }
.webcam-container.reviewing .webcam-video-wrap video { display: none; }
.webcam-container.reviewing .webcam-video-wrap canvas { display: block; }
.webcam-container.reviewing .webcam-scanner-line,
.webcam-container.reviewing .webcam-scanner-corners { display: none; }
.webcam-container.reviewing .webcam-capture-actions { display: none; }
.webcam-container.reviewing .webcam-review-actions { display: flex; }

@media (max-width: 640px) {
  .file-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .file-card-preview, .file-card-pdf-preview { height: 90px; }
  .file-document-row { align-items: flex-start; flex-wrap: wrap; }
  .file-document-main { flex-basis: calc(100% - 4px); }
  .file-document-actions { width: 100%; padding-left: 34px; }
  .webcam-container { max-width: 100%; border-radius: 0; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   BATCH UPLOAD MODAL
   ========================================== */
.batch-upload-modal { padding: 3vh 2vw; }
.batch-upload-modal .modal-box {
  width: min(1100px, 96vw); max-width: 1100px; height: min(88vh, 900px); max-height: 88vh;
  padding: 24px; display: flex; flex-direction: column; overflow: hidden;
}
.batch-upload-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }
.batch-upload-header h3 { margin: 0; font-size: 18px; color: var(--text-primary); }
.batch-upload-help { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.batch-file-list { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; padding-right: 8px; }
.batch-file-item { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--radius); background: var(--bg-primary); border: 1px solid var(--border); }
.batch-file-item.match { border-left: 4px solid #8b5cf6; }
.batch-file-item.done, .batch-file-item.linked, .batch-file-item.renamed { border-left: 4px solid var(--success); }
.batch-file-item.unmatch, .batch-file-item.error { border-left: 4px solid var(--danger); }
.batch-file-item.uploading { border-left: 4px solid #3b82f6; }
.batch-file-item.duplicate { border-left: 4px solid #f59e0b; }
.batch-file-icon { flex: 0 0 auto; font-size: 24px; }
.batch-file-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.batch-file-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-file-size { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.batch-file-status { width: 108px; text-align: center; }
.batch-file-assign { width: 210px; }
.batch-file-assign .form-input { width: 100%; padding: 6px; font-size: 13px; }
.batch-file-pile { font-weight: 700; color: var(--cyan); }
.batch-status-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.batch-status-badge.match { background: rgba(139,92,246,0.16); color: #a78bfa; border: 1px solid rgba(139,92,246,0.4); }
.batch-status-badge.unmatch { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.batch-status-badge.uploading { background: rgba(59,130,246,0.15); color: #3b82f6; border: 1px solid rgba(59,130,246,0.3); }
.batch-status-badge.done, .batch-status-badge.linked, .batch-status-badge.renamed { background: rgba(34,197,94,0.15); color: var(--success); border: 1px solid rgba(34,197,94,0.3); }
.batch-status-badge.duplicate { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.35); }
.batch-status-badge.error { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.batch-actions { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }

@media (max-width: 640px) {
  .batch-upload-modal { padding: 0; }
  .batch-upload-modal .modal-box { width: 100%; height: 100dvh; max-height: 100dvh; }
  .batch-file-item { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .batch-file-info { min-width: calc(100% - 48px); }
  .batch-file-status { width: auto; margin-left: 34px; }
  .batch-file-assign { flex: 1; width: auto; min-width: 150px; }
}

/* ==========================================
   MOBILE BOTTOM TAB NAVIGATION
   ========================================== */
/* Hidden on desktop; shown only on phones. */
.bottom-nav { display: none; }

@media (max-width: 768px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  :root { --bottom-nav-h: 58px; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1500;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(17, 24, 39, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none; cursor: pointer;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 10px; font-weight: 600;
    padding: 6px 0;
    min-height: 44px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item .bottom-nav-icon { font-size: 20px; line-height: 1; }
  .bottom-nav-item .bottom-nav-label { font-size: 10px; }
  .bottom-nav-item.active { color: var(--accent); }
  .bottom-nav-item:active { background: rgba(255, 255, 255, 0.04); }

  /* Make room so content/sidebar isn't hidden behind the bar. */
  body.has-bottom-nav .main-content { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav .sidebar { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }

  /* Lift existing page-level fixed bottom bars above the tab bar so they don't overlap. */
  body.has-bottom-nav .sticky-bottom-bar,
  body.has-bottom-nav .batch-save-wrap,
  body.has-bottom-nav .export-actions {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
  /* And give their content extra clearance. */
  body.has-bottom-nav .has-sticky-bottom { padding-bottom: calc(100px + var(--bottom-nav-h)) !important; }
}

/* Pinch zoom applies its scale to fixed-position UI as well as page content.
   MobileUI supplies the visual viewport geometry below so the two navigation
   surfaces keep their original physical size and stay attached to the visible
   screen while the page underneath zooms and pans. */
@media (max-width: 768px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  html.viewport-chrome-locked .bottom-nav {
    position: absolute;
    left: var(--viewport-chrome-left);
    top: var(--viewport-chrome-nav-top);
    right: auto;
    bottom: auto;
    width: var(--viewport-chrome-width);
    transform: scale(var(--viewport-chrome-inverse-scale));
    transform-origin: left top;
  }

  html.viewport-chrome-locked .sidebar {
    position: absolute;
    left: var(--viewport-chrome-left);
    top: var(--viewport-chrome-top);
    bottom: auto;
    height: var(--viewport-chrome-height);
    transform: scale(var(--viewport-chrome-inverse-scale)) translateX(-100%);
    transform-origin: left top;
    transition: none;
  }
  html.viewport-chrome-locked .sidebar.open {
    transform: scale(var(--viewport-chrome-inverse-scale));
  }

  html.viewport-chrome-locked .sidebar-backdrop {
    position: absolute;
    inset: auto;
    left: var(--viewport-chrome-left);
    top: var(--viewport-chrome-top);
    width: var(--viewport-chrome-width);
    height: var(--viewport-chrome-height);
    transform: scale(var(--viewport-chrome-inverse-scale));
    transform-origin: left top;
  }
}

/* ==========================================================================
   Permission-based access control (Req 3 RBAC)
   js/auth.js adds a body.can-<perm> class for each permission the signed-in user
   holds (user_add / user_delete / edit_piles / edit_reports / system_admin).
   Mark a control with .perm-<perm>; it is HIDDEN whenever the body lacks the
   matching capability (and keeps its natural display when present, so nothing
   needs restoring). Combo helpers cover controls reachable by more than one perm.
   This is UX only; the Express middleware (requirePerm) is the real boundary.
   ========================================================================== */
body:not(.can-user_add)     .perm-user_add,
body:not(.can-user_delete)  .perm-user_delete,
body:not(.can-edit_piles)   .perm-edit_piles,
body:not(.can-edit_reports) .perm-edit_reports,
body:not(.can-system_admin) .perm-system_admin,
/* user-management area: visible if you can add OR delete users */
body:not(.can-user_add):not(.can-user_delete) .perm-user_mgmt,
/* the 管理 sidebar link: visible if you hold any back-office capability */
body:not(.can-edit_piles):not(.can-user_add):not(.can-user_delete):not(.can-system_admin) .perm-admin-panel {
  display: none !important;
}

/* Small job-title / read-only badge used in the sidebar / profile user card. */
.user-role-label:empty { display: none; }

/* Permission checkbox rows in the register form. */
.perm-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.perm-check input { width: 16px; height: 16px; }

/* ========================================================================== 
   2026 mobile UI foundation
   ========================================================================== */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 3px solid var(--text-accent);
  outline-offset: 2px;
}

.connection-banner,
.pwa-update-banner {
  position: fixed; left: 12px; right: 12px; z-index: 99990;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgba(234, 179, 8, .55); border-radius: var(--radius-md);
  background: #33280b; color: #fef3c7; box-shadow: var(--shadow-lg);
  font-size: 13px; line-height: 1.4;
}
.connection-banner { top: calc(8px + env(safe-area-inset-top, 0px)); padding: 10px 14px; }
.connection-banner.active { display: flex; }
.pwa-update-banner {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 12px 14px; border-color: rgba(99, 102, 241, .65); background: #1c2143;
}
.pwa-update-banner.active { display: flex; }
.pwa-update-banner > div { display: grid; gap: 2px; }
.pwa-update-banner span { color: var(--text-secondary); font-size: 12px; }

.mobile-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 4px 4px;
}
.mobile-pager-label { min-width: 92px; text-align: center; color: var(--text-secondary); font-size: 12px; }
.load-more-wrap { display: flex; justify-content: center; padding: 12px 0 4px; }
.load-more-wrap .btn { min-width: min(240px, 100%); justify-content: center; }
.table-scroll-shell { position: relative; max-width: 100%; }
.table-scroll-shell::after {
  content: '左右滑動查看更多'; display: none; color: var(--text-secondary);
  font-size: 12px; text-align: right; padding: 6px 2px 0;
}
.mobile-sheet-backdrop {
  position: fixed; inset: 0; z-index: 2090; background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.mobile-sheet-backdrop.active { opacity: 1; pointer-events: auto; }
.mobile-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100;
  max-height: min(82dvh, 720px); overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: var(--bg-secondary); box-shadow: 0 -12px 42px rgba(0,0,0,.5);
  transform: translateY(105%); transition: transform .22s ease;
}
.mobile-sheet.active { transform: translateY(0); }
.mobile-sheet-handle { width: 44px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--border); }

html.dialog-open,
html.dialog-open body { overflow: hidden !important; }

@media (max-width: 768px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  :root { --app-bar-h: 56px; --bottom-nav-h: 64px; }
  html, body { min-height: 100%; min-height: 100dvh; }
  body { font-size: 14px; padding-top: env(safe-area-inset-top, 0px); }
  body.has-bottom-nav .main-content {
    min-height: 100dvh;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Uniform 44px interaction targets. */
  :where(.btn, .btn-sm, .btn-icon, .menu-toggle, .filter-chip, .tab-btn,
    .date-nav-btn, summary, .modal-close, .lightbox-btn, .bottom-nav-item,
    button[onclick], a.btn) { min-height: 44px; }
  :where(.btn-icon, .menu-toggle, .date-nav-btn, .modal-close, .lightbox-btn) {
    min-width: 44px; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
  }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }

  /* 56px app bar with one readable title line. */
  .top-bar,
  .mobile-app-bar {
    min-height: var(--app-bar-h); height: auto;
    padding: 6px max(12px, env(safe-area-inset-left, 0px));
    gap: 8px; align-items: center;
  }
  .top-bar > :is(h1, h2, .top-bar-title),
  .top-bar > div:first-child > :is(h1, h2),
  .top-bar :is(h1, h2) {
    min-width: 0; margin: 0; font-size: 16px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .top-bar :is(h1, h2) small,
  .top-bar .subtitle,
  .top-bar .title-en { display: none; }
  .top-bar-actions { min-width: 0; gap: 4px; justify-content: flex-end; }
  .top-bar-actions .btn { min-width: 44px; padding: 8px 10px; }
  .top-bar-actions .btn .action-label { display: none; }

  .page-content { padding: 14px 12px 20px; }
  .card-header, .card-body { padding: 14px; }
  .stat-card .stat-label, .field-label, .meta-text, .text-muted { color: var(--text-muted); }
  .field-label, .stat-card .stat-label { font-size: 12px; }
  .status-badge, .badge, .chip-count { font-size: 11px !important; }

  .bottom-nav {
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .bottom-nav-item .bottom-nav-label { font-size: 11px; }
  body.has-bottom-nav .sticky-bottom-bar,
  body.has-bottom-nav .batch-save-wrap,
  body.has-bottom-nav .export-actions,
  body.has-bottom-nav .sticky-save-bar {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  .table-scroll-shell::after { display: block; }
  .table-container, [class*="table-wrap"], [class*="matrix-wrap"] {
    overscroll-behavior-inline: contain; scrollbar-width: thin;
  }
  .table-container table:not(.mobile-card-table table) th:first-child,
  .sticky-first-column th:first-child,
  .sticky-first-column td:first-child {
    position: sticky; left: 0; z-index: 3; background: var(--bg-secondary);
    box-shadow: 1px 0 0 var(--border);
  }
  .table-container table:not(.mobile-card-table table) td:first-child { background: var(--bg-card); }

  /* Full-height, safe-area aware dialogs/sheets. */
  .modal-overlay { padding: 0; }
  .modal-overlay .modal-box,
  .modal-overlay .modal-content {
    width: 100%; max-width: none; max-height: 100dvh; margin: 0;
    border-radius: 0; overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-overlay button[aria-label="關閉"] { min-width: 44px; min-height: 44px; }
  .pwa-update-banner {
    bottom: calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: stretch;
  }
  .pwa-update-banner .btn { justify-content: center; }

  .sidebar { padding-top: env(safe-area-inset-top, 0px); }
  .sidebar .nav-item, .user-card { min-height: 44px; }
  .sidebar-backdrop { z-index: 190; }

  .sticky-save-bar {
    position: fixed; left: 0; right: 0; z-index: 1200;
    display: flex; gap: 10px; padding: 10px 12px;
    background: rgba(17,24,39,.97); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,.35);
  }
  .sticky-save-bar .btn { flex: 1; justify-content: center; }
  .has-sticky-save { padding-bottom: calc(76px + var(--bottom-nav-h)) !important; }

  /* Final mobile touch-target override. Page-local compact rules and inline
     widths must never shrink an actionable target below 44px. */
  .menu-toggle,
  .btn, .btn-sm, .btn-icon, .filter-chip,
  .control-btn, .lightbox-btn, .plan-search-input,
  .material-date-step, .material-date-shortcut,
  .machine-tab-btn, .tab-btn,
  details > summary {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .menu-toggle, .btn-icon, .lightbox-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .webcam-device-select { min-height:44px !important; }
  .bottom-nav .bottom-nav-label { font-size:11px !important; }
  .status-badge, .type-badge, .pile-type-badge { font-size:11px !important; }
  .event-actions .btn, .event-expand, .event-card a { min-height:44px !important; display:inline-flex; align-items:center; justify-content:center; }
  label:has(input[type="checkbox"]),
  .perm-check, .bg-toggle-row { min-height:44px; display:flex; align-items:center; }
  input[type="range"] { min-height:44px; }
  #dailyEventsBox a { min-height:44px; display:inline-flex; align-items:center; }
  .top-action-sheet .mobile-sheet-body { display:grid; gap:10px; }
  .top-action-sheet .mobile-sheet-body .btn,
  .top-action-sheet .mobile-sheet-body a { width:100%; justify-content:center; }
}

@media (max-width: 430px) and (orientation: landscape) {
  .top-bar { position: sticky; }
  .bottom-nav-item .bottom-nav-label { display: none; }
  :root { --bottom-nav-h: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}