/* =========================
   GLOBAL STYLES
========================= */

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

:root {
    --primary: #4f46e5;
    --primary-dark: #3730a3;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg: #f3f4f6;
    --card: #ffffff;
    --text: #111827;
    --border: #e5e7eb;

    --shadow:
        0 10px 25px rgba(0,0,0,0.08);

    --radius: 16px;
}

body.dark {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f8fafc;
    --border: #334155;
}

body {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-family: Inter, Segoe UI, sans-serif;
    transition: .3s ease;
}

/* =========================
   HEADER
========================= */

header {
    height: 80px;

    background: var(--card);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 30px;

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow);
}

.header-left h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

.header-left p {
    opacity: .7;
    margin-top: 4px;
}

#themeToggle {
    border: none;
    background: var(--primary);
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
}

#themeToggle:hover {
    background: var(--primary-dark);
}

/* =========================
   LAYOUT
========================= */

.app-container {
    display: flex;
    min-height: calc(100vh - 80px);
}

/* =========================
   SIDEBAR
========================= */

.sidebar {
    width: 280px;

    background: var(--card);

    border-right: 1px solid var(--border);

    padding: 25px;

    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

.sidebar-header h2 {
    font-size: 1.4rem;
}

#addBoardBtn {
    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: var(--primary);
    color: white;

    font-size: 22px;
    cursor: pointer;
}

.board-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.board-item {
    padding: 14px;

    border-radius: 12px;

    background: var(--bg);

    cursor: pointer;

    transition: .25s ease;
}

.board-item:hover {
    transform: translateY(-2px);
}

.board-item.active {
    background: var(--primary);
    color: white;
}

/* =========================
   CONTENT AREA
========================= */

.content-area {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
}

/* =========================
   DASHBOARD
========================= */

.dashboard {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap: 20px;

    margin-bottom: 25px;
}

.stat-card {
    background: var(--card);

    border-radius: var(--radius);

    padding: 20px;

    box-shadow: var(--shadow);

    text-align: center;
}

.stat-card h3 {
    font-size: .95rem;
    opacity: .8;
    margin-bottom: 12px;
}

.stat-card span {
    font-size: 2rem;
    font-weight: 700;
}

/* =========================
   BOARD HEADER
========================= */

.current-board-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

#currentBoardTitle {
    font-size: 2rem;
}

#renameBoardBtn {
    border: none;

    background: var(--warning);
    color: white;

    padding: 12px 18px;

    border-radius: 10px;

    cursor: pointer;
}

/* =========================
   KANBAN BOARD
========================= */

.board {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;
}

.column {
    background: var(--card);

    border-radius: var(--radius);

    min-height: 600px;

    padding: 18px;

    box-shadow: var(--shadow);
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

.column-header h3 {
    font-size: 1rem;
}

.add-column-task {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: var(--primary);

    color: white;

    font-size: 22px;

    cursor: pointer;
}

.task-container {
    min-height: 450px;
}

/* =========================
   TASK CARDS
========================= */

.task {
    background: var(--bg);

    border-radius: 14px;

    padding: 15px;

    margin-bottom: 15px;

    cursor: grab;

    transition: .25s ease;

    border-left: 5px solid var(--primary);
}

.task:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.task.dragging {
    opacity: .5;
}

.task-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.task-description {
    font-size: .9rem;
    opacity: .8;
    margin-bottom: 12px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label {
    font-size: .8rem;
    font-weight: 600;
}

.task-progress {
    margin-top: 12px;
}

.progress-bar {
    width: 100%;
    height: 10px;

    background: rgba(0,0,0,.08);

    border-radius: 999px;

    overflow: hidden;
}

.progress-fill {
    height: 100%;

    width: 0;

    background: linear-gradient(
        90deg,
        #22c55e,
        #16a34a
    );

    transition: width .3s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    font-size: .85rem;
    font-weight: 600;
}

/* =========================
   MODALS
========================= */

.modal {
    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    display: none;

    justify-content: center;
    align-items: center;

    z-index: 1000;

    padding: 20px;
}

.modal.show {
    display: flex;
}

.modal-content {
    width: 100%;
    max-width: 700px;

    background: var(--card);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 25px 50px rgba(0,0,0,.25);

    animation: modalOpen .25s ease;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    padding: 20px 25px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 1.4rem;
}

.close-modal,
.close-details {
    font-size: 28px;
    cursor: pointer;
    font-weight: bold;
}

.modal-body {
    padding: 25px;
}

.modal-footer {
    padding: 20px 25px;

    border-top: 1px solid var(--border);

    display: flex;
    justify-content: flex-end;
}

/* =========================
   FORM ELEMENTS
========================= */

input,
textarea {
    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border: 1px solid var(--border);

    background: var(--bg);

    color: var(--text);

    margin-bottom: 15px;

    outline: none;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

#saveTaskBtn {
    border: none;

    background: var(--primary);

    color: white;

    padding: 12px 22px;

    border-radius: 10px;

    cursor: pointer;
}

#saveTaskBtn:hover {
    background: var(--primary-dark);
}

/* =========================
   SUBTASKS
========================= */

.subtask-section {
    margin-top: 20px;
}

.subtask-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 15px;
}

.subtask-header h4 {
    font-size: 1rem;
}

#addSubtaskBtn {
    border: none;

    background: var(--success);

    color: white;

    padding: 10px 16px;

    border-radius: 10px;

    cursor: pointer;
}

.subtask-item {
    display: flex;
    gap: 10px;

    margin-bottom: 10px;
}

.subtask-item input {
    margin-bottom: 0;
}

.remove-subtask {
    width: 45px;

    border: none;

    background: var(--danger);

    color: white;

    border-radius: 10px;

    cursor: pointer;
}

/* =========================
   TASK DETAILS
========================= */

.task-details {
    max-width: 800px;
}

.detail-subtasks {
    margin-top: 20px;
}

.detail-subtask {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 10px;

    background: var(--bg);

    margin-bottom: 10px;
}

.detail-subtask input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;
}

.detail-subtask.completed span {
    text-decoration: line-through;
    opacity: .6;
}

.task-actions {
    margin-top: 25px;

    display: flex;
    justify-content: flex-end;
}

#deleteTaskBtn {
    border: none;

    background: var(--danger);

    color: white;

    padding: 12px 20px;

    border-radius: 10px;

    cursor: pointer;
}

/* =========================
   EMPTY STATE
========================= */

.empty-column {
    text-align: center;

    padding: 40px 20px;

    opacity: .6;

    font-size: .9rem;
}

/* =========================
   DARK MODE FIXES
========================= */

body.dark .task {
    background: rgba(255,255,255,.03);
}

body.dark input,
body.dark textarea {
    background: #0f172a;
    border-color: #334155;
}

body.dark .detail-subtask {
    background: #0f172a;
}

body.dark .progress-bar {
    background: rgba(255,255,255,.08);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {

    .board {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 900px) {

    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .dashboard {
        grid-template-columns:
        repeat(2,1fr);
    }
}

@media (max-width: 768px) {

    header {
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 20px;
    }

    .board {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .current-board-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 500px) {

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    .stat-card span {
        font-size: 1.6rem;
    }

    #currentBoardTitle {
        font-size: 1.5rem;
    }
}