/* === Import czcionek z Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* === Zmienne CSS z Twojej palety kolorów === */
:root {
    --color-sell-light-mint: #B4FFE1;
    --color-sell-mint: #59FFBD;
    --color-sell-turquoise: #0BD3B8;
    --color-sell-dark-turquoise: #0A9BB8;

    --color-buy-cyan: #00E8FF;
    --color-buy-light-blue: #1BE8E8;
    --color-buy-blue: #00D4E8;

    --color-text-dark: #111111;
    --color-text-gray: #484848;
    --color-text-link: #048292;
    --color-white: #FFFFFF;
    --color-light-gray-bg: #F3F3F3;

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

/* === Style globalne === */
body {
    margin: 0;
    font-family: var(--font-secondary);
    color: var(--color-text-gray);
    background-color: var(--color-white);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === Nagłówek (Header) === */
.top-header {
    background: linear-gradient(to right, #B4FFE1, #00E8FF);
    padding: 15px 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.top-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-text-dark);
    text-decoration: none;
}

.main-nav {
    display: flex;
}

.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-link {
    font-family: var(--font-primary);
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: #FF007F;
}

/* === Sekcja "Hero" === */
.hero-section {
    text-align: center;
    padding: 80px 0;
}

.hero-section h1 {
    font-family: var(--font-primary);
    font-size: 42px;
    color: var(--color-text-dark);
    margin-bottom: 40px;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.btn-action {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    border: 3px solid;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    display: inline-block;
    min-width: 160px;
    text-align: center;
}

.btn-action.btn-sell {
    border-color: var(--color-sell-mint);
}

.btn-action.btn-sell:hover {
    background-color: var(--color-sell-light-mint);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-action.btn-outline {
    border-color: var(--color-buy-cyan);
}

.btn-action.btn-outline:hover {
    background-color: var(--color-buy-light-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* === Sekcja z treścią === */
.content-section {
    padding: 60px 0;
    text-align: center;
    background-color: var(--color-light-gray-bg);
}

.content-section h2 {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 32px;
    color: var(--color-text-dark);
}

.content-section p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 700px;
    margin: 20px auto 0;
}

/* Transaction Cards */
.transaction-card {
    background: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
    font-family: var(--font-secondary);
}

.transaction-card.buy-theme {
    border-color: var(--color-buy-blue);
}

.transaction-card.buy-theme:hover {
    border-color: var(--color-buy-cyan);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 148, 255, 0.15);
    background: rgba(0, 232, 255, 0.05);
}

.transaction-card.buy-theme.selected {
    border-color: var(--color-buy-cyan);
    background: rgba(0, 232, 255, 0.1);
}

.transaction-card.sell-theme {
    border-color: var(--color-sell-turquoise);
}

.transaction-card.sell-theme:hover {
    border-color: var(--color-sell-mint);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(11, 211, 184, 0.15);
    background: rgba(180, 255, 225, 0.1);
}

.transaction-card.sell-theme.selected {
    border-color: var(--color-sell-mint);
    background: rgba(180, 255, 225, 0.15);
}

.transaction-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.transaction-card.buy-theme .transaction-icon {
    color: var(--color-buy-blue);
}

.transaction-card.sell-theme .transaction-icon {
    color: var(--color-sell-turquoise);
}

.transaction-card h4 {
    color: var(--color-text-dark);
    font-weight: 600;
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

.transaction-card p {
    color: var(--color-text-gray);
    margin-bottom: 0;
}

/* === Style dla Formularzy === */
.form-container {
    max-width: 450px;
    margin: 60px auto;
    padding: 40px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-container h1, .form-container h2 {
    text-align: center;
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    position: static;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.form-control:focus {
    border-color: var(--color-sell-dark-turquoise);
    outline: none;
}

/* === Buttons === */
.btn-primary {
    width: 100%;
    border-color: var(--color-sell-dark-turquoise);
    background-color: var(--color-sell-dark-turquoise);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    border-color: var(--color-sell-turquoise);
    background-color: var(--color-sell-turquoise);
    transform: translateY(-1px);
}

.btn-primary.buy-theme {
    background-color: var(--color-buy-blue);
    border-color: var(--color-buy-blue);
}

.btn-primary.buy-theme:hover {
    background-color: var(--color-buy-cyan);
    border-color: var(--color-buy-cyan);
}

.btn-small {
    padding: 10px 24px;
    font-size: 16px;
    border-radius: 30px;
    background-color: var(--color-sell-dark-turquoise);
    color: var(--color-white);
    text-decoration: none;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-small:hover {
    background-color: #088A9E;
}

/* === Style dla Panelu Admina === */
.admin-container {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
    font-family: var(--font-secondary);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.admin-header h1, .admin-header h2 {
    margin: 0;
    font-family: var(--font-primary);
}

.table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin: 20px 0;
}

.admin-table, .table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.admin-table th, .admin-table td,
.table th, .table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.admin-table th, .table th {
    background-color: #f8f8f8;
    font-family: var(--font-primary);
    font-weight: 700;
}

.admin-table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

.admin-table tbody tr:hover,
.table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Cards */
.card {
    background: white;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    padding: 20px;
    font-weight: 600;
    color: #333;
}

.card-body {
    padding: 20px;
}

/* Alerts */
.alert {
    border: none;
    border-radius: var(--border-radius);
    padding: 15px 20px;
    margin: 20px 0;
    font-weight: 500;
}

.alert-success {
    background: #f1f8e9;
    color: #33691e;
    border-left: 4px solid var(--success-color);
}

.alert-danger {
    background: #ffebee;
    color: #c62828;
    border-left: 4px solid var(--danger-color);
}

.alert-info {
    background: #e3f2fd;
    color: #1565c0;
    border-left: 4px solid var(--info-color);
}

.alert-warning {
    background: #fff8e1;
    color: #ef6c00;
    border-left: 4px solid var(--warning-color);
}

/* Page Headers */
.page-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.page-header h1, .page-header h2 {
    color: #333;
    font-weight: 600;
    margin: 0;
}

/* Footer */
footer {
    background: #333;
    color: #ccc;
    padding: 20px 0;
    text-align: center;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    bottom: auto;
}

footer p {
    margin: 0;
    font-size: 14px;
}

/* === Navigation Enhancements === */
.register-nav-link {
    background: linear-gradient(135deg, var(--color-sell-mint), var(--color-sell-turquoise)) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease !important;
}

.register-nav-link:hover {
    background: linear-gradient(135deg, var(--color-sell-turquoise), var(--color-sell-dark-turquoise)) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

/* Primary custom button */
.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--color-buy-light-blue), var(--color-buy-blue));
    color: white;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
}

.btn-primary-custom:hover {
    background: linear-gradient(135deg, var(--color-buy-blue), var(--color-buy-cyan));
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 148, 255, 0.3);
    text-decoration: none;
}

/* === Login Styles === */
.login-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-links {
    text-align: center;
    margin-top: 20px;
}

.login-links a {
    color: var(--color-text-link);
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.form-error {
    color: #D8000C;
    background-color: #FFD2D2;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.form-success {
    color: #4F8A10;
    background-color: #DFF2BF;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* === Admin Action Buttons === */
.btn-action {
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 5px;
}

.btn-edit {
    background-color: var(--color-buy-blue);
    color: white;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
}

.btn-edit:hover,
.btn-delete:hover {
    opacity: 0.85;
}

.btn-link {
    text-decoration: none;
    color: var(--color-buy-blue);
}

.btn-group-sm .btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* === Mobile Responsive === */
/* === Style dla Hamburgera === */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger-btn span {
    width: 30px;
    height: 3px;
    background-color: var(--color-text-link);
    border-radius: 5px;
    transition: all 0.3s linear;
}

.hamburger-btn.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 768px) {
    .hamburger-btn {
        display: flex !important;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 65px;
        right: 15px;
        width: 250px;
        background: var(--color-white);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        padding: 15px 0;
        flex-direction: column;
        z-index: 1000;
    }

    .main-nav.nav-open {
        display: flex;
    }

    .main-nav ul {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .main-nav li {
        padding: 10px 0;
    }

    .main-nav a {
        font-size: 18px;
        padding: 10px;
        display: block;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-action {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .hero-section h1 {
        font-size: 32px;
    }
    
    .form-container {
        padding: 20px;
        margin: 20px 15px;
    }
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utility Classes */
.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.p-3 { padding: 1rem !important; }

/* Features Section */
.features-section {
    background: white;
    border-top: 1px solid #e9ecef;
}

.feature-item {
    padding: 2rem 1rem;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;# thoughts
Looking at the uploaded file, I need to create a complete real estate transaction management system in pure PHP with the following key components:

1. An admin panel for configuring transaction stages and tasks
2. A user interface for end-users to progress through transaction stages
3. Database models for stages, tasks, transaction types, and user progress
4. Custom routing system
5. Conditional task logic based on previous responses
6. Clean, professional UI suitable for real estate professionals

The system follows an MVC architecture with custom routing, and needs to support:
- CRUD operations for stages and tasks
- Conditional task display logic
- HTML/PHP flexibility for custom forms
- Progress tracking
- Contextual help bubbles

I'll implement the complete directory structure as described in the requirements, focusing on the core functionality without external frameworks.

# useful_guidelines_from_blueprints


# directory_structure
```json
[
    {"path": "config.php", "status": "new"},
    {"path": "index.php", "status": "new"},
    {"path": "database.sql", "status": "new"},
    {"path": "src/Core/Router.php", "status": "new"},
    {"path": "src/Core/Database.php", "status": "new"},
    {"path": "src/Controllers/HomeController.php", "status": "new"},
    {"path": "src/Controllers/AuthController.php", "status": "new"},
    {"path": "src/Controllers/UserController.php", "status": "new"},
    {"path": "src/Controllers/TransactionController.php", "status": "new"},
    {"path": "src/Controllers/Admin/StageController.php", "status": "new"},
    {"path": "src/Controllers/Admin/TaskController.php", "status": "new"},
    {"path": "src/Controllers/Admin/TransactionTypeController.php", "status": "new"},
    {"path": "src/Models/Stage.php", "status": "new"},
    {"path": "src/Models/Task.php", "status": "new"},
    {"path": "src/Models/TransactionType.php", "status": "new"},
    {"path": "src/Models/AdviceBubble.php", "status": "new"},
    {"path": "src/Models/UserProgress.php", "status": "new"},
    {"path": "src/Views/layout.php", "status": "new"},
    {"path": "src/Views/home/index.php", "status": "new"},
    {"path": "src/Views/auth/login.php", "status": "new"},
    {"path": "src/Views/transaction/start.php", "status": "new"},
    {"path": "src/Views/transaction/stage.php", "status": "new"},
    {"path": "src/Views/transaction/complete.php", "status": "new"},
    {"path": "src/Views/admin/dashboard.php", "status": "new"},
    {"path": "src/Views/admin/stages/index.php", "status": "new"},
    {"path": "src/Views/admin/stages/create.php", "status": "new"},
    {"path": "src/Views/admin/stages/edit.php", "status": "new"},
    {"path": "src/Views/admin/tasks/index.php", "status": "new"},
    {"path": "src/Views/admin/tasks/create.php", "status": "new"},
    {"path": "src/Views/admin/tasks/edit.php", "status": "new"},
    {"path": "src/Views/admin/transaction_types/index.php", "status": "new"},
    {"path": "src/Views/admin/transaction_types/create.php", "status": "new"},
    {"path": "src/Views/admin/transaction_types/edit.php", "status": "new"},
    {"path": "public/css/style.css", "status": "new"},
    {"path": "public/js/script.js", "status": "new"}
]


/* Management Section Styles */
.management-section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.management-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.management-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    text-decoration: none;
    color: inherit;
}

.users-card:hover {
    border-color: #3b82f6;
}

.management-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.management-card .card-description {
    color: #64748b;
    margin: 0;
    font-size: 0.875rem;
}

.transactions-section {
    margin-top: 3rem;
}