/*
 * Matsnakk.no – fase 3B2 editor visual layout
 * Mål: opprett/rediger-oppskrift skal ligne godkjent Matsnakk-layout:
 * lys redigeringsflate, tydelige kort, høyrepanel, tagg-/taksonomiområde og sterk handlingsrad.
 * Ingen lagringslogikk endres av denne CSS-en.
 */

body.mn-phase3b-editor-page {
    background:
        radial-gradient(circle at 15% 8%, rgba(224, 189, 102, .10), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(7, 86, 66, .08), transparent 30rem),
        linear-gradient(180deg, #fffaf1, #f7f2ea);
}

/* Hovedflate for oppskriftseditor */
body.mn-phase3b-editor-page .mn-main {
    background: transparent;
}

body.mn-phase3b-editor-page form {
    max-width: 1260px;
    margin: 0 auto 0;
}

/* Gi eksisterende editor et tydelig arbeidsområde */
body.mn-phase3b-editor-page .mn-recipe-editor,
body.mn-phase3b-editor-page .mn-form-shell,
body.mn-phase3b-editor-page .mn-recipe-form,
body.mn-phase3b-editor-page form[data-mn-recipe-action-dock="1"] {
    --mn-editor-ink: #241913;
    --mn-editor-muted: #6a594c;
    --mn-editor-border: rgba(92, 58, 34, .16);
    --mn-editor-paper: rgba(255, 255, 255, .92);
    --mn-editor-cream: #fffaf1;
}

/* Toppen av skjemaet */
body.mn-phase3b-editor-page h1 {
    color: #241913;
    letter-spacing: -.035em;
}

body.mn-phase3b-editor-page .mn-v30-kicker,
body.mn-phase3b-editor-page .mn-form-kicker,
body.mn-phase3b-editor-page .mn-recipe-editor-kicker {
    color: #a8663a !important;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Kort/seksjoner */
body.mn-phase3b-editor-page fieldset,
body.mn-phase3b-editor-page .form-section,
body.mn-phase3b-editor-page .mn-form-section,
body.mn-phase3b-editor-page .mn-recipe-editor-section,
body.mn-phase3b-editor-page .mn-recipe-editor-card,
body.mn-phase3b-editor-page .mn-taxonomy-form-panel,
body.mn-phase3b-editor-page .mn-allergen-form-panel,
body.mn-phase3b-editor-page .mn-media-form-panel,
body.mn-phase3b-editor-page .mn-card,
body.mn-phase3b-editor-page .mn-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,241,.93)) !important;
    border: 1px solid rgba(92, 58, 34, .15) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(43, 28, 18, .08) !important;
    padding: clamp(1rem, 2vw, 1.25rem);
}

/* Tittelrad i kort */
body.mn-phase3b-editor-page fieldset legend,
body.mn-phase3b-editor-page .mn-form-section h2,
body.mn-phase3b-editor-page .mn-form-section h3,
body.mn-phase3b-editor-page .mn-recipe-editor-section h2,
body.mn-phase3b-editor-page .mn-recipe-editor-section h3,
body.mn-phase3b-editor-page .mn-taxonomy-form-panel h2,
body.mn-phase3b-editor-page .mn-taxonomy-form-panel h3 {
    color: #241913;
    font-weight: 950;
    letter-spacing: -.015em;
}

/* Felter */
body.mn-phase3b-editor-page label {
    color: #2d2119;
    font-weight: 850;
}

body.mn-phase3b-editor-page input,
body.mn-phase3b-editor-page select,
body.mn-phase3b-editor-page textarea {
    background: #fff !important;
    color: #241913 !important;
    border: 1px solid rgba(92, 58, 34, .16) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

body.mn-phase3b-editor-page input:focus,
body.mn-phase3b-editor-page select:focus,
body.mn-phase3b-editor-page textarea:focus {
    border-color: #0d6b53 !important;
    box-shadow: 0 0 0 4px rgba(7, 86, 66, .13) !important;
    outline: 0;
}

/* To-kolonne-følelse når eksisterende markup tillater det */
body.mn-phase3b-editor-page .mn-recipe-editor-grid,
body.mn-phase3b-editor-page .mn-form-grid,
body.mn-phase3b-editor-page .mn-editor-grid,
body.mn-phase3b-editor-page .mn-phase3b-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, .95fr);
    gap: 1.15rem;
    align-items: start;
}

