/* style.css - DEN ENDELIGE SAMLEDE VERSION (MED FIXET LANDSKABS-MENU) */

/* ================= CSS VARIABLER ================= */
:root {
    --bg-dark-main: #121212; /* Den allerbageste baggrund (stadig mørk) */
    
    /* --- NYE LYSERE GRÅ FARVER --- */
    --bg-dark-secondary: #2A2A2A; /* Sidebar og kort (Lysnet fra #1E1E1E) */
    --bg-dark-tertiary: #3D3D3D; /* Inputfelter og indre dele (Lysnet fra #2C2C2C) */
    --bg-dark-input: #3D3D3D;
    /* ----------------------------- */

    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;

    /* Lysegrøn accent farve */
    --accent-color: #90EE90;
    --accent-hover: #7BC97B;
    --accent-disabled: #3E663E;
    
    --sidebar-width: 260px;
    --border-radius-card: 16px;
    --border-radius-small: 8px;
    --border-radius-input: 12px;
    --success-green: #2ecc71;
    --error-red: #e74c3c;
}

/* ================= GLOBAL RESET ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- BODY OG BAGGRUND MED SLØR --- */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg-dark-main); /* Fallback farve */
    position: relative; /* Nødvendig for at placere baggrundslaget */
    overflow-x: hidden; /* Sikrer at sløringen ikke laver scrollbar */
    /* Fra din originale CSS (sikrer korrekt rendering) */
    display: block !important;
    height: 100% !important;
    width: 100% !important;
}

/* Dette 'pseudo-element' skaber den slørede baggrund */
body::before {
    content: "";
    position: fixed; /* Gør at den bliver stående når man scroller */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* Lægger den BAGVED alt indhold */

    /* Baggrundsbillede og overlay (0.25 gør det lyst) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('images/back.png');
    background-size: cover;
    background-position: center;
    
    /* SLØR EFFEKTEN */
    filter: blur(8px); 
    
    /* Skalerer lidt op for at skjule de slørede kanter */
    transform: scale(1.05);
}
/* ---------------------------------- */


ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* ================= LAYOUT ================= */
.dashboard-container { display: flex; min-height: 100vh; }

/* 🔴 VIGTIGT: PC REGLEN - Kræver nu at skærmen OGSÅ er høj (over 600px) 
   Dette forhindrer liggende mobiler i at bruge PC-layout! 🔴 */
@media (min-width: 951px) and (min-height: 600px) {
    .sidebar {
        width: var(--sidebar-width); 
        /* Bruger nu den nye, lysere grå */
        background-color: var(--bg-dark-secondary);
        padding: 2rem; 
        display: flex; 
        flex-direction: column;
        border-right: 1px solid rgba(255,255,255,0.05); 
        position: sticky; 
        top: 0; 
        height: 100vh;
        z-index: 100;
    }
    .nav-menu { flex-grow: 1; }
    
    /* PC Footer */
    footer {
        position: fixed !important;
        bottom: 0px !important; 
        left: 260px !important; 
        width: calc(100% - 260px) !important;
        z-index: 85 !important; 
        background-color: rgba(18, 18, 18, 0.95) !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        text-align: center;
        color: #fff;
    }
    
    /* PC Reklame i bunden */
    .fixed-bottom-ad {
        position: fixed;
        bottom: 40px; 
        left: 260px; 
        right: 0;    
        height: 90px;
        background-color: transparent; 
        border: none;
        z-index: 90; 
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none; 
    }
    .fixed-bottom-ad > * { pointer-events: auto; }
}

.brand { display: flex; align-items: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 3rem; color: var(--accent-color); }
.logo-icon { width: 32px; height: 32px; background: var(--accent-color); color: var(--bg-dark-main); display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 10px; }

