/*
 * 商品管理系統｜淡紫 × 玫瑰金視覺系統
 * 僅覆寫呈現層；保留既有 DOM hooks、data-action 與業務行為。
 */
:root {
  --ui-lavender-50: #fbf9ff;
  --ui-lavender-100: #f3eefb;
  --ui-lavender-200: #e4d9f2;
  --ui-lavender-400: #a48abd;
  --ui-lavender-600: #6a5587;
  --ui-plum: #443553;
  --ui-rose-100: #f7e5e6;
  --ui-rose-300: #dfafb4;
  --ui-rose-500: #b5757e;
  --ui-rose-700: #87525d;
  --ui-surface: rgba(255, 254, 255, .88);
  --ui-line: rgba(91, 70, 121, .15);
  --ui-radius-card: 22px;
  --ui-radius-control: 13px;
  --ui-shadow-soft: 0 10px 34px rgba(84, 64, 112, .10);
  --ui-shadow-lift: 0 16px 42px rgba(84, 64, 112, .17);
  --ui-focus: 0 0 0 3px rgba(164, 138, 189, .25);
}

.marble-glow-one { background: radial-gradient(circle, rgba(215, 185, 228, .32), transparent 69%); }
.marble-glow-two { background: radial-gradient(circle, rgba(240, 194, 199, .24), transparent 67%); }
.app-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; }

