/* Engineer Portal - Tailwind-based design */
/* 樣式隔離，避免與 WordPress 主題衝突 */

#grs-engineer-portal {
  position: relative !important;
  min-height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Spline Sans", "Noto Sans TC", sans-serif !important;
  overflow: visible !important;
  /* 確保 portal 容器本身不會產生額外高度 */
  height: auto !important;
}

/* 確保當 dashboard 顯示時，portal 容器的高度正確 */
body.grs-dashboard-active #grs-engineer-portal {
  min-height: 100vh !important;
}

/* 移除可能的 DIVI 或 WordPress 主題在 #grs-engineer-portal 周圍產生的間距 */
body #grs-engineer-portal,
.entry-content #grs-engineer-portal,
.et_pb_section #grs-engineer-portal,
.et_pb_row #grs-engineer-portal,
.et_pb_column #grs-engineer-portal,
.et_pb_code #grs-engineer-portal,
.et_pb_code_inner #grs-engineer-portal,
#main-content #grs-engineer-portal {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 當 dashboard 顯示時，確保 DIVI 容器也不會產生間距 */
body.grs-dashboard-active .entry-content,
body.grs-dashboard-active .et_pb_section,
body.grs-dashboard-active .et_pb_row,
body.grs-dashboard-active .et_pb_column,
body.grs-dashboard-active .et_pb_code,
body.grs-dashboard-active .et_pb_code_inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 當 dashboard 顯示時，確保頁面可以正常滾動到頂部 */
body.grs-dashboard-active {
  overflow-x: hidden !important;
}

body.grs-dashboard-active #grs-engineer-portal,
body.grs-dashboard-active #grs-engineer-portal .grs-portal__view[data-view="dashboard"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 針對 DIVI 可能的容器，使用負 margin 移除間距 */
.et_pb_section #grs-engineer-portal,
.et_pb_row #grs-engineer-portal,
.et_pb_column #grs-engineer-portal,
.et_pb_code #grs-engineer-portal,
.et_pb_code_inner #grs-engineer-portal,
#grs-engineer-portal {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dashboard view - 確保從頁面頂部開始 */
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] {
  position: relative !important;
  min-height: 100vh !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  /* 確保 dashboard 在最前面，並且從頂部開始 */
  top: 0 !important;
  left: 0 !important;
}

/* 當 dashboard 被隱藏時，確保完全不佔據空間 */
#grs-engineer-portal .grs-portal__view[data-view="dashboard"][style*="display: none"],
#grs-engineer-portal .grs-portal__view[data-view="dashboard"]:not([style*="display: block"]) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 確保 dashboard wrapper 和內容可見 */
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] .grs-dashboard-wrapper,
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] .grs-dashboard-main,
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] #grs-stats-cards {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 工單列表必須使用 grid 布局，不是 block */
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] #grs-jobs-list {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dashboard wrapper - 確保從頁面頂部開始，符合整頁 */
#grs-engineer-portal .grs-dashboard-wrapper {
  width: 100% !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
}

#grs-engineer-portal .grs-portal__view {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* 登入頁面改為相對定位，讓 DIVI 頁尾可以顯示 */
/* 當隱藏時，使用 display:none 確保不佔據空間 */
#grs-engineer-portal .grs-portal__view[data-view="login"] {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 當登入頁面被隱藏時，確保完全不佔據空間 */
#grs-engineer-portal .grs-portal__view[data-view="login"][style*="display: none"],
#grs-engineer-portal .grs-portal__view[data-view="login"]:not([style*="display: block"]) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 移除登入頁面容器的上下間距 */
#grs-engineer-portal .grs-portal__view[data-view="login"] > div,
#grs-engineer-portal .grs-portal__view[data-view="login"] .layout-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 移除登入表單容器的上下 padding */
#grs-engineer-portal .grs-portal__view[data-view="login"] .flex.flex-1.justify-center {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 手機版登入頁面：增加寬度，減少左右間距 */
@media screen and (max-width: 639px) {
  #grs-engineer-portal .grs-portal__view[data-view="login"] .flex.flex-1.justify-center {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  #grs-engineer-portal .grs-portal__view[data-view="login"] main.max-w-5xl {
    max-width: 100% !important;
    width: calc(100% - 1rem) !important;
    margin: 0 !important;
  }
  
  /* 表單容器在手機版拉寬 */
  #grs-engineer-portal .grs-portal__view[data-view="login"] .max-w-md {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* 表單區域減少 padding，讓輸入框更寬 */
  #grs-engineer-portal .grs-portal__view[data-view="login"] .order-1.lg\:order-2 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* 輸入框在手機版確保寬度 */
  #grs-engineer-portal .grs-portal__view[data-view="login"] input.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 輸入框容器確保寬度 */
  #grs-engineer-portal .grs-portal__view[data-view="login"] .relative.flex {
    width: 100% !important;
  }
  
  /* 手機版：歡迎回來！標題置中 */
  #grs-engineer-portal .grs-portal__view[data-view="login"] .text-left.mb-6.sm\:mb-8,
  #grs-engineer-portal .grs-portal__view[data-view="login"] .text-left {
    text-align: center !important;
  }
}

/* Dashboard 改用相對定位，成為頁面流的一部分，更好地配合 DIVI */
/* 這個規則會在上面更詳細的規則中被覆蓋 */

#grs-engineer-portal .h-full {
  height: 100% !important;
}

#grs-engineer-portal .w-full {
  width: 100% !important;
}

#grs-engineer-portal * {
  box-sizing: border-box;
}

/* 視圖顯示/隱藏由 JavaScript 控制，移除固定 display 規則 */
/* #grs-engineer-portal .grs-portal__view {
  display: block !important;
}

#grs-engineer-portal .grs-portal__view[style*="display: none"] {
  display: none !important;
} */

:root {
  --grs-bg: #f5f7fb;
  --grs-card: #ffffff;
  --grs-text: #222;
  --grs-muted: #667085;
  --grs-primary: #2563eb;
  --grs-primary-600: #1e40af;
  --grs-border: #e5e7eb;
  --grs-danger: #ef4444;
}

/* 漸層背景 */
#grs-engineer-portal .gradient-bg {
  background: linear-gradient(145deg, #a0d8f0, #d0e8f8) !important;
}

#grs-engineer-portal .dark .gradient-bg {
  background: linear-gradient(145deg, #101922, #1c2e3f) !important;
}

#grs-engineer-portal .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

#grs-engineer-portal .from-slate-50 {
  --tw-gradient-from: #f8fafc !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 250, 252, 0)) !important;
}

#grs-engineer-portal .to-slate-100 {
  --tw-gradient-to: #f1f5f9 !important;
}

#grs-engineer-portal .from-sky-50 {
  --tw-gradient-from: #f0f9ff !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 249, 255, 0)) !important;
}

