/* Laird Layout — responsive AppLayout styles */

/* ── Navbar ── */
.laird-layout .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
}

.laird-layout .navbar-brand-icon {
    color: var(--lumo-primary-color);
    font-size: 20px;
}

.laird-layout .navbar-brand-text {
    color: var(--lumo-primary-contrast-color);
}

/* ── Drawer ── */
.laird-layout [slot="drawer"] {
    background: var(--lumo-base-color);
    border-right: 1px solid var(--lumo-contrast-10pct);
}

/* Drawer header */
.laird-layout .drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

.laird-layout .drawer-header-icon {
    color: var(--lumo-primary-color);
    font-size: 24px;
}

.laird-layout .drawer-header-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--lumo-primary-contrast-color);
}

/* Navigation section */
.laird-layout .drawer-nav {
    padding: 8px 0;
}

.laird-layout .drawer-nav-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lumo-contrast-50pct);
}

/* Nav links */
.laird-layout .drawer-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 2px 8px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--lumo-body-text-color);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.laird-layout .drawer-nav-link:hover {
    background: var(--lumo-contrast-5pct);
}

.laird-layout .drawer-nav-link[highlight] {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-color);
    font-weight: 600;
}

.laird-layout .drawer-nav-link[highlight]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--lumo-primary-color);
}

.laird-layout .drawer-nav-link vaadin-icon {
    font-size: 18px;
    min-width: 20px;
}

/* Drawer footer */
.laird-layout .drawer-footer {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--lumo-contrast-10pct);
}

.laird-layout .drawer-footer-text {
    font-size: 12px;
    color: var(--lumo-contrast-50pct);
}

.big-text {
    font-weight: bold;
    font-size: xxx-large;
}


/* ── Responsive ── */
/* When drawer is closed (mobile), the brand shows in navbar */
@media (max-width: 800px) {
    .laird-layout .navbar-brand {
        font-size: 14px;
    }
}