/* ---------- Reset & base ---------- */
:root {
    /* Content column width. The default is a narrow, centered card — right
       for a single form (login/register/create/edit) or a short message
       (404) — capped at 480px but never wider than the viewport allows.
       .container-wide opts into the viewport-relative width instead; only
       the dashboard (taskbar + file catalogue) sets it, since that's the
       one page that actually needs the room. */
    --content-width: min(480px, 92vw);
    --content-width-wide: 90vw;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100vh;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2933;
    background-color: #f5f6f8;
}

a {
    color: #2563eb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Layout ---------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1rem, 4vw, 3rem);
    background-color: #1f2933;
}

.site-header .brand {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

/* The <main> element itself (see partials/header.php) — --content-width
   wide (narrow by default, .container-wide widens it), horizontally
   centered. flex: 1 lets it fill whatever vertical space the header
   doesn't use, but justify-content: flex-start keeps content anchored to
   the top regardless — it should never shift position just because the
   viewport got taller. */
.container {
    width: var(--content-width);
    margin: 0 auto;
    padding: clamp(1.5rem, 5vh, 3rem) 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1rem, 3vh, 1.5rem);
}

.container.container-wide {
    width: var(--content-width-wide);
}

/* Flex items don't margin-collapse the way block boxes do — zero out each
   direct child's own margin so .container's `gap` is the only spacing at
   play, instead of gap plus every element's browser-default margin. */
.container > * {
    margin: 0;
}

/* ---------- Buttons & forms ---------- */
button,
input[type="submit"] {
    cursor: pointer;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    background-color: #2563eb;
    color: #fff;
}

.create-task-btn {
    font-size: 7rem;
    font-weight: 600;
    height: 70%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4b5563;
    color: rgba(255, 255, 255, 0.75);
}

.create-task-btn:hover {
    background-color: #374151;
}

button:hover {
    background-color: #1d4ed8;
}

button:disabled {
    cursor: not-allowed;
    background-color: #9aa5b1;
    color: #e4e7eb;
}

button:disabled:hover {
    background-color: #9aa5b1;
}

.logout-form button {
    background-color: transparent;
    border: 1px solid #fff;
}

.logout-form button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

form:not(.logout-form):not(.delete-form) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

label {
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

input,
textarea,
select {
    padding: 0.5rem;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.errors {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.errors ul,
.errors p {
    margin: 0;
}

/* The .errors counterpart for a confirmation rather than a failure — a
   flash carried across a redirect, or the "check your inbox" message. */
.notice {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.notice p {
    margin: 0;
}

/* ---------- File uploads ---------- */
.file-upload-hint {
    margin: 0;
    font-size: 0.85rem;
    color: #52606d;
}

.file-upload-existing {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.file-upload-existing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Overrides the global `label` rule (flex column, bold) — same treatment
   as .file-picker-item, just right-aligned and in a warning color since
   this one is a destructive action. */
.file-upload-remove {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    font-weight: normal;
    font-size: 0.85rem;
    color: #b91c1c;
    cursor: pointer;
    white-space: nowrap;
}

/* ---------- Existing-file picker ---------- */
.file-picker {
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.file-picker legend {
    font-weight: 500;
    padding: 0 0.25rem;
}

.file-picker-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
}

/* Overrides the global `label` rule (flex column, bold) — a picker row
   reads left-to-right instead: checkbox, then thumbnail, then filename. */
.file-picker-item {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.file-picker-thumb {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
}

.file-picker-icon {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f5f6f8;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #52606d;
}

.file-picker-name {
    font-size: 0.9rem;
    word-break: break-word;
}

/* ---------- Taskbar ---------- */
.taskbar {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem 0 1rem;
    margin-bottom: 1rem;
}

.taskbar-item {
    position: relative;
    flex: 0 0 clamp(180px, 22vw, 260px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    aspect-ratio: 4 / 3;
}

.create-task-card {
    align-items: center;
    justify-content: center;
}

.create-task-card:hover {
    text-decoration: none;
}

/* The plus is drawn as two bars rather than typeset as a "+" character.
   A text glyph is positioned by the font's baseline, and the "+" ink sits
   off-center within its line box, so centering the text still leaves the
   visible plus slightly low. Two bars pinned to the circle's midpoint are
   centered geometrically, independent of any font metrics. Their size is
   a percentage of the circle, which is square, so the horizontal and
   vertical bars come out the same thickness at every card width. */
.flex-circle {
    position: relative;
    width: 45%;
    aspect-ratio: 1 / 1;
    background-color: #949597;
    border-radius: 50%;
}

.flex-circle::before,
.flex-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 2px;
}

.flex-circle::before {
    width: 38%;
    height: 8%;
}

.flex-circle::after {
    width: 8%;
    height: 38%;
}

/* Done tasks: a translucent grey film over the whole card — title, status
   badge, due date, and the (disabled) Edit button all sit underneath it at
   the default stacking level, so their original colors still show through,
   just muted. The delete form is lifted above the film with z-index so it
   stays fully legible and clickable, untouched by the grey-out. */
.taskbar-item.is-done::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(130, 146, 168, 0.547);
    border-radius: 8px;
    pointer-events: none;
}

.taskbar-item .delete-form {
    position: relative;
    z-index: 1;
}

.task-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.task-due-date {
    font-size: 0.8rem;
    color: #52606d;
}

.task-actions {
    display: flex;
    gap: 0.5rem;
}

.task-actions form {
    display: inline;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* ---------- My Files grid ---------- */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}

.file-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.file-grid-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.file-grid-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.file-grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background-color: #f5f6f8;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    font-weight: 600;
    color: #52606d;
}

.file-grid-name {
    font-size: 0.85rem;
    word-break: break-word;
}

/* ---------- Task details ---------- */
.task-details {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.task-details-main {
    flex: 0 0 60%;
    min-width: 0; /* lets long descriptions wrap instead of stretching the column */
}

.task-details-files {
    flex: 0 0 40%;
    min-width: 0;
}

.task-details-description {
    line-height: 1.5;
}

.task-details-description-empty {
    color: #52606d;
    font-style: italic;
}

.task-details-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-details-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
}

.task-details-file:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Size comes from --file-preview-size, set inline per-list by task-details.php
   (it scales with how many attachments there are — see the PHP there); 56px
   is only a fallback for markup that doesn't set the variable. */
.task-details-file-thumb {
    flex: 0 0 var(--file-preview-size, 56px);
    width: var(--file-preview-size, 56px);
    height: var(--file-preview-size, 56px);
    object-fit: cover;
    border-radius: 4px;
}

.task-details-file-icon {
    flex: 0 0 var(--file-preview-size, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--file-preview-size, 56px);
    height: var(--file-preview-size, 56px);
    background-color: #f5f6f8;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    font-weight: 600;
    font-size: calc(var(--file-preview-size, 56px) * 0.2);
    color: #52606d;
}

.task-details-file-name {
    font-size: 0.9rem;
    word-break: break-word;
}

/* Below this, a 60/40 split leaves too little room for the file list —
   stack the two columns instead. */
@media (max-width: 700px) {
    .task-details {
        flex-direction: column;
    }

    .task-details-main,
    .task-details-files {
        flex: 1 1 auto;
        width: 100%;
    }
}

.status-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-in_progress {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-done {
    background-color: #dcfce7;
    color: #166534;
}