/*
===========================================
SKILLS TABLE STYLESHEET WITH CSS GRID LAYOUT
===========================================
This CSS file styles a skills tracking table with color-coded groupings
AND implements a modern CSS Grid layout for organizing learning content.
Each skill category has its own background color for visual organization.
*/

/*
===========================================
CSS GRID LAYOUT SYSTEM
===========================================
CSS Grid creates a 2D layout system (rows AND columns) that's perfect
for organizing complex page layouts. Unlike Flexbox (which is 1D), 
Grid can control both dimensions simultaneously.
*/

/* MAIN LEARNING CONTAINER - The Grid Parent */
.learning-container {
    /* 
    DISPLAY GRID: This makes the container a grid container.
    All direct children become grid items automatically.
    */
    display: grid;

    /* 
    GRID TEMPLATE AREAS: Names the grid areas for semantic layout.
    This creates a visual map of your layout in the CSS itself!
    Each quoted string represents a row, each word represents a column.
    */
    grid-template-areas:
        "header"
        "skills"
        "practice"
        "history";

    /* 
    GRID TEMPLATE ROWS: Controls the height of each row.
    - auto = size based on content
    - 1fr = take available space (fractional unit)
    */
    grid-template-rows: auto auto 1fr auto;

    /* 
    GAP: Creates space between grid items (replaces margins!).
    This is the modern way to add consistent spacing.
    */
    gap: 2rem;
    /* 2rem = 32px (assuming 16px base font size) */

    /* Container styling */
    max-width: 1200px;
    /* Prevents ultra-wide layouts on large screens */
    margin: 0 auto;
    /* Centers the container horizontally */
    padding: 1rem;
    /* Adds padding inside the container */

    /* 
    MIN-HEIGHT: Ensures the grid takes at least the full viewport height.
    This makes the layout fill the screen properly.
    */
    min-height: 100vh;
    /* vh = viewport height units */
}

/*
-------------------------------------------
GRID ITEM POSITIONING
-------------------------------------------
These rules assign each section to its named grid area.
The grid-area property connects HTML elements to the 
grid-template-areas defined above.
*/

/* Page header goes in the "header" area */
.page-header {
    grid-area: header;
    /* Links to "header" in grid-template-areas */
    text-align: center;
    padding: 1rem 0;
}

/* Skills table goes in the "skills" area */
.skills-overview {
    grid-area: skills;
    /* Links to "skills" in grid-template-areas */
    background-color: #f9f9f9;
    /* Light background to distinguish section */
    padding: 1.5rem;
    border-radius: 8px;
    /* Rounded corners for modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

/* Current practice goes in the "practice" area */
.current-practice {
    grid-area: practice;
    /* Links to "practice" in grid-template-areas */
    background-color: #fff7e6;
    /* Warm background for active work */
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    /* Orange accent border */
    min-height: 300px;
    /* Ensures minimum space for practice work */
}

/* Learning history goes in the "history" area */
.learning-history {
    grid-area: history;
    /* Links to "history" in grid-template-areas */
    background-color: #f3f4f6;
    /* Cool background for archived content */
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #6366f1;
    /* Purple accent border */
}

/*
-------------------------------------------
RESPONSIVE GRID LAYOUT
-------------------------------------------
CSS Grid shines with responsive design. We can completely
change the layout for different screen sizes using media queries.
*/

/* TABLET AND DESKTOP LAYOUT (768px and up) */
@media (min-width: 768px) {
    .learning-container {
        /* 
        CHANGING THE GRID FOR LARGER SCREENS:
        Learning History now gets its own row below practice for more space.
        */
        grid-template-areas:
            "header  header"
            "skills  skills"
            "practice practice"
            "history history";

        /* 
        GRID TEMPLATE COLUMNS: Both columns equal width
        */
        grid-template-columns: 1fr 1fr;

        /* Adjust row sizing - history gets more space with 1fr */
        grid-template-rows: auto auto auto 1fr;

        /* Increase gap for larger screens */
        gap: 2.5rem;
    }
}

/* LARGE DESKTOP LAYOUT (1024px and up) */
@media (min-width: 1024px) {
    .learning-container {
        /* 
        Large screen layout: Practice section gets full width above history
        This gives maximum space for both sections
        */
        grid-template-areas:
            "header  header  header"
            "skills  skills  skills"
            "practice practice practice"
            "history history history";

        /* 
        FULL WIDTH SECTIONS:
        Both practice and history get full width for maximum working space
        */
        grid-template-columns: 1fr 1fr 1fr;

        /* Give history substantial space with 1fr */
        grid-template-rows: auto auto auto 1fr;

        gap: 3rem;
    }
}

/*
===========================================
SECTION STYLING
===========================================
Individual styling for each content section
*/

/* Header styling */
.page-header h1 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
}

