/* === page-projects V3.3.0 === */
* { box-sizing: border-box; }
body { background: var(--color-bg-page); padding: var(--spacing-page); margin: 0; font-family: var(--font-family); min-height: 100vh; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lg); }
.page-header-left { display: flex; align-items: center; gap: var(--spacing-md); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; }
.page-version { font-size: var(--font-size-xs); color: var(--color-text-placeholder); background: var(--color-bg-page); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-small); border: 1px solid var(--color-border-light); }
.card { background: var(--color-bg-card); border-radius: var(--radius-base); box-shadow: var(--card-shadow); }
.card__body { padding: var(--spacing-lg); }
.filter-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--spacing-md); gap: var(--spacing-md); flex-wrap: wrap; }
.filter-bar__left { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; flex: 1; }
.filter-bar__right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
.search-box { position: relative; width: 220px; }
.search-box__icon { position: absolute; left: var(--spacing-sm); top: 50%; transform: translateY(-50%); color: var(--color-text-placeholder); pointer-events: none; }
.search-box__input { width: 100%; padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 32px; border: 1px solid var(--color-border); border-radius: var(--radius-base); font-size: var(--font-size-base); color: var(--color-text-primary); background: var(--color-bg-card); transition: border-color var(--transition-fast); }
.search-box__input:focus { outline: none; border-color: var(--color-primary); }
.search-box__input::placeholder { color: var(--color-text-placeholder); }
.filter-select { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-base); font-size: var(--font-size-base); color: var(--color-text-primary); background: var(--color-bg-card); min-width: 120px; cursor: pointer; }
.filter-select:focus { outline: none; border-color: var(--color-primary); }
.filter-date { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-base); font-size: var(--font-size-base); color: var(--color-text-primary); background: var(--color-bg-card); }
.filter-date:focus { outline: none; border-color: var(--color-primary); }
.filter-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; }
.filter-actions { display: flex; align-items: center; gap: var(--spacing-sm); }
.filter-divider { width: 1px; height: 16px; background: var(--color-border); margin: 0 var(--spacing-xs); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); border-radius: var(--radius-base); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary-light); }
.btn--secondary { background: var(--color-bg-card); color: var(--color-text-primary); border-color: var(--color-border); }
.btn--secondary:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.btn--danger { background: var(--color-bg-card); color: var(--color-danger); border-color: var(--color-border); }
.btn--danger:hover:not(:disabled) { background: var(--color-status-voided-bg); border-color: var(--color-danger); }
.btn--warning { background: var(--color-bg-card); color: var(--color-warning); border-color: var(--color-border); }
.btn--warning:hover:not(:disabled) { background: var(--color-status-bidding-bg); border-color: var(--color-warning); }
.btn--sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }
.btn--text { background: transparent; border: none; color: var(--color-text-secondary); padding: var(--spacing-sm); }
.btn--text:hover { color: var(--color-primary); }
.btn-link { background: transparent; border: none; color: var(--color-primary); padding: var(--spacing-xs); font-size: var(--font-size-sm); cursor: pointer; transition: color var(--transition-fast); }
.btn-link:hover { color: var(--color-primary-light); }
.btn-link--danger { color: var(--color-danger); }
.btn-link--danger:hover { color: var(--color-danger); }
.btn-link--warning { color: var(--color-warning); }
.btn-link:disabled { color: var(--color-text-placeholder); cursor: not-allowed; }
.table-wrapper { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.table__th { padding: var(--spacing-sm) var(--spacing-md); text-align: left; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-bg-page); border-bottom: 1px solid var(--color-border); white-space: nowrap; font-size: var(--font-size-sm); }
.table__th--center { text-align: center; }
.table__th--right { text-align: right; }
.table__row { border-bottom: 1px solid var(--color-border-light); transition: background var(--transition-fast); }
.table__row:hover { background: var(--color-bg-page); }
.table__row.selected { background: var(--color-secondary-alpha-08); }
.table__td { padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-primary); vertical-align: middle; font-size: var(--font-size-sm); }
.table__td--center { text-align: center; }
.table__td--right { text-align: right; }
.table__td--action { text-align: center; white-space: nowrap; }
.table__checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary); }
.supplier-list { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.action-group { display: flex; align-items: center; gap: var(--spacing-xs); justify-content: center; }
.action-divider { width: 1px; height: 12px; background: var(--color-border); }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) 0 0; border-top: 1px solid var(--color-border-light); margin-top: var(--spacing-md); }
.pagination__left { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pagination__size-select { padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-small); font-size: var(--font-size-sm); color: var(--color-text-primary); background: var(--color-bg-card); }
.pagination__controls { display: flex; align-items: center; gap: var(--spacing-xs); }
.pagination__btn { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg-card); color: var(--color-text-primary); cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-fast); padding: 0 var(--spacing-xs); }
.pagination__btn:hover:not(:disabled):not(.is-active) { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__btn.is-active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.pagination__ellipsis { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--color-text-placeholder); font-size: var(--font-size-sm); }
.confirm-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay); display: flex; align-items: center; justify-content: center; z-index: var(--z-index-modal); opacity: 0; visibility: hidden; transition: all var(--transition-fast); }
.confirm-modal-overlay.is-visible { opacity: 1; visibility: visible; }
.confirm-modal { background: var(--color-bg-card); border-radius: var(--radius-base); box-shadow: var(--modal-shadow); width: 400px; max-width: 90vw; }
.confirm-modal__header { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-light); }
.confirm-modal__header--danger { background: var(--color-status-voided-bg); }
.confirm-modal__title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.confirm-modal__body { padding: var(--spacing-lg); color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: 1.6; }
.confirm-modal__footer { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border-light); }
.empty-state { text-align: center; padding: var(--spacing-xl); color: var(--color-text-secondary); }
.empty-state__icon { font-size: 48px; margin-bottom: var(--spacing-md); opacity: 0.3; }
.empty-state__text { font-size: var(--font-size-base); }