#grs-engineer-portal .to-blue-50 {
  --tw-gradient-to: #eff6ff !important;
}

#grs-engineer-portal .dark .from-slate-900 {
  --tw-gradient-from: #0f172a !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)) !important;
}

#grs-engineer-portal .dark .to-slate-800 {
  --tw-gradient-to: #1e293b !important;
}

#grs-engineer-portal .bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

#grs-engineer-portal .bg-white\/90 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

#grs-engineer-portal .bg-sky-50\/90 {
  background-color: rgba(240, 249, 255, 0.9) !important;
}

#grs-engineer-portal .dark .bg-slate-900\/80 {
  background-color: rgba(15, 23, 42, 0.8) !important;
}

#grs-engineer-portal .backdrop-blur-md {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#grs-engineer-portal .border-slate-200\/50 {
  border-color: rgba(226, 232, 240, 0.5) !important;
}

#grs-engineer-portal .border-blue-100\/60 {
  border-color: rgba(219, 234, 254, 0.6) !important;
}

#grs-engineer-portal .border-blue-100 {
  border-color: #dbeafe !important;
}

#grs-engineer-portal .border-blue-200 {
  border-color: #bfdbfe !important;
}

#grs-engineer-portal .border-blue-50 {
  border-color: #eff6ff !important;
}

#grs-engineer-portal .dark .border-slate-700\/50 {
  border-color: rgba(51, 65, 85, 0.5) !important;
}

#grs-engineer-portal .sticky {
  position: sticky !important;
}

#grs-engineer-portal .z-40 {
  z-index: 40 !important;
}

#grs-engineer-portal .z-50 {
  z-index: 50 !important;
}

#grs-engineer-portal .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

#grs-engineer-portal .from-slate-900 {
  --tw-gradient-from: #0f172a !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)) !important;
}

#grs-engineer-portal .to-slate-700 {
  --tw-gradient-to: #334155 !important;
}

#grs-engineer-portal .dark .from-slate-50 {
  --tw-gradient-from: #f8fafc !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 250, 252, 0)) !important;
}

#grs-engineer-portal .dark .to-slate-300 {
  --tw-gradient-to: #cbd5e1 !important;
}

#grs-engineer-portal .bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

#grs-engineer-portal .text-transparent {
  color: transparent !important;
}

#grs-engineer-portal .bg-primary\/10 {
  background-color: rgba(37, 140, 244, 0.1) !important;
}

#grs-engineer-portal .dark .bg-primary\/20 {
  background-color: rgba(37, 140, 244, 0.2) !important;
}

#grs-engineer-portal .border-primary\/20 {
  border-color: rgba(37, 140, 244, 0.2) !important;
}

#grs-engineer-portal .hover\:border-primary\/30:hover {
  border-color: rgba(37, 140, 244, 0.3) !important;
}

#grs-engineer-portal .dark .hover\:border-primary\/50:hover {
  border-color: rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal .hover\:border-blue-200:hover {
  border-color: #bfdbfe !important;
}

#grs-engineer-portal .flex-shrink-0 {
  flex-shrink: 0 !important;
}

#grs-engineer-portal .min-w-0 {
  min-width: 0 !important;
}

#grs-engineer-portal .tracking-tight {
  letter-spacing: -0.025em !important;
}

#grs-engineer-portal .leading-relaxed {
  line-height: 1.625 !important;
}

#grs-engineer-portal .group:hover .grs-job-card {
  transform: translateY(-2px) !important;
}

/* 確保 Tailwind 類別能正確應用 */
#grs-engineer-portal .relative {
  position: relative !important;
}

#grs-engineer-portal .flex {
  display: flex !important;
}

#grs-engineer-portal .flex-col {
  flex-direction: column !important;
}

#grs-engineer-portal .flex-row {
  flex-direction: row !important;
}

#grs-engineer-portal .items-center {
  align-items: center !important;
}

#grs-engineer-portal .justify-center {
  justify-content: center !important;
}

#grs-engineer-portal .justify-between {
  justify-content: space-between !important;
}

#grs-engineer-portal .justify-start {
  justify-content: flex-start !important;
}

#grs-engineer-portal .items-start {
  align-items: flex-start !important;
}

#grs-engineer-portal .w-full {
  width: 100% !important;
}

#grs-engineer-portal .h-full {
  height: 100% !important;
}

#grs-engineer-portal .min-h-screen {
  min-height: 100vh !important;
}

#grs-engineer-portal .p-4 {
  padding: 1rem !important;
}

#grs-engineer-portal .p-8 {
  padding: 2rem !important;
}

#grs-engineer-portal .p-12 {
  padding: 3rem !important;
}

#grs-engineer-portal .mb-2 {
  margin-bottom: 0.5rem !important;
}

#grs-engineer-portal .mb-6 {
  margin-bottom: 1.5rem !important;
}

#grs-engineer-portal .mb-8 {
  margin-bottom: 2rem !important;
}

#grs-engineer-portal .mt-2 {
  margin-top: 0.5rem !important;
}

#grs-engineer-portal .mt-8 {
  margin-top: 2rem !important;
}

#grs-engineer-portal .text-center {
  text-align: center !important;
}

#grs-engineer-portal .text-left {
  text-align: left !important;
}

#grs-engineer-portal .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

#grs-engineer-portal .text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

#grs-engineer-portal .text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

#grs-engineer-portal .font-bold {
  font-weight: 700 !important;
}

#grs-engineer-portal .font-black {
  font-weight: 900 !important;
}

#grs-engineer-portal .text-slate-800 {
  color: #1e293b !important;
}

#grs-engineer-portal .text-slate-900 {
  color: #0f172a !important;
}

#grs-engineer-portal .text-slate-600 {
  color: #475569 !important;
}

#grs-engineer-portal .text-slate-500 {
  color: #64748b !important;
}

#grs-engineer-portal .text-slate-400 {
  color: #94a3b8 !important;
}

#grs-engineer-portal .text-primary {
  color: #258cf4 !important;
}

#grs-engineer-portal .text-black {
  color: #000000 !important;
}

/* 確保標題文字為黑色 */
#grs-engineer-portal header h1,
#grs-engineer-portal header .text-black,
#grs-engineer-portal .text-xl.text-black {
  color: #000000 !important;
}

#grs-engineer-portal header h1 * {
  color: #000000 !important;
}

#grs-engineer-portal .bg-white {
  background-color: #ffffff !important;
}

#grs-engineer-portal .bg-background-light {
  background-color: #f0f9ff !important;
}

#grs-engineer-portal .bg-background-dark {
  background-color: #eff6ff !important;
}

#grs-engineer-portal .bg-slate-50 {
  background-color: #f8fafc !important;
}

#grs-engineer-portal .bg-primary {
  background-color: #258cf4 !important;
}

#grs-engineer-portal .bg-primary:hover {
  background-color: rgba(37, 140, 244, 0.9) !important;
}

