/* Small overrides on top of the Tailwind CDN build — elderly-friendly
   base sizing (larger body text/line-height) plus the SweetAlert2 input
   styling carried over from the original front-end. */

:root {
    --accent-from: #1d4ed8;
    --accent-to: #4f46e5;
}

body {
    font-family: 'Kanit', sans-serif;
    background-color: #f8fafc;
    font-size: 17px;
    line-height: 1.6;
}

/* Nav gets a subtle brand gradient instead of a flat fill — same "app-nav"
   class is added to every page's <nav> alongside its existing Tailwind
   classes so this stays in one place instead of repeating a gradient value
   across every HTML file (now driven from one shared partial, views/_nav.php). */
.app-nav {
    background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

/* revisetask.txt round 15: modern gradient + soft blurred "blob" background
   for the login screen (index.php's #login-section), replacing the plain
   flat bg-gray-100 fill. Pure CSS — no external image, so the page stays
   fully self-contained/offline-safe and adds no extra request — built from
   the same --accent-from/--accent-to brand colors already used for
   .app-nav so it reads as part of the same visual identity rather than a
   bolted-on decoration. The blobs sit behind the login card (z-index) via
   ::before/::after pseudo-elements, blurred and low-opacity so they add
   depth without ever competing with the card's own contrast/readability.
   Re-themed for dark mode below (same html.dark pattern as the rest of
   this file) using the same darker navy/indigo pairing .app-nav already
   uses there — combined with index.php's pre-paint <script> (applies the
   stored theme before first render), a returning dark-mode user always
   lands on a coherent, matching background immediately, never a flash of
   the light gradient. */
.login-bg {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 45%, #ede9fe 100%);
}
.login-bg::before,
.login-bg::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.login-bg::before {
    width: 26rem;
    height: 26rem;
    top: -8rem;
    left: -7rem;
    background: radial-gradient(circle, var(--accent-from), transparent 70%);
    opacity: 0.3;
}
.login-bg::after {
    width: 30rem;
    height: 30rem;
    bottom: -10rem;
    right: -8rem;
    background: radial-gradient(circle, var(--accent-to), transparent 70%);
    opacity: 0.28;
}
.login-bg > * {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .login-bg::before { animation: login-blob-float-a 20s ease-in-out infinite; }
    .login-bg::after { animation: login-blob-float-b 24s ease-in-out infinite; }
}
@keyframes login-blob-float-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(1.5rem, 2rem); }
}
@keyframes login-blob-float-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-1.5rem, -1.5rem); }
}

.swal-custom-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    font-family: 'Kanit', sans-serif;
}

.swal-custom-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#create-task-modal,
#task-detail-modal,
#report-modal {
    transition: opacity 0.3s ease;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* revisetask.txt round 19 item 3: unread notification row (bell dropdown +
   notifications.php's full list) — was a pale blue-gray (bg-blue-50), which
   read too close to "read"/neutral to tell apart at a glance. A dedicated
   class instead of reusing Tailwind's bg-red-50 utility directly (used
   elsewhere for the overdue Kanban column/stat tiles) so this can carry its
   own left-accent stripe and its own dark-mode intensity without touching
   those unrelated usages. Kept light (not dark red) per the explicit ask —
   just enough tint + a colored left border to be unmistakable, still legible
   text underneath. Dark-mode pair sits with the rest of this file's
   html.dark overrides below. */
.notif-unread {
    background-color: #fef2f2;
    border-left: 3px solid #f87171;
}
.notif-unread:hover {
    background-color: #fee2e2;
}

/* Kanban card hover "lift" — a small, modern touch on top of the existing
   hover:shadow-md utility already on the card. */
.task-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.task-card:hover {
    transform: translateY(-3px);
}

/* Kanban board columns (index.php) — tinted to match their header color
   and allowed to shrink/grow on mobile instead of the fixed 500px
   min-height every column carried before (md:min-h-[500px] in the markup
   keeps that fixed height on desktop only). */
.board-col {
    transition: min-height 0.25s ease;
}

.avatar-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Fallback icon shown in place of .avatar-circle when a person has no
   uploaded avatar — sized to match so assignee lists/comment threads don't
   jump around depending on who has a photo. */
.avatar-fallback {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: #cbd5e1;
    flex-shrink: 0;
}

/* revisetask.txt round 8: site branding logo, shown in the nav bar (small)
   and on the login card (large) once an ADMIN uploads one via admin.php's
   "ตั้งค่าระบบ" tab — see assets/js/api.js's SiteBrand module. Both slots are
   empty (no <img>) until then, so these rules simply have nothing to size
   until a logo actually exists. */
.nav-logo-img {
    height: 1.75rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.login-logo-img {
    height: 4rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: inline-block;
    margin: 0 auto;
}

/* Quill (assets/js/taskModal.js's report-submission rich text editor,
   req. 3.4.2) — a fixed working height so the toolbar+body don't jump
   around as content is typed, matching the modal's other form controls. */
#reportEditor .ql-editor {
    min-height: 180px;
}

/* revisetask.txt round 47 item 1: renderReport()'s submitted-report display
   also carries the "ql-editor" class now (so Quill's own list-number/bullet
   CSS actually renders — see that call site's comment) — but Quill's default
   .ql-editor styling (12px/15px padding, "cursor: text" on every child, a
   full-height flex-fill layout) is meant for an editable textarea, not a
   compact read-only card that already sits inside its own bg-gray-50/p-3
   wrapper. Neutralize just those parts here; list/format rendering itself
   comes from Quill's own unmodified CSS, nothing duplicated. */