.page-description {
    color: #7f8c8d;
    font-size: 1.1rem;
    margin: 0;
}

/* Section headers */
.skills-overview h2,
.current-practice h2,
.learning-history h2 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

/* Section descriptions */
.section-description {
    color: #6c757d;
    /* Removed font-size - respects user's browser font size preferences for accessibility */
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Practice content area */
.practice-content {
    min-height: 200px;
    padding: 1rem;
    background-color: white;
    border-radius: 4px;
    border: 2px dashed #ff9800;
}

/* History entries container */
.history-entries {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.placeholder-text {
    color: #adb5bd;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Future history entry styling (for when you add content) */
.history-entry {
    background-color: white;
    padding: 1rem;
    border-radius: 4px;
    border-left: 3px solid #6366f1;
}

.history-entry h3 {
    margin-top: 0;
    color: #495057;
}

/*
===========================================
BASE TABLE STYLING (UNCHANGED)
===========================================
These styles set up the fundamental appearance of the table
*/

/* Main table container */
table {
    /* Removes spacing between table cell borders - creates clean lines */
    border-collapse: collapse;

    /* Makes table take up full width of its container */
    width: 100%;

    /* Adds vertical spacing above and below the table (20px top/bottom, 0 left/right) */
    margin: 20px 0;

    /* Sets a clean, readable font for the entire table */
    font-family: Arial, sans-serif;
}

/* Styling for both table headers (th) and table data cells (td) */
th,
td {
    /* Creates a light gray border around each cell */
    border: 1px solid #ddd;

    /* Adds internal spacing inside each cell for readability */
    padding: 12px;

    /* Aligns text to the left side of each cell */
    text-align: left;
}

/* Special styling just for table headers */
th {
    /* Light gray background to distinguish headers from data */
    background-color: #f2f2f2;

    /* Makes header text bold for emphasis */
    font-weight: bold;
}

/* Interactive hover effect for table rows */
tr:hover {
    /* Changes background color when user hovers over a row */
    background-color: #f5f5f5;
}

/*
===========================================
SKILL GROUPING SYSTEM (UNCHANGED)
===========================================
Each skill category gets its own color theme for visual organization.
The system uses soft background colors with matching accent borders.
*/

/*
-------------------------------------------
HTML5 FILES SKILL GROUP (GREEN THEME)
-------------------------------------------
Used for: File setup, HTML structure, linking CSS/JS
*/

/* Base styling for all HTML5-related rows */
.skill-html5 {
    /* Very soft green background - easy on the eyes */
    background-color: #f0f8f0;

    /* Green left border accent (4px thick) to mark the skill group */
    border-left: 4px solid #4CAF50;
}

/* Additional styling for the main skill row (first in group) */
.skill-html5.skill-group-first {
    /* Thick green top border to clearly mark the start of a new skill group */
    border-top: 3px solid #4CAF50;
}

/* Styling for sub-skill text within HTML5 group */
.skill-html5 .skill-group-continuation .skill-name {
    /* Lighter text color to de-emphasize repetitive skill names */
    color: #666;

    /* Italic font to show these are sub-skills */
    font-style: italic;

    /* Slightly smaller font size (85% of normal) */
    font-size: 0.85em;
}

/* Adds an arrow symbol before sub-skill names */
.skill-html5 .skill-group-continuation .skill-name::before {
    /* The ::before pseudo-element inserts content before the element */
    content: "↳ ";
    /* Unicode arrow pointing down and right */

    /* Makes the arrow green to match the theme */
    color: #4CAF50;
}

/*
-------------------------------------------
JAVASCRIPT BASICS SKILL GROUP (BLUE THEME)
-------------------------------------------
Used for: Variables, data types, operators, basic syntax
*/

/* Base styling for all JavaScript-related rows */
.skill-javascript {
    /* Very soft blue background */
    background-color: #f0f4ff;

    /* Blue left border accent */
    border-left: 4px solid #2196F3;
}

/* Main JavaScript skill row styling */
.skill-javascript.skill-group-first {
    /* Blue top border to mark start of JavaScript skill group */
    border-top: 3px solid #2196F3;
}

/* Sub-skill text styling for JavaScript group */
.skill-javascript .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Blue arrow for JavaScript sub-skills */
.skill-javascript .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #2196F3;
}

/*
-------------------------------------------
DOM MANIPULATION SKILL GROUP (PURPLE THEME)
-------------------------------------------
Used for: Element selection, content modification, event handling
*/

/* Base styling for all DOM-related rows */
.skill-dom {
    /* Very soft purple background */
    background-color: #f8f0ff;

    /* Purple left border accent */
    border-left: 4px solid #9C27B0;
}

/* Main DOM skill row styling */
.skill-dom.skill-group-first {
    /* Purple top border to mark start of DOM skill group */
    border-top: 3px solid #9C27B0;
}

/* Sub-skill text styling for DOM group */
.skill-dom .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Purple arrow for DOM sub-skills */
.skill-dom .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #9C27B0;
}

/*
-------------------------------------------
FUNCTIONS SKILL GROUP (RED THEME)
-------------------------------------------
Used for: Function declaration, parameters, return values, scope
*/

/* Base styling for all function-related rows */
.skill-functions {
    /* Very soft red background */
    background-color: #fff0f0;

    /* Red left border accent */
    border-left: 4px solid #f44336;
}

/* Main functions skill row styling */
.skill-functions.skill-group-first {
    /* Red top border to mark start of functions skill group */
    border-top: 3px solid #f44336;
}

/* Sub-skill text styling for functions group */
.skill-functions .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Red arrow for function sub-skills */
.skill-functions .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #f44336;
}

