/*
 * Custom styles for the project manager application. This stylesheet
 * defines a modern, bright look and feel without depending on external
 * frameworks. It leverages CSS variables for easy theming and uses
 * flexbox to create responsive layouts. Feel free to tweak the
 * variables or add new classes to customise the UI.
 */

/* Colour palette */
:root {
    --primary: #4f46e5;        /* Indigo */
    --primary-hover: #4338ca;
    --secondary: #10b981;      /* Emerald */
    --secondary-hover: #059669;
    --background: #f9fafb;     /* Gray-50 */
    --surface: #ffffff;        /* White */
    --border: #e5e7eb;         /* Gray-200 */
    --text: #1f2937;           /* Gray-800 */
    --muted: #6b7280;          /* Gray-500 */
    --danger: #ef4444;         /* Red-500 */

    /* Status colours (pastel tones). These colours should match the
       design guidelines: todo – grey, in progress – blue, bug/review – pink,
       done – green. Overdue and due soon are deeper pastel shades. */
    --status-todo: #f3f4f6;        /* grey pastel for To Do */
    --status-in-progress: #dbeafe; /* blue pastel for In Progress */
    --status-bug-review: #fdf2f8;  /* pink pastel for Bug/Review */
    --status-done: #ecfdf5;        /* green pastel for Done */
    /* Overdue and due soon colours are slightly deeper pastel tones */
    --status-overdue: #fee2e2;     /* soft red for overdue */
    --status-due-soon: #fef9c3;    /* soft yellow for due soon */
}

/* Global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--text);
    line-height: 1.6;
}

/*
 * Responsive layout adjustments
 *
 * The application was originally designed for desktop widths.  These
 * media queries hide the sidebar and reflow key UI components on
 * tablets and mobile devices.  At widths below 991px the sidebar
 * collapses to give the main content full width.  The top navigation
 * also stacks its items to improve tapability on touch screens.
 * Below 576px summary cards stack vertically for better spacing.
 */
@media (max-width: 991px) {
    /* On narrow screens the sidebar becomes an off‑canvas panel.  It is
       hidden by default via transform.  When the .show class is
       applied (toggled by the menu button in app.js), the sidebar
       slides in from the left.  The !important flags override any
       inline styles or other rules. */
    .sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        overflow-y: auto;
        background-color: var(--surface);
        border-right: 1px solid var(--border);
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
        /* Hide the sidebar off‑canvas by moving it fully off to the left.  Use
           translateX(-100%) so it adjusts automatically if the width changes. */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1050;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    /* When the sidebar is open, prevent body scrolling */
    body.offcanvas-open {
        overflow: hidden;
    }
    /* The main content no longer needs left padding on small screens */
    .main-container {
        padding-left: 0 !important;
    }
    /* Stack nav items vertically on small screens */
    .nav-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-right {
        margin-top: 0.5rem;
    }
}

@media (max-width: 576px) {
    /* Stack summary cards vertically on very narrow screens */
    .summary-cards {
        flex-direction: column;
    }
    .summary-card {
        flex: none;
        width: 100%;
    }
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    color: var(--primary-hover);
}

/* Navbar */
.navbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}
.brand {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary);
}
.nav-right a {
    margin-left: 1.25rem;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 0.2s;
}
.nav-right a:hover {
    color: var(--primary-hover);
}

/* Active nav item underline: parent can add class .active to highlight */
.nav-right a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    border-radius: 1px;
}

