/* --- DIYOMEDA TUTOR TRACKER: MASTER STYLESHEET --- */

/* 1. ROOT VARIABLES & RESET
-------------------------------------------------- */
:root {
    /* Brand Colors */
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    
    /* Neutrals */
    --light-gray: #f8f9fa;
    --medium-gray: #6c757d;
    --dark-gray: #343a40;
    --body-bg: #f4f7fc;
    
    /* Component Variables */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    --border-radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--body-bg);
    color: var(--dark-gray);
    line-height: 1.6;
    margin: 0;
    padding: 0; /* Removed global padding to allow full-width header */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer stays at bottom */
}

/* 2. LAYOUT & CONTAINERS
-------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px; /* Content padding */
    flex: 1; /* Pushes footer down */
}

body.centered-layout {
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Page Title Bar (Below Top Nav) */
.main-header {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 25px;
}
.main-header h1 {
    margin: 0;
    font-size: 1.6em;
    color: var(--dark-gray);
    flex-grow: 1;
}

.section-title { text-align: center; margin: 40px 0 25px 0; font-weight: 500; font-size: 1.5em; color: #495057; }
.section-divider { border: 0; height: 1px; background-color: #e9ecef; margin: 40px 0; }

/* 3. NAVIGATION (STICKY HEADER)
-------------------------------------------------- */
.top-nav {
    background: #ffffff;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky; /* Makes it sticky */
    top: 0;
    z-index: 1000;
}

.top-nav .brand {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links { display: flex; align-items: center; gap: 15px; }

.top-nav a:not(.brand) {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
}

.top-nav a:not(.brand):not(.logout-btn):hover {
    color: var(--primary-color);
    background-color: #f8f9fa;
}

.top-nav .user-info {
    font-size: 0.9em;
    color: #888;
    margin-right: 5px;
    font-weight: 600;
}

.nav-divider {
    border-left: 1px solid #eee;
    height: 24px;
    margin: 0 5px;
}

.logout-btn {
    color: var(--danger-color) !important;
    border: 1px solid var(--danger-color);
    padding: 6px 15px !important;
}
.logout-btn:hover {
    background-color: var(--danger-color) !important;
    color: #fff !important;
}

/* 4. FORMS & FILTERS
-------------------------------------------------- */
form label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.9em; }

/* Standard Inputs */
form select, form textarea, 
form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    border-radius: 5px; 
    border: 1px solid var(--card-border); 
    box-sizing: border-box; 
    font-size: 1em;
    background-color: #fff;
}

/* Submit Buttons */
form input[type="submit"] {
    display: inline-block;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s;
}
form input[type="submit"]:hover { background: var(--primary-hover); }

/* Filter Bars (Top of Lists) */
.filter-form { background-color: var(--card-bg); padding: 20px; border-radius: var(--border-radius); margin-bottom: 25px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.filter-form form { display: flex; flex-direction: column; gap: 15px; margin: 0; }
.filter-form label { font-weight: normal; }
.filter-form input[type="submit"] { background-color: var(--medium-gray); width: auto; margin-top: 0; }
.filter-form input[type="submit"]:hover { background-color: var(--dark-gray); }

/* Form Group Containers */
.form-section { padding: 25px; border: 1px solid #e7e7e7; border-radius: var(--border-radius); background-color: #fdfdfd; margin-bottom: 25px; }
.form-section h2 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; }

/* 5. BUTTONS & ACTION LINKS
-------------------------------------------------- */
.header-actions, .report-actions, .profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions-cell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.action-link, .dashboard-link, .cancel-link, .back-link, .delete-button, .action-button-creative, .report-actions button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 15px; color: #fff; text-decoration: none; border-radius: 5px; font-size: 0.9em; font-weight: bold; text-align: center; transition: all 0.2s; border: none; cursor: pointer;
}

/* Small Button Variant */
.action-link, .delete-button, .actions-cell form button { padding: 5px 10px; font-size: 13px; }

/* Hover Effects */
.action-link:hover, .dashboard-link:hover, .cancel-link:hover, .back-link:hover, .delete-button:hover, .report-actions button:hover:not(:disabled) { 
    opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

/* Button Colors */
.dashboard-link { background-color: var(--success-color); }
.action-link.edit, .actions-cell form button.edit { background-color: var(--warning-color); color: #333; }
.action-link.delete, .delete-button, .actions-cell form button.delete { background-color: var(--danger-color); }
.action-link.invoice { background-color: var(--success-color); }
.action-link.addsession { background-color: var(--info-color); }
.action-link.assign { background-color: var(--primary-color); }
a.secondary, .cancel-link, .report-actions button { background-color: var(--medium-gray); }

/* 6. DATA TABLES
-------------------------------------------------- */
.table-wrapper { overflow-x: auto; background: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--card-shadow); }
table { width: 100%; border-collapse: collapse; background-color: var(--card-bg); }
table th, table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--card-border); }
table th { background-color: var(--light-gray); color: var(--dark-gray); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
table tbody tr:hover { background-color: #fcfcfd; }
table tbody tr:last-child td { border-bottom: none; }

.payment-cell { text-align: center; min-width: 100px; }
.payment-cell .status { display: block; margin-bottom: 4px; }
.actions-cell form, .payment-cell form { margin: 0; }

/* 7. ALERTS & NOTIFICATIONS
-------------------------------------------------- */
.success-message, .error-message { padding: 15px 20px; border-radius: var(--border-radius); margin-bottom: 20px; }
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Modern "Beautiful" Success Message */
.success-message.beautiful {
    display: flex; align-items: center; 
    background-color: #ffffff; 
    border-left: 5px solid var(--success-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    color: #0f5132; 
    padding: 1rem 1.5rem;
}
.success-message.beautiful .icon { font-size: 1.8em; margin-right: 15px; }
.success-message.beautiful .text h4 { margin: 0 0 5px 0; font-size: 1.1em; color: #0a3622; }
.success-message.beautiful .text p { margin: 0; font-size: 1em; }

/* 8. CARDS & WIDGETS
-------------------------------------------------- */
.summary-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }

/* Standard Card */
.summary-card { 
    background-color: var(--card-bg); 
    border: 1px solid var(--card-border); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: var(--card-shadow); 
    display: flex; flex-direction: column; 
    transition: transform 0.2s;
}
.summary-card:hover { transform: translateY(-3px); }
.summary-card h2 { font-size: 1.1em; margin: 0 0 15px 0; border-bottom: 1px solid #e9ecef; padding-bottom: 10px; font-weight: 600; color: #495057; }
.summary-card .card-content { flex-grow: 1; }

/* Dashboard Menu Links (Icons inside cards) */
.menu-link { display: flex; align-items: center; padding: 12px 10px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.menu-link:last-of-type { border-bottom: none; }
.menu-link:hover { background-color: #f8f9fa; color: var(--primary-color); }
.menu-link .icon { margin-right: 12px; width: 25px; text-align: center; font-size: 1.1em; }
.menu-link .text { font-weight: 500; }

/* KPI Cards (For Reports) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.kpi-card { background: #fff; padding: 20px; border-radius: 8px; border-left: 5px solid var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.kpi-card h3 { margin: 0 0 5px 0; font-size: 0.9em; color: #666; text-transform: uppercase; }
.kpi-card .value { font-size: 1.8em; font-weight: 700; color: #333; }
.kpi-card .sub { font-size: 0.85em; color: #888; }
.kpi-card.green { border-left-color: var(--success-color); }
.kpi-card.purple { border-left-color: #6f42c1; }
.kpi-card.orange { border-left-color: var(--warning-color); }

/* 9. FINANCIAL SUMMARIES
-------------------------------------------------- */
.financial-breakdown { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }

.currency-group {
    background-color: #fdfdfd; border: 1px solid var(--card-border); border-radius: 8px; padding: 12px 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04); transition: transform 0.2s;
}
.currency-group:hover { transform: translateY(-2px); background-color: #fcfcfc; }

.currency-header { font-weight: 600; color: var(--primary-color); margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.currency-group div { display: flex; justify-content: space-between; font-size: 0.95em; margin-bottom: 3px; }
.currency-group div span { color: var(--medium-gray); }
.currency-group strong.paid { color: var(--success-color); }
.currency-group strong.unpaid { color: var(--danger-color); }

/* 10. LISTS & COMPARISONS
-------------------------------------------------- */
.summary-list { list-style: none; padding: 0; margin: 0; }
.summary-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.summary-list li:last-child { border-bottom: none; }
.summary-list li span { font-weight: 500; color: var(--dark-gray); }
.summary-list li strong { font-weight: 600; color: var(--primary-color); }

/* Comparison Pills (Up/Down arrows) */
.comparison-item { display: flex; justify-content: space-between; align-items: center; background: #f9fafc; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--card-border); margin-bottom: 10px; font-size: 0.95em; }
.comparison-item span.result { font-weight: 600; font-size: 0.9em; padding: 4px 10px 4px 24px; border-radius: 12px; position: relative; display: inline-block; min-width: 70px; text-align: right; }

.comparison-item span.result.percentage-increase { background-color: rgba(25, 135, 84, 0.15); color: var(--success-color); }
.comparison-item span.result.percentage-increase::before { content: "▲"; color: var(--success-color); position: absolute; left: 8px; font-size: 0.8em; }

.comparison-item span.result.percentage-decrease { background-color: rgba(220, 53, 69, 0.15); color: var(--danger-color); }
.comparison-item span.result.percentage-decrease::before { content: "▼"; color: var(--danger-color); position: absolute; left: 8px; font-size: 0.8em; }

.comparison-item span.result.no-data { background-color: #e9ecef; color: var(--medium-gray); padding-left: 10px; }

/* 11. PROFILE STYLES
-------------------------------------------------- */
.profile-header { background-color: var(--card-bg); border: 1px solid var(--card-border); padding: 25px; border-radius: var(--border-radius); margin-bottom: 25px; box-shadow: var(--card-shadow); }
.profile-name { font-size: 1.8em; font-weight: bold; color: var(--dark-gray); margin-bottom: 15px; border-bottom: 1px solid var(--card-border); padding-bottom: 15px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--card-border); }
.profile-details { display: grid; grid-template-columns: 1fr; gap: 15px; }

/* Status Badges */
.status-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.8em; font-weight: bold; color: #fff; text-transform: uppercase; white-space: nowrap; }
.status-paid, .status-active { background-color: var(--success-color); }
.status-sent { background-color: var(--info-color); }
.status-overdue { background-color: var(--danger-color); }
.status-created, .status-finished { background-color: var(--medium-gray); }

/* 12. FOOTER
-------------------------------------------------- */
.main-footer { text-align: center; padding: 30px 20px; margin-top: auto; border-top: 1px solid #eee; color: #6c757d; font-size: 0.9em; background-color: #f8f9fa; }
.version-badge { background-color: #e9ecef; color: #495057; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; margin-left: 5px; font-weight: bold; }
.footer-links a { color: var(--primary-color); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* 13. RESPONSIVE QUERIES
-------------------------------------------------- */
@media (min-width: 768px) {
    .filter-form form { flex-direction: row; flex-wrap: wrap; }
    .filter-form select, .filter-form input[type="date"] { width: auto; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .totals-grid { grid-template-columns: 1fr 2fr; }
    .profile-details { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
    .summary-grid.high-level { grid-template-columns: repeat(3, 1fr); }
    .summary-grid { grid-template-columns: repeat(3, 1fr); }
    .summary-grid .teacher-breakdown-card { grid-column: 1 / -1; }
    .profile-details { grid-template-columns: auto 1fr; }
}

@media (max-width: 768px) {
    .top-nav { flex-direction: column; gap: 15px; padding: 15px; position: static; /* Often better to unstick on small mobile screens */ }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .nav-divider { display: none; }
    .actions-cell { justify-content: flex-start; }
}

/* 14. PRINT STYLES
-------------------------------------------------- */
@media print {
    body, .container { box-shadow: none; margin: 0; padding: 0; width: 100%; max-width: 100%; background: #fff; }
    .main-header, .filter-form, .top-nav, .report-actions, .dashboard-link, .back-link, .profile-actions, .main-footer { display: none !important; }
    .report-container, .invoice-box { border: none; box-shadow: none; margin: 0; padding: 0; }
    .report-content { padding: 0; }
}