{% extends "payroll/base.html" %}
{% load static %}

{% block content %}

<style>
    /* HOME WALLPAPER */
    .wallpaper-container {
        position: fixed;
        top: 0;
        left: var(--sidebar-current-width);
        width: calc(100vw - var(--sidebar-current-width));
        height: 100vh;
        overflow: hidden;
        z-index: -1;

        transition:
            left .25s ease-in-out,
            width .25s ease-in-out;
    }

    /* SIDEBAR COLLAPSED */
    .main-content.expanded .wallpaper-container {
        left: var(--sidebar-collapsed-width);
        width: calc(100vw - var(--sidebar-collapsed-width));
    }

    /* WALLPAPER IMAGE */
    .wallpaper-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* MAIN CONTENT */
    .main-content {
        padding: 0 !important;
    }

    /* QUOTE */
    .quote-overlay {
        position: absolute;
        top: 30%;
        left: 5%;
        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
        background-color: rgba(0, 0, 0, .30);
        padding: 2rem;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        max-width: 650px;
    }

    .quote-text {
        font-size: 1.8rem;
        font-weight: 300;
        font-style: italic;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .company-name {
        font-size: 1.4rem;
        font-style: italic;
        opacity: .9;
        margin-top: 1rem;
    }

    /* MOBILE */
    @media (max-width: 768px) {
        .quote-overlay {
            left: 4%;
            right: 4%;
            max-width: none;
            padding: 1.5rem;
        }

        .quote-text {
            font-size: 1.4rem;
        }

        .company-name {
            font-size: 1.1rem;
        }
    }
</style>

<div class="wallpaper-container">
    <img
        src="{% static 'images/wallpaper.png' %}"
        alt="PetroGL Wallpaper"
        class="wallpaper-image"
    >
</div>

{% endblock %}