:root {
  --bg: #f7f9fc;
  --card-bg: #ffffff;
  --border: #e5e9f2;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

body {
  width: 100%;
  color: var(--text);
  background: var(--bg);
}

h1, span {
  white-space: nowrap;
}

.container {
  width: 100%;
  min-width: 100%;
  padding: 16px;
  max-width: 1440px;
  margin-inline: auto;
}

.page-wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 16px;
}

.title_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 1.05rem;
  line-height: 1;
}

.brand-mark .bi {
  display: block;
}

.nav-menu-button,
.app-menu-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  line-height: 1;
}

.nav-menu-button:hover,
.app-menu-close:hover {
  background: #f8fbff;
  color: #1d4ed8;
}

.nav-menu-button .bi,
.app-menu-close .bi {
  font-size: 1.25rem;
}

.app-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.24);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.app-menu-backdrop.is-open {
  opacity: 1;
}

.app-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1041;
  width: min(312px, calc(100vw - 32px));
  height: 100vh;
  padding: 16px;
  border-right: 1px solid #dbe3ef;
  background: #ffffff;
  box-shadow: 18px 0 36px rgba(15, 23, 42, 0.16);
  transform: translateX(-100%);
  transition: transform 0.18s ease;
}

.app-menu.is-open {
  transform: translateX(0);
}

.app-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.app-menu-title {
  color: #111827;
  font-weight: 800;
}

.app-menu-links {
  display: grid;
  gap: 6px;
}

.app-menu-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #475569;
  font-weight: 700;
  text-decoration: none;
}

.app-menu-link:hover {
  border-color: #dbeafe;
  background: #f8fbff;
  color: #1d4ed8;
}

.app-menu-link.is-active {
  border-color: #bfdbfe;
  background: #eaf2ff;
  color: #1d4ed8;
}

/* Tab navigation */
.top-tabs {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-item {
  width: auto;
  min-width: 124px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  padding: 0.62em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  text-decoration: none;
  color: #475569;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.tab-item:hover {
  background-color: #f8fbff;
  border-color: #cdd9eb;
  color: #2563eb;
}

.tab-item.is-active {
  background: #eaf2ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.layout-shell {
  min-height: calc(100vh - 170px);
}

.content-panel {
  display: none;
}

.content-panel.is-active {
  display: block;
}

#project-info-group, #info-btn-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#info-btn-group {
  margin-left: auto;
}

#user-info {
  color: var(--muted);
  font-size: 0.95rem;
}

/* user + project info badges */
#user-info span,
#project-info > div,
.pi-badge,
.user-badge {
  background: #f5f7fb;
  border: 1px solid #dde5f1;
  border-radius: 999px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pi-key { color: var(--primary); }
.pi-val { color: var(--text); }

#project-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#project-info > div {
  background: #f5f7fb;
  border: 1px solid #dde5f1;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.9rem;
}

/* A/B header row */
#ab-row { margin-top: 12px; }

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.stat-card h6 { color: var(--primary); }

#statistic > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.95rem;
}

#filter-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: 12px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}

#filterItems {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  column-gap: 0;
  row-gap: 8px;
  align-items: center;
}

#filterItems td {
  width: auto;
  padding: 8px;
}

/* 同區塊排列：商品提報者 + 搜尋欄 */
.uploader-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* 讓搜尋欄與商品提報者等寬、同風格 */
.uploader-search-row .dt-search { width: auto; }
.uploader-search-row .dt-search input[type="search"],
#uploader_filter {
  width: 150px !important;
  max-width: 150px;
  height: 34px;
  padding: 6px 10px;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
/* 微調搜尋輸入框的垂直位置，與商品提報者對齊 */
.uploader-search-row .dt-search input[type="search"] { margin-top: -1px; }

/* 讓 dt-search 在合併區塊內呈現純輸入框樣式 */
.uploader-search-row .dt-search {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.uploader-search-row .dt-search label {
  width: auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

#projectSelect{
  min-width: 140px;
  max-width: 150px;
}

/* Make dropdowns a bit narrower for aesthetics */
#filterItems .filter-select,
#filterItems #timeSelect {
  width: 150px;
  max-width: 150px;
}

/* 日期區間同寬且樣式一致 */
#filterItems #timepicker_start,
#filterItems #timepicker_end {
  width: 150px;
  max-width: 150px;
  height: 34px;
  padding: 6px 10px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-size: .875rem;        /* 與 .form-select-sm 一致 */
  letter-spacing: .2px;      /* 微調字距讓視覺一致 */
}

/* 讓兩個日期欄貼齊、無中間縫隙 */
#filterItems #timepicker_start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
#filterItems #timepicker_end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px; /* 壓住邊界，避免中縫 */
}

#filterItems #timepicker_start:focus,
#filterItems #timepicker_end:focus {
  border-color: color-mix(in oklab, var(--primary) 60%, #ffffff 40%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent 80%);
}

/* 顯示模式：不可輸入時呈現膠囊區間，更好理解 */
#filterItems #timepicker_start[disabled],
#filterItems #timepicker_end[disabled] {
  background-color: #f1f5f9;
  color: var(--muted);
}

#filterItems #timepicker_start[disabled] {
  border-radius: 999px 0 0 999px;
  border-right: 0;
}

