html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Brand palette sampled directly from the GanttSync "Nocturne" logo assets
   (wwwroot/img/logo-*.png): #9184D9 primary purple, #B5ABFC light lavender
   accent, #5D5294 deep purple, #161826/#232532 navy. The raw brand purple is
   too light for text at either polarity -- as link text on the app's white
   surfaces it lands at ~3.2:1, and as a button background under white label
   text it lands at the same ~3.2:1. Both fall short of the 4.5:1 needed for
   body-sized text, so the darkened #6a5cc4 variant is used for both: 5.3:1 as
   link text on white, 5.3:1 as a fill under white text. The raw #9184d9 is
   kept only for non-text accents (focus rings, checked controls). */
a, .btn-link {
    color: #6a5cc4;
}

/* Bootstrap 5.3 drives every button state off these CSS variables, so rebrand by
   redefining them rather than by overriding background-color per state. Setting
   the properties directly does not survive: Bootstrap's own state selectors
   (e.g. `.btn:first-child:active`, specificity 0,3,0) outrank a plain
   `.btn-primary:active` (0,2,0), so a pressed button would snap back to
   Bootstrap blue. Overriding the variables wins regardless of selector weight. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6a5cc4;
    --bs-btn-border-color: #6a5cc4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5d5294;
    --bs-btn-hover-border-color: #5d5294;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5d5294;
    --bs-btn-active-border-color: #5d5294;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6a5cc4;
    --bs-btn-disabled-border-color: #6a5cc4;
    --bs-btn-focus-shadow-rgb: 145, 132, 217;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #b5abfc;
}

.form-check-input:checked {
    background-color: #9184d9;
    border-color: #9184d9;
}

/* Bootstrap 5.3 defaults table text to --bs-emphasis-color (pure #000) rather
   than the body colour, which left table cells slightly blacker than every
   heading and paragraph around them. Pin it back to the body colour so text
   reads the same everywhere. All four are needed: on a .table-striped row the
   striped/hover/active variants feed --bs-table-color-type, which takes
   precedence over --bs-table-color on its own. */
.table {
    --bs-table-color: #212529;
    --bs-table-striped-color: #212529;
    --bs-table-hover-color: #212529;
    --bs-table-active-color: #212529;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* --- GanttSync custom styles --- */
.gantt-chart-container {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

/* Frappe Gantt's readonly option blocks the actual date change but still renders
   the resize handles and a grab cursor, which makes a read-only chart (History,
   My Tasks, Dashboard) look draggable when it isn't. gantt-interop.js adds this
   class to the container whenever it renders with editable=false. */
.gantt-chart-container.gantt-readonly .bar-wrapper,
.gantt-chart-container.gantt-readonly .bar-wrapper .bar {
    cursor: default !important;
}
.gantt-chart-container.gantt-readonly .handle-group {
    display: none !important;
}

.gantt .bar-conflict .bar {
    fill: #dc3545 !important;
}
.gantt .bar-conflict .bar-progress {
    fill: #a71d2a !important;
}

.gantt .bar-pending .bar {
    fill: #fd7e14 !important;
}
.gantt .bar-pending .bar-progress {
    fill: #c25e0c !important;
}

/* Per-project palette for consolidated (multi-project) Gantt views -- see
   GanttProjectColors.Count in C#, which must match how many are defined here.
   Red is deliberately excluded from this palette; it's reserved for .bar-conflict.
   Frappe Gantt draws each bar's label in white, so every one of these was checked
   against white text (WCAG contrast >= 4.5:1) -- projects 1, 2, 3, 4, and 7 were
   originally too light/washed-out for the label to read cleanly and were darkened. */
.gantt .bar-project-0 .bar { fill: #4e79a7 !important; }
.gantt .bar-project-0 .bar-progress { fill: #35576f !important; }

.gantt .bar-project-1 .bar { fill: #368034 !important; }
.gantt .bar-project-1 .bar-progress { fill: #26591f !important; }

.gantt .bar-project-2 .bar { fill: #7d52a3 !important; }
.gantt .bar-project-2 .bar-progress { fill: #563970 !important; }

.gantt .bar-project-3 .bar { fill: #0b7387 !important; }
.gantt .bar-project-3 .bar-progress { fill: #084f5d !important; }

.gantt .bar-project-4 .bar { fill: #8a6d00 !important; }
.gantt .bar-project-4 .bar-progress { fill: #5f4b00 !important; }

.gantt .bar-project-5 .bar { fill: #6f42c1 !important; }
.gantt .bar-project-5 .bar-progress { fill: #59339d !important; }

.gantt .bar-project-6 .bar { fill: #8c564b !important; }
.gantt .bar-project-6 .bar-progress { fill: #6b3f37 !important; }

.gantt .bar-project-7 .bar { fill: #456378 !important; }
.gantt .bar-project-7 .bar-progress { fill: #304453 !important; }

/* Month-calendar view for a Resource's own assigned tasks (see Calendar.razor).
   Same per-project hex palette as .bar-project-N above, but as plain background
   colors -- these chips render as ordinary divs, not inside the Gantt SVG. */
.calendar-table {
    table-layout: fixed;
    /* Below this width, columns get too narrow to hold a day number and a task
       chip -- scroll the table horizontally (see its .table-responsive wrapper)
       instead of squeezing 7 columns into whatever width the screen has. */
    min-width: 630px;
}
.calendar-cell {
    height: 110px;
    vertical-align: top;
    padding: 0.25rem;
    overflow-y: auto;
}
/* !important needed on all of these: Bootstrap's ".table > :not(caption) > * > *"
   rule sets background-color and (since 5.3) color directly on td/th with higher
   specificity than a plain class selector, so it silently wins over these
   otherwise. The colour needed it added on the 5.1 -> 5.3 upgrade: 5.1's version
   of that rule set only the background, so out-of-month days quietly lost their
   muted text and rendered the same as in-month ones. */
.calendar-outside-month {
    background-color: #f8f9fa !important;
    /* #adb5bd only hit ~2:1 against this background -- barely legible. */
    color: #5f6670 !important;
}
.calendar-today {
    background-color: #eaf4ff !important;
}
.calendar-date {
    font-weight: 600;
    font-size: 0.85rem;
}
.calendar-task {
    color: #fff;
    font-size: 0.72rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.2rem;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-task-0 { background-color: #4e79a7; }
.calendar-task-1 { background-color: #368034; }
.calendar-task-2 { background-color: #7d52a3; }
.calendar-task-3 { background-color: #0b7387; }
.calendar-task-4 { background-color: #8a6d00; }
.calendar-task-5 { background-color: #6f42c1; }
.calendar-task-6 { background-color: #8c564b; }
.calendar-task-7 { background-color: #456378; }

.conflict-card {
    border-left: 4px solid #dc3545;
}

/* Applied only once the conflict list is long enough to push the projects table
   off screen -- roughly six cards' worth. Short lists stay unboxed so the common
   case does not gain a scrollbar or a frame it does not need. */
.conflict-scroll {
    /* ~6 cards tall, matching the threshold that turns this on, so the box always
       shows a full set before it starts scrolling. */
    max-height: 28rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
}

/* The project chips inside a conflict are links; keep them looking like the
   badges they replaced rather than picking up default link styling. */
.conflict-project-link {
    text-decoration: none;
}

.conflict-project-link:hover .badge,
.conflict-project-link:focus .badge {
    background-color: #495057 !important;
}

.summary-card {
    border-radius: 0.5rem;
}