/* style.css - MyMoney Tracker Styles */
/* ===================================== */

/* TEACHING NOTE: CSS RESET
   This removes default browser spacing so all browsers look the same */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Makes width/height include padding and border */
}

/* TEACHING NOTE: BODY STYLES
   These styles apply to the entire page */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f5f5f5;  /* Light grey background */
    color: #333;                 /* Dark grey text */
    min-height: 100vh;           /* Minimum height = viewport height (full screen) */
}

/* =============================================
   USER SELECTION SCREEN STYLES
   ============================================= */

/* TEACHING NOTE: FLEXBOX for centering
   Flexbox is a CSS layout system that makes it easy to center things */
#user-selection-screen {
    display: flex;               /* Turn on flexbox */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
    min-height: 100vh;          /* Full screen height */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* Purple gradient */
}

.user-selection-container {
    background: white;
    border-radius: 20px;         /* Rounded corners */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);  /* Shadow effect */
    padding: 40px;
    width: 90%;
    max-width: 500px;            /* Maximum width to keep it from getting too wide */
}

.user-selection-container h1 {
    color: #667eea;
    text-align: center;
    margin-bottom: 10px;
    font-size: 36px;
}

.user-selection-container p {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

/* TEACHING NOTE: User list container */
#user-list {
    margin-bottom: 30px;
}

/* TEACHING NOTE: Button styles for user selection */
.user-button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;                    /* Changes cursor to pointer on hover */
    transition: all 0.3s ease;          /* Smooth transition for hover effect */
}

/* TEACHING NOTE: :hover is a pseudo-class
   This style applies when the mouse hovers over the button */
.user-button:hover {
    background: #5568d3;                /* Darker purple */
    transform: translateY(-2px);        /* Move up slightly */
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);  /* Add shadow */
}

/* TEACHING NOTE: Styles for "no users" message */
.no-users {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}

/* TEACHING NOTE: New user section styles */
.new-user-section {
    border-top: 2px solid #f0f0f0;     /* Line at the top */
    padding-top: 30px;
    margin-top: 20px;
}

.new-user-section h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 20px;
}

.new-user-section input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}

/* TEACHING NOTE: :focus applies when the input is clicked/selected */
.new-user-section input:focus {
    outline: none;                      /* Remove default blue outline */
    border-color: #667eea;              /* Purple border */
}

.new-user-section button {
    width: 100%;
    padding: 12px;
    background: #4CAF50;                /* Green */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.new-user-section button:hover {
    background: #45a049;                /* Darker green */
}

/* =============================================
   MAIN APP STYLES
   ============================================= */

/* TEACHING NOTE: Navbar (top bar) styles */
.navbar {
    background: #2196F3;                /* Blue */
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;     /* Space between title and button */
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar h1 {
    font-size: 24px;
    margin: 0;
}

/* TEACHING NOTE: User info container in navbar */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;                          /* Space between elements */
}

.user-info span {
    font-size: 16px;
}

.user-info button {
    background: white;
    color: #2196F3;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.user-info button:hover {
    background: #f0f0f0;
    transform: scale(1.05);             /* Slightly larger on hover */
}

/* TEACHING NOTE: Container for main content */
.container {
    max-width: 1000px;                  /* Maximum width */
    margin: 20px auto;                  /* Center it horizontally */
    padding: 20px;
}

/* =============================================
   SUMMARY CARDS STYLES
   ============================================= */

/* TEACHING NOTE: GRID LAYOUT
   CSS Grid is great for creating layouts with rows and columns */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    gap: 20px;                              /* Space between cards */
    margin-bottom: 30px;
}

/* TEACHING NOTE: @media is for RESPONSIVE DESIGN
   This makes the layout work on phones and tablets */
@media (max-width: 768px) {
    .summary-cards {
        grid-template-columns: 1fr;     /* On phones: 1 column (stack vertically) */
    }
}

.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.card h3 {
    color: #666;
    font-size: 16px;
    margin-bottom: 10px;
}

.amount {
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
}

.card small {
    color: #999;
    font-size: 14px;
}

/* TEACHING NOTE: Different colors for different card types */
.income-card .amount {
    color: #4CAF50;                     /* Green for income */
}

.expense-card .amount {
    color: #F44336;                     /* Red for expenses */
}

.balance-card .amount {
    color: #2196F3;                     /* Blue for balance */
}