#grs-engineer-portal .text-slate-50 {
  color: #f8fafc !important;
}

#grs-engineer-portal .rounded-lg {
  border-radius: 1rem !important;
}

#grs-engineer-portal .rounded-xl {
  border-radius: 0.75rem !important;
}

#grs-engineer-portal .gap-2\.5 {
  gap: 0.625rem !important;
}

#grs-engineer-portal .mb-2\.5 {
  margin-bottom: 0.625rem !important;
}

#grs-engineer-portal .px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

#grs-engineer-portal .py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

#grs-engineer-portal .space-y-2\.5 > * + * {
  margin-top: 0.625rem !important;
}

#grs-engineer-portal .border-slate-100 {
  border-color: #f1f5f9 !important;
}

#grs-engineer-portal .hover\:bg-blue-50:hover {
  background-color: #eff6ff !important;
}

#grs-engineer-portal .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#grs-engineer-portal .pb-4 {
  padding-bottom: 1rem !important;
}

#grs-engineer-portal .gap-5 {
  gap: 1.25rem !important;
}

#grs-engineer-portal .bg-slate-100 {
  background-color: #f1f5f9 !important;
}

#grs-engineer-portal .bg-slate-200 {
  background-color: #e2e8f0 !important;
}

#grs-engineer-portal .bg-blue-50 {
  background-color: #eff6ff !important;
}

#grs-engineer-portal .bg-blue-100 {
  background-color: #dbeafe !important;
}

#grs-engineer-portal .dark .bg-slate-700 {
  background-color: #334155 !important;
}

#grs-engineer-portal .text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

#grs-engineer-portal .min-w-\[120px\] {
  min-width: 120px !important;
}

#grs-engineer-portal .duration-200 {
  transition-duration: 200ms !important;
}

#grs-engineer-portal .transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#grs-engineer-portal .rounded-full {
  border-radius: 9999px !important;
}

#grs-engineer-portal .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

#grs-engineer-portal .h-14 {
  height: 3.5rem !important;
}

#grs-engineer-portal .h-48 {
  height: 12rem !important;
}

#grs-engineer-portal .w-48 {
  width: 12rem !important;
}

#grs-engineer-portal .max-w-md {
  max-width: 28rem !important;
}

#grs-engineer-portal .max-w-5xl {
  max-width: 64rem !important;
}

#grs-engineer-portal .max-w-7xl {
  max-width: 80rem !important;
  min-width: 0 !important;
}

/* 鎖定 dashboard wrapper 尺寸，防止點擊時改變 */
#grs-engineer-portal .grs-dashboard-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#grs-engineer-portal .grs-dashboard-wrapper > main.max-w-7xl {
  max-width: 80rem !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#grs-engineer-portal .max-w-3xl {
  max-width: 48rem !important;
}

#grs-engineer-portal .mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

#grs-engineer-portal .object-contain {
  object-fit: contain !important;
}

#grs-engineer-portal .drop-shadow-lg {
  filter: drop-shadow(0 10px 15px -3px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px -2px rgba(0, 0, 0, 0.05)) !important;
}

#grs-engineer-portal .absolute {
  position: absolute !important;
}

#grs-engineer-portal .relative {
  position: relative !important;
}

#grs-engineer-portal .left-4 {
  left: 1rem !important;
}

#grs-engineer-portal .right-0 {
  right: 0 !important;
}

#grs-engineer-portal .top-0 {
  top: 0 !important;
}

#grs-engineer-portal .top-1\/2 {
  top: 50% !important;
}

#grs-engineer-portal .-translate-y-1\/2 {
  transform: translateY(-50%) !important;
}

#grs-engineer-portal .leading-tight {
  line-height: 1.25 !important;
}

#grs-engineer-portal .tracking-\[-0\.033em\] {
  letter-spacing: -0.033em !important;
}

#grs-engineer-portal .tracking-\[0\.015em\] {
  letter-spacing: 0.015em !important;
}

#grs-engineer-portal input.form-input {
  width: 100% !important;
  padding-left: 3rem !important;
  padding-right: 1.25rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  background-color: #f8fafc !important;
  font-size: 1rem !important;
  outline: none !important;
}

#grs-engineer-portal input.form-input:focus {
  border-color: #258cf4 !important;
  box-shadow: 0 0 0 2px rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal input.form-input::placeholder {
  color: #94a3b8 !important;
}

#grs-engineer-portal button[type="submit"] {
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

#grs-engineer-portal .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
}

#grs-engineer-portal .gap-5 {
  gap: 1.25rem !important;
}

#grs-engineer-portal .overflow-hidden {
  overflow: hidden !important;
}

#grs-engineer-portal .overflow-x-hidden {
  overflow-x: hidden !important;
}

#grs-engineer-portal .border {
  border-width: 1px !important;
}

#grs-engineer-portal .border-slate-200 {
  border-color: #e2e8f0 !important;
}

#grs-engineer-portal .focus\:border-primary:focus {
  border-color: #258cf4 !important;
}

#grs-engineer-portal .focus\:outline-0:focus {
  outline: none !important;
}

#grs-engineer-portal .focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal .focus\:ring-primary\/50:focus {
  box-shadow: 0 0 0 2px rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal .focus\:ring-offset-2:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal .focus\:ring-primary:focus {
  box-shadow: 0 0 0 2px rgba(37, 140, 244, 0.5) !important;
}

#grs-engineer-portal .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

#grs-engineer-portal .duration-200 {
  transition-duration: 200ms !important;
}

#grs-engineer-portal .min-w-\[84px\] {
  min-width: 84px !important;
}

#grs-engineer-portal .grow {
  flex-grow: 1 !important;
}

#grs-engineer-portal .flex-1 {
  flex: 1 1 0% !important;
}

#grs-engineer-portal .pb-2 {
  padding-bottom: 0.5rem !important;
}

#grs-engineer-portal .pl-12 {
  padding-left: 3rem !important;
}

#grs-engineer-portal .pr-5 {
  padding-right: 1.25rem !important;
}

#grs-engineer-portal .pr-12 {
  padding-right: 3rem !important;
}

#grs-engineer-portal .px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#grs-engineer-portal .px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#grs-engineer-portal .hover\:underline:hover {
  text-decoration: underline !important;
}

#grs-engineer-portal .hover\:text-primary:hover {
  color: #258cf4 !important;
}

#grs-engineer-portal .cursor-pointer {
  cursor: pointer !important;
}

#grs-engineer-portal .truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#grs-engineer-portal .font-normal {
  font-weight: 400 !important;
}

#grs-engineer-portal .font-medium {
  font-weight: 500 !important;
}

#grs-engineer-portal .text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

#grs-engineer-portal .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

#grs-engineer-portal .text-slate-100 {
  color: #f1f5f9 !important;
}