/*
===========================================
CSS LEARNING NOTES - UPDATED WITH GRID
===========================================
Key concepts demonstrated in this stylesheet:

1. CSS GRID FUNDAMENTALS:
   - display: grid = Creates a grid container
   - grid-template-areas = Names sections for semantic layout
   - grid-template-rows/columns = Controls sizing
   - grid-area = Assigns elements to named areas
   - gap = Modern spacing between grid items

2. RESPONSIVE GRID DESIGN:
   - @media queries change grid layout for different screens
   - Mobile-first approach (single column, then expand)
   - grid-template-areas can be completely redefined per breakpoint

3. FRACTIONAL UNITS (fr):
   - 1fr = one fraction of available space
   - 2fr 1fr = first item gets 2/3, second gets 1/3
   - More flexible than percentages

4. VIEWPORT UNITS:
   - vh = viewport height (100vh = full screen height)
   - vw = viewport width
   - rem = relative to root font size (usually 16px)

5. CSS GRID vs FLEXBOX:
   - Grid = 2D layout (rows AND columns)
   - Flexbox = 1D layout (either row OR column)
   - Grid = page layout, Flexbox = component layout

6. SEMANTIC HTML:
   - <header>, <section>, <article> = meaningful structure
   - Helps accessibility and SEO
   - CSS targets semantic elements

7. MODERN CSS FEATURES:
   - box-shadow for depth
   - border-radius for rounded corners
   - gap instead of margins for spacing
   - Custom properties (CSS variables) could be next!
*/

/*
===========================================
PROGRESS BAR SYSTEM FOR SKILL TRACKING
===========================================
Visual progress indicators integrated into the skills table.
Progress bars appear in the Level column for trackable skills.
*/