.brand { gap: 11px; color: var(--ui-plum); }
.brand-mark {
  width: 44px; height: 44px; border: 1px solid rgba(181, 117, 126, .48); border-radius: 15px;
  color: var(--ui-rose-500); background: linear-gradient(145deg, #fff, #f2ebfb);
  box-shadow: inset 0 0 0 4px rgba(222, 198, 230, .32), 0 6px 18px rgba(126, 92, 143, .11);
}
.brand-mark .app-icon { width: 26px; height: 26px; }
.brand h1 { color: var(--ui-plum); letter-spacing: .035em; font-weight: 760; }
.auth-wrap { width: min(100% - 34px, 500px); padding-top: max(52px, 9vh); }

.card, .hero-card {
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
}
.card { padding: clamp(19px, 5vw, 30px); }
.card h2 { color: var(--ui-plum); letter-spacing: -.015em; }
.card-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.card-heading h2 { margin: 0; }
.card-heading .app-icon { width: 23px; height: 23px; color: var(--ui-rose-500); }
.support-text, .readonly-line, .inventory-row p, .todo-row p, .announcement-row p, .announcement-meta,
.history-card p, .count-record-card p, .shift-plan-row p { color: #776d85; }

label { color: #59466d; font-weight: 720; }
.field-with-icon > span { display: inline-flex; align-items: center; gap: 7px; color: #59466d; }
.field-with-icon .app-icon { width: 17px; height: 17px; color: var(--ui-rose-500); }
input, select, textarea {
  border-color: var(--ui-line); border-radius: var(--ui-radius-control); background: rgba(255,255,255,.9);
  color: var(--ui-plum); padding: 12px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
input:focus, select:focus, textarea:focus { border-color: var(--ui-lavender-400); box-shadow: var(--ui-focus); }
.check-row input { accent-color: var(--ui-lavender-600); }

.primary-button, .button-execute, .secondary-button, .button-view, .quiet-button, .gold-button,
.button-edit, .danger-button, .button-danger, .link-button, .row-actions button, .segmented button {
  border-radius: 12px; min-height: 44px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.primary-button, .button-execute { background: linear-gradient(135deg, #765d94, #5c4877); color: #fff; box-shadow: 0 8px 17px rgba(88, 66, 119, .25); }
.primary-button:hover, .button-execute:hover { background: linear-gradient(135deg, #694f87, #503d6c); }
.secondary-button, .button-view { color: var(--ui-plum); background: #f4effa; border: 1px solid #dfd0ec; }
.gold-button, .button-edit { color: #693d48; background: linear-gradient(135deg, #f5dfe0, #dfa9af); box-shadow: 0 6px 14px rgba(181,117,126,.15); }
.quiet-button, .link-button { color: var(--ui-lavender-600); }
.link-button { text-decoration-color: rgba(106,85,135,.35); }
.danger-button, .button-danger { background: #ad3f4c; color: #fff; box-shadow: 0 7px 16px rgba(173,63,76,.18); }
.danger-button:hover, .button-danger:hover { background: #872f3d; }
.button-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-with-icon .app-icon { width: 18px; height: 18px; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; box-shadow: var(--ui-focus); }

.topbar {
  background: rgba(251, 249, 255, .82); border-bottom-color: rgba(164,138,189,.24);
  box-shadow: 0 5px 20px rgba(82, 62, 108, .055);
}
.topbar .brand-mark { width: 36px; height: 36px; border-radius: 12px; }
.topbar .brand-mark .app-icon { width: 21px; height: 21px; }
.store-switch select { border-radius: 10px; background: rgba(255,255,255,.78); }
.content { margin-top: 26px; }

.hero-card {
  position: relative; overflow: hidden; min-height: 168px; padding: clamp(23px, 6vw, 38px);
  border-color: rgba(187,157,206,.48); color: #fff;
  background: linear-gradient(135deg, #71608c, #514267 72%, #704f68);
  box-shadow: 0 18px 46px rgba(84, 62, 108, .25);
}
.hero-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -55px; top: -82px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.045), 0 0 0 50px rgba(255,255,255,.035); }
.hero-card .eyebrow { color: #f4dce0; }
.hero-card p:last-child { color: rgba(255,255,255,.76); }
.hero-card-icon { position: absolute; top: 21px; right: 22px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; color: #ffe9e9; background: rgba(255,255,255,.10); }
.hero-card-icon .app-icon { width: 22px; height: 22px; }

.feature-grid { gap: 14px; }
.feature-card {
  min-height: 148px; justify-content: flex-start; gap: 13px; padding: 18px; overflow: hidden;
  border-color: var(--ui-line); border-radius: 19px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,244,253,.9));
  box-shadow: 0 8px 25px rgba(81,61,107,.075);
}
.feature-card:hover { box-shadow: var(--ui-shadow-lift); border-color: rgba(181,117,126,.37); }
.feature-card .feature-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border-radius: 13px; color: var(--ui-rose-500); background: linear-gradient(145deg, #f9ecee, #eee6f7); }
.feature-card .feature-copy { display: grid; gap: 4px; width: 100%; color: inherit; background: transparent; font-family: inherit; }
.feature-card strong { color: var(--ui-plum); font-size: 17px; }
.feature-card small { color: #7a7088; line-height: 1.48; }

.announcement-marquee { border-color: rgba(190,159,204,.38); background: rgba(255,253,255,.78); box-shadow: 0 8px 26px rgba(84,62,108,.06); }
.announcement-marquee .eyebrow { color: var(--ui-rose-500); }
.announcement-marquee-item { color: var(--ui-plum); }
.announcement-marquee-item .app-icon { width: 18px; height: 18px; color: var(--ui-rose-500); }
.announcement-marquee-item span, .tag-gold { color: #7a4551; background: #f6e0e2; }
.segmented button { border: 1px solid transparent; color: #5d4a74; background: #f1ebf8; }
.segmented .selected { color: #fff; background: #6d568b; box-shadow: 0 5px 12px rgba(103,80,135,.17); }

.inventory-row, .todo-row, .announcement-row, .history-card, .shift-plan-row { border-color: var(--ui-line); }
.todo-view-switch { display: flex; justify-content: flex-start; margin-top: 18px; }
.todo-view-switch .button-with-icon { padding-inline: 15px; }
.todo-deferred-section { min-width: 0; margin-top: 20px; }
.todo-deferred-toggle { width: 100%; min-width: 0; justify-content: flex-start; overflow-wrap: anywhere; }
.todo-deferred-list { display: grid; min-width: 0; gap: 12px; margin-top: 14px; }
.todo-deferred-row { min-width: 0; border-color: rgba(181,117,126,.34); background: linear-gradient(145deg, rgba(255,253,255,.92), rgba(250,241,244,.8)); }
.todo-deferred-row > div { min-width: 0; }
.todo-deferred-row .tag-gold { display: inline-flex; margin-bottom: 8px; }
.todo-reminder-at { color: #6b4859 !important; font-weight: 720; overflow-wrap: anywhere; }
.todo-reminder-remaining { color: var(--ui-rose-700) !important; font-weight: 720; overflow-wrap: anywhere; }
.row-actions button { border: 1px solid #e2d7ee; color: #5d4a74; background: #f5f1fa; }
.inventory-batch-card, .inventory-batch-summary-card, .count-item-card, .count-summary-card, .count-record-card,
.system-status-card, .permission-batch-row { border-color: var(--ui-line); background: rgba(252,250,255,.75); box-shadow: 0 4px 16px rgba(82,62,108,.035); }
.checkbox-field, .permission-control { border-color: var(--ui-line); background: rgba(252,250,255,.6); }
.status-normal, .system-status-badge.is-normal { color: #496153; background: #e9f2ec; }
.status-upcoming, .system-status-badge.is-pending { color: #765b28; background: #f9eed7; }
.status-processing, .system-status-badge.is-alert { color: #8c3344; background: #f9e5e8; }
.history-type { color: #5b4773; background: #eee7f7; }
.count-difference { color: #59466d; background: #f0ebf7; }
.inventory-overdraft-warning { border-color: #d69c68; color: #7b4c27; background: #fff3df; }

.dialog-backdrop { background: rgba(51, 40, 66, .43); }
.confirm-dialog { border-color: rgba(189,157,203,.46); border-radius: 21px; background: #fffaff; box-shadow: 0 24px 70px rgba(47,35,63,.28); }
.form-message { border: 1px solid transparent; }
.is-error { color: #8b3040; background: #fdecef; border-color: #f2c6cd; }
.is-success { color: #4a6858; background: #eaf4ed; border-color: #cce2d1; }
.loading-card { border: 1px solid var(--ui-line); background: rgba(255,253,255,.9); color: var(--ui-plum); }
.spinner { border-color: #e6d8ee; border-top-color: var(--ui-rose-500); }

@media (max-width: 640px) {
  .auth-wrap { width: min(100% - 28px, 500px); padding-top: 42px; }
  .topbar { gap: 10px; padding: 13px 14px; }
  .topbar-tools { gap: 6px; }
  .topbar .danger-button { min-height: 38px; padding: 8px 10px; font-size: 13px; }
  .content { width: min(100% - 24px, 1120px); margin-top: 18px; }
  .hero-card { min-height: 151px; border-radius: 19px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature-card { min-height: 140px; padding: 15px; }
  .feature-card strong { font-size: 16px; }
  .feature-card small { font-size: 12px; }
  .card { border-radius: 18px; }
  .card-heading .app-icon { width: 21px; height: 21px; }
  .todo-view-switch .button-with-icon { width: 100%; }
  .todo-deferred-toggle { justify-content: center; }
  .todo-deferred-row .row-actions .button-with-icon { width: 100%; }
}

@media (max-width: 340px) {
  .feature-grid { grid-template-columns: 1fr; }
  .topbar .brand h1 { max-width: 145px; line-height: 1.2; }
  .topbar-tools .store-switch { max-width: 116px; }
}

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

/* 統一的語意色與資料閱讀層。這些規則只處理既有 class 的呈現，不改 data-action、
 * form name、API 或 state。 */
:root {
  --ui-success-ink: #456957;
  --ui-success-surface: #e8f3ec;
  --ui-warning-ink: #7c5a2b;
  --ui-warning-surface: #fff3dc;
  --ui-danger-ink: #8e3445;
  --ui-danger-surface: #feebee;
  --ui-content-gap: clamp(14px, 3.2vw, 22px);
}

body { color: var(--ui-plum); line-height: 1.55; }
.system-wrap { padding-bottom: max(44px, calc(28px + env(safe-area-inset-bottom))); }
.content { display: grid; gap: var(--ui-content-gap); margin-bottom: env(safe-area-inset-bottom); }
.content > .form-message { margin: 0; }
.content > .link-button { justify-self: start; margin-top: 0; }

.form-stack > .flow-actions:last-child,
.success-actions,
.dialog-actions { padding-top: 4px; }
.flow-actions > button,
.flow-actions > .button-link,
.success-actions > button,
.success-actions > .button-link { min-width: min(100%, 132px); }
.primary-button, .button-execute { letter-spacing: .01em; }
.button-view, .secondary-button, .button-edit, .gold-button { border-width: 1px; }
.button-edit .app-icon, .button-view .app-icon, .secondary-button .app-icon, .quiet-button .app-icon { color: currentColor; }

/* 搜尋、篩選、匯出與長表單：保留原欄位和 submit mapping，只加上可閱讀的區塊層級。 */
.search-row, .filter-grid, .history-filter-grid {
  padding: 13px; border: 1px solid rgba(164,138,189,.18); border-radius: 16px;
  background: linear-gradient(135deg, rgba(244,239,250,.78), rgba(255,253,255,.92));
}
.search-row { align-items: end; }
.history-filter-actions { align-self: end; }
.history-filter-actions > button { min-height: 44px; }
.export-preview { padding: 17px; border: 1px solid rgba(164,138,189,.22); border-radius: 17px; background: rgba(250,248,253,.78); }
.export-preview-table-scroll { border-color: rgba(164,138,189,.28); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.export-preview-table th { color: #58456e; background: #f1eaf8; }
.export-preview-table td { color: #50435f; }

/* 清單卡片的資訊階層；此處不使用 table 取代既有 DOM，手機仍維持卡片閱讀。 */
.inventory-list, .todo-list, .announcement-list, .history-list, .count-record-list, .system-status-list { gap: 12px; }
.inventory-row, .todo-row, .announcement-row, .history-card, .shift-plan-row, .managed-user-form {
  padding: 15px; border: 1px solid rgba(164,138,189,.19); border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(249,246,253,.78));
  box-shadow: 0 5px 16px rgba(83,63,108,.045);
}
.inventory-row + .inventory-row, .todo-row + .todo-row, .announcement-row + .announcement-row,
.history-card + .history-card, .shift-plan-row + .shift-plan-row, .managed-user-form + .managed-user-form { margin-top: 0; }
.inventory-row h3, .todo-row h3, .announcement-row h3, .history-card h3, .count-record-card h3 { color: var(--ui-plum); }
.history-card-main { display: grid; gap: 3px; }
.history-time { color: #877990 !important; font-variant-numeric: tabular-nums; }
.history-type, .status-badge, .tag-gold, .system-status-badge { letter-spacing: .02em; }
.status-processing, .system-status-badge.is-alert { color: var(--ui-danger-ink); background: var(--ui-danger-surface); }
.status-upcoming, .system-status-badge.is-pending { color: var(--ui-warning-ink); background: var(--ui-warning-surface); }
.status-normal, .system-status-badge.is-normal { color: var(--ui-success-ink); background: var(--ui-success-surface); }
.section-title { display: flex; align-items: center; gap: 9px; color: var(--ui-plum); letter-spacing: .01em; }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(164,138,189,.3), transparent); }

/* 摘要、管理與確認畫面共用的資料面板。 */
.summary-list { padding: 14px; border: 1px solid rgba(164,138,189,.16); border-radius: 14px; background: rgba(249,246,253,.68); }
.summary-list dt { color: #7a6c87; }
.summary-list dd { color: var(--ui-plum); }
.history-detail-block { padding: 16px; border: 1px solid rgba(164,138,189,.16); border-radius: 15px; background: rgba(255,255,255,.62); }
.history-detail-block + .history-detail-block { margin-top: 12px; }
.count-item-card, .count-summary-card, .count-record-card, .inventory-batch-card, .inventory-batch-summary-card {
  border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,244,252,.84));
}
.count-item-heading, .inventory-batch-heading { padding-bottom: 10px; border-bottom: 1px solid rgba(164,138,189,.17); }
.count-difference { border: 1px solid rgba(164,138,189,.18); }
.count-record-card { border-color: rgba(164,138,189,.21); }
.count-record-card-action:hover { border-color: rgba(181,117,126,.45); box-shadow: var(--ui-shadow-soft); }
.managed-user-form { padding: 17px; }
.managed-user-actions summary { color: var(--ui-lavender-600); }
.permission-list { border-top-color: rgba(164,138,189,.22); }
.permission-list h4 { color: #59466d; }
.permission-batch-row { border-radius: 15px; }
.permission-control { color: #5e4b74; }
.system-status-card { border-radius: 16px; }
.system-status-heading h3 { color: var(--ui-plum); }

/* 對話框／bottom-like 結構，保留既有 tab order 與事件。 */
.dialog-backdrop { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.confirm-dialog { max-height: min(82dvh, 720px); overflow: auto; overscroll-behavior: contain; }
.confirm-dialog h2 { color: var(--ui-plum); }
.confirm-dialog p { color: #756a83; }
.inventory-batch-error-dialog, .inventory-batch-dialog { scrollbar-color: rgba(106,85,135,.45) transparent; }

/* 頁面中的讀取、空白與成功狀態維持語意色，不把警告或危險訊息變成紫色。 */
.success-center { padding: 13px 2px; }
.success-center p:first-child { color: var(--ui-plum); font-weight: 680; }
.inventory-overdraft-warning { color: var(--ui-warning-ink); background: var(--ui-warning-surface); border-color: #e2bd87; }
.inventory-overdraft-warning strong { color: #6d491c; }
.field-error { color: var(--ui-danger-ink); }
.form-message.is-error { color: var(--ui-danger-ink); background: var(--ui-danger-surface); border-color: #f2c9d0; }
.form-message.is-success { color: var(--ui-success-ink); background: var(--ui-success-surface); border-color: #cce2d2; }
.inventory-list > .support-text, .todo-list > .support-text, .announcement-list > .support-text,
.history-list > .support-text, .count-record-list > .support-text, .todo-deferred-list > .support-text {
  margin: 0; padding: 22px 16px; border: 1px dashed rgba(164,138,189,.34); border-radius: 15px;
  text-align: center; background: rgba(251,249,255,.72);
}

/* 手機實際可用高度與 safe-area；不新增固定導覽列，避免蓋住既有長表單。 */
@media (max-width: 640px) {
  body { min-height: 100dvh; }
  .content { gap: 14px; }
  .card, .hero-card { padding: 18px; }
  .card h2 { font-size: 20px; }
  .search-row, .filter-grid, .history-filter-grid { padding: 11px; border-radius: 14px; }
  .inventory-row, .todo-row, .announcement-row, .history-card, .shift-plan-row, .managed-user-form { padding: 14px; }
  .summary-list { grid-template-columns: minmax(88px, .85fr) minmax(0, 1.3fr); gap: 9px 12px; padding: 12px; }
  .history-filter-actions, .flow-actions { width: 100%; }
  .flow-actions > button, .flow-actions > .button-link { flex: 1 1 132px; }
  .dialog-backdrop { align-items: end; }
  .confirm-dialog { width: 100%; max-width: 520px; border-radius: 21px 21px 15px 15px; }
  .count-entry-grid { gap: 9px; }
  .count-entry-grid > button { min-height: 54px; }
  .row-actions { width: 100%; }
  .row-actions > button { flex: 1 1 102px; }
  .history-card .row-actions, .count-record-card .row-actions { margin-top: 2px; }
}

@media (min-width: 641px) {
  .inventory-row, .todo-row, .announcement-row, .history-card, .count-record-card { align-items: center; }
  .history-filter-actions { grid-column: span 3; }
}