.enterprise-list-page { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 18px; } .enterprise-list-page .status-tabs { flex: 0 0 auto; display: flex; gap: 28px; margin-top: 14px; border-bottom: 1px solid #dbe4ee; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .enterprise-list-page .status-tabs::-webkit-scrollbar { display: none; } .enterprise-list-page .status-tabs button { position: relative; min-height: 36px; border: 0; background: transparent; color: #64748b; font-size: 14px; font-weight: 750; white-space: nowrap; } .enterprise-list-page .status-tabs button.active { color: var(--theme-primary-active); } .enterprise-list-page .status-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--theme-primary); } .enterprise-list-page .list-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; } .enterprise-list-page .table-wrap { flex: 1 1 auto; min-height: 0; } .enterprise-list-page .toolbar-actions, .enterprise-list-page .document-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } .enterprise-list-page .filter-set { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .enterprise-list-page .list-search { position: relative; flex: 0 1 280px; width: 280px; min-width: 220px; display: block; } .enterprise-list-page .picker-filter { flex: 0 0 auto; } .enterprise-list-page .list-search .mdi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 15px; } .enterprise-list-page .list-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid #d7e0ea; border-radius: 4px; background: #fff; color: #0f172a; font-size: 13px; transition: border-color 160ms ease, box-shadow 160ms ease; } .enterprise-list-page .list-search input::placeholder { color: #8da0b4; } .enterprise-list-page .list-search input:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-focus-ring); outline: none; } .enterprise-list-page .filter-btn { min-width: 104px; min-height: 38px; display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 14px; border: 1px solid #d7e0ea; border-radius: 4px; background: #fff; color: #334155; font-size: 14px; font-weight: 750; white-space: nowrap; } .enterprise-list-page .filter-btn:hover, .enterprise-list-page .document-filter.open .filter-btn { border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.32); color: var(--theme-primary-active); } .enterprise-list-page .create-request-btn, .enterprise-list-page .create-btn, .enterprise-list-page .export-btn, .enterprise-list-page .template-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--theme-gradient-primary); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px var(--theme-primary-shadow); transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .enterprise-list-page .create-request-btn.secondary, .enterprise-list-page .ghost-filter-btn, .enterprise-list-page .template-btn, .enterprise-list-page .export-btn { border: 1px solid #d7e0ea; background: #fff; color: #334155; box-shadow: none; } .enterprise-list-page .create-request-btn:hover:not(:disabled), .enterprise-list-page .create-btn:hover:not(:disabled), .enterprise-list-page .export-btn:hover:not(:disabled), .enterprise-list-page .template-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px var(--theme-primary-shadow); filter: saturate(1.02); } .enterprise-list-page .create-request-btn.secondary:hover:not(:disabled), .enterprise-list-page .ghost-filter-btn:hover:not(:disabled), .enterprise-list-page .template-btn:hover:not(:disabled), .enterprise-list-page .export-btn:hover:not(:disabled) { border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.32); color: var(--theme-primary-active); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .enterprise-list-page .create-request-btn:disabled, .enterprise-list-page .create-btn:disabled, .enterprise-list-page .export-btn:disabled, .enterprise-list-page .template-btn:disabled { cursor: not-allowed; opacity: 0.72; transform: none; } .enterprise-list-page .hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #64748b; font-size: 13px; } .enterprise-list-page .hint .mdi { color: #64748b; } .enterprise-list-page .active-filter-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .enterprise-list-page .active-filter-chip { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 4px; background: var(--theme-primary-soft); color: var(--theme-primary-active); font-size: 12px; font-weight: 800; } .enterprise-list-page .table-wrap { min-height: 400px; margin-top: 10px; overflow: auto; border: 1px solid #edf2f7; border-radius: 10px; background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .enterprise-list-page .table-wrap.is-empty { align-items: center; justify-content: center; } .enterprise-list-page .table-state { width: 100%; min-height: 220px; align-self: center; } .enterprise-list-page .table-state.error { display: grid; place-items: center; gap: 10px; padding: 32px; text-align: center; } .enterprise-list-page .table-state.error > .mdi { color: var(--danger); font-size: 30px; } .enterprise-list-page .table-state.error strong { color: var(--ink); font-size: 15px; } .enterprise-list-page .table-state.error p { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.6; } .enterprise-list-page .state-action, .enterprise-list-page .retry-btn { min-height: 34px; padding: 0 12px; border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22); border-radius: 4px; background: var(--theme-primary-soft); color: var(--theme-primary-active); font-size: 12px; font-weight: 750; } .enterprise-list-page table, .enterprise-list-page .table-wrap > table { width: 100%; min-width: 1080px; align-self: flex-start; border-collapse: collapse; table-layout: fixed; } .enterprise-list-page th, .enterprise-list-page td, .enterprise-list-page .table-wrap th, .enterprise-list-page .table-wrap td { padding: 13px 12px; border-bottom: 1px solid #edf2f7; color: #24324a; font-size: 14px; line-height: 1.35; text-align: center; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enterprise-list-page th, .enterprise-list-page .table-wrap th { position: sticky; top: 0; z-index: 1; background: #f7fafc; color: #64748b; font-size: 13px; font-weight: 800; } .enterprise-list-page tbody tr, .enterprise-list-page .table-wrap tbody tr { cursor: pointer; } .enterprise-list-page tbody tr:hover, .enterprise-list-page tbody tr.spotlight, .enterprise-list-page .table-wrap tbody tr:hover, .enterprise-list-page .table-wrap tbody tr.spotlight { background: linear-gradient(90deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.03)); } .enterprise-list-page tbody tr:last-child td, .enterprise-list-page .table-wrap tbody tr:last-child td { border-bottom: 0; } .enterprise-list-page .doc-id { color: var(--theme-primary-active); font-weight: 800; } .enterprise-list-page .doc-kind-tag, .enterprise-list-page .type-tag, .enterprise-list-page .status-tag { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .enterprise-list-page .doc-kind-tag { min-height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 800; } .enterprise-list-page .doc-kind-tag.reimbursement { background: var(--theme-primary-light-9); color: var(--theme-primary-active); } .enterprise-list-page .doc-kind-tag.application { background: #eff6ff; color: #2563eb; } .enterprise-list-page .type-tag { min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; } .enterprise-list-page .type-tag.travel, .enterprise-list-page .type-tag.hotel, .enterprise-list-page .type-tag.transport { background: var(--theme-primary-light-9); color: var(--theme-primary-active); } .enterprise-list-page .type-tag.entertainment, .enterprise-list-page .type-tag.meal { background: #fff7ed; color: #ea580c; } .enterprise-list-page .type-tag.office { background: #eff6ff; color: #2563eb; } .enterprise-list-page .type-tag.meeting, .enterprise-list-page .type-tag.training { background: #eef2ff; color: #4f46e5; } .enterprise-list-page .type-tag.other { background: #f8fafc; color: #475569; } .enterprise-list-page .status-tag { min-height: 24px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 750; } .enterprise-list-page .status-tag.info { border-color: #bfdbfe; background: #eff6ff; color: #2563eb; } .enterprise-list-page .status-tag.success, .enterprise-list-page .status-tag.archived { border-color: var(--success-line); background: var(--success-soft); color: var(--success-active); } .enterprise-list-page .status-tag.warning, .enterprise-list-page .status-tag.draft { border-color: #fed7aa; background: #fff7ed; color: #f97316; } .enterprise-list-page .status-tag.danger { border-color: #fecaca; background: #fef2f2; color: #dc2626; } .enterprise-list-page .status-tag.neutral, .enterprise-list-page .status-tag.muted, .enterprise-list-page .status-tag.disabled { border-color: #cbd5e1; background: #f8fafc; color: #475569; } .enterprise-pagination { flex: 0 0 auto; } .enterprise-list-page .list-foot, .enterprise-list-page.enterprise-list-page .list-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 12px; } .enterprise-list-page .page-summary, .enterprise-list-page.enterprise-list-page .page-summary { color: #64748b; font-size: 14px; font-weight: 650; } .enterprise-list-page .pager, .enterprise-list-page.enterprise-list-page .pager { display: inline-flex; justify-content: center; gap: 6px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; } .enterprise-list-page .pager button, .enterprise-list-page.enterprise-list-page .pager button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #334155; font-size: 14px; font-weight: 800; transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .enterprise-list-page .pager button:hover:not(.active), .enterprise-list-page.enterprise-list-page .pager button:hover:not(.active) { background: #fff; color: var(--theme-primary-active); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08); } .enterprise-list-page .pager button.active, .enterprise-list-page.enterprise-list-page .pager button.active { background: var(--theme-primary-active); color: #fff; box-shadow: 0 8px 16px var(--theme-primary-shadow); } .enterprise-list-page .pager button:disabled, .enterprise-list-page.enterprise-list-page .pager button:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; } .enterprise-list-page .page-ellipsis, .enterprise-list-page .pager span { color: #64748b; font-weight: 800; } .enterprise-list-page .page-size-select { width: 112px; justify-self: end; } .enterprise-detail-page { min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; } .enterprise-detail-page .detail-scroll { min-height: 0; overflow: auto; } .enterprise-detail-page .detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px solid #e5eaf0; } .enterprise-detail-page .detail-action-group { display: flex; justify-content: flex-end; gap: 8px; } .enterprise-detail-page .back-action, .enterprise-detail-page .minor-action, .enterprise-detail-page .major-action { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 4px; font-size: 13px; font-weight: 760; transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } .enterprise-detail-page .back-action, .enterprise-detail-page .minor-action { border: 1px solid #d7e0ea; background: #fff; color: #334155; } .enterprise-detail-page .minor-action.success-action { border-color: var(--success-line); background: var(--success-soft); color: var(--success-hover); } .enterprise-detail-page .minor-action.enable-action { border-color: rgba(100, 116, 139, 0.26); color: #64748b; } .enterprise-detail-page .minor-action.enable-action.is-on { border-color: rgba(var(--success-rgb), 0.26); color: var(--success-hover); } .enterprise-detail-page .minor-action.danger-action { border-color: rgba(220, 38, 38, 0.2); color: #dc2626; } .enterprise-detail-page .major-action { border: 1px solid var(--theme-primary); background: var(--theme-primary); color: #fff; box-shadow: 0 4px 12px var(--theme-primary-shadow); } .enterprise-detail-page .back-action:hover, .enterprise-detail-page .minor-action:hover, .enterprise-detail-page .major-action:hover { transform: translateY(-1px); } .enterprise-detail-page .back-action:disabled, .enterprise-detail-page .minor-action:disabled, .enterprise-detail-page .major-action:disabled { opacity: 0.52; cursor: not-allowed; transform: none; box-shadow: none; } .enterprise-detail-card .card-head { align-items: flex-start; } @media (max-width: 760px) { .enterprise-list-page { padding: 16px; } .enterprise-list-page .status-tabs { gap: 18px; } .enterprise-list-page .toolbar-actions, .enterprise-list-page .document-actions { width: 100%; margin-left: 0; } .enterprise-list-page .filter-set, .enterprise-list-page .list-search, .enterprise-list-page .filter-btn, .enterprise-list-page .create-request-btn, .enterprise-list-page .create-btn, .enterprise-list-page .export-btn, .enterprise-list-page .template-btn, .enterprise-list-page .page-size-select { width: 100%; } .enterprise-list-page .list-toolbar, .enterprise-list-page .list-foot { display: grid; grid-template-columns: 1fr; justify-items: stretch; } .enterprise-list-page .pager, .enterprise-list-page .page-size-select { justify-self: stretch; } }