/* JS kan legge disse klassene på feltgrupper hvis markup mangler dem */
body.mn-phase3b-editor-page .mn-phase3b-main-column,
body.mn-phase3b-editor-page .mn-phase3b-side-column {
    display: grid;
    gap: 1rem;
    align-content: start;
}

body.mn-phase3b-editor-page .mn-phase3b-side-column {
    position: sticky;
    top: 5.6rem;
}

/* Taksonomi/tagg-panel */
body.mn-phase3b-editor-page .mn-taxonomy-form-panel,
body.mn-phase3b-editor-page .mn-phase3b-taxonomy-card {
    border-color: rgba(7, 86, 66, .34) !important;
    box-shadow: 0 16px 40px rgba(7, 86, 66, .08) !important;
}

body.mn-phase3b-editor-page .mn-taxonomy-form-panel::before,
body.mn-phase3b-editor-page .mn-phase3b-taxonomy-card::before {
    content: "Kategorier og tagger";
    display: inline-flex;
    align-items: center;
    margin: 0 0 .65rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #e8f4ee;
    color: #075642;
    border: 1px solid rgba(7,86,66,.14);
    font-weight: 950;
    font-size: .86rem;
}

/* Checkbox-/tagglister */
body.mn-phase3b-editor-page .mn-taxonomy-form-panel label,
body.mn-phase3b-editor-page .mn-phase3b-taxonomy-card label,
body.mn-phase3b-editor-page .mn-checkbox-row,
body.mn-phase3b-editor-page .mn-choice-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .48rem .62rem;
    border-radius: 12px;
    color: #33251c;
}

body.mn-phase3b-editor-page .mn-taxonomy-form-panel label:hover,
body.mn-phase3b-editor-page .mn-phase3b-taxonomy-card label:hover,
body.mn-phase3b-editor-page .mn-checkbox-row:hover,
body.mn-phase3b-editor-page .mn-choice-row:hover {
    background: rgba(7, 86, 66, .06);
}

body.mn-phase3b-editor-page input[type="checkbox"],
body.mn-phase3b-editor-page input[type="radio"] {
    accent-color: #0d6b53;
    width: 1.05rem;
    height: 1.05rem;
}

/* Bildepanel / upload-felt */
body.mn-phase3b-editor-page .mn-media-form-panel,
body.mn-phase3b-editor-page .mn-image-upload,
body.mn-phase3b-editor-page .mn-upload-zone,
body.mn-phase3b-editor-page [class*="upload"] {
    border-radius: 18px;
}

body.mn-phase3b-editor-page .mn-upload-zone,
body.mn-phase3b-editor-page .mn-image-upload {
    border: 1.5px dashed rgba(92, 58, 34, .24) !important;
    background: rgba(255,250,241,.68) !important;
}

/* Ingredienser/fremgangsmåte */
body.mn-phase3b-editor-page .ingredient-row,
body.mn-phase3b-editor-page .mn-ingredient-row,
body.mn-phase3b-editor-page .step-row,
body.mn-phase3b-editor-page .mn-step-row {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(92, 58, 34, .10);
    border-radius: 14px;
    padding: .65rem;
}

body.mn-phase3b-editor-page .mn-step-number,
body.mn-phase3b-editor-page .step-number {
    background: linear-gradient(135deg, #a8663a, #c28755);
    color: #fff;
    border-radius: 999px;
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

/* Infoboks som kan legges inn av JS */
.mn-phase3b-editor-guidance {
    max-width: 1260px;
    margin: 1rem auto;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,250,241,.96), rgba(247,235,220,.93));
    border: 1px solid rgba(168, 102, 58, .22);
    box-shadow: 0 14px 32px rgba(43,28,18,.07);
}

