/*
 * Focus Areas — scoped styles.
 *
 * Registered through FilamentAsset (see FocusServiceProvider) and published to
 * public/css/focus-areas.css by `php artisan filament:assets`, which runs on
 * every `composer install` via the filament:upgrade script.
 *
 * Deliberately plain CSS rather than Tailwind utilities: the admin panel loads
 * Filament's own precompiled stylesheet and no project Tailwind build, so only
 * the utilities Filament happens to use internally are available (grid-cols-3,
 * for instance, is not). Every class here is prefixed `fa-` and affects nothing
 * outside these pages.
 *
 * Colours come from Filament's CSS custom properties so the amber primary and
 * dark mode are inherited rather than duplicated.
 */

/* ---------------------------------------------------------------- toolbar */

.fa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.fa-toolbar__field {
    min-width: 10rem;
}

.fa-toolbar__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.dark .fa-toolbar__label {
    color: rgb(156 163 175);
}

.fa-toolbar__hint {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .fa-toolbar__hint {
    color: rgb(156 163 175);
}

/* ------------------------------------------------------------------- grid */

.fa-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .fa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .fa-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------- card */

.fa-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.fa-card--draggable {
    cursor: grab;
}

.fa-card--dragging {
    opacity: 0.4;
}

.fa-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.fa-card__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(17 24 39);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dark .fa-card__title {
    color: rgb(255 255 255);
}

.fa-card__title:hover {
    color: rgb(var(--primary-600));
}

.dark .fa-card__title:hover {
    color: rgb(var(--primary-400));
}

.fa-card__meta {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .fa-card__meta {
    color: rgb(156 163 175);
}

.fa-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(243 244 246);
}

.dark .fa-card__foot {
    border-top-color: rgb(55 65 81);
}

.fa-card__foot-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

/* --------------------------------------------------------------- progress */

.fa-progress__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .fa-progress__meta {
    color: rgb(156 163 175);
}

.fa-progress__percent {
    font-weight: 600;
    color: rgb(55 65 81);
}

.dark .fa-progress__percent {
    color: rgb(209 213 219);
}

.fa-progress__track {
    height: 0.375rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
}

.dark .fa-progress__track {
    background-color: rgb(55 65 81);
}

.fa-progress__bar {
    height: 100%;
    border-radius: 9999px;
    background-color: rgb(var(--primary-500));
    transition: width 200ms ease-out;
}

.fa-progress__bar--done {
    background-color: rgb(34 197 94);
}

/* ----------------------------------------------------------------- badges */

.fa-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* ------------------------------------------------------------ empty state */

.fa-empty {
    padding: 2rem 1rem;
    text-align: center;
}

.fa-empty__title {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .fa-empty__title {
    color: rgb(255 255 255);
}

.fa-empty__body {
    margin: 0.25rem auto 0;
    max-width: 30rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

.dark .fa-empty__body {
    color: rgb(156 163 175);
}

.fa-empty__actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* ------------------------------------------------------------------ stats */

.fa-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.fa-stat__value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(17 24 39);
}

.dark .fa-stat__value {
    color: rgb(255 255 255);
}

.fa-stat__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

.dark .fa-stat__label {
    color: rgb(156 163 175);
}

.fa-stat--danger .fa-stat__value {
    color: rgb(220 38 38);
}

.dark .fa-stat--danger .fa-stat__value {
    color: rgb(248 113 113);
}

/* ------------------------------------------------------------------ tasks */

.fa-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fa-task {
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.fa-task--top {
    border-color: rgb(243 244 246);
    background-color: rgb(255 255 255);
}

.dark .fa-task--top {
    border-color: rgb(55 65 81);
    background-color: rgb(17 24 39);
}

.fa-task--dragging {
    opacity: 0.4;
}

.fa-task--drop-target {
    border-color: rgb(var(--primary-500));
}

.fa-task__row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
}

.fa-task__handle {
    flex: none;
    padding-top: 0.25rem;
    cursor: grab;
    color: rgb(209 213 219);
}

.dark .fa-task__handle {
    color: rgb(75 85 99);
}

/* Checkbox drawn as a button so its state always comes from the server and
   can never visually desync from `status`. */
.fa-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    border: 1.5px solid rgb(156 163 175);
    border-radius: 0.3125rem;
    background: transparent;
    color: transparent;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}

.fa-check:hover:not(:disabled) {
    border-color: rgb(var(--primary-500));
}

.fa-check:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.fa-check--checked {
    border-color: rgb(34 197 94);
    background-color: rgb(34 197 94);
    color: rgb(255 255 255);
}

.fa-check svg {
    width: 0.75rem;
    height: 0.75rem;
}

.fa-task__body {
    flex: 1 1 auto;
    min-width: 0;
}

.fa-task__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(17 24 39);
    overflow-wrap: anywhere;
}