#filterItems #timepicker_end[disabled] {
  border-radius: 0 999px 999px 0;
  margin-left: -1px; /* 視覺上連在一起 */
}

/* 日期區間外框容器與「至」標示 */
.date-range-cell { padding: 8px; }
.date-range-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* 去除中間標示，維持兩個日期欄合併貼齊 */

.dt-container {
  width: 100%;
}

.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-buttons {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
}

.dt-length > label {
  padding: .25rem;
}

.dt-search > label {
  padding: .25rem;
}

div.dt-buttons > .dt-button {
  margin: 0px;
}

.dt-scroll-headInner {
  width: 100% !important;
}

.dt-scroll-headInner table{
  margin: auto !important;
}

/* Sticky header for better desktop usability */
table.dataTable thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
}

#invoiceTable {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Denser table for desktop to show more rows */
table.dataTable thead th,
table.dataTable tbody td {
  padding: 8px 10px !important;
}

#invoicePreview, #objectPreview {
  max-width: 50vw;
  max-height: 80vh;
}

#thumbnail {
  max-width: 400px;
  max-height: 400px;
}

#modal-left {
  overflow-y: auto;
  max-height: 75vh;
}

.form-label.required:after {
  content:"*";
  color:red;
}

.offcanvas-title {
  font-size: 1.8em
}
.menu-item {
  font-size: 1.5em;
  padding: 0.6em 0;
  display: block;
  text-decoration: none;
  color: #000;
}     
.menu-item:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

/* Buttons polish */
#toggle-btn-group .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 12px;
  border-color: #cfd8e6;
  background: #ffffff;
  color: #475569;
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#toggle-btn-group .btn i {
  font-size: 1.05rem;
}

/* Container for loader */
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
}

.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

/* Text inside loader */
.loader-text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 0 5px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.form-select {
  overflow-y: hidden;
}

/* 輸入框視覺與下拉一致 */
.form-control {
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:focus {
  border-color: color-mix(in oklab, var(--primary) 60%, #ffffff 40%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent 80%);
}

/* Beautify dropdowns */
.form-select,
.filter-select {
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-size: .875rem;        /* 與小尺寸控制項一致 */
  letter-spacing: .2px;      /* 與日期輸入字距一致 */
}

.form-select.form-select-sm,
.filter-select.form-select-sm {
  padding: 6px 28px 6px 10px;
  height: 34px;
}

.form-select:focus,
.filter-select:focus {
  border-color: color-mix(in oklab, var(--primary) 60%, #ffffff 40%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent 80%);
}

.form-select:hover,
.filter-select:hover {
  background-color: #fafafa;
}

.invoice-image-preview {
  position: relative;     
  z-index: 100;       
  overflow: visible;
}

.invoice-image-preview img:hover {
  transform: scale(1.5); /* 滑鼠移上去時放大 1.2 倍 */
  z-index: 1000;
}

/* drop area */

.drop-area {
  border: 2px dashed #999;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;  /* 可捲動 */
  position: relative;
  transition: background-color 0.2s, border-color 0.2s;
  background: #f8fafc;
}

/* DataTables button theming */
.dt-container .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: var(--shadow);
}

.dt-container .dt-buttons .dt-button {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  color: #1e40af;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 6px 12px;
}

.dt-container .dt-buttons .dt-button.buttons-collection {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

.dt-container .dt-buttons .dt-button:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.dt-button-collection {
  background: var(--card-bg);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
}

.dt-button-collection .dt-button {
  background: #f8fafc;
  color: var(--text);
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  margin: 4px 0;
  padding: 6px 10px;
}

.dt-button-collection .dt-button:hover {
  background: #eef2ff;
  color: #1d4ed8;
  border-color: #c7d2fe;
}

.drop-area.dragover {
  background-color: #e0f7fa;
  border-color: #00acc1;
}

.preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-image-wrapper {
  position: relative;
}

.preview-image-wrapper img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.preview-image-wrapper button {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

/* rwd */

@media (min-width: 992px) {
  .title_container {
    position: sticky;
    top: 0;
    z-index: 1010;
  }
}

@media (max-width: 991.98px) {
  .title_container {
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .top-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .tab-item {
    min-width: 120px;
    flex: 0 0 auto;
  }

  .layout-shell {
    min-height: auto;
  }

  /* Hide project info on small screens */
  #project-info-group {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #toggle-btn-group .btn.btn-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 8px;
  }
  #filter-table {
    width: 100%;
    display: none; /* 由按鈕控制顯示 */
  }

  #filterItems {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
  }

  #filterItems td {
    padding: 8px;
  }

  #projectSelect { width: 100%; }

  .navbar-brand span { font-size: 1rem; }
  .navbar-brand .brand-mark {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 1rem;
  }

  /* 將匯出按鈕放入漢堡選單時的版面 */
  .offcanvas .dt-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .offcanvas .dt-buttons .dt-button {
    width: 100%;
    justify-content: center;
  }

  /* 行動版：商品提報者 + 搜尋欄改為直向堆疊 */
  .uploader-search-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  #filterItems td:nth-last-child(1) {
    order: 3;  /* Move the last td to the 3rd row */
    flex: 1 1 100%;
  }
}