@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css");

/* Глобальна кастомізація */
:root {
    /* --pico-border-radius: 0; */
    /* Прибираємо закруглення для хардкорного мінімалізму */
    /* --pico-primary: #10b981; Приклад зміни головного кольору */

    /* Зменшуємо стандартні відступи Pico для мобільних екранів (Reduce default Pico spacing for mobile) */
    --pico-spacing: 0.75rem;
    --pico-block-spacing-horizontal: 0.75rem;
}

/* Запобігання блиманню елементів до ініціалізації Alpine.js */
[x-cloak] {
    display: none !important;
}

/* Десктопна обгортка (без обмежень по ширині) */
.desktop-app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Імітація екрана смартфона на ПК */
.mobile-app-wrapper {
    max-width: 480px;
    /* Типова ширина мобільного пристрою */
    margin: 0 auto;
    /* Центрування на ПК */
    min-height: 100vh;
    /* Видалено padding, оскільки <main class="container"> вже має відступи (Removed padding to avoid double spacing) */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    /* Візуальне відділення на великих екранах */
}

/* Глобальне прибирання зайвих бокових відступів для максимальної економії простору */
.container {
    max-width: 100% !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Примусове вертикальне меню на всю ширину */
.vertical-menu {
    margin-bottom: var(--pico-spacing);
}

.vertical-menu ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0 !important;
    /* Примусово перебиваємо nav ul:first-of-type */
    margin-right: 0 !important;
    /* Примусово перебиваємо nav ul:last-of-type */
    padding: 0;
    gap: 0.5rem;
    align-items: stretch;
    text-align: center;
}

.vertical-menu li {
    width: 100%;
    padding: 0;
    /* Прибираємо стандартний padding Pico для пунктів nav */
}

.vertical-menu li>a[role="button"],
.vertical-menu details,
.vertical-menu summary {
    width: 100%;
    margin-bottom: 0;
    /* Видаляємо дефолтні відступи Pico, залишаючи лише gap */
}

/* Робимо випадаюче меню поверх контенту (Overlay dropdown) */
.vertical-menu details {
    position: relative;
    /* Замикаємо абсолютне позиціонування всередині цього блоку */
}

.vertical-menu details ul {
    position: absolute;
    top: 100%;
    /* Відкриваємо рівно під кнопкою summary */
    left: 0;
    width: 100%;
    z-index: 100;
    /* Відображаємо поверх <main> */
    background-color: var(--pico-background-color);
    /* Зберігаємо тему Pico */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Додаємо тінь для об'єму */
    margin-top: 0.25rem;
    border-radius: var(--pico-border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

/* Форма (кнопка) разлогіну в `templates/partials/_menu.html.twig` */
.logout-form {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    color: red;
    cursor: pointer;
    text-decoration: underline
}

/* Утиліти для кнопок на всю ширину (Full-width button utilities) */
.w-100 {
    width: 100%;
}

/* Базові утиліти вирівнювання та відображення (Basic alignment and display utilities) */
.text-center {
    text-align: center;
}

.justify-center {
    justify-content: center;
}

.d-block {
    display: block;
}

.m-0 {
    margin: 0;
}

.flex-column-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
    width: 100%;
}

/* Візуальне виділення обраних днів (кастомний колір у стилі Pico.css) */
button.selected-day {
    --pico-background-color: #10b981;
    /* Колір успіху / виділення */
    --pico-border-color: #10b981;
    --pico-color: #ffffff;
    /* Колір тексту на кнопці */
}

/* Адаптивні стилі для сторінки профілю */
.profile-name {
    font-size: clamp(1.5rem, 6vw, 2rem);
    /* Масштабує текст залежно від ширини екрана */
    line-height: 1.2;
    overflow-wrap: break-word;
    /* Дозволяє безпечно переносити дуже довгі слова */
    hyphens: auto;
}

.profile-statuses {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: calc(var(--pico-spacing) * 0.5);
    margin-bottom: var(--pico-spacing);
}

.profile-statuses>div {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.4;
}

.profile-statuses .icon-label {
    flex-shrink: 0;
    display: inline-block;
    width: 1.5rem;
    text-align: center;
    cursor: help;
}

.profile-statuses .data-value {
    flex-grow: 1;
    word-break: break-word;
}

.status-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Компактна картка для списків та розкладів (Compact card for lists and schedules) */
.compact-card {
    padding: calc(var(--pico-spacing) * 0.75);
    margin-bottom: var(--pico-spacing);
    font-size: 1.1rem;
    /* Трохи збільшений шрифт для кращої читабельності на мобільному */
}

.compact-card header {
    padding-bottom: calc(var(--pico-spacing) * 0.5);
    margin-bottom: calc(var(--pico-spacing) * 0.5);
}

/* Універсальний компактний відступ (Universal compact margin bottom) */
.mb-spacing {
    margin-bottom: var(--pico-spacing);
}

.mb-spacing {
    margin-bottom: var(--pico-spacing);
}

/* --- Стилі для друку --- */
.print-only {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    /* Приховуємо весь UI додатка */
    header,
    nav,
    .vertical-menu,
    .no-print,
    [data-theme="dark"] {
        display: none !important;
    }

    /* Скидаємо обмеження мобільного контейнера та відступи */
    .mobile-app-wrapper,
    .desktop-app-wrapper,
    main.container,
    .container {
        max-width: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10pt !important;
        line-height: 1.2 !important;
    }

    .print-only {
        display: block;
    }

    /* Розрив сторінки після кожного блоку (крім останнього) */
    .print-page {
        page-break-after: always;
        page-break-inside: avoid;
        padding: 0;
        margin: 0;
    }

    .print-page:last-child {
        page-break-after: auto;
    }

    .print-date-section {
        page-break-inside: avoid;
        margin-bottom: 6px;
    }

    /* Стилізація рядків мікроданих */
    .print-date-header {
        border-bottom: 2px solid #000;
        margin-bottom: 2px;
        padding-bottom: 1px;
    }

    .print-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #ccc;
        padding: 2px 0;
        font-size: 10pt;
    }

    .print-employee-info {
        flex: 1;
    }

    .print-hours {
        white-space: nowrap;
        font-size: 10pt;
        margin-left: 10px;
        text-align: right;
    }

    h2.text-center {
        font-size: 12pt;
        margin-bottom: 8px;
        margin-top: 0;
    }
}