/* Design tokens. Bootstrap's data-bs-theme handles most colours; these add the app-specific ones. */
:root {
    --tm-sidebar-width: 232px;
    --tm-accent: #4f46e5;
    --tm-surface: #ffffff;
    --tm-border: #e3e6ea;
    --tm-muted: #5f6b7a;

    /* Typography: native Windows 11 faces first, so no external font request is needed (the CSP blocks one). */
    --tm-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --tm-font-display: "Segoe UI Variable Display", "Segoe UI Semibold", var(--tm-font);
    --bs-body-font-family: var(--tm-font);

    /* Section colour: each area of the app sets its own below, so titles and the active nav item share one meaning. */
    --section: var(--tm-accent);
}

:root[data-bs-theme="dark"] {
    --tm-surface: #1b1f24;
    --tm-border: #2c333b;
    --tm-muted: #9aa4b2;
    --tm-accent: #818cf8;
}

html { font-size: 15px; }

body.app-body {
    background: var(--bs-tertiary-bg);
    min-height: 100vh;
    font-family: var(--tm-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.page-header h1,
.offcanvas-title {
    font-family: var(--tm-font-display);
    letter-spacing: -.01em;
}

/* Brand: a two-tone wordmark instead of plain text */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}
.brand-icon {
    background: linear-gradient(135deg, #4f46e5, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.35rem;
}
.brand-name { font-weight: 700; letter-spacing: -.02em; }
.brand-logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
.brand-logo-lg { width: 96px; height: 96px; object-fit: contain; }

/* Colour by meaning: one hue per area of the app. */
body.section-home,
body.section-dashboard       { --section: #4f46e5; } /* indigo: overview */
body.section-board           { --section: #0d9488; } /* teal: flow of work */
body.section-workitems       { --section: #2563eb; } /* blue: tasks */
body.section-backlog,
body.section-sprints         { --section: #0284c7; } /* sky: planning */
body.section-timeline        { --section: #7c3aed; } /* violet: time */
body.section-calendar        { --section: #d97706; } /* amber: dates */
body.section-search          { --section: #0891b2; } /* cyan: finding things */
body.section-projects        { --section: #059669; } /* emerald: delivery */
body.section-teams           { --section: #c026d3; } /* fuchsia: people */
body.section-workload        { --section: #ea580c; } /* orange: capacity */
body.section-reports         { --section: #65a30d; } /* lime: insight */
body.section-notifications   { --section: #ca8a04; } /* gold: alerts */
body.section-profile,
body.section-account         { --section: #4338ca; } /* deep indigo: self */
body.section-users,
body.section-departments,
body.section-organization,
body.section-admin           { --section: #475569; } /* slate: administration */

body.app-body:not([class*="section-"]) { --section: var(--tm-accent); }

html { scroll-behavior: smooth; }

/* Keep Bootstrap's primary controls on the app accent (indigo) instead of the default blue */
.btn-primary {
    --bs-btn-bg: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-disabled-bg: #4f46e5;
    --bs-btn-disabled-border-color: #4f46e5;
}
.btn-outline-primary {
    --bs-btn-color: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg: #4f46e5;
    --bs-btn-active-border-color: #4f46e5;
}
.text-primary { color: #4f46e5 !important; }
:root[data-bs-theme="dark"] .text-primary { color: #818cf8 !important; }

/* Section titles take the section colour */
#main-content h1 { color: var(--section); }
#main-content .panel > h2 {
    color: var(--section);
    display: flex;
    align-items: center;
    gap: .5rem;
}
#main-content .panel > h2::before {
    content: "";
    width: 4px;
    height: 1em;
    border-radius: 2px;
    background: var(--section);
}

.skip-link:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    background: var(--bs-body-bg);
    padding: .5rem 1rem;
    border-radius: .375rem;
}

:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

.min-w-0 { min-width: 0; }

/* Top bar */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 56px;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.btn-icon {
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    padding: .4rem .55rem;
    border-radius: .375rem;
}

.btn-icon:hover { background: var(--bs-tertiary-bg); }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tm-accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}

/* Shell and sidebar */
.app-shell { align-items: stretch; }

.app-sidebar {
    width: var(--tm-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    transition: margin-left .2s ease;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--bs-body-color);
    border-radius: .375rem;
    padding: .5rem .75rem;
}

.app-sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }

.app-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--section) 14%, transparent);
    color: var(--section);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--section);
}

.app-sidebar .nav-link i { color: var(--section); opacity: .8; }
.app-sidebar .nav-link.active i { opacity: 1; }

body.sidebar-collapsed .app-sidebar { margin-left: calc(var(--tm-sidebar-width) * -1); }

/* Below lg the sidebar is an offcanvas drawer. */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        height: 100vh;
        padding-top: 0;
    }
    body.sidebar-collapsed .app-sidebar { margin-left: calc(var(--tm-sidebar-width) * -1); }
}

.app-content { min-height: calc(100vh - 56px); }

/* Panels and tiles: flat, bordered, used sparingly */
.panel {
    background: var(--bs-body-bg);
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
    padding: 1.25rem;
}

.stat-tile {
    background: var(--bs-body-bg);
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
}

.stat-tile .label {
    color: var(--tm-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-tile .value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Auth pages: gradient backdrop with translucent geometric shapes layered behind the card */
.auth-main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #f5f3ff 0%, #e0e7ff 35%, #e0f2fe 70%, #ccfbf1 100%);
}

.auth-main h1,
.auth-main .text-primary { color: #312e81 !important; }

.auth-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.auth-content { position: relative; z-index: 1; }

.auth-content .card {
    background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shape {
    position: absolute;
    display: block;
    opacity: .6;
    animation: shape-drift 16s ease-in-out infinite alternate;
}

.shape-circle {
    width: 320px;
    height: 320px;
    top: -90px;
    left: -110px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(244, 114, 182, .55), rgba(244, 114, 182, .05) 70%);
    border: 1px solid rgba(255, 255, 255, .25);
}

.shape-circle-small {
    width: 150px;
    height: 150px;
    top: auto;
    bottom: 12%;
    right: 30%;
    background: rgba(253, 224, 71, .28);
    border: 0;
    animation-duration: 20s;
}

.shape-square {
    width: 190px;
    height: 190px;
    top: 14%;
    right: 6%;
    rotate: 18deg;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(129, 140, 248, .35), rgba(129, 140, 248, .05));
    border: 1px solid rgba(99, 102, 241, .35);
    animation-duration: 18s;
}

.shape-hexagon {
    width: 230px;
    height: 200px;
    bottom: -50px;
    left: 8%;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: linear-gradient(135deg, rgba(56, 189, 248, .5), rgba(99, 102, 241, .15));
    animation-duration: 22s;
}

.shape-pentagon {
    width: 170px;
    height: 170px;
    top: 42%;
    left: -40px;
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
    background: rgba(45, 212, 191, .35);
    animation-duration: 15s;
}

.shape-triangle {
    width: 260px;
    height: 230px;
    bottom: 6%;
    right: -40px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(251, 146, 60, .45), rgba(244, 114, 182, .12));
    animation-duration: 19s;
}

/* Second set: smaller, placed to overlap the first set and the card edges. */
.shape-square-2 {
    width: 120px;
    height: 120px;
    top: 62%;
    left: 4%;
    rotate: -12deg;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(56, 189, 248, .4), rgba(56, 189, 248, .05));
    border: 1px solid rgba(14, 165, 233, .35);
    animation-duration: 17s;
}

.shape-hexagon-2 {
    width: 150px;
    height: 130px;
    top: 6%;
    left: 22%;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: linear-gradient(135deg, rgba(251, 191, 36, .4), rgba(251, 191, 36, .08));
    animation-duration: 21s;
}

.shape-pentagon-2 {
    width: 120px;
    height: 120px;
    bottom: 4%;
    left: 34%;
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
    background: rgba(168, 85, 247, .3);
    animation-duration: 14s;
}

.shape-triangle-2 {
    width: 150px;
    height: 130px;
    top: 30%;
    right: 18%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(20, 184, 166, .4), rgba(20, 184, 166, .06));
    animation-duration: 23s;
}

/* Each shape drifts a little, so the overlaps keep shifting. */
@keyframes shape-drift {
    from { translate: 0 0; }
    to { translate: 18px -26px; }
}

@media (prefers-reduced-motion: reduce) {
    .shape { animation: none; }
}

/* Small screens */
@media (max-width: 575.98px) {
    html { font-size: 14px; }
    .panel { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
}

/* Status pills and page header helpers */
.status-pill {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    white-space: nowrap;
}

.status-active, .status-ontrack, .status-completed { background: #d1f7e1; color: #0f5132; }
.status-inactive, .status-planning, .status-notscheduled, .status-closed { background: #e7eaee; color: #41464b; }
.status-locked, .status-offtrack, .status-cancelled { background: #f8d7da; color: #842029; }
.status-invited, .status-atrisk, .status-onhold, .status-archived { background: #fff3cd; color: #664d03; }
.status-active.status-archived { background: #e7eaee; }

[data-bs-theme="dark"] .status-active, [data-bs-theme="dark"] .status-ontrack, [data-bs-theme="dark"] .status-completed { background: #14432b; color: #a3f0c0; }
[data-bs-theme="dark"] .status-locked, [data-bs-theme="dark"] .status-offtrack, [data-bs-theme="dark"] .status-cancelled { background: #4b1d21; color: #f5b5bb; }
[data-bs-theme="dark"] .status-invited, [data-bs-theme="dark"] .status-atrisk, [data-bs-theme="dark"] .status-onhold, [data-bs-theme="dark"] .status-archived { background: #4a3c10; color: #ffe69c; }

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.page-header p { margin: 0; }

.avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.progress-thin { height: 6px; }

.table-responsive.panel { padding: 0; overflow: hidden; }

.sidebar-heading {
    padding: .75rem .75rem .25rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tm-muted);
}

/* Sidebar: always a vertical column on desktop. Bootstrap's offcanvas-lg sets a horizontal flex layout at lg and up. */
.app-sidebar {
    display: block;
    overflow-x: hidden;
}

.app-sidebar > .offcanvas-body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.app-sidebar .nav {
    flex-direction: column;
    flex-wrap: nowrap;
}

.app-sidebar .nav-link {
    white-space: nowrap;
}

.app-sidebar .sidebar-heading {
    white-space: nowrap;
}

/* Kanban board: columns sit side by side and the row scrolls horizontally on narrow screens. */
.board-scroller {
    overflow-x: auto;
    padding-bottom: .75rem;
}

.board-lane + .board-lane {
    margin-top: 1.25rem;
}

.board-lane-title {
    margin-bottom: .5rem;
}

.board-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .75rem;
    min-width: max-content;
}

.board-column {
    flex: 0 0 260px;
    width: 260px;
    display: flex;
    flex-direction: column;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
    padding: .5rem;
}

.board-column.over-limit {
    border-color: #dc3545;
}

.board-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem .25rem .5rem;
    font-size: .875rem;
}

.board-cards {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 60px;
}

.board-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--tm-border);
    border-left: 4px solid var(--tm-accent);
    border-radius: .4rem;
    padding: .55rem .65rem;
    cursor: grab;
}

.board-card.blocked { border-left-color: #dc3545; }
.board-card.overdue { background: color-mix(in srgb, #dc3545 6%, var(--bs-body-bg)); }

.board-card-ghost {
    opacity: .4;
}

.board-card:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

.quick-create {
    margin-top: .5rem;
}

.avatar-sm {
    width: 22px;
    height: 22px;
    font-size: .65rem;
}