/* Main container */
.main-container {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* Cards */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Forms */
form .form-group {
    margin-bottom: 1rem;
}
form label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.875rem;
}
form input[type="text"],
form input[type="date"],
form input[type="password"],
form select,
form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 1rem;
}
form button {
    background-color: var(--primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
}
form button:hover {
    background-color: var(--primary-hover);
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: var(--surface);
}
table thead {
    background-color: var(--surface);
}
table th,
table td {
    /* Increase cell padding for improved readability on dense tables */
    padding: 0.7rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
}
table th {
    color: var(--muted);
    font-weight: 600;
    background-color: var(--background);
}
table tbody tr:nth-child(even) {
    background-color: var(--background);
}
table tbody tr:hover {
    background-color: var(--surface);
}

/* Table wrapper: adds padding and border around tables to separate
   them from surrounding content.  This wrapper should surround
   <table> elements on pages like the task list, logs, and notes.  It
   matches the background colour of the table and applies a border
   radius and border similar to cards.  Horizontal overflow is
   automatically handled for wide tables on small screens. */
.table-wrapper {
    padding: 0.75rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

/* Summary cards for dashboard metrics.  These cards display a number,
   label and icon similar to the TaskFlow design.  They adapt to
   available width by wrapping on small screens. */
.summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.summary-card {
    flex: 1;
    min-width: 160px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.summary-card i {
    font-size: 1.75rem;
    margin-right: 0.75rem;
    color: var(--primary);
}
.summary-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 0.5rem;
}
.summary-card .label {
    font-size: 0.875rem;
    color: var(--muted);
}

/* Project navigation bar: list of projects displayed as pill buttons.
   These buttons sit at the top of the task pages and allow users to
   quickly switch between projects.  Styling them consistently with
   Bootstrap pill buttons improves recognisability. */
.project-nav .btn {
    border-radius: 999px;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    margin: 0.15rem;
}
.project-nav .btn-primary {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.project-nav .btn-secondary {
    background-color: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}
/* Adjust mode switch buttons (Board/List/Calendar) for consistency */
.task-filter ~ div a.btn {
    border-radius: 0.375rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
}

/* List view group headers: highlight the start of a grouped section.  When
   tasks are grouped by status, priority or other field, the list view
   inserts a row with colspan across all columns.  Assign the
   .group-header class to that row so that it stands out with a
   contrasting background and stronger text colour. */
.group-header {
    /* Base styling for group headers in list and log views.  The
       specific status colours are applied via additional classes
       (e.g. .status-todo) appended to this element.  Use the
       background colour from --background to provide a subtle
       contrast with the table rows and ensure consistency across
       pages.  A slightly larger font and uppercase text improve
       readability. */
    background-color: var(--background);
    color: var(--primary);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* When grouping tasks by status in the list view the header
   row receives a class composed of `status-<key>`.  These rules
   leverage the pastel palette used in the Kanban board to
   differentiate each group visually.  The text colours are
   chosen to contrast with the background. */
.group-header.status-todo {
    background-color: var(--status-todo);
    color: #374151;
}
.group-header.status-in_progress {
    background-color: var(--status-in-progress);
    color: #1e3a8a;
}
.group-header.status-bug_review {
    background-color: var(--status-bug-review);
    color: #9d174d;
}
.group-header.status-done {
    background-color: var(--status-done);
    color: #065f46;
}

/* Highlight rows in list view based on status by applying a coloured border on the left.
   This helps users quickly identify which status group a task belongs to even when
   scrolling long lists. */
tr[data-status="todo"] {
    border-left: 4px solid var(--status-todo);
}
tr[data-status="in_progress"] {
    border-left: 4px solid var(--status-in-progress);
}
tr[data-status="bug_review"] {
    border-left: 4px solid var(--status-bug-review);
}
tr[data-status="done"] {
    border-left: 4px solid var(--status-done);
}

/* Improve separation between groups in the list view.  When a row has
   the .group-header class (spanning across columns) we add a top
   border and increase vertical spacing.  This visually separates
   groups without breaking the table structure. */
table .group-header td {
    border-top: 2px solid var(--border);
    /* Larger top padding for the group header for breathing space */
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

/* Ensure rows immediately following a group header do not have an extra
   top border, which could otherwise double the border thickness. */
.group-header + tr td {
    border-top: none;
}

/* Sidebar styles */
.sidebar {
    /* styles defined inline in header; this class left for future overrides */
    width:220px; 
    min-width:180px; 
    background-color: var(--surface); 
    border-right:1px solid var(--border); 
    padding:1rem 0.5rem;
}
.sidebar a {
    color: var(--text);
    text-decoration: none;
    display:block;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
}
.sidebar a:hover {
    background-color: var(--background);
    color: var(--primary);
}

/* Collapsed sidebar: hide sidebar for better UX on small screens */
.sidebar.collapsed {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: none !important;
    min-width: 0 !important;
    transition: width 0.3s ease;
}

/* Nav tabs: used on profile page to switch between profile info and
   notifications. We restyle the tabs for a modern look consistent
   with the rest of the UI. */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    margin-right: 0.25rem;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    font-size: 0.9rem;
}
.nav-tabs .nav-link:hover {
    color: var(--primary-hover);
}
.nav-tabs .nav-link.active {
    background-color: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
    color: var(--primary);
    font-weight: 600;
}

/* Toast notification for Kanban updates */
.toast-notif {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: var(--secondary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

/* Draggable subtask styling */
.subtask-sort-item {
    cursor: grab;
}
.subtask-sort-item.dragging {
    cursor: grabbing;
}

/* When hovering over subtask name link, show pointer */
.subtask-sort-item a:hover {
    text-decoration: underline;
    cursor: pointer;
}
.toast-notif.show {
    opacity: 1;
    transform: translateY(0);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    /* Reduce right margin for a tighter button group and add
       bottom margin to allow wrapping on small screens. */
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
}
.btn-primary {
    background-color: var(--primary);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--primary-hover);
}
.btn-danger {
    background-color: var(--danger);
    color: #fff;
}
.btn-danger:hover {
    background-color: #b91c1c;
}
.btn-secondary {
    background-color: var(--secondary);
    color: #fff;
}
.btn-secondary:hover {
    background-color: var(--secondary-hover);
}

/* Kanban board */
.kanban-board {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    /* subtle border around board */
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background-color: var(--surface);
}
.kanban-column {
    flex: 1 1 0;
    min-width: 250px;
    /* Column background colours are set inline based on status. Remove default background */
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.kanban-column h4 {
    padding: 0.5rem;
    text-align: center;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.kanban-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.kanban-item {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    cursor: grab;
}
.kanban-item.dragging {
    opacity: 0.5;
}

/* Priority label colours */
.priority-low {
    background-color: #d1fae5; /* light green */
    color: #065f46;
}
.priority-normal {
    background-color: #e0e7ff; /* light indigo */
    color: #3730a3;
}
.priority-high {
    background-color: #fee2e2; /* light red */
    color: #991b1b;
}

/* Urgent priority: very high urgency (red flag) */
.priority-urgent {
    background-color: #fca5a5; /* lighter red */
    color: #7f1d1d;
}

/* Normal priority styling (blue) */
.priority-normal {
    background-color: #dbeafe; /* light blue */
    color: #1e3a8a;
}

/* Low priority styling (gray) */
.priority-low {
    background-color: #f3f4f6; /* light grey */
    color: #374151;
}

/* Subtask styling */
.subtask-item {
    cursor: default;
}

/* Status labels: used across tables and lists to highlight task status.
   These classes leverage the same pastel colour palette as the Kanban
   columns.  The generic .status-label applies shared padding and
   border-radius, while each status-specific class sets its
   background and a contrasting text colour. */
.status-label {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-todo {
    background-color: var(--status-todo);
    color: #374151; /* dark slate */
}
.status-in_progress {
    background-color: var(--status-in-progress);
    color: #1e3a8a; /* indigo */
}
.status-bug_review {
    background-color: var(--status-bug-review);
    color: #9d174d; /* ruby */
}
.status-done {
    background-color: var(--status-done);
    color: #065f46; /* green */
}

/* Kanban items with pending subtasks that are dragged into the Done column
   will receive a dashed red border to alert the user that there are
   incomplete subtasks.  This style is applied via the data-warning="1"
   attribute on the element.  The !important flag ensures that this
   dashed border overrides any other border styling set by the
   JavaScript updateKanbanItemStyles() function. */
.kanban-item[data-warning="1"] {
    border: 2px dashed var(--danger) !important;
}

/* Section cards: these wrappers are used on the notifications page to
   provide a consistent background, border and padding around groups of
   content.  They mirror the styling of tables and other cards in the
   application without relying on Bootstrap’s card component. */
.section-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-right a {
        margin-left: 0.5rem;
        font-size: 0.875rem;
    }
    .kanban-column {
        min-width: 200px;
    }
}