.report-html-view.ql-editor {
    height: auto;
    padding: 0;
    cursor: default;
}
.report-html-view.ql-editor > * {
    cursor: default;
}

/* ---------------------------------------------------------------------
   Dark mode
   The app is built with hardcoded Tailwind utility classes in both HTML
   and JS template strings (board.js/taskModal.js/admin.js render most of
   the UI at runtime), so there was never a `dark:` variant on any of them.
   Retrofitting real per-element `dark:` classes everywhere would mean
   touching a very large number of call sites. Instead, this block
   re-themes the existing utility classes globally under an `html.dark`
   ancestor — toggled by assets/js/api.js's applyTheme()/toggleTheme() —
   which gets full coverage from one place and stays in sync automatically
   as new UI is added with the same familiar Tailwind classes.
   --------------------------------------------------------------------- */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .app-nav {
    background: linear-gradient(135deg, #1e293b, #312e81);
}

/* round 15: dark-mode login background — same darker navy/indigo pairing
   as .app-nav's own dark override above, so the two never feel like two
   different apps depending on which one happens to be on screen. */
html.dark .login-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #1e293b 100%);
}
html.dark .login-bg::before {
    background: radial-gradient(circle, #4f46e5, transparent 70%);
    opacity: 0.25;
}
html.dark .login-bg::after {
    background: radial-gradient(circle, #7c3aed, transparent 70%);
    opacity: 0.2;
}

html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-gray-50 { background-color: #0f172a; }
html.dark .bg-gray-100 { background-color: #263449; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .bg-gray-300 { background-color: #475569; }
html.dark .bg-gray-400 { background-color: #64748b; }
html.dark .bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.7); }

/* Kanban column + widget tints — same idea as the rest of this block:
   re-theme the utility class rather than add a dark: variant at the call
   site. Kept subtle (low-alpha over the dark page background) since the
   task-card children on top still use the regular .bg-white -> #1e293b
   override above and need to read clearly against this. Purple/amber/teal
   were added for the req. 3.2 approval banner and req. 3.5 Points widgets. */
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08); }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.08); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.08); }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.08); }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.08); }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); }
html.dark .notif-unread { background-color: rgba(248, 113, 113, 0.14); border-left-color: #f87171; }
html.dark .notif-unread:hover { background-color: rgba(248, 113, 113, 0.22); }

html.dark .text-gray-800 { color: #f1f5f9; }
html.dark .text-gray-700 { color: #e2e8f0; }
html.dark .text-gray-600 { color: #cbd5e1; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #64748b; }

html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155;
}

html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .swal-custom-input {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

html.dark thead.bg-gray-100 { background-color: #263449; }
html.dark tr.border-b { border-color: #334155; }

html.dark .swal2-popup {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
html.dark .swal2-title,
html.dark .swal2-html-container,
html.dark .swal2-close {
    color: #e2e8f0 !important;
}

/* Quill dark mode. */
html.dark .ql-toolbar.ql-snow,
html.dark .ql-container.ql-snow {
    border-color: #475569;
}
html.dark .ql-toolbar.ql-snow {
    background-color: #263449;
}
html.dark .ql-container.ql-snow {
    background-color: #1e293b;
}
html.dark .ql-editor.ql-blank::before {
    color: #64748b;
}
html.dark .ql-snow .ql-stroke { stroke: #cbd5e1; }
html.dark .ql-snow .ql-fill { fill: #cbd5e1; }
html.dark .ql-snow .ql-picker { color: #cbd5e1; }

/* ---------------------------------------------------------------------
   FullCalendar (calendar.php) — responsive toolbar
   FullCalendar's default toolbar is a single flex row that does not wrap,
   so a title + prev/next/today + 4 view buttons overflows badly on a phone
   screen. The JS side (calendar.js) already moves the view buttons into a
   separate footerToolbar below ~640px; this just lets everything wrap and
   shrinks the controls a bit so neither row ever clips off-screen.
   --------------------------------------------------------------------- */
.fc .fc-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}
.fc .fc-toolbar-title {
    font-size: 1.1rem;
}
@media (max-width: 640px) {
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }
    .fc .fc-button {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}
html.dark .fc {
    --fc-border-color: #334155;
    --fc-page-bg-color: #1e293b;
    --fc-neutral-bg-color: #263449;
    --fc-list-event-hover-bg-color: #263449;
    --fc-today-bg-color: rgba(79, 70, 229, 0.15);
}
html.dark .fc-toolbar-title,
html.dark .fc-col-header-cell-cushion,
html.dark .fc-daygrid-day-number {
    color: #e2e8f0;
}

/* revisetask.txt round 49 item 2: a closed task/appointment/document-flow
   round now stays on the calendar (CalendarPage.buildRangeEvent()'s
   `completed` flag) instead of disappearing — dimmed + struck through so
   it's still part of the day's full picture but reads as already finished
   at a glance, distinct from anything still open. Pure opacity/text-
   decoration, theme-neutral — no separate html.dark override needed. */
.fc-event.cal-event-completed {
    opacity: 0.55;
    text-decoration: line-through;
}

/* Chat follow-up: a document-flow bar with no active round timer
   (CalendarPage.buildRangeEvent()'s `openEnded` flag) has no real deadline
   behind it — it's just "created_at through today", growing a day at a time
   for as long as the task sits there (see documentFlowRange()'s no-timer
   branch). Dashed border marks it as visually distinct from every other
   bar's solid border (which always backs a real start/end timestamp), so
   it never gets mistaken for an actual deadline at a glance. Pure
   border-style, theme-neutral — no separate html.dark override needed. */
.fc-event.cal-event-openended {
    border-style: dashed;
    border-width: 2px;
}