/* Progress bar container */
.skill-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* Progress level text */
.progress-label {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

/* Progress bar track */
.progress-track {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Progress bar fill */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    border-radius: 4px;
    transition: width 0.4s ease-out;
    position: relative;
}

/* Progress percentages and colors for different levels */
.progress-fill.not-started {
    width: 0%;
    background: transparent;
    /* No visual progress for not started */
}

.progress-fill.practicing {
    width: 33%;
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
}

.progress-fill.proficient {
    width: 66%;
    background: linear-gradient(90deg, #17a2b8 0%, #6f42c1 100%);
}

.progress-fill.mastery {
    width: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

/*
-------------------------------------------
SKILL CATEGORY COLOR THEMING FOR PROGRESS BARS
-------------------------------------------
Each skill category gets progress bars that match its color theme
*/

/* HTML5 FILES - GREEN THEME */
.skill-html5 .progress-fill.not-started {
    background: transparent;
}

.skill-html5 .progress-fill.practicing {
    background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
}

.skill-html5 .progress-fill.proficient {
    background: linear-gradient(90deg, #388E3C 0%, #4CAF50 100%);
}

.skill-html5 .progress-fill.mastery {
    background: linear-gradient(90deg, #2E7D32 0%, #388E3C 100%);
}

/* JAVASCRIPT BASICS - BLUE THEME */
.skill-javascript .progress-fill.not-started {
    background: transparent;
}

.skill-javascript .progress-fill.practicing {
    background: linear-gradient(90deg, #2196F3 0%, #42A5F5 100%);
}

.skill-javascript .progress-fill.proficient {
    background: linear-gradient(90deg, #1976D2 0%, #2196F3 100%);
}

.skill-javascript .progress-fill.mastery {
    background: linear-gradient(90deg, #1565C0 0%, #1976D2 100%);
}

/* DOM MANIPULATION - PURPLE THEME */
.skill-dom .progress-fill.not-started {
    background: transparent;
}

.skill-dom .progress-fill.practicing {
    background: linear-gradient(90deg, #9C27B0 0%, #AB47BC 100%);
}

.skill-dom .progress-fill.proficient {
    background: linear-gradient(90deg, #7B1FA2 0%, #9C27B0 100%);
}

.skill-dom .progress-fill.mastery {
    background: linear-gradient(90deg, #6A1B9A 0%, #7B1FA2 100%);
}

/* FUNCTIONS - RED THEME */
.skill-functions .progress-fill.not-started {
    background: transparent;
}

.skill-functions .progress-fill.practicing {
    background: linear-gradient(90deg, #f44336 0%, #EF5350 100%);
}

.skill-functions .progress-fill.proficient {
    background: linear-gradient(90deg, #D32F2F 0%, #f44336 100%);
}

.skill-functions .progress-fill.mastery {
    background: linear-gradient(90deg, #C62828 0%, #D32F2F 100%);
}

/* Click-to-update functionality styling */
.progress-clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.progress-clickable:hover {
    transform: scale(1.02);
}

.progress-clickable:hover .progress-track {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Progress update tooltip */
.progress-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.progress-clickable:hover .progress-tooltip {
    opacity: 1;
}

/*
-------------------------------------------
HTML5 FILES SKILL GROUP (GREEN THEME)
-------------------------------------------
Used for: File setup, HTML structure, linking CSS/JS
*/

/* Base styling for all HTML5-related rows */
.skill-html5 {
    /* Very soft green background - easy on the eyes */
    background-color: #f0f8f0;

    /* Green left border accent (4px thick) to mark the skill group */
    border-left: 4px solid #4CAF50;
}

/* Additional styling for the main skill row (first in group) */
.skill-html5.skill-group-first {
    /* Thick green top border to clearly mark the start of a new skill group */
    border-top: 3px solid #4CAF50;
}

/* Styling for sub-skill text within HTML5 group */
.skill-html5 .skill-group-continuation .skill-name {
    /* Lighter text color to de-emphasize repetitive skill names */
    color: #666;

    /* Italic font to show these are sub-skills */
    font-style: italic;

    /* Slightly smaller font size (85% of normal) */
    font-size: 0.85em;
}

/* Adds an arrow symbol before sub-skill names */
.skill-html5 .skill-group-continuation .skill-name::before {
    /* The ::before pseudo-element inserts content before the element */
    content: "↳ ";
    /* Unicode arrow pointing down and right */

    /* Makes the arrow green to match the theme */
    color: #4CAF50;
}

/*
-------------------------------------------
JAVASCRIPT BASICS SKILL GROUP (BLUE THEME)
-------------------------------------------
Used for: Variables, data types, operators, basic syntax
*/

/* Base styling for all JavaScript-related rows */
.skill-javascript {
    /* Very soft blue background */
    background-color: #f0f4ff;

    /* Blue left border accent */
    border-left: 4px solid #2196F3;
}

/* Main JavaScript skill row styling */
.skill-javascript.skill-group-first {
    /* Blue top border to mark start of JavaScript skill group */
    border-top: 3px solid #2196F3;
}

/* Sub-skill text styling for JavaScript group */
.skill-javascript .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Blue arrow for JavaScript sub-skills */
.skill-javascript .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #2196F3;
}

/*
-------------------------------------------
DOM MANIPULATION SKILL GROUP (PURPLE THEME)
-------------------------------------------
Used for: Element selection, content modification, event handling
*/

/* Base styling for all DOM-related rows */
.skill-dom {
    /* Very soft purple background */
    background-color: #f8f0ff;

    /* Purple left border accent */
    border-left: 4px solid #9C27B0;
}

/* Main DOM skill row styling */
.skill-dom.skill-group-first {
    /* Purple top border to mark start of DOM skill group */
    border-top: 3px solid #9C27B0;
}

/* Sub-skill text styling for DOM group */
.skill-dom .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Purple arrow for DOM sub-skills */
.skill-dom .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #9C27B0;
}

/*
-------------------------------------------
FUNCTIONS SKILL GROUP (RED THEME)
-------------------------------------------
Used for: Function declaration, parameters, return values, scope
*/

/* Base styling for all function-related rows */
.skill-functions {
    /* Very soft red background */
    background-color: #fff0f0;

    /* Red left border accent */
    border-left: 4px solid #f44336;
}

/* Main functions skill row styling */
.skill-functions.skill-group-first {
    /* Red top border to mark start of functions skill group */
    border-top: 3px solid #f44336;
}

/* Sub-skill text styling for functions group */
.skill-functions .skill-group-continuation .skill-name {
    color: #666;
    font-style: italic;
    font-size: 0.85em;
}

/* Red arrow for function sub-skills */
.skill-functions .skill-group-continuation .skill-name::before {
    content: "↳ ";
    color: #f44336;
}

/*
===========================================
CSS LEARNING NOTES
===========================================
Key concepts demonstrated in this stylesheet:

1. CLASS SELECTORS: .skill-html5 targets elements with class="skill-html5"

2. MULTIPLE CLASSES: .skill-html5.skill-group-first targets elements that have BOTH classes

3. DESCENDANT SELECTORS: .skill-html5 .skill-name targets .skill-name elements 
   that are inside .skill-html5 elements

4. PSEUDO-ELEMENTS: ::before adds content before an element without changing HTML

5. COLOR CODES: 
   - #f0f8f0 = hex color (red, green, blue values in hexadecimal)
   - #4CAF50 = Material Design green
   - Colors with more 0s and Fs are lighter/softer

6. BORDER SHORTHAND: "4px solid #4CAF50" = width style color

7. HOVER STATES: :hover applies styles when user hovers over element

8. BORDER-COLLAPSE: collapse removes gaps between table cell borders
*/

/*
===========================================
Current Practice Section
===========================================
-------------------------------
Comment Structure Format:
LEARNING PHASE: [Date] - [Skill Level]
CONCEPT: [What you're practicing]
STATUS: [Moved from Current Practice on DATE]
NOTES: [What you learned, what was challenging]
NEXT STEPS: [What to work on next]
-------------------------------
*/