#grs-engineer-portal .text-slate-200 {
  color: #e2e8f0 !important;
}

#grs-engineer-portal .text-slate-300 {
  color: #cbd5e1 !important;
}

#grs-engineer-portal .text-slate-50 {
  color: #f8fafc !important;
}

#grs-engineer-portal .dark\:bg-slate-900 {
  background-color: #0f172a !important;
}

#grs-engineer-portal .dark\:bg-slate-800 {
  background-color: #1e293b !important;
}

#grs-engineer-portal .dark\:border-slate-700 {
  border-color: #334155 !important;
}

#grs-engineer-portal .dark\:text-slate-50 {
  color: #f8fafc !important;
}

#grs-engineer-portal .dark\:text-slate-100 {
  color: #f1f5f9 !important;
}

#grs-engineer-portal .dark\:text-slate-200 {
  color: #e2e8f0 !important;
}

#grs-engineer-portal .dark\:text-slate-300 {
  color: #cbd5e1 !important;
}

#grs-engineer-portal .dark\:text-slate-400 {
  color: #94a3b8 !important;
}

#grs-engineer-portal .dark\:text-slate-500 {
  color: #64748b !important;
}

#grs-engineer-portal .dark\:placeholder\:text-slate-500::placeholder {
  color: #64748b !important;
}

#grs-engineer-portal .dark\:hover\:text-primary-light:hover {
  color: #3b9eff !important;
}

#grs-engineer-portal .hover\:bg-slate-100:hover {
  background-color: #f1f5f9 !important;
}

#grs-engineer-portal .dark\:hover\:bg-slate-800:hover {
  background-color: #1e293b !important;
}

#grs-engineer-portal .mb-1 {
  margin-bottom: 0.25rem !important;
}

#grs-engineer-portal .mb-2 {
  margin-bottom: 0.5rem !important;
}

#grs-engineer-portal .cursor-pointer {
  cursor: pointer !important;
}

#grs-engineer-portal .text-slate-700 {
  color: #334155 !important;
}

#grs-engineer-portal .dark\:text-slate-300 {
  color: #cbd5e1 !important;
}

#grs-engineer-portal .dark\:bg-slate-700 {
  background-color: #334155 !important;
}

#grs-engineer-portal .dark\:border-slate-700 {
  border-color: #334155 !important;
}

#grs-engineer-portal .dark\:text-yellow-400 {
  color: #facc15 !important;
}

#grs-engineer-portal .dark\:text-blue-400 {
  color: #60a5fa !important;
}

#grs-engineer-portal .dark\:text-purple-400 {
  color: #a78bfa !important;
}

#grs-engineer-portal .dark\:text-green-400 {
  color: #4ade80 !important;
}

#grs-engineer-portal .dark\:bg-yellow-900\/30 {
  background-color: rgba(113, 63, 18, 0.3) !important;
}

#grs-engineer-portal .dark\:bg-blue-900\/30 {
  background-color: rgba(30, 58, 138, 0.3) !important;
}

#grs-engineer-portal .dark\:bg-purple-900\/30 {
  background-color: rgba(88, 28, 135, 0.3) !important;
}

#grs-engineer-portal .dark\:bg-green-900\/30 {
  background-color: rgba(20, 83, 45, 0.3) !important;
}

#grs-engineer-portal .text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

#grs-engineer-portal .text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

#grs-engineer-portal .text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

@media (min-width: 1024px) {
  #grs-engineer-portal .lg\:flex-row {
    flex-direction: row !important;
  }
  
  #grs-engineer-portal .lg\:w-1\/2 {
    width: 50% !important;
  }
  
  #grs-engineer-portal .lg\:p-8 {
    padding: 2rem !important;
  }
  
  #grs-engineer-portal .lg\:p-12 {
    padding: 3rem !important;
  }
  
  #grs-engineer-portal .lg\:order-1 {
    order: 1 !important;
  }
  
  #grs-engineer-portal .lg\:order-2 {
    order: 2 !important;
  }
}

@media (min-width: 640px) {
  #grs-engineer-portal .sm\:w-64 {
    width: 16rem !important;
  }
  
  #grs-engineer-portal .sm\:h-64 {
    height: 16rem !important;
  }
  
  #grs-engineer-portal .sm\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  
  #grs-engineer-portal .sm\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* 儀表板樣式 */
#grs-engineer-portal .grid {
  display: grid !important;
}

#grs-engineer-portal .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

/* 排除統計卡片網格 - 防止 grid-cols-1 影響統計卡片 */
#grs-engineer-portal #grs-stats-cards .grs-stats-grid,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-1,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-2,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-3,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-4,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-6,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="grid-cols"] {
  grid-template-columns: repeat(6, 1fr) !important;
}

#grs-engineer-portal .gap-4 {
  gap: 1rem !important;
}

#grs-engineer-portal .col-span-full {
  grid-column: 1 / -1 !important;
}

#grs-engineer-portal .h-16 {
  height: 4rem !important;
}

#grs-engineer-portal .mb-4 {
  margin-bottom: 1rem !important;
}

#grs-engineer-portal .mb-6 {
  margin-bottom: 1.5rem !important;
}

#grs-engineer-portal .py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

#grs-engineer-portal .py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

#grs-engineer-portal .space-y-2 > * + * {
  margin-top: 0.5rem !important;
}

#grs-engineer-portal .space-y-4 > * + * {
  margin-top: 1rem !important;
}

#grs-engineer-portal .space-y-6 > * + * {
  margin-top: 1.5rem !important;
}

#grs-engineer-portal .border-b {
  border-bottom-width: 1px !important;
}

#grs-engineer-portal .border-t {
  border-top-width: 1px !important;
}

#grs-engineer-portal .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

#grs-engineer-portal .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#grs-engineer-portal .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#grs-engineer-portal .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

#grs-engineer-portal .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

#grs-engineer-portal .hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

#grs-engineer-portal .pt-4 {
  padding-top: 1rem !important;
}

#grs-engineer-portal .px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

#grs-engineer-portal .py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

#grs-engineer-portal .py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

#grs-engineer-portal .py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#grs-engineer-portal .ml-1 {
  margin-left: 0.25rem !important;
}

#grs-engineer-portal .hidden {
  display: none !important;
}

#grs-engineer-portal .fixed {
  position: fixed !important;
}

#grs-engineer-portal .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

#grs-engineer-portal .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .font-semibold {
  font-weight: 600 !important;
}

#grs-engineer-portal .line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#grs-engineer-portal .inline-block {
  display: inline-block !important;
}

#grs-engineer-portal .align-middle {
  vertical-align: middle !important;
}

#grs-engineer-portal .sticky {
  position: sticky !important;
}

#grs-engineer-portal .inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

#grs-engineer-portal .z-50 {
  z-index: 50 !important;
}