.dark .fa-task__title {
    color: rgb(243 244 246);
}

.fa-task--complete .fa-task__title {
    color: rgb(107 114 128);
    text-decoration: line-through;
}

.dark .fa-task--complete .fa-task__title {
    color: rgb(107 114 128);
}

.fa-task__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .fa-task__meta {
    color: rgb(156 163 175);
}

.fa-task__meta--overdue {
    color: rgb(220 38 38);
    font-weight: 500;
}

.dark .fa-task__meta--overdue {
    color: rgb(248 113 113);
}

.fa-task__controls {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fa-task__status-select {
    font-size: 0.75rem;
    padding: 0.125rem 1.5rem 0.125rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(209 213 219);
    background-color: rgb(255 255 255);
    color: rgb(55 65 81);
}

.dark .fa-task__status-select {
    border-color: rgb(75 85 99);
    background-color: rgb(31 41 55);
    color: rgb(209 213 219);
}

.fa-star {
    display: inline-flex;
    padding: 0.125rem;
    border: 0;
    background: transparent;
    color: rgb(209 213 219);
    cursor: pointer;
}

.dark .fa-star {
    color: rgb(75 85 99);
}

.fa-star--on {
    color: rgb(245 158 11);
}

.fa-star svg {
    width: 1rem;
    height: 1rem;
}

/* --------------------------------------------------------------- subtasks */

.fa-subtasks {
    margin-inline-start: 1.75rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid rgb(229 231 235);
}

.dark .fa-subtasks {
    border-inline-start-color: rgb(55 65 81);
}

.fa-subtasks__add {
    padding: 0.25rem 0 0.5rem;
}

/* ------------------------------------------------------------- rich notes */

.fa-notes {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(75 85 99);
}

.dark .fa-notes {
    color: rgb(209 213 219);
}

.fa-notes p {
    margin: 0 0 0.5rem;
}

.fa-notes p:last-child {
    margin-bottom: 0;
}

.fa-notes h2,
.fa-notes h3 {
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.fa-notes ul,
.fa-notes ol {
    margin: 0 0 0.5rem;
    padding-inline-start: 1.25rem;
}

.fa-notes ul {
    list-style: disc;
}

.fa-notes ol {
    list-style: decimal;
}

.fa-notes li {
    margin-bottom: 0.125rem;
}

.fa-notes a {
    color: rgb(var(--primary-600));
    text-decoration: underline;
}

.dark .fa-notes a {
    color: rgb(var(--primary-400));
}

.fa-notes blockquote {
    margin: 0 0 0.5rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px solid rgb(229 231 235);
    color: rgb(107 114 128);
}

.fa-notes code {
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    background-color: rgb(243 244 246);
    font-size: 0.75rem;
}

.dark .fa-notes code {
    background-color: rgb(55 65 81);
}

.fa-notes-toggle {
    margin-top: 0.375rem;
}

.fa-notes-toggle > summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: rgb(107 114 128);
    list-style: none;
}

.fa-notes-toggle > summary::-webkit-details-marker {
    display: none;
}

.fa-notes-toggle > summary:hover {
    color: rgb(var(--primary-600));
}

.fa-notes-toggle[open] > summary {
    margin-bottom: 0.375rem;
}

.fa-notes-toggle > div {
    padding-inline-start: 0.125rem;
}

/* ---------------------------------------------------------------- prompts */

.fa-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(var(--primary-300));
    border-radius: 0.625rem;
    background-color: rgb(var(--primary-50));
}

.dark .fa-prompt {
    border-color: rgb(var(--primary-500) / 0.4);
    background-color: rgb(var(--primary-500) / 0.1);
}

.fa-prompt__text {
    flex: 1 1 16rem;
    font-size: 0.875rem;
    color: rgb(55 65 81);
}

.dark .fa-prompt__text {
    color: rgb(229 231 235);
}

.fa-prompt__actions {
    display: flex;
    gap: 0.5rem;
}

/* ------------------------------------------------------------------ blurb */

