.project-overview {
    --project-primary: #5046e5;
    --project-text: #172033;
    --project-muted: #748096;
    --project-border: #e2e7ef;
    --project-surface: #fff;
    color: var(--project-text);
    padding: 30px 32px 42px;
}

.project-overview__header,
.project-overview__actions,
.project-kpi,
.project-filters,
.project-name,
.project-client,
.project-row-actions,
.project-pagination,
.project-pagination nav,
.project-per-page label { display: flex; align-items: center; }
.project-overview__header { justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.project-overview__header h1 { margin: 0 0 4px; font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; }
.project-overview__header p { margin: 0; color: var(--project-muted); font-size: 1rem; }
.project-overview__actions { gap: 10px; }
.project-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid var(--project-border); border-radius: 10px; background: #fff; color: #515c70; font-weight: 700; text-decoration: none; white-space: nowrap; transition: .18s ease; }
.project-button:hover { border-color: #c7cdda; color: var(--project-primary); transform: translateY(-1px); }
.project-button--primary { border-color: var(--project-primary); background: var(--project-primary); color: #fff; box-shadow: 0 4px 10px rgba(80,70,229,.2); }
.project-button--primary:hover { background: #4338ca; color: #fff; }

.project-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.project-kpi { min-height: 112px; gap: 18px; padding: 20px; background: var(--project-surface); border: 1px solid var(--project-border); border-radius: 14px; box-shadow: 0 1px 3px rgba(23,32,51,.05); }
.project-kpi__icon { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px; font-size: 1.35rem; }
.project-kpi div { display: grid; line-height: 1.1; }
.project-kpi div > span { color: var(--project-muted); font-size: .88rem; font-weight: 600; }
.project-kpi strong { margin: 4px 0 6px; font-size: 1.8rem; }
.project-kpi small { font-size: .8rem; font-weight: 700; }
.project-kpi--indigo .project-kpi__icon { color: #5147e6; background: #eef0ff; } .project-kpi--indigo small { color: #08a574; }
.project-kpi--red .project-kpi__icon { color: #ef4444; background: #fff0f1; } .project-kpi--red strong, .project-kpi--red small { color: #ef4444; }
.project-kpi--green .project-kpi__icon { color: #08a574; background: #eafbf4; } .project-kpi--green small { color: #079669; }
.project-kpi--violet .project-kpi__icon { color: #7c3aed; background: #f3efff; } .project-kpi--violet small { color: #7c3aed; }

.project-filters { gap: 12px; padding: 18px; margin-bottom: 22px; border: 1px solid var(--project-border); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(23,32,51,.04); }
.project-filter { position: relative; flex: 0 1 175px; margin: 0; }
.project-filter--search { flex: 1 1 400px; }
.project-filter i { position: absolute; left: 14px; color: #9aa5b7; pointer-events: none; }
.project-filter input, .project-filter select { width: 100%; height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--project-border); border-radius: 9px; background-color: #fbfcfe; color: #556176; outline: none; }
.project-filter--search input { padding-left: 40px; }
.project-filter input:focus, .project-filter select:focus { border-color: #8e87ef; box-shadow: 0 0 0 3px rgba(80,70,229,.09); }
.project-archive-toggle { display: flex; align-items: center; gap: 9px; margin: 0; color: #667085; white-space: nowrap; cursor: pointer; }
.project-archive-toggle input { position: absolute; opacity: 0; }
.project-archive-toggle span { width: 38px; height: 22px; padding: 3px; border-radius: 999px; background: #dfe3ea; transition: .2s; }
.project-archive-toggle span::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.project-archive-toggle input:checked + span { background: var(--project-primary); }
.project-archive-toggle input:checked + span::after { transform: translateX(16px); }
.project-filters__reset { color: #8a95a7; }

.project-list { overflow: hidden; border: 1px solid var(--project-border); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(23,32,51,.05); }
.project-table-scroll { overflow-x: auto; }
.project-table { width: 100%; min-width: 1400px; border-collapse: collapse; }
.project-table th { height: 50px; padding: 0 12px; background: #fafbfc; border-bottom: 1px solid var(--project-border); color: #596477; font-size: .75rem; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .025em; }
.project-table td { height: 104px; padding: 14px 12px; border-bottom: 1px solid #edf0f4; color: #566176; vertical-align: middle; }
.project-table__check { width: 38px; padding-left: 18px !important; }
.project-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--project-primary); }
.project-row--danger { background: #fffafa; }
.project-row--muted { opacity: .52; }
.project-name { gap: 14px; min-width: 170px; }
.project-name__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; }
.project-name a { display: block; max-width: 160px; margin-bottom: 3px; color: #20293b; font-weight: 750; line-height: 1.25; text-decoration: none; }
.project-name a:hover { color: var(--project-primary); }
.project-name small { display: block; color: #9aa5b7; line-height: 1.25; }
.project-client { gap: 9px; min-width: 140px; color: #445064; font-weight: 600; }
.project-client__avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; font-size: .7rem; font-weight: 800; }
.project-tone--blue { color: #3777ed; background: #eaf2ff; } .project-tone--green { color: #079669; background: #e3faef; } .project-tone--orange { color: #f97316; background: #fff1e5; } .project-tone--pink { color: #ec4899; background: #fdeaf4; } .project-tone--gray { color: #7c8798; background: #eef1f5; }
.project-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 145px; padding: 6px 11px; border-radius: 999px; font-size: .78rem; font-weight: 750; line-height: 1.1; }
.project-pill .ti-circle { font-size: .42rem; }
.project-pill--blue { color: #1677b7; background: #dcf3ff; } .project-pill--indigo { color: #5046e5; background: #e5e8ff; } .project-pill--amber { color: #c97708; background: #fff1bd; } .project-pill--green { color: #07875f; background: #dcf8eb; } .project-pill--red { color: #e5484d; background: #ffe3e3; } .project-pill--violet { color: #7c3aed; background: #f1e9ff; } .project-pill--orange { color: #f06a13; background: #fff0e4; } .project-pill--pink { color: #db3d8d; background: #fdeaf4; } .project-pill--gray { color: #7d8796; background: #edf0f4; }
.project-progress { display: flex; align-items: center; gap: 10px; min-width: 115px; }
.project-progress > span { width: 68px; height: 6px; overflow: hidden; border-radius: 999px; background: #edf0f4; }
.project-progress i { display: block; height: 100%; border-radius: inherit; background: #6158e9; }
.project-progress--green i { background: #0bb98b; } .project-progress--amber i { background: #fbbf24; } .project-progress--red i { background: #ef4444; } .project-progress strong { font-size: .78rem; }
.project-deadline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .8rem; }
.project-deadline--danger { padding: 5px 9px; border: 1px solid #f7a8aa; border-radius: 999px; background: #fff1f1; color: #df3e43; font-weight: 700; }
.project-count { display: inline-grid; grid-template-columns: auto auto; column-gap: 6px; min-width: 66px; color: #687386; font-size: .76rem; line-height: 1.1; }
.project-count i { grid-row: 1 / 3; color: #9aa5b4; } .project-count--danger, .project-count--danger i { color: #ef4444; }
.project-row-actions { gap: 7px; }
.project-row-actions a { padding: 7px 10px; border-radius: 6px; background: #eef0ff; color: #5046e5; font-size: .76rem; font-weight: 700; text-decoration: none; }
.project-row-actions .project-row-actions__edit { background: #f4f5f7; color: #586477; }
.project-empty { color: #abb3c0; }
.project-table__empty { height: 250px !important; text-align: center; color: var(--project-muted) !important; }
.project-table__empty > * { display: block; margin: 5px auto; } .project-table__empty i { font-size: 2rem; color: #b0aaf8; }
.project-pagination { justify-content: space-between; gap: 18px; min-height: 68px; padding: 12px 18px; color: var(--project-muted); font-size: .84rem; }
.project-pagination nav { gap: 4px; margin-left: auto; }
.project-pagination nav a, .project-pagination nav span { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 8px; color: #687386; text-decoration: none; }
.project-pagination nav a.is-active { background: var(--project-primary); color: #fff; font-weight: 800; } .project-pagination nav a.is-disabled { opacity: .35; pointer-events: none; }
.project-per-page label { gap: 7px; white-space: nowrap; }
.project-per-page select { padding: 6px 26px 6px 10px; border: 1px solid var(--project-border); border-radius: 7px; background: #fff; }

.project-kanban { display: grid; grid-template-columns: repeat(6, minmax(235px, 1fr)); gap: 14px; overflow-x: auto; align-items: start; }
.project-kanban[hidden], .project-list[hidden] { display: none !important; }
.project-kanban__column { min-height: 250px; padding: 14px; border: 1px solid var(--project-border); border-radius: 14px; background: #f7f8fb; }
.project-kanban__column > header { display: flex; justify-content: space-between; margin-bottom: 14px; font-weight: 800; }
.project-kanban__column > header strong { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #e7e9f0; font-size: .75rem; }
.project-kanban__card { margin-bottom: 10px; padding: 14px; border: 1px solid var(--project-border); border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(23,32,51,.05); }
.project-kanban__card > div, .project-kanban__card footer { display: flex; justify-content: space-between; align-items: center; }
.project-kanban__card > a { display: block; margin: 14px 0 4px; color: var(--project-text); font-weight: 800; text-decoration: none; }
.project-kanban__card p { color: var(--project-muted); font-size: .82rem; }
.project-kanban__card footer { padding-top: 12px; border-top: 1px solid #edf0f4; color: #8791a1; font-size: .76rem; }
.project-kanban__empty { padding: 30px 0; color: #9ca5b3; text-align: center; font-size: .82rem; }

@media (max-width: 1399.98px) { .project-overview { padding: 24px 20px 36px; } .project-kpis { grid-template-columns: repeat(2, 1fr); } .project-filters { flex-wrap: wrap; } }
@media (max-width: 767.98px) { .project-overview { padding: 18px 12px 30px; } .project-overview__header { align-items: flex-start; flex-direction: column; } .project-overview__actions { width: 100%; flex-wrap: wrap; } .project-overview__actions .project-button { flex: 1; } .project-kpis { grid-template-columns: 1fr; } .project-filter, .project-filter--search { flex-basis: 100%; } .project-filters .project-button { width: 100%; } .project-pagination { align-items: flex-start; flex-direction: column; } .project-pagination nav { margin: 0; } }