/* 模態框樣式 - 工單詳情 */
#grs-engineer-portal #grs-job-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

#grs-engineer-portal #grs-job-modal.flex {
  display: flex !important;
}

/* 模態框內容容器 */
#grs-engineer-portal #grs-job-modal > div {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 手機上：全屏顯示 */
@media screen and (max-width: 639px) {
  #grs-engineer-portal #grs-job-modal {
    padding: 0 !important;
  }
  
  #grs-engineer-portal #grs-job-modal > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }
  
  #grs-engineer-portal #grs-job-modal #grs-job-detail-content {
    padding: 0.75rem !important;
  }
}

/* 平板和桌面：居中顯示 */
@media screen and (min-width: 640px) {
  #grs-engineer-portal #grs-job-modal > div {
    width: calc(100% - 1rem) !important;
    max-width: 48rem !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 0.5rem !important;
    border: 1px solid #dbeafe !important;
    margin: 0.5rem !important;
  }
}

@media screen and (min-width: 768px) {
  #grs-engineer-portal #grs-job-modal > div {
    margin: 1rem !important;
    max-height: 80vh !important;
  }
}

/* 模態框標題欄 - 確保始終固定在頂部 */
#grs-engineer-portal #grs-job-modal .sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 確保關閉按鈕始終可見 */
#grs-engineer-portal #grs-job-modal .grs-close-modal {
  position: relative !important;
  z-index: 21 !important;
  flex-shrink: 0 !important;
}

/* 模態框內容區域 */
#grs-engineer-portal #grs-job-modal #grs-job-detail-content {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* 確保內容區域不會超出模態框 */
  max-height: calc(85vh - 60px) !important;
}

@media screen and (min-width: 768px) {
  #grs-engineer-portal #grs-job-modal #grs-job-detail-content {
    max-height: calc(80vh - 60px) !important;
  }
}

/* 防止背景滾動 */
body.grs-modal-open {
  overflow: hidden !important;
}

/* 編輯表單樣式 */
#grs-engineer-portal .grs-edit-field {
  transition: all 0.2s ease !important;
}

#grs-engineer-portal .grs-edit-field:focus {
  border-color: #258cf4 !important;
  box-shadow: 0 0 0 3px rgba(37, 140, 244, 0.1) !important;
}

/* 零件列表樣式 */
#grs-engineer-portal .grs-part-item {
  transition: all 0.2s ease !important;
}

#grs-engineer-portal .grs-part-item:hover {
  background-color: #f0f9ff !important;
}

#grs-engineer-portal .grs-parts-list-container {
  background-color: #ffffff !important;
}

/* 按鈕禁用狀態 */
#grs-engineer-portal .grs-remove-part:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 成功訊息樣式 */
.fixed.top-20 {
  position: fixed !important;
  top: 5rem !important;
  z-index: 10000 !important;
}

.transform {
  transform: translateX(-50%) !important;
}

/* 響應式零件列表 */
@media screen and (max-width: 639px) {
  #grs-engineer-portal .grs-part-item {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  #grs-engineer-portal .grs-part-item > .flex.items-center {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  #grs-engineer-portal .grs-part-name {
    width: 100% !important;
  }
  
  #grs-engineer-portal .grs-part-item .grs-part-quantity,
  #grs-engineer-portal .grs-part-item .grs-part-price,
  #grs-engineer-portal .grs-part-item .grs-part-subtotal {
    flex: 0 0 auto !important;
  }
}

/* 確保數量、單價、小計在同一列 */
#grs-engineer-portal .grs-part-item > .flex.items-center {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* 狀態選擇器樣式 */
#grs-engineer-portal #grs-status-select {
  min-width: 120px !important;
  max-width: 100% !important;
}

@media screen and (min-width: 640px) {
  #grs-engineer-portal #grs-status-select {
    min-width: 180px !important;
    width: auto !important;
  }
}

#grs-engineer-portal .grs-status-badge-preview {
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* 狀態選擇器容器 */
#grs-engineer-portal .grs-status-select-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

@media screen and (max-width: 639px) {
  #grs-engineer-portal .grs-status-select-container {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  #grs-engineer-portal .grs-status-select-container #grs-status-select {
    width: 100% !important;
  }
  
  #grs-engineer-portal .grs-status-select-container .grs-status-badge-preview {
    align-self: flex-start !important;
  }
}

#grs-engineer-portal .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
}

/* Header 恢復到原本位置（頂部），確保緊貼頁面頂部 */
#grs-engineer-portal .grs-dashboard-header {
  top: 0 !important;
  position: sticky !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 確保 dashboard 從頁面頂部開始，無間距 */
#grs-engineer-portal .grs-portal__view[data-view="dashboard"],
#grs-engineer-portal .grs-portal__view[data-view="dashboard"] .grs-dashboard-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
  scroll-margin-top: 0 !important;
}

/* 如果需要更精確的控制，可以使用 JavaScript 動態設置 */
/* 或者根據實際 DIVI 選單高度調整以下值 */
/* 移除 wrapper 的所有不必要的間距，讓它直接貼合 DIVI 選單 */
#grs-engineer-portal .grs-dashboard-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* 強制移除所有可能的間距 */
  margin: 0 !important;
  padding: 0 !important;
  /* 移除 min-height，讓它自然貼合內容 */
  min-height: auto !important;
}

/* 頁尾已移除，使用 DIVI 的頁尾 */

/* 分頁控制元件樣式 */
#grs-engineer-portal #grs-pagination {
  margin-top: 1rem !important;
  padding: 0.75rem !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#grs-engineer-portal #grs-per-page {
  min-width: 70px !important;
  padding: 0.375rem 0.5rem !important;
  font-size: 0.875rem !important;
}

#grs-engineer-portal #grs-pagination label {
  font-size: 0.875rem !important;
}

#grs-engineer-portal .grs-pagination-btn {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
}

#grs-engineer-portal #grs-pagination-info {
  font-size: 0.875rem !important;
}

#grs-engineer-portal .grs-pagination-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#grs-engineer-portal .grs-pagination-btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* 響應式分頁控制 */
@media screen and (max-width: 639px) {
  #grs-engineer-portal #grs-pagination {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  #grs-engineer-portal #grs-pagination > div:first-child {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  #grs-engineer-portal #grs-pagination-info {
    text-align: center !important;
    margin-bottom: 0.75rem !important;
  }
  
  #grs-engineer-portal #grs-pagination-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  #grs-engineer-portal .grs-pagination-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* 為主內容區設定 - 確保從 header 下方緊貼開始 */
#grs-engineer-portal .grs-dashboard-wrapper main,
#grs-engineer-portal .grs-dashboard-main {
  flex: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
  margin-top: 0 !important;
}

/* 確保工單列表正常顯示 */
#grs-engineer-portal #grs-jobs-list {
  position: relative !important;
  z-index: 1 !important;
}