.nav-item { margin-bottom: 0.5rem; }
/* ÆNDRET: Hvid tekst i sidebar */
.nav-item a { display: block; padding: 0.8rem 1rem; border-radius: var(--border-radius-small); color: #ffffff; transition: all 0.3s ease; font-weight: 500; }
.nav-item a:hover { background-color: var(--bg-dark-tertiary); color: var(--text-primary); }
.nav-item.active a { background-color: var(--accent-color); color: var(--bg-dark-main); box-shadow: 0 4px 12px rgba(192, 255, 0, 0.2); }
.user-profile { display: flex; align-items: center; padding-top: 1rem; border-top: 1px solid var(--bg-dark-tertiary); margin-top: auto;}

/* ================= INDHOLD (FÆLLES) ================= */
.main-content {
    flex: 1;
    display: block; 
    padding-top: 2rem;
    padding-bottom: 110px; 
}
@media (min-width: 951px) {
    .main-content { padding-right: 180px; padding-left: 180px; }
}

.content-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; }

.fixed-right-ad {
    position: fixed; right: 0; top: 100px; width: 160px; height: 600px; 
    z-index: 90; display: flex; justify-content: center;
}

/* ================= FORMULARER & KORT ================= */
.setup-container {
    max-width: 800px; width: 100%; margin: 4rem auto !important; 
    /* Bruger nu den nye, lysere grå */
    background-color: var(--bg-dark-secondary); padding: 2.5rem;
    border-radius: var(--border-radius-card); 
    /* Diskret lys kant */
    border: 1px solid rgba(255, 255, 255, 0.1); 
}
.upload-section {
    /* Bruger nu den nye, lysere grå */
    background: var(--bg-dark-secondary); padding: 2rem;
    border-radius: var(--border-radius-card); margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border: 1px solid rgba(255,255,255,0.1);
}
.section-title {
    font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--accent-color);
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;
}
.modern-select, .modern-input {
    width: 100%; padding: 1rem; background-color: var(--bg-dark-input);
    color: var(--text-primary); border: 2px solid transparent; border-radius: var(--border-radius-input); font-size: 1rem;
}
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tag-checkbox { display: none; }
.tag-label {
    display: inline-block; padding: 0.6rem 1.2rem; background-color: var(--bg-dark-input);
    color: var(--text-secondary); border-radius: 2rem; cursor: pointer; font-weight: 500; transition: 0.2s; border: 2px solid transparent;
}
.tag-checkbox:checked + .tag-label { background-color: rgba(192, 255, 0, 0.15); color: var(--accent-color); border-color: var(--accent-color); }

.accent-btn, .submit-btn {
    display: inline-block; background-color: var(--accent-color); color: var(--bg-dark-main);
    padding: 0.8rem 1.5rem; border-radius: var(--border-radius-small); font-weight: 600; cursor: pointer; transition: 0.3s; border: none; width: auto;
}

