/*
 * Theme-level styles for AnitaApartman application
 *
 * Vaadin Best Practices:
 * 1. Theme folder (themes/anitaapartman/) contains application-wide styles
 * 2. Use CSS custom properties (variables) for consistent theming
 * 3. Style Vaadin components using ::part() pseudo-elements
 * 4. Import view-specific styles separately
 * 5. Follow mobile-first responsive design approach
 */

@import url('./views/main-view.css');

/* ============================================
   THEME VARIABLES
   ============================================ */
:root {
    /* Breakpoints */
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;

    /* Brand colors */
    --brand-primary: #48aabc;
    --brand-shadow: #1b2b4126;
}

/* ============================================
   VAADIN COMPONENT CUSTOMIZATION
   Using ::part() for shadow DOM styling
   ============================================ */

/* Tabs - Mobile-first responsive */
vaadin-tab {
    font-size: 1rem;
    padding: 8px 12px;
}

@media (min-width: 768px) {
    vaadin-tab {
        font-size: 1.125rem;
        padding: 10px 16px;
    }
}

vaadin-tab[selected],
vaadin-tab[focused] {
    color: var(--brand-primary);
    text-shadow: 2px 2px 3px var(--brand-shadow);
}

/* Button customization */
vaadin-button::part(label) {
    color: var(--brand-primary);
}

vaadin-button[theme~="primary"]::part(label) {
    color: var(--lumo-base-color);
}

/* Text area - Contact form specific */
vaadin-text-area.contactmail::part(label) {
    font-size: 1.5625rem;
}

/* Grid - Admin view row styling */
vaadin-grid::part(grid-old) {
    color: darkgray;
}

vaadin-grid::part(grid-paid) {
    background-color: azure;
}

vaadin-grid::part(grid-confirmed) {
    background-color: lightyellow;
}

/* ============================================
   APPLICATION-WIDE UTILITY CLASSES
   ============================================ */

/* Gallery layout - Mobile-first grid */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 5px;
}

@media (min-width: 480px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 8px;
    }
}

@media (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding: 10px;
    }
}

/* Gallery thumbnails */
.thumbnail {
    width: 100%;
    max-width: 250px;
    cursor: pointer;
    transition: transform 0.2s;
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
    .thumbnail:hover {
        transform: scale(1.1);
        box-shadow: 0 0 10px 3px grey;
    }
}

/* Main layout classes */
.main-content {
    width: 100%;
    max-width: 99vw;
    flex-grow: 1;
    margin: 0 auto;
}

.layout-centered {
    align-self: center;
}

/* Header layout */
.main-header {
    display: flex;
    padding: 1vw;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Logo */
.main-logo {
    width: auto;
    height: 60px;
}

/* Tabs */
.main-tabs {
    overflow: auto;
}

/* Language selector layout */
.language-layout {
    width: auto;
    height: 20px;
    gap: 5px;
}

.language-layout vaadin-button {
    width: 20px;
    height: 20px;
    min-width: auto;
    padding: 0;
}

.language-layout img {
    width: 20px;
    height: 20px;
}

/* Hamburger menu */
.hamburger-menu-button {
    display: none;
}

/* Mobile menu dialog */
.mobile-menu-dialog {
    position: absolute;
    top: -166px;
    width: 60%;
    height: 68%;
}

/* Mobile menu items */
.mobile-menu-item {
    justify-content: flex-start;
    padding: 2rem;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATIONS
   ============================================ */

/* Tablet and below - Header reorganization */
@media (max-width: 980px) {

}

/* Mobile devices - Full responsive treatment */
@media (max-width: 767px) {
    .hamburger-menu-button {
        display: block;
        order: 1;
    }

    .main-logo {
        order: 2;
        height: 50px;
    }

    .main-header > vaadin-horizontal-layout {
        order: 3;
    }

    .main-tabs {
        display: none;
    }

    .main-header {
        gap: 5px;
    }

    /* Prevent horizontal overflow */
    body,
    html {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Text overflow prevention */
    p, div, span, h1, h2, h3, h4, h5, h6 {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

    /* Dialog responsiveness */
    vaadin-dialog-overlay {
        width: 95vw;
        max-width: 95vw;
    }

    /* Full-width buttons on mobile */
    vaadin-button {
        width: 100%;
    }

    /* Full-width text areas */
    vaadin-text-area {
        width: 100%;
    }

    /* Language buttons compact layout */
    .main-header vaadin-horizontal-layout:last-child {
        flex-direction: row;
        gap: 5px;
        min-width: auto;
        width: auto;
    }

    .main-header vaadin-horizontal-layout:last-child vaadin-button {
        min-width: 25px;
        padding: 2px;
    }

    .main-header vaadin-horizontal-layout:last-child vaadin-button img {
        width: 16px;
        height: 16px;
    }

    /* Global box-sizing */
    * {
        max-width: 100%;
        /*overflow-x: hidden;*/
        box-sizing: border-box;
    }
}