/* PM Tool: graphite navigation and vivid violet actions. Layered over the existing component contract. */
:root {
    --app-accent: #6842e8; --app-accent-hover: #5632d0; --app-accent-deep: #4924b8;
    --app-accent-soft: #f0ebff; --app-accent-border: #cbbafb; --app-accent-2: #3b82f6;
    --app-bg: #f5f6fa; --app-surface-2: #f8f9fc; --app-border: #dfe3ec;
    --app-border-strong: #bbc3d3; --app-text: #171b2b; --app-text-2: #3e465c;
    --app-text-muted: #657087; --app-text-faint: #717c92;
    --app-shadow-sm: 0 1px 3px #171b2b07; --app-shadow: 0 5px 18px #171b2b09;
    --app-shadow-lg: 0 12px 28px #171b2b12; --app-ring: 0 0 0 3px #6842e825;
    --app-radius-sm: .3rem; --app-radius: .5rem; --app-radius-lg: .65rem;
    --app-sidebar-w: 240px; --app-sidebar-w-collapsed: 72px; --bs-primary-rgb: 104,66,232; --bs-link-color-rgb: 88,51,206;
    --bs-link-hover-color-rgb: 73,36,184;
}
body.app-logged-in, body.auth-page { background: var(--app-bg); background-image: none; }
body .app-navbar { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--app-border); }
body .app-brand-mark { background: #211b3d; box-shadow: none; border-radius: .6rem; }
body .app-brand-text strong { letter-spacing: -.04em; font-size: 1.18rem; }
body .app-avatar { background: #ebe6ff; color: #5632c4; box-shadow: none; }
body .app-sidebar-inner { background: #ffffff; border-right: 1px solid var(--app-border); }
body .app-sidebar .nav-link { border-radius: .5rem; font-size: .84rem; padding-top: .45rem; padding-bottom: .45rem; }
body .app-sidebar .nav-link.active { background: #f0ebff; color: #4924b8; }
body .app-sidebar .nav-link.active .app-nav-icon { background: transparent; color: #6842e8; box-shadow: none; }
body .app-sidebar .nav-link.active::before { display: none; }
body .app-sidebar .nav-link .app-nav-icon { background: transparent; }
body .app-sidebar-label { color: #717c92; font-size: .61rem; letter-spacing: .13em; }
body .app-sidebar-project { background: #f2eefe; border-color: #ded3fc; }
body .app-sidebar-project .app-sidebar-project-name, body .app-sidebar-project .app-sidebar-project-kicker { color: #553c94; }
body .app-sidebar-quick { justify-content: flex-start; padding-left: 1rem; box-shadow: none; }
body .app-content { padding-top: 2rem; }
body .btn { box-shadow: none; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
body .btn-primary { --bs-btn-bg: #6842e8; --bs-btn-border-color: #6842e8; background: #6842e8; border: 1px solid #6842e8; box-shadow: none; }
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active { background: #5632d0; border-color: #5632d0; box-shadow: none; transform: none; }
body .btn-primary:disabled { background: #9883db; border-color: #9883db; }
body .btn-outline-primary { color: #6842e8; border-color: #bca9ef; }
body .btn-outline-primary:hover { background: #6842e8; border-color: #6842e8; color: white; }
body .app-quick-note-btn { background: #f0ebff; color: #4924b8; border-color: #ded3fc; }
body .btn-light { background: #fff; border: 1px solid var(--app-border); }
body .card { border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); border-radius: var(--app-radius); }
body .card-header { background: #fff; border-bottom: 1px solid var(--app-border); }
body .form-control, body .form-select { background-color: #fff; border-color: #cbd2df; border-radius: .5rem; }
/* One perimeter for fields: inset focus outline replaces stacked outer rings. */
body .form-control, body .form-select, body .form-check-input { box-shadow: none !important; }
body .form-control:focus, body .form-select:focus, body .form-check-input:focus {
    border-color: var(--app-accent);
    outline: 2px solid var(--app-accent) !important;
    outline-offset: -2px;
}
body .input-group:focus-within { box-shadow: none; }
body .global-search .input-group:focus-within {
    border-color: var(--app-accent);
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
    box-shadow: none;
}
body .global-search .form-control:focus { outline: none !important; }
body .form-control.is-invalid, body .form-select.is-invalid, body .form-check-input.is-invalid,
body .was-validated .form-control:invalid, body .was-validated .form-select:invalid, body .was-validated .form-check-input:invalid {
    border-color: #dc3545;
    outline-color: #dc3545 !important;
}
body .form-control.is-valid, body .form-select.is-valid, body .form-check-input.is-valid,
body .was-validated .form-control:valid, body .was-validated .form-select:valid, body .was-validated .form-check-input:valid {
    border-color: #198754;
    outline-color: #198754 !important;
}
body .form-check-input:checked { background-color: #6842e8; border-color: #6842e8; }
body .nav-tabs .nav-link.active { color: #5632d0; border-bottom-color: #6842e8; background: white; }
body .table { --bs-table-hover-bg: #f5f3fc; --bs-table-border-color: #e5e8ef; font-size: .85rem; }
body .table thead th { background: #f8f9fc; color: #515d76; font-size: .69rem; font-weight: 600; letter-spacing: .04em; padding: .9rem 1rem; }
body .table td, body .table tbody th { padding: .9rem 1rem; }
body .modal-content { border: 1px solid #d9dcea; border-radius: 1rem; box-shadow: 0 24px 64px #211b3d30; }
body .modal-header { background: #f9f9fe; border-bottom-color: var(--app-border); }
body .product-card:hover, body .app-product-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg) !important; }
body .product-card-icon { background: #f0ebff; border-color: #ded3fc; }
body .product-card--primary { border-left-color: #6842e8 !important; }
body .dash-kpi { box-shadow: none; border: 1px solid var(--app-border); border-radius: .75rem; background: #fff; }
body .dash-kpi:hover { box-shadow: var(--app-shadow); transform: none; }
body .dash-kpi-progress > span { background: #6842e8; }
body .dash-kpi-progress, body .progress { background: #ebe7f8; }
body .progress-bar { background: #6842e8; }
body .kanban-column { background: #edf0f6; backdrop-filter: none; box-shadow: none; border: 1px solid #dde2ed; }
body .kanban-column-header { background: transparent; border-top-width: 2px; }
body .kanban-card { border-color: #dde2ed !important; border-radius: .6rem !important; }
body .kanban-card:hover { box-shadow: var(--app-shadow) !important; transform: none; }
body .kanban-cards { min-height: 7rem; }
body .kanban-card .card-body { padding: .85rem !important; }
body .kanban-stage-select { margin-top: .75rem; font-size: .72rem; padding-top: .3rem; padding-bottom: .3rem; cursor: pointer; }
body .kanban-card.is-saving { opacity: .65; }
body.auth-page .login-shell { border: 1px solid #dce0ed; background: white; box-shadow: 0 25px 65px #27234512; backdrop-filter: none; }
body.auth-page .login-hero { background: #211b3d; }
body.auth-page .login-hero h2 { letter-spacing: -.04em; font-weight: 600; }
body.auth-page .login-feature { border-radius: .6rem; backdrop-filter: none; background: #ffffff08; }
body.auth-page .login-feature i { color: #d8caff; }
body.auth-page .login-tip { background: #f0ebff; color: #573d8e; border-color: #ded2fa; }
body.auth-page .login-form-panel { background: #fff; }
body.auth-page .login-tip kbd { color: #573d8e; border-color: #d3c4f6; }
.workspace-kicker { display: block; font-size: .64rem; color: #667189; font-weight: 700; letter-spacing: .12em; margin-bottom: .5rem; }
.planning-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.planning-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #dfe3ec; border: 1px solid #dfe3ec; border-radius: .75rem; overflow: hidden; }
.calendar-weekday { padding: .8rem; background: #f8f9fc; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #55617b; }
.calendar-day { background: white; padding: .65rem; min-height: 130px; min-width: 0; }
.calendar-day-muted { background: #f8f9fc; }
.calendar-date { font-size: .75rem; margin: 0 0 .65rem; }
.calendar-today .calendar-date time { background: #6842e8; color: white; padding: .25rem .4rem; border-radius: .35rem; }
.calendar-event { display: block; padding: .4rem .5rem; background: #f0ebff; border-left: 2px solid #9173ef; border-radius: .3rem; color: #503496; font-size: .73rem; line-height: 1.4; margin-bottom: .4rem; overflow-wrap: anywhere; }
.calendar-event span { display: block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.calendar-event-late { background: #fff0ef; border-color: #e57b6f; color: #9c3428; }
.calendar-mobile-day { display: none; }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.report-summary > div { padding: 1.4rem; background: white; border: 1px solid var(--app-border); border-radius: .75rem; }
.report-summary strong { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.05em; }
.report-fraction { display: block; font-size: .9rem; font-weight: 600; }
.report-fraction span { color: #667189; font-weight: 400; }
.delivery-progress { display: block; height: 5px; width: 95px; margin-top: .45rem; border: 0; border-radius: 4px; overflow: hidden; accent-color: #6842e8; }
.delivery-progress::-webkit-progress-bar { background: #ebe7f8; }
.delivery-progress::-webkit-progress-value { background: #6842e8; }
.app-skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 2000; padding: .75rem 1rem; background: #fff; color: #211b3d; border: 2px solid #6842e8; border-radius: .4rem; }
.app-skip-link:focus { top: .5rem; }
:focus-visible { outline: 2px solid #6842e8 !important; outline-offset: 3px; }
.app-request-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; background: #6842e8; transform-origin: left; animation: request-pulse 1.5s ease-in-out infinite; pointer-events: none; }
.app-session-notice { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); z-index: 2000; padding: 1rem; background: #fff7e6; color: #5d4218; border: 1px solid #dfba72; border-radius: .7rem; box-shadow: var(--app-shadow-lg); }
@keyframes request-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes workspace-arrive { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .app-content > :first-child { animation: workspace-arrive .2s ease-out; } }
@media (max-width: 991.98px) { .calendar-day { padding: .4rem; min-height: 100px; } body .dash-hero { padding: 1.5rem; } }
@media (max-width: 767.98px) {
    body .app-content { padding: 1.2rem .9rem; }
    body .app-sidebar-inner { background: #ffffff; }
    body .app-icon-btn { min-width: 40px; min-height: 40px; }
    body .dash-hero { padding: 1.4rem; }
    .planning-calendar { grid-template-columns: 1fr; }
    .calendar-weekday, .calendar-day-muted { display: none; }
    .calendar-mobile-day { display: inline; }
    .calendar-day { min-height: 54px; padding: .75rem; }
    .calendar-date { margin-bottom: .4rem; }
    .report-summary { gap: .5rem; }
    .report-summary > div { padding: .85rem .7rem; }
    .report-summary .workspace-kicker { font-size: .56rem; letter-spacing: .04em; }
    body .toast-container { width: min(100%, 380px); }
    body .toast { max-width: 100%; }
}
@media (min-width: 768px) { html.sidebar-collapsed .app-sidebar-user form { display: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    body .card:hover, body .btn:hover { transform: none !important; }
}

/* Viewport layout. Only navigation links scroll; quick capture and account controls stay visible. */
html { scroll-padding-top: calc(var(--app-header-h) + 16px); }
body .app-shell { padding-top: var(--app-header-h); }
body .app-navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--app-header-h); z-index: 1030; }
body .app-content { padding: 1.65rem 1.85rem; min-height: calc(100vh - var(--app-header-h)); overflow-x: clip; }
body .app-sidebar { --bs-offcanvas-bg: #171923; --bs-offcanvas-color: #c3c8da; }
body .app-sidebar .offcanvas-body { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; overflow: hidden; }
body .app-sidebar-inner { position: relative; top: auto; height: 100%; min-height: 0; overflow: hidden; padding: 1rem .7rem .8rem; background: #171923; border-right: 1px solid #202333; backdrop-filter: none; gap: .75rem; }
body .app-sidebar-inner::before, body .app-sidebar-inner::after { display: none; }
body .app-sidebar-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap; gap: 3px; overscroll-behavior-y: contain; scrollbar-color: #4a5064 transparent; scroll-padding-block: .5rem; }
body .app-sidebar-nav::-webkit-scrollbar { width: 4px; }
body .app-sidebar-nav::-webkit-scrollbar-thumb { background: #4a5064; border: 0; border-radius: 2px; }
body .app-sidebar .nav-link { flex-shrink: 0; border-radius: .4rem; font-size: .81rem; padding: .45rem .65rem; gap: .6rem; color: #c3c8da; font-weight: 500; }
body .app-sidebar .nav-link .app-nav-icon { background: transparent; color: #9ca6c3; width: 1.55rem; height: 1.55rem; border-radius: .3rem; font-size: 1rem; }
body .app-sidebar .nav-link:hover { background: #242735; color: #fff; }
body .app-sidebar .nav-link:hover .app-nav-icon { color: #e1d8ff; background: transparent; }
body .app-sidebar .nav-link.active { background: #6842e8; color: #fff; font-weight: 600; }
body .app-sidebar .nav-link.active .app-nav-icon { color: #fff; background: transparent; box-shadow: none; }
body .app-sidebar-label { color: #979fb6; font-size: .6rem; font-weight: 600; letter-spacing: .11em; padding: .85rem .7rem .3rem; }
body .app-sidebar-label:first-child { padding-top: .2rem; }
body .app-sidebar-quick { justify-content: flex-start; flex-shrink: 0; padding: .65rem .85rem; background: #282537; border: 1px solid #49415f; color: #f2edff; border-radius: .4rem; font-size: .82rem; }
body .app-sidebar-quick:hover, body .app-sidebar-quick:focus { background: #363044; border-color: #766095; }
body .app-sidebar-project { flex-shrink: 0; background: #222531; border: 1px solid #35394b; border-radius: .4rem; margin: .7rem .15rem .25rem; }
body .app-sidebar-project .app-sidebar-project-kicker { color: #b5a6ee; }
body .app-sidebar-project .app-sidebar-project-name { color: #fff; font-size: .82rem; }
body .app-sidebar .app-sidebar-subnav .nav-link { font-size: .78rem; padding: .4rem .65rem; }
body .app-sidebar-user { margin-top: 0; flex-shrink: 0; min-height: 51px; padding: .75rem .25rem 0; border-top: 1px solid #34384a; gap: .5rem; }
body .app-sidebar-user .app-sidebar-user-text strong { color: #eff1f8; font-size: .8rem; }
body .app-sidebar-user .app-sidebar-user-text span { color: #979fb6; font-size: .65rem; }
body .app-sidebar-user .app-avatar { background: #373048; color: #e0d4ff; border-color: #514563; }
body .app-sidebar-user .app-icon-btn { color: #c4cbdf; background: transparent; border-color: transparent; }
body .app-sidebar-user .app-icon-btn:hover { color: #fff; background: #343847; }
body .app-sidebar-user form { margin: 0; }
body .app-sidebar .offcanvas-header { border-bottom: 1px solid #34384a; }
body .app-sidebar .offcanvas-title { color: #fff; }
body .app-sidebar .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.app-sidebar :focus-visible { outline-color: #c8b5ff !important; outline-offset: -2px; }
@media (min-width: 768px) {
    body .app-sidebar { position: fixed; top: var(--app-header-h); left: 0; bottom: 0; height: calc(100vh - var(--app-header-h)); height: calc(100dvh - var(--app-header-h)); z-index: 1020; transition: none; }
    body .app-content { margin-left: var(--app-sidebar-w); width: calc(100% - var(--app-sidebar-w)); transition: none; }
    html.sidebar-collapsed .app-content { margin-left: var(--app-sidebar-w-collapsed); width: calc(100% - var(--app-sidebar-w-collapsed)); }
    html.sidebar-collapsed .app-sidebar-divider { background: #34384a; flex-shrink: 0; }
}

/* Sharper surfaces and type hierarchy throughout the workspace. */
body .app-brand-mark { background: var(--app-accent); border-radius: .45rem; }
body .app-brand-text strong { font-weight: 800; }
body .global-search .form-control, body .global-search .input-group-text { background: #f7f8fc; }
body .app-avatar, body .app-icon-btn, body .btn, body .form-control, body .form-select { border-radius: .4rem; }
body .card, body .card.shadow-sm { border: 1px solid var(--app-border) !important; border-radius: var(--app-radius); }
body .card-header { padding: .85rem 1rem; }
body .card-body { padding: 1.1rem; }
body .card-header h2, body .card-header h3 { font-size: .9rem; }
body .form-control::placeholder { color: #707a8e; }
body .form-label { color: var(--app-text-2); font-weight: 600; }
body .nav-tabs { background: #fff; border: 1px solid var(--app-border); border-radius: .45rem; padding: .35rem; gap: .15rem; }
body .nav-tabs .nav-link { border-radius: .3rem; font-size: .81rem; }
body .nav-tabs .nav-link.active { color: var(--app-accent-deep); background: var(--app-accent-soft); box-shadow: none; }
body .modal-content { border-radius: .65rem; }
body .modal-title { font-size: 1.05rem; }
body .app-page-title { font-size: 1.65rem; letter-spacing: -.035em; }
body .app-page-subtitle { font-size: .88rem; }
body .project-hero { background: #fff; border: 1px solid var(--app-border); border-radius: .55rem; backdrop-filter: none; box-shadow: none; }
body .project-hero::before { background: var(--app-accent); width: 3px; }
body .project-hero-mark { background: var(--app-accent-soft); border-color: var(--app-accent-border); border-radius: .5rem; }
body .project-hero-thumb, body .product-card-icon { border-radius: .45rem; }
body .product-card:hover, body .app-product-card:hover { transform: none; border-color: #c9b8f7 !important; box-shadow: var(--app-shadow) !important; }
body .kanban-column, body .kanban-column-header { border-radius: .5rem; }
body .kanban-card { border-radius: .4rem !important; }
body.auth-page .login-shell { border-radius: .85rem; }
body.auth-page .login-hero { background: #1d1933; }
body.auth-page .login-feature, body.auth-page .login-tip { border-radius: .4rem; }
body.auth-page .login-form-inner .form-control, body.auth-page .login-form-inner .btn-primary { border-radius: .45rem; }

/* Compact dashboard header, with primary actions distinct from metrics. */
body .dash-hero { background: transparent; color: var(--app-text); border: 0; border-radius: 0; padding: .2rem 0 1.25rem; box-shadow: none; overflow: visible; }
body .dash-hero::before, body .dash-hero::after { display: none; }
body .dash-hero-inner { padding: 0; gap: 1.25rem; }
body .dash-hero-title { color: var(--app-text); font-size: clamp(1.65rem, 2.5vw, 2.2rem); font-weight: 700; letter-spacing: -.055em; margin: .4rem 0 .5rem; }
body .dash-hero-date { color: var(--app-accent-hover); font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
body .dash-hero-sub { color: var(--app-text-muted); font-size: .84rem; }
body .dash-hero-sub strong { color: var(--app-text); }
body .dash-hero .text-warning { color: #b45309 !important; }
body .dash-hero .btn-warning { background: var(--app-accent); color: #fff; border: 1px solid var(--app-accent); }
body .dash-hero .btn-warning:hover { background: var(--app-accent-hover); }
body .dash-hero .btn-outline-light { color: var(--app-text-2); border-color: var(--app-border-strong); background: #fff; }
body .dash-hero .btn { border-radius: .4rem; font-size: .8rem; padding: .6rem .85rem; }
body .dash-kpi { border-radius: .5rem; padding: 1.1rem; }
body .dash-kpi-icon { background: var(--kpi-bg, #f0ebff); color: var(--kpi, #6842e8); border-radius: .5rem; width: 2.65rem; height: 2.65rem; font-size: 1.15rem; }
body .dash-kpi-value { color: #151b2c; font-weight: 700; font-size: 1.85rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
body .dash-kpi-label { font-size: .8rem; font-weight: 600; margin-top: .2rem; }
body .dash-kpi-hint { color: #657087; line-height: 1.5; }
body .dash-pipeline-bar { height: 7px; }
body .dash-legend--empty { opacity: .75; }
@media (max-width: 991.98px) { body .app-content { padding: 1.4rem 1.2rem; } }
@media (max-width: 767.98px) {
    body .app-content { margin-left: 0; width: 100%; padding: 1.25rem .9rem; }
    body .app-sidebar .offcanvas-body { height: auto; }
    body .app-sidebar-inner { flex: 1; height: 100%; }
    body .dash-hero { padding: 0 0 .5rem; }
    body .dash-hero-actions { gap: .45rem; }
    body .dash-kpi { padding: .85rem; display: grid; grid-template-columns: 2rem 1fr; gap: .3rem .65rem; align-content: start; align-items: center; }
    body .dash-kpi-body { display: contents; }
    body .dash-kpi-label, body .dash-kpi-hint, body .dash-kpi-progress { grid-column: 1 / -1; overflow-wrap: normal; }
    body .dash-kpi-icon { width: 2rem; height: 2rem; font-size: 1rem; }
    body .dash-kpi-value { font-size: 1.6rem; }
    body .dash-kpi-hint { font-size: .67rem; }
    body .app-page-header .app-page-actions .btn { width: auto; }
}