/* 搜尋表單樣式 - 手機版垂直排列，桌面版水平排列 */
#grs-engineer-portal .grs-search-form-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}

#grs-engineer-portal .grs-search-field {
  width: 100% !important;
}

#grs-engineer-portal .grs-search-button-group {
  width: 100% !important;
  display: flex !important;
  gap: 0.5rem !important;
}

@media screen and (min-width: 640px) {
  /* 桌面版：同一列排列 */
  #grs-engineer-portal .grs-search-form-container {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
  }
  
  #grs-engineer-portal .grs-search-field {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  
  #grs-engineer-portal .grs-search-field:first-child {
    flex: 1 1 0% !important;
    min-width: 200px !important;
  }
  
  #grs-engineer-portal .grs-search-field:nth-child(2),
  #grs-engineer-portal .grs-search-field:nth-child(3) {
    flex: 0 0 140px !important;
    width: 140px !important;
  }
  
  #grs-engineer-portal .grs-search-button-group {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    gap: 0.5rem !important;
  }
}

/* 待辦工單統計卡片網格 - 同一列顯示（最高優先級，覆蓋所有 Tailwind 類別） */
#grs-engineer-portal #grs-stats-cards {
  display: block !important;
  width: 100% !important;
}

#grs-engineer-portal #grs-stats-cards .grs-stats-grid,
#grs-engineer-portal #grs-stats-cards > .grs-stats-grid,
#grs-engineer-portal div#grs-stats-cards .grs-stats-grid,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-1,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="grid"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-2,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-3,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-4,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-6,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-9,
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="grid-cols"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="sm:grid"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="md:grid"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="lg:grid"],
#grs-engineer-portal #grs-stats-cards [class*="grs-stats-grid"],
#grs-engineer-portal [id="grs-stats-cards"] .grs-stats-grid {
  display: grid !important;
  /* 桌面版默認：9列 */
  grid-template-columns: repeat(9, 1fr) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 手機版：改為 3 列網格 */
@media screen and (max-width: 768px) {
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid,
  #grs-engineer-portal #grs-stats-cards > .grs-stats-grid,
  #grs-engineer-portal div#grs-stats-cards .grs-stats-grid,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-1,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="grid"],
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-2,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-3,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-4,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-6,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid.grid-cols-9,
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="grid-cols"],
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="sm:grid"],
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="md:grid"],
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="lg:grid"],
  #grs-engineer-portal #grs-stats-cards [class*="grs-stats-grid"],
  #grs-engineer-portal [id="grs-stats-cards"] .grs-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: hidden !important;
  }
}

/* 移除所有響應式 grid 類別的影響 */
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="sm:grid-cols"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="md:grid-cols"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="lg:grid-cols"],
#grs-engineer-portal #grs-stats-cards .grs-stats-grid[class*="xl:grid-cols"] {
  grid-template-columns: repeat(9, 1fr) !important;
}

@media screen and (max-width: 1600px) {
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid {
    grid-template-columns: repeat(9, minmax(120px, 1fr)) !important;
  }
}

@media screen and (max-width: 1400px) {
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid {
    grid-template-columns: repeat(9, minmax(100px, 1fr)) !important;
    gap: 10px !important;
  }
}

@media screen and (max-width: 1024px) {
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid {
    grid-template-columns: repeat(9, minmax(90px, 1fr)) !important;
    gap: 8px !important;
  }
}

/* 手機版：改為 3 列網格，讓卡片變成小格正方形 */
@media screen and (max-width: 768px) {
  #grs-engineer-portal #grs-stats-cards .grs-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    overflow-x: hidden !important;
    grid-auto-flow: row !important;
  }
  
  /* 確保手機版卡片是小正方形 */
  #grs-engineer-portal #grs-stats-cards .grs-stat-card {
    aspect-ratio: 1 !important;
    min-height: auto !important;
    padding: 8px 4px !important;
  }
  
  #grs-engineer-portal #grs-stats-cards .grs-stat-card .stat-number {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  
  #grs-engineer-portal #grs-stats-cards .grs-stat-card .stat-label {
    font-size: 8px !important;
  }
}

/* 待辦工單統計卡片樣式 */
#grs-engineer-portal .grs-stat-card,
#grs-engineer-portal #grs-stats-cards .grs-stat-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 8px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* 手機版：正方形 */
  aspect-ratio: 1 !important;
  min-height: auto !important;
  transform: none !important;
}

#grs-engineer-portal .grs-stat-card:hover,
#grs-engineer-portal .grs-stat-card:active,
#grs-engineer-portal .grs-stat-card:focus {
  transform: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
}

#grs-engineer-portal .grs-stat-card .stat-number {
  font-weight: bold !important;
  line-height: 1.2 !important;
  font-size: 20px !important;
  margin-bottom: 4px !important;
}

#grs-engineer-portal .grs-stat-card .stat-label {
  margin-top: 0 !important;
  letter-spacing: 0.3px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

@media screen and (max-width: 1400px) {
  #grs-engineer-portal .grs-stat-card {
    aspect-ratio: 1 !important;
    padding: 10px 6px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-number {
    font-size: 18px !important;
    margin-bottom: 3px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-label {
    font-size: 9px !important;
  }
}

@media screen and (max-width: 1024px) {
  #grs-engineer-portal .grs-stat-card {
    aspect-ratio: 1 !important;
    padding: 8px 5px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-number {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-label {
    font-size: 8px !important;
  }
}

@media screen and (max-width: 768px) {
  #grs-engineer-portal .grs-stat-card {
    aspect-ratio: 1 !important;
    padding: 6px 4px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-number {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  
  #grs-engineer-portal .grs-stat-card .stat-label {
    font-size: 7px !important;
  }
}

#grs-engineer-portal .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

#grs-engineer-portal .max-h-\[90vh\] {
  max-height: 90vh !important;
}

#grs-engineer-portal .overflow-y-auto {
  overflow-y: auto !important;
}

#grs-engineer-portal .animate-spin {
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 標籤頁樣式 - 卡片類型 */
#grs-engineer-portal .grs-tab-btn {
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
}

#grs-engineer-portal .grs-tab-btn.active {
  color: #258cf4 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#grs-engineer-portal .grs-tab-btn.active .material-symbols-outlined {
  color: #258cf4 !important;
}

#grs-engineer-portal .grs-tab-btn:not(.active) {
  color: #000000 !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

#grs-engineer-portal .grs-tab-btn:not(.active) .material-symbols-outlined {
  color: #000000 !important;
}

#grs-engineer-portal .grs-tab-btn:hover:not(.active) {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#grs-engineer-portal .hover\:bg-slate-200:hover {
  background-color: #e2e8f0 !important;
}

/* 狀態標籤顏色 */
#grs-engineer-portal .bg-yellow-100 {
  background-color: #fef3c7 !important;
}

