:root{
    /* Premium color palette */
    --bg-main: #f4f6f9;         /* Soft, premium light grey background */
    --surface-card: #ffffff;       /* Pure white for our task cards and forms */
    --text-primary: #1e293b;      /* Deep slate grey for high-contrast headings */
    --text-muted: #64748b;        /* Soft slate grey for secondary text/subtitles */

    /* Branding Colors  */
    --primary-accent: #4f46e5; /* Deep Royal Violet for buttons and key lines */
    --priority-high: #ef4444;   /* Vivid crimson for high-priority elements */
    --priority-med: #f59e0b;    /* Warm amber for medium priority */
    --priority-low: #10b981;    /* Vibrant emerald green for low priority */
    
    /* Global Layout Metrics */
    --radius-premium: 12px;    /* Smooth rounded corners for a modern feel */
    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

/* Universal Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Padding and borders stay INSIDE the specified width */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Clean, modern interface text */
}

/* Global Canvas */
body{
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 2rem; /* Gives breathing room around the entire dashboard edge */
}

.dashboard-container{
    display: grid;
    /* Column 1 is 350px, Column 2 takes up all remaining fraction space */
    grid-template-columns: 350px 1fr;
    /* Creates a beautiful 2rem gap space between the panel and the board */
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;  /* Centers the whole dashboard layout on ultra-wide monitors */
}

.task-board{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.control-panel{
    background-color: var(--surface-card);
    padding: 2rem;      /* Generous internal padding padding so elements breathe */
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-subtle);
    height: fit-content;  /* Ensures the card only grows as tall as its inner elements */
}

.control-panel h2{
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;                 /* Pushes the input fields down cleanly */
    color: var(--text-primary);
}


/* Organize form layout into a vertical stack */
.control-panel form{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Style the text label for input and priority */

.control-panel label{
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    display: block; /* Ensures label stays on its own line above the field */
}

/* Universal style for text input and priority  */
.control-panel input[type=text], .control-panel select{
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid #cbd5e1; /* Subtle clean border */
    border-radius: 8px;
    background-color: #f8fafc; /* Ultra-light surface fill for inputs */
    color: var(--text-primary);
    transition: var(--transition-smooth);
    outline: none; /* remove the default browser blacklines */
}

/* Interactive focus effectwhen user click on inputs */
.control-panel input[type=text]:focus, .control-panel select:focus {
    border-color: var(--primary-accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgb(79, 70, 229, 0.15); /* Adds a premium soft outer glow */

}

.control-panel button {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: #64748b;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 4px 0 rgba(100, 116, 139, 0.2);
}

.control-panel button:hover{
    background-color: #475569;
    box-shadow: 0 4px 12px 0 rgba(100, 116, 139, 0.3);
    transform: translateY(-1px); /* Moves button up by 1 pixel micro-interaction */

}

/* Active Effect: The exact millisecond the user clicks down */
.control-panel button:active {
    transform: translateY(1px); /* Pushes button down slightly to feel mechanical */
    box-shadow: 0 1px 2px 0 rgba(100, 116, 139, 0.2);
}

/* Style the header container holding out text and icons */
.column-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Style the literal column titles */
.column-header h2{
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Styling the plus icon*/
.column-header .plus-icon{
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: 400;
}

/* Styling the overrall task cards spawned by the Printing Press */
.task-card{
    background-color: var(--surface-card);
    padding: 1.25rem;
    border-radius: var(--radius-premium);
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Adding a little hover nteraction on the cards */
.task-card:hover {
    transform: translateY(-2px);  /* Lifts up slightly when user hovers */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03); /* Deeper shadow */
}

.task-card h3{
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* Core structure for all priority labels */
.priority-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px; /* Forces a rounded pill shape rather than a card box */
    text-transform: uppercase;
    margin-bottom: 1rem;
}


/* Dynamic color definitions using our design system variables */
.priority-badge.high {
    background-color: rgba(239, 68, 68, 0.15); /* Soft crimson tint */
    color: var(--priority-high);               /* Vivid red text */
}

.priority-badge.medium {
    background-color: rgba(245, 158, 11, 0.15); /* Soft amber tint */
    color: var(--priority-med);                /* Warm orange text */
}

.priority-badge.low {
    background-color: rgba(16, 185, 129, 0.15); /* Soft emerald tint */
    color: var(--priority-low);                /* Vibrant green text */
}

/* The parent buttons raw wrappers layouts*/
.task-card .actions{
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    width: 100%;
}

/* STyle the Complete Action Button container */
.task-card .complete-btn,
.task-card .reopen-btn{
    flex: 1; /* Powerful flex instruction: tells the button to expand and fill up all available row space */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;

    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #15803d;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    cursor: pointer;
    transition: var(--transition-smooth);
}

/* Complete Button hover  */
.task-card .complete-btn:hover,
.task-card .reopen-btn:hover{
    background-color: #dcfce7;
    transform: translateY(-1px);
}

/* Style the "Delete" button  */

.task-card .delete-btn{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0.5rem;
    width: 36px;
    height: 36px;

    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);

}

/* Delete Button hover */

.task-card .delete-btn:hover{
    background-color: #fee2e2;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* Active compressed feedback layout for both interactive items */
.task-card .complete-btn:active,
.task-card .delete-btn:active,
.task-card .reopen-btn:active {
    transform: translateY(1px);
}


/* MEDIA QUERY SECTION */
@media (max-width: 768px){
    /* force the body to look cleaner on the mobile view */
    body{
        padding: 1rem;
    }

    .dashboard-container{
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .task-board{
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .control-panel{
        padding: 1.5rem;
    }
}