.mn-phase3b-editor-guidance strong {
    color: #241913;
}

.mn-phase3b-editor-guidance p {
    margin: .35rem 0 0;
    color: #6a594c;
}

/* Sticky handlingsrad: presis knappfarge, også når global CSS forsøker å overstyre */
body.mn-phase3b-editor-page .mn-recipe-form-action-dock {
    border-color: rgba(92, 58, 34, .18) !important;
    background: linear-gradient(135deg, rgba(255, 250, 241, .98), rgba(247, 242, 234, .96)) !important;
    box-shadow: 0 -14px 36px rgba(43,28,18,.16) !important;
}

body.mn-phase3b-editor-page .mn-recipe-form-action-dock .mn-recipe-form-action-dock__button {
    border-radius: 14px !important;
    min-height: 3.25rem;
    padding: .74rem 1.25rem !important;
}

body.mn-phase3b-editor-page .mn-recipe-form-action-dock .mn-recipe-form-action-dock__button--draft,
body.mn-phase3b-editor-page .mn-recipe-form-action-dock button.mn-recipe-form-action-dock__button--draft,
body.mn-phase3b-editor-page button.mn-recipe-form-action-dock__button.mn-recipe-form-action-dock__button--draft {
    background: linear-gradient(135deg, #fffaf1, #f1dcc8) !important;
    color: #8a552e !important;
    border: 1px solid rgba(168, 102, 58, .42) !important;
    box-shadow: 0 8px 18px rgba(168,102,58,.11) !important;
}

body.mn-phase3b-editor-page .mn-recipe-form-action-dock .mn-recipe-form-action-dock__button--submit,
body.mn-phase3b-editor-page .mn-recipe-form-action-dock button.mn-recipe-form-action-dock__button--submit,
body.mn-phase3b-editor-page button.mn-recipe-form-action-dock__button.mn-recipe-form-action-dock__button--submit {
    background: linear-gradient(135deg, #0b6b52, #158763) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    box-shadow: 0 10px 24px rgba(7, 86, 66, .24) !important;
}

/* Admin-/oppskriftstabeller og mine oppskrifter */
body.mn-phase3b-editor-page table,
.mn-member-recipes table,
.mn-admin-recipes table {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(92,58,34,.13);
    box-shadow: 0 14px 32px rgba(43,28,18,.07);
}

body.mn-phase3b-editor-page th,
.mn-member-recipes th,
.mn-admin-recipes th {
    background: #3b2a22;
    color: #fff4df;
}

/* Responsivt */
@media (max-width: 980px) {
    body.mn-phase3b-editor-page .mn-recipe-editor-grid,
    body.mn-phase3b-editor-page .mn-form-grid,
    body.mn-phase3b-editor-page .mn-editor-grid,
    body.mn-phase3b-editor-page .mn-phase3b-editor-grid {
        grid-template-columns: 1fr;
    }

    body.mn-phase3b-editor-page .mn-phase3b-side-column {
        position: static;
    }
}

@media (max-width: 760px) {
    body.mn-phase3b-editor-page fieldset,
    body.mn-phase3b-editor-page .form-section,
    body.mn-phase3b-editor-page .mn-form-section,
    body.mn-phase3b-editor-page .mn-recipe-editor-section,
    body.mn-phase3b-editor-page .mn-recipe-editor-card,
    body.mn-phase3b-editor-page .mn-taxonomy-form-panel,
    body.mn-phase3b-editor-page .mn-allergen-form-panel,
    body.mn-phase3b-editor-page .mn-media-form-panel {
        padding: .9rem;
        border-radius: 16px !important;
    }

    body.mn-phase3b-editor-page .mn-recipe-form-action-dock .mn-recipe-form-action-dock__button {
        flex: 1 1 100%;
    }
}