#grs-engineer-portal .text-yellow-800 {
  color: #854d0e !important;
}

#grs-engineer-portal .bg-blue-100 {
  background-color: #dbeafe !important;
}

#grs-engineer-portal .text-blue-800 {
  color: #1e40af !important;
}

#grs-engineer-portal .bg-purple-100 {
  background-color: #f3e8ff !important;
}

#grs-engineer-portal .text-purple-800 {
  color: #6b21a8 !important;
}

#grs-engineer-portal .bg-green-100 {
  background-color: #d1fae5 !important;
}

#grs-engineer-portal .text-green-800 {
  color: #065f46 !important;
}

#grs-engineer-portal .bg-orange-100 {
  background-color: #ffedd5 !important;
}

#grs-engineer-portal .text-orange-800 {
  color: #9a3412 !important;
}

#grs-engineer-portal .bg-indigo-100 {
  background-color: #e0e7ff !important;
}

#grs-engineer-portal .text-indigo-800 {
  color: #3730a3 !important;
}

#grs-engineer-portal .bg-red-100 {
  background-color: #fee2e2 !important;
}

#grs-engineer-portal .text-red-800 {
  color: #991b1b !important;
}

/* 響應式 Grid - 工單列表 */
#grs-engineer-portal #grs-jobs-list {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* 默認 1 列 */
  gap: 0.75rem !important; /* gap-3 */
}

/* 640px 以上：2 列 */
@media screen and (min-width: 640px) {
  #grs-engineer-portal #grs-jobs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important; /* sm:gap-4 */
  }
}

/* 1024px 以上：3 列 */
@media screen and (min-width: 1024px) {
  #grs-engineer-portal #grs-jobs-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important; /* md:gap-5 */
  }
}

/* col-span 工具類別 */
#grs-engineer-portal .col-span-1 {
  grid-column: span 1 / span 1 !important;
}

/* 640px 以上：col-span-2 */
@media screen and (min-width: 640px) {
  #grs-engineer-portal .sm\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
}

/* 1024px 以上：col-span-3 */
@media screen and (min-width: 1024px) {
  #grs-engineer-portal .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
}

/* 響應式工具類別 */
#grs-engineer-portal .scrollbar-hide {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

#grs-engineer-portal .scrollbar-hide::-webkit-scrollbar {
  display: none !important;
}

/* 確保標籤頁容器可以橫向滾動 */
#grs-engineer-portal .overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

/* 標籤頁容器在手機上的樣式 */
@media screen and (max-width: 639px) {
  /* 確保標籤頁可以橫向滾動並延伸至邊緣 */
  #grs-engineer-portal main .overflow-x-auto {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: calc(-1 * 0.75rem) !important;
    margin-right: calc(-1 * 0.75rem) !important;
    width: calc(100% + 1.5rem) !important;
  }
  
  /* 確保第一個和最後一個按鈕有額外間距，讓用戶可以滾動到邊緣 */
  #grs-engineer-portal .grs-tab-btn:first-child {
    margin-left: 0.75rem !important;
  }
  
  #grs-engineer-portal .grs-tab-btn:last-child {
    margin-right: 0.75rem !important;
  }
  
  /* 標籤按鈕在手機上稍微縮小 */
  #grs-engineer-portal .grs-tab-btn {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.7rem !important;
  }
  
  #grs-engineer-portal .grs-tab-btn .material-symbols-outlined {
    font-size: 0.875rem !important;
  }
  
  #grs-engineer-portal .grs-tab-btn span span {
    font-size: 0.7rem !important;
  }
}

/* 響應式文字大小 */
#grs-engineer-portal .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

#grs-engineer-portal .sm\:text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

#grs-engineer-portal .sm\:text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

#grs-engineer-portal .text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

#grs-engineer-portal .sm\:text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .sm\:text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .sm\:text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

#grs-engineer-portal .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

/* 響應式間距 */
#grs-engineer-portal .gap-1\.5 {
  gap: 0.375rem !important;
}

#grs-engineer-portal .gap-2\.5 {
  gap: 0.625rem !important;
}

#grs-engineer-portal .space-y-2 > * + * {
  margin-top: 0.5rem !important;
}

#grs-engineer-portal .break-all {
  word-break: break-all !important;
}

/* 響應式 padding */
#grs-engineer-portal .p-2 {
  padding: 0.5rem !important;
}

#grs-engineer-portal .p-4 {
  padding: 1rem !important;
}

#grs-engineer-portal .sm\:p-4 {
  padding: 1rem !important;
}

#grs-engineer-portal .sm\:p-6 {
  padding: 1.5rem !important;
}

#grs-engineer-portal .px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

#grs-engineer-portal .sm\:px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

#grs-engineer-portal .sm\:px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#grs-engineer-portal .md\:px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#grs-engineer-portal .md\:px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#grs-engineer-portal .py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

#grs-engineer-portal .sm\:py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

#grs-engineer-portal .sm\:py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#grs-engineer-portal .sm\:py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

#grs-engineer-portal .md\:py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

#grs-engineer-portal .md\:py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* 響應式 margin */
#grs-engineer-portal .-mx-3 {
  margin-left: -0.75rem !important;
  margin-right: -0.75rem !important;
}

#grs-engineer-portal .sm\:-mx-4 {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}

#grs-engineer-portal .md\:-mx-6 {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
}

#grs-engineer-portal .mb-3 {
  margin-bottom: 0.75rem !important;
}

#grs-engineer-portal .sm\:mb-4 {
  margin-bottom: 1rem !important;
}

#grs-engineer-portal .sm\:mb-2 {
  margin-bottom: 0.5rem !important;
}

#grs-engineer-portal .sm\:mb-2\.5 {
  margin-bottom: 0.625rem !important;
}

#grs-engineer-portal .pb-2 {
  padding-bottom: 0.5rem !important;
}

#grs-engineer-portal .pb-3 {
  padding-bottom: 0.75rem !important;
}

#grs-engineer-portal .sm\:pb-4 {
  padding-bottom: 1rem !important;
}

#grs-engineer-portal .pt-3 {
  padding-top: 0.75rem !important;
}

#grs-engineer-portal .sm\:pt-4 {
  padding-top: 1rem !important;
}

#grs-engineer-portal .mt-3 {
  margin-top: 0.75rem !important;
}

#grs-engineer-portal .sm\:mt-4 {
  margin-top: 1rem !important;
}

/* 響應式間距 gap */
#grs-engineer-portal .sm\:gap-2 {
  gap: 0.5rem !important;
}

#grs-engineer-portal .sm\:gap-2\.5 {
  gap: 0.625rem !important;
}

#grs-engineer-portal .md\:gap-3 {
  gap: 0.75rem !important;
}

/* 響應式高度 */
#grs-engineer-portal .h-14 {
  height: 3.5rem !important;
}

