/* Project management workspace: tasks, milestones, projects. Bootstrap does the heavy lifting. */

.pm {
    --pm-surface: #fff;
    --pm-muted: #6c757d;
    --pm-border: rgba(0, 0, 0, .08);
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.pm-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.pm-header h1 { font-size: 1.75rem; margin: 0; line-height: 1.2; }
.pm-header .pm-subtitle { color: var(--pm-muted); margin: .25rem 0 0; }
.pm-breadcrumb { font-size: .875rem; margin-bottom: .25rem; }
.pm-breadcrumb .breadcrumb { margin: 0; }

.pm-tabs { border-bottom: 1px solid var(--pm-border); margin-bottom: 1.25rem; overflow-x: auto; flex-wrap: nowrap; }
.pm-tabs .nav-link { white-space: nowrap; }

.pm-card { background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: .5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.pm-card + .pm-card { margin-top: 1rem; }
.pm-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-card-header h2, .pm-card-header h3 { font-size: 1.05rem; margin: 0; }
.pm-card-body { padding: 1rem; }

.pm-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); background: rgba(0, 0, 0, .015); }
.pm-toolbar .form-control, .pm-toolbar .form-select { width: auto; min-width: 10rem; }
.pm-toolbar .pm-search { flex: 1 1 14rem; }

.pm-table { margin: 0; }
.pm-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pm-muted); font-weight: 600; white-space: nowrap; }
.pm-table td { vertical-align: middle; }
.pm-table .pm-col-check { width: 2.25rem; }
.pm-table .pm-col-status { width: 11rem; }
.pm-row[data-state="closed"] .pm-title { text-decoration: line-through; color: var(--pm-muted); }
.pm-row.pm-flash { animation: pm-flash 1.2s ease-out; }
@keyframes pm-flash { from { background: rgba(255, 193, 7, .35); } to { background: transparent; } }

.pm-title { font-weight: 600; text-decoration: none; color: inherit; }
.pm-title:hover { text-decoration: underline; }
.pm-meta { font-size: .8rem; color: var(--pm-muted); }
.pm-meta a { color: inherit; }

.pm-status-select { font-size: .8rem; padding-top: .15rem; padding-bottom: .15rem; min-width: 9.5rem; }
.pm-status-select.is-busy { opacity: .6; pointer-events: none; }

.pm-badge-due.is-overdue { color: #fff !important; background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }
.pm-priority { font-variant-numeric: tabular-nums; }
.pm-progress { height: .4rem; min-width: 5rem; }

.pm-quick-add { display: flex; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-quick-add .form-control { flex: 1; }

.pm-bulkbar { position: sticky; bottom: 0; z-index: 5; display: none; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem 1rem; background: #212529; color: #fff; border-radius: 0 0 .5rem .5rem; }
.pm-bulkbar.is-visible { display: flex; }
.pm-bulkbar .form-select { width: auto; }

.pm-empty { text-align: center; color: var(--pm-muted); padding: 2.5rem 1rem; }
.pm-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; }

.pm-stat { display: flex; flex-direction: column; }
.pm-stat strong { font-size: 1.4rem; line-height: 1.1; }
.pm-stat span { font-size: .75rem; color: var(--pm-muted); text-transform: uppercase; letter-spacing: .03em; }

.pm-form .pm-form-section { padding: 1rem; border-bottom: 1px solid var(--pm-border); }
.pm-form .pm-form-section:last-child { border-bottom: 0; }
.pm-form .pm-form-section > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pm-muted); margin-bottom: .75rem; }
.pm-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 1rem; background: rgba(0, 0, 0, .02); border-top: 1px solid var(--pm-border); border-radius: 0 0 .5rem .5rem; }

.pm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }

.pm-milestone + .pm-milestone { border-top: 1px solid var(--pm-border); }

@media (max-width: 767.98px) {
    .pm-hide-sm { display: none !important; }
    .pm-table .pm-col-status { width: auto; }
    .pm-status-select { min-width: 7.5rem; }
    .pm-toolbar .form-control, .pm-toolbar .form-select { min-width: 0; flex: 1 1 100%; }
}