/* =============================================
   BUTTON STYLES
   ============================================= */

.add-section {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.btn-income, .btn-expense {
    flex: 1;                            /* Each button takes equal space */
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
}

.btn-income {
    background: #4CAF50;
}

.btn-income:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.btn-expense {
    background: #F44336;
}

.btn-expense:hover {
    background: #da190b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
}

.btn-cancel {
    background: #757575;                /* Grey */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

.btn-cancel:hover {
    background: #616161;
}

/* =============================================
   CHART SECTION STYLES
   ============================================= */

.chart-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.chart-section h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 20px;
}

/* TEACHING NOTE: Canvas element where Chart.js draws */
#categoryChart {
    max-width: 400px;
    margin: 0 auto;                     /* Center the chart */
}

/* =============================================
   TRANSACTIONS SECTION STYLES
   ============================================= */

.transactions-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.transactions-section h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 20px;
}

.transaction-item {
    display: flex;
    justify-content: space-between;     /* Space between description and amount */
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #ddd;        /* Colored left border */
    transition: all 0.3s ease;
}

.transaction-item:hover {
    background: #f0f0f0;
    transform: translateX(5px);         /* Slide right on hover */
}

.transaction-details strong {
    color: #333;
    font-size: 16px;
}

.transaction-details small {
    color: #999;
    font-size: 14px;
}

.transaction-amount {
    font-size: 20px;
    font-weight: bold;
}

/* TEACHING NOTE: Color the amounts based on type */
.transaction-amount.income {
    color: #4CAF50;
}

.transaction-amount.expense {
    color: #F44336;
}

.no-data {
    text-align: center;
    color: #999;
    padding: 30px;
    font-style: italic;
}

/* =============================================
   MODAL STYLES
   ============================================= */

/* TEACHING NOTE: The modal covers the entire screen */
.modal {
    display: none;                      /* Hidden by default */
    position: fixed;                    /* Stay in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);    /* Semi-transparent black overlay */
    z-index: 1000;                      /* Appear above everything else */
    justify-content: center;
    align-items: center;
}

/* TEACHING NOTE: The actual modal content box */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
    color: #333;
    margin-bottom: 20px;
}

.modal-content label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
}

.modal-content input,
.modal-content select {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.modal-content input:focus,
.modal-content select:focus {
    outline: none;
    border-color: #2196F3;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons button {
    flex: 1;
}

/* TEACHING NOTE: Checkbox container */
.checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.checkbox-container input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

.checkbox-container label {
    margin: 0;
    font-weight: normal;
}

/* TEACHING NOTE: Receipt section (hidden by default) */
#receipt-section {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
    border-left: 4px solid #4CAF50;
}

/* =============================================
   RESPONSIVE DESIGN FOR PHONES
   ============================================= */

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .navbar h1 {
        font-size: 18px;
    }
    
    .user-info span {
        display: none;                  /* Hide "Hello, username" text on phones */
    }
    
    .add-section {
        flex-direction: column;         /* Stack buttons vertically */
    }
    
    .modal-content {
        padding: 20px;
    }
    
    .amount {
        font-size: 24px;
    }
    
    .transaction-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .transaction-amount {
        margin-top: 10px;
    }
}

/* =============================================
   TEACHING NOTE: CSS TIPS
   =============================================
   
   1. Colors can be written as:
      - Names: red, blue, green
      - Hex codes: #FF0000 (red)
      - RGB: rgb(255, 0, 0) (red)
      - RGBA: rgba(255, 0, 0, 0.5) (red with 50% transparency)
   
   2. Common units:
      - px (pixels): Fixed size
      - % (percent): Relative to parent
      - em/rem: Relative to font size
      - vh/vw: Relative to viewport (screen) height/width
   
   3. Box model:
      Every element has:
      - content (the actual content)
      - padding (space inside the border)
      - border (the edge)
      - margin (space outside the border)
   
   4. Display types:
      - block: Takes full width, starts on new line
      - inline: Takes only needed width, stays on same line
      - flex: Flexible box layout
      - grid: Grid layout
      - none: Hidden
   
   5. Position types:
      - static: Normal flow (default)
      - relative: Relative to normal position
      - absolute: Relative to nearest positioned parent
      - fixed: Relative to viewport (stays in place when scrolling)
   
   ============================================= */