#grs-engineer-portal .sm\:h-16 {
  height: 4rem !important;
}

/* 響應式寬度和尺寸 */
#grs-engineer-portal .w-7 {
  width: 1.75rem !important;
}

#grs-engineer-portal .h-7 {
  height: 1.75rem !important;
}

#grs-engineer-portal .sm\:w-8 {
  width: 2rem !important;
}

#grs-engineer-portal .sm\:h-8 {
  height: 2rem !important;
}

/* 響應式顯示 */
#grs-engineer-portal .hidden {
  display: none !important;
}

#grs-engineer-portal .sm\:inline {
  display: inline !important;
}

/* 響應式最大寬度 */
#grs-engineer-portal .max-w-\[80px\] {
  max-width: 80px !important;
}

#grs-engineer-portal .md\:max-w-none {
  max-width: none !important;
}

/* 響應式最大高度 */
#grs-engineer-portal .max-h-\[95vh\] {
  max-height: 95vh !important;
}

#grs-engineer-portal .sm\:max-h-\[90vh\] {
  max-height: 90vh !important;
}

/* 響應式外邊距 */
#grs-engineer-portal .m-2 {
  margin: 0.5rem !important;
}

#grs-engineer-portal .sm\:m-4 {
  margin: 1rem !important;
}

/* 登入頁面響應式 */
#grs-engineer-portal .h-12 {
  height: 3rem !important;
}

#grs-engineer-portal .sm\:h-12 {
  height: 3rem !important;
}

#grs-engineer-portal .w-40 {
  width: 10rem !important;
}

#grs-engineer-portal .h-40 {
  height: 10rem !important;
}

#grs-engineer-portal .md\:w-56 {
  width: 14rem !important;
}

#grs-engineer-portal .md\:h-56 {
  height: 14rem !important;
}

#grs-engineer-portal .pl-10 {
  padding-left: 2.5rem !important;
}

#grs-engineer-portal .pr-10 {
  padding-right: 2.5rem !important;
}

#grs-engineer-portal .pr-4 {
  padding-right: 1rem !important;
}

#grs-engineer-portal .left-3 {
  left: 0.75rem !important;
}

#grs-engineer-portal .sm\:left-4 {
  left: 1rem !important;
}

#grs-engineer-portal .px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

#grs-engineer-portal .sm\:px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#grs-engineer-portal .md\:px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

#grs-engineer-portal .p-6 {
  padding: 1.5rem !important;
}

#grs-engineer-portal .sm\:p-8 {
  padding: 2rem !important;
}

#grs-engineer-portal .md\:p-10 {
  padding: 2.5rem !important;
}

#grs-engineer-portal .mb-4 {
  margin-bottom: 1rem !important;
}

#grs-engineer-portal .sm\:mb-6 {
  margin-bottom: 1.5rem !important;
}

#grs-engineer-portal .mb-6 {
  margin-bottom: 1.5rem !important;
}

#grs-engineer-portal .sm\:mb-8 {
  margin-bottom: 2rem !important;
}

#grs-engineer-portal .mt-6 {
  margin-top: 1.5rem !important;
}

#grs-engineer-portal .sm\:mt-8 {
  margin-top: 2rem !important;
}

#grs-engineer-portal .gap-4 {
  gap: 1rem !important;
}

#grs-engineer-portal .sm\:gap-5 {
  gap: 1.25rem !important;
}

#grs-engineer-portal .rounded-xl {
  border-radius: 0.75rem !important;
}

#grs-engineer-portal .sm\:rounded-xl {
  border-radius: 0.75rem !important;
}

/* 更多響應式文字大小 */
#grs-engineer-portal .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

#grs-engineer-portal .sm\:text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

#grs-engineer-portal .sm\:text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

#grs-engineer-portal .md\:text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

#grs-engineer-portal .md\:text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

#grs-engineer-portal .text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

#grs-engineer-portal .text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

#grs-engineer-portal .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .sm\:text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .md\:text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .md\:text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

#grs-engineer-portal .text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .sm\:text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

#grs-engineer-portal .md\:text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

/* 響應式圖標大小 */
#grs-engineer-portal .text-lg {
  font-size: 1.125rem !important;
}

#grs-engineer-portal .sm\:text-xl {
  font-size: 1.25rem !important;
}

#grs-engineer-portal .text-xl {
  font-size: 1.25rem !important;
}

#grs-engineer-portal .sm\:text-2xl {
  font-size: 1.5rem !important;
}

#grs-engineer-portal .text-2xl {
  font-size: 1.5rem !important;
}

/* 響應式 padding 補充 */
#grs-engineer-portal .sm\:p-4 {
  padding: 1rem !important;
}

#grs-engineer-portal .md\:p-6 {
  padding: 1.5rem !important;
}

#grs-engineer-portal .lg\:p-8 {
  padding: 2rem !important;
}

#grs-engineer-portal .lg\:p-12 {
  padding: 3rem !important;
}

/* 響應式間距補充 */
#grs-engineer-portal .sm\:gap-4 {
  gap: 1rem !important;
}

#grs-engineer-portal .md\:gap-5 {
  gap: 1.25rem !important;
}

.grs-card {
  width: 100%;
  max-width: 420px;
  background: var(--grs-card);
  border: 1px solid var(--grs-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.grs-card__header {
  padding: 24px 24px 8px;
}
.grs-card__title {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--grs-text);
  font-weight: 700;
}
.grs-card__subtitle {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--grs-muted);
}

.grs-card__body { padding: 16px 24px 24px; }

.grs-field { margin-bottom: 14px; }
.grs-field label {
  display: block;
  font-size: 13px;
  color: var(--grs-muted);
  margin-bottom: 6px;
}
.grs-field input[type="text"],
.grs-field input[type="password"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--grs-border);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--grs-text);
  background: #fff;
}
.grs-field input:focus {
  outline: none;
  border-color: var(--grs-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.grs-actions { margin-top: 6px; }
.grs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--grs-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.grs-btn:hover { background: var(--grs-primary-600); }
.grs-btn:disabled { opacity: .6; cursor: not-allowed; }

.grs-form__error {
  margin-top: 10px;
  background: #fef2f2;
  color: var(--grs-danger);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

.grs-portal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--grs-border);
  background: #fff;
}
.grs-user { color: var(--grs-muted); font-size: 14px; }

.grs-list { padding: 16px; }
.grs-item {
  border: 1px solid var(--grs-border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
}
.grs-item__head { font-weight: 700; margin-bottom: 6px; }
.grs-item__meta { color: var(--grs-muted); font-size: 13px; margin-bottom: 8px; }
.grs-item__desc { font-size: 14px; color: var(--grs-text); }

/* Responsive */
@media (max-width: 480px) {
  .grs-card__header, .grs-card__body { padding-left: 16px; padding-right: 16px; }
}