.fa-blurb {
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

.dark .fa-blurb {
    color: rgb(156 163 175);
}

.fa-note-empty {
    font-size: 0.875rem;
    font-style: italic;
    color: rgb(156 163 175);
}

/* ----------------------------------------------------------- send history */

.fa-runs__heading {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .fa-runs__heading {
    color: rgb(243 244 246);
}

.fa-runs__empty {
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

.dark .fa-runs__empty {
    color: rgb(156 163 175);
}

.fa-runs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fa-runs th {
    padding: 0.5rem 0.75rem;
    text-align: start;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(107 114 128);
    border-bottom: 1px solid rgb(229 231 235);
}

.dark .fa-runs th {
    color: rgb(156 163 175);
    border-bottom-color: rgb(55 65 81);
}

.fa-runs td {
    padding: 0.625rem 0.75rem;
    vertical-align: top;
    color: rgb(31 41 55);
    border-bottom: 1px solid rgb(243 244 246);
}

.dark .fa-runs td {
    color: rgb(229 231 235);
    border-bottom-color: rgb(55 65 81);
}

/* The summary line belongs to the row above it, so the border between them is
   removed and only the pair is separated. */
.fa-runs tr:has(+ .fa-runs__detail-row) td {
    border-bottom: 0;
}

.fa-runs__detail-row td {
    padding-top: 0;
    font-size: 0.75rem;
}

.fa-runs__status {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
}

.fa-runs__status--success {
    background-color: rgb(220 252 231);
    color: rgb(21 128 61);
}

.fa-runs__status--warning {
    background-color: rgb(254 249 195);
    color: rgb(161 98 7);
}

.fa-runs__status--danger {
    background-color: rgb(254 226 226);
    color: rgb(185 28 28);
}

.fa-runs__error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(185 28 28);
}

.fa-runs__muted {
    color: rgb(107 114 128);
}

.dark .fa-runs__muted {
    color: rgb(156 163 175);
}

/* ------------------------------------------------------- compose an update */

/* Which week is being composed. A segmented control rather than a dropdown so
   both ranges are readable without opening anything — the dates are the point,
   not the labels. */
.fa-compose__periods {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
    padding: 0.25rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.625rem;
    background-color: rgb(249 250 251);
}

.dark .fa-compose__periods {
    border-color: rgb(55 65 81);
    background-color: rgb(31 41 55);
}

.fa-compose__period {
    padding: 0.375rem 0.75rem;
    border-radius: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(75 85 99);
    cursor: pointer;
}

.fa-compose__period:hover {
    color: rgb(17 24 39);
}

.dark .fa-compose__period {
    color: rgb(156 163 175);
}

.dark .fa-compose__period:hover {
    color: rgb(243 244 246);
}

.fa-compose__period--on,
.fa-compose__period--on:hover {
    background-color: rgb(255 255 255);
    color: rgb(17 24 39);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.08);
}

.dark .fa-compose__period--on,
.dark .fa-compose__period--on:hover {
    background-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

.fa-compose__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fa-compose__count {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(17 24 39);
}

.dark .fa-compose__count {
    color: rgb(243 244 246);
}

.fa-compose__count-label,
.fa-compose__muted {
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

.dark .fa-compose__count-label,
.dark .fa-compose__muted {
    color: rgb(156 163 175);
}

.fa-compose__muted code {
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    background-color: rgb(243 244 246);
    font-size: 0.75rem;
}

.dark .fa-compose__muted code {
    background-color: rgb(55 65 81);
}

.fa-compose__pending {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: rgb(254 249 195);
    color: rgb(161 98 7);
    font-size: 0.75rem;
    font-weight: 600;
}

.fa-compose {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fa-compose__area {
    padding: 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background-color: rgb(255 255 255);
}

.dark .fa-compose__area {
    border-color: rgb(55 65 81);
    background-color: rgb(31 41 55);
}

.fa-compose__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.fa-compose__title {
    font-weight: 600;
    color: rgb(17 24 39);
    text-decoration: none;
}

.fa-compose__title:hover {
    color: var(--primary-600, rgb(217 119 6));
}

.dark .fa-compose__title {
    color: rgb(243 244 246);
}

.fa-compose__summary {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .fa-compose__summary {
    color: rgb(156 163 175);
}

.fa-compose__state {
    flex-shrink: 0;
}

/* An unapproved draft is visually provisional on purpose — it must not read as
   something already agreed and on its way to the CEO. */
.fa-compose__draft {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-left: 3px solid rgb(234 179 8);
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: rgb(254 252 232);
}

.dark .fa-compose__draft {
    background-color: rgba(120 53 15 / 0.2);
}

.fa-compose__draft-flag {
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(161 98 7);
}

.dark .fa-compose__draft-flag {
    color: rgb(252 211 77);
}

.fa-compose__none {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-style: italic;
    color: rgb(107 114 128);
}

.dark .fa-compose__none {
    color: rgb(156 163 175);
}

.fa-compose__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.fa-ai-flag {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgb(254 252 232);
    color: rgb(161 98 7);
    font-size: 0.8125rem;
}

.dark .fa-ai-flag {
    background-color: rgba(120 53 15 / 0.2);
    color: rgb(252 211 77);
}