/* ============================================================
   🐧 Penguin Mealie — Cartoony hand-drawn theme
   Vuetify 3 / Mealie 2.x compatible
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');

/* ============================================================
   1. Palette + Vuetify 3 theme overrides (RGB triplets!)
   ============================================================ */
:root,
.v-theme--light,
.v-theme--dark,
.v-application {
    /* Penguin palette (hex, for our own rules) */
    --penguin-blue: #4ea8de;
    --penguin-blue-deep: #2a78b8;
    --penguin-blue-soft: #a9def9;
    --penguin-orange: #ff8c61;
    --penguin-ink: #334455;

    /* Vuetify 3 tokens — must be R, G, B (no #, no rgb()) */
    --v-theme-primary: 78, 168, 222 !important;
    --v-theme-primary-darken-1: 42, 120, 184 !important;
    --v-theme-primary-lighten-1: 121, 192, 232 !important;
    --v-theme-primary-lighten-2: 169, 222, 249 !important;
    --v-theme-primary-lighten-3: 216, 240, 255 !important;

    --v-theme-secondary: 42, 120, 184 !important;
    --v-theme-secondary-darken-1: 28, 90, 142 !important;

    --v-theme-accent: 255, 140, 97 !important;
    --v-theme-accent-darken-1: 224, 109, 66 !important;

    --v-theme-success: 93, 202, 165 !important;
    --v-theme-info: 169, 222, 249 !important;
    --v-theme-warning: 255, 193, 7 !important;
    --v-theme-error: 229, 115, 115 !important;

    --v-theme-on-primary: 255, 255, 255 !important;
    --v-theme-on-secondary: 255, 255, 255 !important;
    --v-theme-on-accent: 255, 255, 255 !important;
}

/* ============================================================
   2. Typography + page background
   ============================================================ */
.v-application,
body {
    font-family: 'Quicksand', system-ui, sans-serif !important;
}

.v-application h1, .v-application h2, .v-application h3,
.v-application h4, .v-application h5, .v-application h6,
.v-application .text-h1, .v-application .text-h2, .v-application .text-h3,
.v-application .text-h4, .v-application .text-h5, .v-application .text-h6 {
    font-family: 'Fredoka', 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
}

.v-application,
.v-main,
.v-main__wrap {
    background:
        radial-gradient(circle at 15% 20%, #ffffff 0%, transparent 40%),
        radial-gradient(circle at 85% 10%, #ffffff 0%, transparent 35%),
        linear-gradient(180deg, #d8f0ff 0%, #e8f7ff 40%, #f5fbff 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================================
   3. App bar / top header
   ============================================================ */
.v-app-bar,
header.v-app-bar,
.v-toolbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--penguin-blue-soft) !important;
    box-shadow: 0 2px 12px rgba(78, 168, 222, 0.1) !important;
    color: var(--penguin-ink) !important;
}

.v-toolbar__title {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    color: var(--penguin-blue-deep) !important;
}

/* ============================================================
   4. Cards — plain rounded, no doodle borders
   ============================================================ */
.v-card,
.recipe-card,
.mealie-recipe-card {
    border-radius: 18px !important;
    border: 1px solid var(--penguin-blue-soft) !important;
    background: #ffffff !important;
    box-shadow:
        0 3px 0 rgba(60, 80, 110, 0.08),
        0 6px 18px rgba(78, 168, 222, 0.15) !important;
}

/* Kill any leftover doodle pseudo-elements */
.v-card::before,
.v-card::after,
.recipe-card::before,
.recipe-card::after,
.mealie-recipe-card::before,
.mealie-recipe-card::after {
    display: none !important;
}

.v-card:hover {
    box-shadow:
        0 3px 0 rgba(60, 80, 110, 0.1),
        0 6px 18px rgba(78, 168, 222, 0.2) !important;
}

.v-card__title,
.v-card-title {
    font-family: 'Fredoka', 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
    color: var(--penguin-blue-deep) !important;
}

.v-card .v-image,
.v-card img.v-img__img {
    border-radius: 12px;
}

/* ============================================================
   5. Side navigation drawer
   ============================================================ */
.v-navigation-drawer {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    border-right: 2px solid var(--penguin-blue-soft) !important;
}

.v-list-item {
    border-radius: 16px !important;
    margin: 4px 8px !important;
}

.v-list-item:hover {
    background: var(--penguin-blue-soft) !important;
}

.v-list-item--active,
.v-list-item.v-list-item--active {
    background: var(--penguin-blue) !important;
    color: #ffffff !important;
}

.v-list-item--active .v-icon,
.v-list-item--active .v-list-item__title,
.v-list-item--active .v-list-item-title {
    color: #ffffff !important;
}

/* ============================================================
   6. Buttons
   ============================================================ */
.v-btn {
    border-radius: 999px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

.v-btn.primary,
.v-btn--variant-elevated.text-primary,
.v-btn--variant-flat.bg-primary,
.v-btn.v-btn--has-bg {
    background: var(--penguin-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 0 var(--penguin-blue-deep) !important;
}

.v-btn.primary:hover,
.v-btn--variant-elevated.text-primary:hover,
.v-btn--variant-flat.bg-primary:hover {
    box-shadow: 0 3px 0 var(--penguin-blue-deep), 0 6px 12px rgba(78, 168, 222, 0.25) !important;
}

/* ============================================================
   7. Inputs (Vuetify 3 .v-field)
   ============================================================ */
.v-field {
    border-radius: 18px !important;
    background: #ffffff !important;
}

.v-field--variant-outlined .v-field__outline__start,
.v-field--variant-outlined .v-field__outline__end {
    border-color: var(--penguin-blue-soft) !important;
    border-width: 2px !important;
}

.v-field--variant-outlined .v-field__outline__start {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
}

.v-field--variant-outlined .v-field__outline__end {
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

.v-field--focused .v-field__outline__start,
.v-field--focused .v-field__outline__end,
.v-field--focused .v-field__outline__notch::before,
.v-field--focused .v-field__outline__notch::after {
    border-color: var(--penguin-blue) !important;
}

.v-field__input {
    font-family: 'Quicksand', sans-serif !important;
    color: var(--penguin-ink) !important;
}

.v-field__input::placeholder {
    color: rgba(51, 68, 85, 0.5) !important;
}

.v-field--focused .v-field-label,
.v-field--focused .v-label {
    color: var(--penguin-blue) !important;
}

/* ============================================================
   8. Kill all transitions and transforms
   ============================================================ */
*,
*::before,
*::after {
    transition: none !important;
    transform: none !important;
}

/* ============================================================
   Fix 2: Remove the divider line left of the search input
   ============================================================ */

/* The prepend-inner slot has a right border that creates the
   little vertical line between the magnifying glass and the
   input. Kill that border. */
.v-field__prepend-inner {
    border-right: none !important;
    padding-inline-end: 0 !important;
}

/* Also handle the focused-state appendage line and any divider */
.v-field__prepend-inner::after,
.v-field__prepend-inner::before {
    display: none !important;
}

/* ============================================================
   Fix 3: Recipe page header padding
   ============================================================ */

/* The title area on the recipe page needs some breathing room —
   it's currently jammed against the image on the right. Add
   padding inside the card's left half. */
.v-card .v-card-title {
    padding: 1.25rem 1.5rem !important;
}

/* The narrow blue oval input near the servings +/- (it's the
   servings count) — make sure it has a sensible minimum width */
.v-card .v-field--variant-outlined {
    min-width: 60px;
}

/* If there's a recipe header image overlapping content, ensure
   the card has overflow hidden so it clips cleanly */
.v-card {
    overflow: hidden !important;
}