/* styles.css - Shared across all pages */
:root {
    /* Font sizes */
    --base-font-size: 16px;
    --heading-1-size: 1.8rem;
    --heading-2-size: 1.5rem;
    --heading-3-size: 1.3rem;
    --text-size: 1rem;
    --small-text: 0.875rem;
    
    /* Colors */
    --primary-color: #4CAF50;
    --secondary-color: #f5f5f5;
    --text-color: #333;
    --light-text: #777;
    --border-color: #e0e0e0;
}

/* Base styles */
* {
*     box-sizing: border-box;
*         margin: 0;
*             padding: 0;
*             }
*
*             body {
*                 font-family: Arial, sans-serif;
*                     font-size: var(--base-font-size);
*                         line-height: 1.6;
*                             color: var(--text-color);
*                                 background-color: #f9f9f9;
*                                     margin: 0;
*                                         padding: 0;
*                                         }
*
*                                         .container {
*                                             padding: 15px;
*                                                 max-width: 1200px;
*                                                     margin: 0 auto;
*                                                     }
*
*                                                     h1 {
*                                                         font-size: var(--heading-1-size);
*                                                             margin-bottom: 1rem;
*                                                                 color: #2c3e50;
*                                                                 }
*
*                                                                 h2 {
*                                                                     font-size: var(--heading-2-size);
*                                                                         margin: 1.5rem 0 1rem;
*                                                                             color: #34495e;
*                                                                             }
*
*                                                                             h3 {
*                                                                                 font-size: var(--heading-3-size);
*                                                                                     margin: 1rem 0;
*                                                                                         color: var(--primary-color);
*                                                                                         }
*
*/* Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: var(--text-size);
}

th, td {
    padding: 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

th {
    background-color: var(--secondary-color);
    font-weight: bold;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--text-size);
}

button,
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--text-size);
    text-decoration: none;
    text-align: center;
}

.btn-secondary {
    background-color: #6c757d;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    :root {
        --base-font-size: 18px;
        --heading-1-size: 2rem;
        --heading-2-size: 1.7rem;
        --heading-3-size: 1.4rem;
        --text-size: 1.1rem;
    }
    
    .container {
        padding: 10px;
    }
    
    th, td {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    :root {
        --base-font-size: 20px;
    }
    
    button,
    .btn {
        padding: 12px 15px;
    }
}