@import "tailwindcss";

*{
    font-family: 'Gilroy';
    scroll-behavior: smooth;
}
.container{
    padding: 0px 20px ;
}

/* landing page */
#home{
    background-image: url('../images/landingPage/png/hero_bg.png');
}
#feature{
    background-image: url('../images/landingPage/png/benefit_bg.png');
}
#how-work{
    background-image: url('../images/landingPage/png/work_bg.png');
}
#dream-resort{
    background-image: url('../images/landingPage/png/dream-resort_bg.png');
}
#benefit{
    background-image: url('../images/landingPage/png/benefit_bg.png');
}
#footer{
    background-image: url('../images/landingPage/png/footer_bg.png');
}

/* dashboard */
#dashboard-hero{
    background-image: url('../images/dashboard/png/dashboard_bg.png');
}

  /* base tab */
    .tab {
        transition: 0.2s;
    }

    /* active state using :has() */
    body:has(#all-staff:target) .tabs a[href="#all-staff"],
    body:has(#odd-jobs:target) .tabs a[href="#odd-jobs"],
    body:has(#activities:target) .tabs a[href="#activities"],
    body:has(#my-resort:target) .tabs a[href="#my-resort"] {
        background: white;
        color: black;
    }

    /* highlight first tab on first load (no target) */
    body:not(:has(:target)) .tabs a[href="#all-staff"] {
        background: white;
        color: black;
    }


/* Show overlay when ANY popup is opened */
footer:has(#resorts:checked) #footerOverlay,
footer:has(#inventory:checked) #footerOverlay,
footer:has(#workers:checked) #footerOverlay,
footer:has(#guild:checked) #footerOverlay {
    display: block;
}

/* Make sure overlay does NOT cover buttons */
#footerOverlay {
    pointer-events: auto;
}
/* ===========================
   Globale glas-UI componenten
   =========================== */

/* Grote panelen / hoofdkaarten */
.glass-panel {
    border-radius: 30px;
    border: 1px solid rgba(147, 147, 147, 0.7);      /* #939393-ish */
    background: rgba(0, 28, 46, 0.55);                /* donkerblauw glas */
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
}
[x-cloak] {
    display: none !important;
}

/* Kleine kaarten / stats / vakjes binnenin */
.glass-inner {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 72, 99, 0.35);                /* iets lichter glas */
    backdrop-filter: blur(14px);
}

/* Hele subtiele glas-look, bv. info/uitleg blokjes */
.glass-soft {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

/* Optioneel: alle oude Laravel-kaarten automatisch glas maken */
.bg-white.shadow-sm.sm\:rounded-lg {
    background: rgba(0, 28, 46, 0.55) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(147,147,147,0.7) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(18px);
}
/* Grote panelen / hoofdkaarten */
.glass-panel {
    border-radius: 40px; /* was 30px */
    border: 1px solid rgba(147, 147, 147, 0.7);
    background: rgba(0, 28, 46, 0.55);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
}

/* Kleine kaarten / stats / vakjes binnenin */
.glass-inner {
    border-radius: 28px; /* was 20px */
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 72, 99, 0.35);
    backdrop-filter: blur(14px);
}

/* Hele subtiele glas-look, bv. info/uitleg blokjes */
.glass-soft {
    border-radius: 22px; /* was 20px */
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}