.cards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; margin: 0 auto 4rem auto; width: 100%; max-width: 1200px; justify-content: center;
}
.recipe-card {
    /* Bruger nu den nye, lysere grå */
    background-color: var(--bg-dark-secondary); border-radius: var(--border-radius-card);
    overflow: hidden; transition: transform 0.3s ease; 
    border: 2px solid transparent;
    display: flex; flex-direction: column; height: 100%; min-height: 380px; position: relative;
}
.recipe-card:hover { 
    transform: translateY(-5px); 
    /* Grøn kant ved hover */
    border-color: var(--accent-color);
}
.card-link-wrapper { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.recipe-card-image-wrapper { height: 200px; width: 100%; overflow: hidden; background-color: var(--bg-dark-tertiary); position: relative; }
.card-image-real { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; display: block; }
.recipe-card:hover .card-image-real { transform: scale(1.05); }
.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-content h3 { font-size: 1.2rem; margin-bottom: auto; line-height: 1.3; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.9rem; margin-top: 1rem; }
.time-tag { color: var(--accent-color); font-weight: 600; }
.type-tag { color: var(--text-secondary); background: var(--bg-dark-main); padding: 2px 8px; border-radius: 4px;}
.allergy-tag { font-size: 0.75rem; color: #ff6b6b; border: 1px solid #ff6b6b; padding: 2px 6px; border-radius: 4px; }
.empty-slot-card {
    background: rgba(255,255,255,0.02); border: 2px dashed rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: 10px; color: var(--text-secondary); min-height: 380px;
}
.replace-form { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 50 !important; }
.replace-item-btn {
    background-color: #2ecc71 !important; color: #ffffff !important;
    border: none !important; border-radius: 50px !important; height: 36px !important; 
    padding: 0 15px !important; width: auto !important; display: flex !important; align-items: center !important; gap: 8px;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s ease;
}
.replace-item-btn:hover { background-color: #f1c40f !important; transform: scale(1.02); }
.recipe-hero { width: 100%; height: 350px; position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 2rem; }
.recipe-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= UPLOAD UI (RETTET LAYOUT) ================= */
.ui-autocomplete {
    max-height: 200px; overflow-y: auto; overflow-x: hidden;
    background: var(--bg-dark-input); border: 1px solid var(--bg-dark-tertiary);
    color: var(--text-primary); z-index: 1000; border-radius: var(--border-radius-small);
}
.ui-menu-item-wrapper { padding: 10px; border-bottom: 1px solid var(--bg-dark-tertiary); }
.ui-state-active { background: var(--accent-color) !important; color: var(--bg-dark-main) !important; border: none; }

/* --- HER ER DEN VIGTIGE RETTELSE FOR INGREDIENSER --- */
/* Containeren for én ingrediens-linje */
.ingredient-row {
    background: rgba(255,255,255,0.03);
    padding: 15px; 
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    /* Tillad at indholdet wrapper til næste linje */
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Wrapperen til selve søgefeltet (Ingrediensen) */
.food-search-wrapper {
    position: relative;
    /* Tving den til at fylde 100% af bredden */
    width: 100%;
    flex-basis: 100%;
}

/* Style de felter, der lander på linje 2 (Mængde og Enhed) */
.ingredient-row > .modern-input,
.ingredient-row > .modern-select {
    /* Få dem til at dele pladsen ligeligt på den nye linje */
    flex: 1;
    /* Sæt en minimumsbredde */
    min-width: 130px;
}
/* ---------------------------------------------------- */

.search-icon { position: absolute; right: 10px; top: 12px; color: #888; pointer-events: none;}
.valid-selection { border-color: var(--success-green) !important; background-color: rgba(46, 204, 113, 0.1) !important; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; }
.modal-box { background: #1f1f1f; border: 1px solid #333; padding: 40px; border-radius: 12px; text-align: center; max-width: 500px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #fff; }
.modal-btn { background: transparent; border: 2px solid var(--success-green); color: var(--success-green); padding: 12px 30px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; font-weight: bold; }
.modal-btn:hover { background: var(--success-green); color: #1f1f1f; }


/* ==========================================================================
   MOBIL DESIGN (Alt under 950px bredde)
   ========================================================================== */
@media screen and (max-width: 950px) {
    .main-content { padding-right: 1.5rem !important; padding-left: 1.5rem !important; margin-left: 0 !important; padding-bottom: 200px !important; }
    .fixed-right-ad, .sidebar .brand, .sidebar .logo-icon, .sidebar .user-profile { display: none !important; }
    .cards-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .recipe-card { width: 100% !important; margin: 0 !important; }

    /* MENU I BUNDEN (Fælles for mobil) */
    aside.sidebar {
        position: fixed !important; bottom: 0; left: 0; width: 100%; 
        /* Opdateret til ny lysere grå */
        background: var(--bg-dark-secondary) !important; 
        border-top: 1px solid rgba(255,255,255,0.1) !important; 
        z-index: 20000; padding: 0 !important; margin: 0 !important;
        display: flex; align-items: center; justify-content: center;
        height: auto;
    }
    .nav-menu, .nav-menu ul { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: space-evenly; padding: 0; margin: 0; }
    .nav-item { margin: 0 !important; flex: 1; display: flex; justify-content: center; }
    
    /* ÆNDRET: Hvid tekst i mobil-menu */
    .nav-item a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 5px !important; font-size: 0.7rem !important; background: transparent !important; color: #ffffff !important; height: 100% !important; border-radius: 0 !important; }
    .nav-item.active a { color: var(--accent-color) !important; }
    .nav-item:nth-child(n+6) { display: none !important; } 

    /* STÅENDE MOBIL SPECIFIKT */
    @media (orientation: portrait) {
        aside.sidebar { bottom: 100px !important; height: 60px !important; }
        
        .fixed-bottom-ad {
            position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100px !important;
            background: #000 !important; z-index: 10001 !important; border-top: 1px solid #333 !important;
            display: flex !important; justify-content: center !important; align-items: center !important;
        }
        .fixed-bottom-ad .ad-container, .fixed-bottom-ad div { max-width: 100% !important; width: 100% !important; }

        footer {
            position: fixed !important; bottom: 160px !important; left: 0 !important; width: 100% !important;
            background-color: rgba(18, 18, 18, 0.95) !important; z-index: 10003 !important;
            text-align: center !important; padding: 5px 0 !important; display: block !important;
        }
        .footer-content span, .copyright { display: none !important; } /* Skjul tekst på stående */
    }
}

/* ==========================================================================
   LIGGENDE MOBIL (LANDSCAPE) - TVINGES IGENNEM
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px) {
    
    .dashboard-container { display: block !important; }
    .main-content { 
        padding-right: 140px !important; 
        padding-bottom: 100px !important; 
        padding-left: 0 !important; 
        margin-left: 0 !important; 
        width: 100% !important; 
    }

    /* --- RETTELSE HER: Tilføjet baggrundsfarve og kant --- */
    aside.sidebar {
        position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 50px !important;
        top: auto !important; right: auto !important; border-right: none !important; 
        z-index: 20000 !important;
        /* NYT: */
        background: var(--bg-dark-secondary) !important; 
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    /* ---------------------------------------------------- */

    footer {
        position: fixed !important; bottom: 50px !important; left: 0 !important; width: 100% !important; height: 35px !important;
        background-color: #333333 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; z-index: 19999 !important;
        padding: 0 !important; margin: 0 !important;
        display: flex !important; justify-content: center !important; align-items: center !important;
        top: auto !important; right: auto !important; 
    }

    .footer-content { display: flex !important; width: 100% !important; justify-content: center !important; gap: 5px !important; }
    footer a, footer span, .copyright, .separator {
        display: inline-block !important; visibility: visible !important; opacity: 1 !important;
        color: #cccccc !important; font-size: 0.65rem !important; line-height: 35px !important;
        white-space: nowrap !important; margin: 0 3px !important;
    }
    footer a { color: #ffffff !important; font-weight: bold !important; }

    .fixed-bottom-ad {
        display: flex !important; position: fixed !important;
        top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
        width: 120px !important; height: 100% !important;
        background: #000 !important; border-left: 1px solid #333 !important; border-top: none !important;
        flex-direction: column !important; justify-content: center !important; z-index: 15000 !important; overflow: hidden !important;
    }
    .fixed-bottom-ad .ad-container, .fixed-bottom-ad div { width: auto !important; height: auto !important; }
}
/* =========================================
   RETUR TIL MØRKT TEMA: Velkomstboks
   ========================================= */
.welcome-container {
    /* ÆNDRET: Lysere grå baggrund (var 30,30,30) */
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #ffffff !important;
    padding: 3rem;
    border-radius: 16px; 
    
    /* Diskret lys kant */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    margin: 60px auto;
    max-width: 700px;
    text-align: center;
}

.welcome-title, .welcome-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7) !important;
}
.welcome-container label {
    color: #ffffff !important;
}
/* =========================================
   MØRKT TEMA: Content Header
   ========================================= */
.content-header {
    /* ÆNDRET: Lysere grå baggrund (var 30,30,30) */
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #ffffff !important;
    
    /* Diskret lys kant */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 16px;
    
    padding: 25px;
    text-align: center;
    margin-bottom: 40px;
}

.content-header h1,
.content-header h2,
.content-header p {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7) !important;
    margin-bottom: 10px;
}
.dashboard-grid{
    /* ÆNDRET: Lysere grå baggrund (var 30,30,30) */
    background-color: rgba(42, 42, 42, 0.95) !important;
    color: #ffffff !important;
    
    /* Diskret lys kant */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 16px;
    
    padding: 25px;
    margin-bottom: 40px;
}
/* =========================================
   LYSEBLÅ TEKST I SIDEBAR FOOTER
   ========================================= */
.sidebar-footer {
    color: #54a0ff !important;
}
.sidebar-footer a {
    color: #54a0ff !important;
    text-decoration: none; 
}
/* =========================================
   FIX: VIS LINJESKIFT KUN I INFO-BOKSEN
   ========================================= */
#infoboks {
    /* 'pre-line' betyder: "Vis linjeskift, men klap dobbelte mellemrum sammen" */
    white-space: pre-line !important;
}