/* 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));
}

.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;
}

/* 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;
}

/* 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;
}

/* ---------------------------------------------------------------------
   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);
}

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 .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;
}