/* ============================================================================
   Wellday theme — Mina Sidor
   ----------------------------------------------------------------------------
   MUST be linked LAST in _layout2.cshtml, after tailwind.min.css.

   This file is pure override. It changes no markup and no behaviour.
   Removing its <link> tag reverts the portal completely.

   Why an override file instead of editing the views:
   tailwind.min.css is a STATIC pre-generated v2.2.19 build with no JIT, so the
   ~700 *-green-* utility classes in the views are the real colour source, and
   they collapse to ~31 distinct class names. Redefining them here replaces
   ~700 individual markup edits.

   Palette source: the six design tokens on the Wellday reference site.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Fonts
   Feijoa Display is a SINGLE weight (900). font-weight is pinned everywhere it
   is applied, otherwise browsers synthesise a fake bold.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Feijoa Display';
    src: url('../../fonts/feijoa-display.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --wd-font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --wd-font-display: 'Feijoa Display', Georgia, 'Times New Roman', serif;
}


/* ---------------------------------------------------------------------------
   2. Brand tokens
   ------------------------------------------------------------------------- */

:root {
    --wd-red: #FF233C; /* primary / CTA / logo          */
    --wd-red-dark: #E01230; /* hover on primary              */
    --wd-red-darker: #C4102A; /* pressed                       */
    --wd-burgundy: #430F24; /* headings, dark surfaces       */
    --wd-beige: #FFEDDB; /* page ground — the signature   */
    --wd-beige-light: #FFF6EC; /* subtle row tint               */
    --wd-beige-mid: #F7DFC8; /* hover tint                    */
    --wd-beige-dark: #E8C7A8; /* borders on beige              */
    --wd-black: #0F0F0F; /* body text                     */
    --wd-muted: rgba(15, 15, 15, .6); /* secondary text       */
    --wd-white: #FFFFFF; /* cards                         */
    --wd-pink: #FACBFF; /* accent, used sparingly        */
    /* The head <style> block declares these with !important, so these must
       carry !important too in order to win. */
    --scroll-thumb: #FF233C !important;
    --scroll-thumb-hover: #E01230 !important;
    --scroll-track: #FFEDDB !important;
}


/* ---------------------------------------------------------------------------
   3. Page ground and base typography
   The page ground stays WHITE (client decision, 2026-09-15). Beige is a
   CONTAINER colour only — panels, cards and tinted surfaces, never the page.
   The head <style> sets `body { background: #F7FBF7 !important }`, so beating
   it requires !important here.
   ------------------------------------------------------------------------- */

html {
    background-color: var(--wd-white);
}

body {
    background: var(--wd-white) !important;
    color: var(--wd-black);
    font-family: var(--wd-font-ui);
    font-weight: 500; /* the reference site's default body weight */
    letter-spacing: -0.01em;
    font-feature-settings: 'cv01', 'cv05', 'cv09', 'cv11';
}

/* Tailwind's .font-sans is applied to <body> and outranks the element rule
   above, so it has to be redefined too. */
.font-sans {
    font-family: var(--wd-font-ui);
}

/* Display font. Applied only where the views already opt into a display face;
   §6 below retargets the existing inline 'Gloria Hallelujah' declarations. */
.wd-display {
    font-family: var(--wd-font-display);
    font-weight: 900;
    letter-spacing: -0.03em;
}


/* ---------------------------------------------------------------------------
   4. Tailwind green palette -> Wellday
   ----------------------------------------------------------------------------
   Mapped per utility type, not per shade, because green currently encodes
   several different meanings at once:

     text-*    -> burgundy   (headings and labels; 13:1 on white)
     bg-*      -> red        (CTAs and primary buttons, white text on red)
     border-*  -> red or beige-dark depending on emphasis
     ring-*    -> red        (focus)
     tints     -> beige      (hover rows, soft surfaces)

   Red is deliberately reserved for CTAs and interaction. #FF233C as small body
   text only reaches ~3.9:1 on white, which is below WCAG AA, so static text
   uses burgundy and red is kept for hover and for filled buttons.

   The rgba(...) / --tw-*-opacity form matches Tailwind's own output so the
   bg-opacity-* / text-opacity-* / ring-opacity-* modifiers keep working.
   ------------------------------------------------------------------------- */

/* --- text ---------------------------------------------------------------- */
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgba(255, 35, 60, var(--tw-text-opacity));
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgba(67, 15, 36, var(--tw-text-opacity));
}

.text-green-700 {
    --tw-text-opacity: 1;
    color: rgba(67, 15, 36, var(--tw-text-opacity));
}

.text-green-800 {
    --tw-text-opacity: 1;
    color: rgba(67, 15, 36, var(--tw-text-opacity));
}

.text-green-900 {
    --tw-text-opacity: 1;
    color: rgba(67, 15, 36, var(--tw-text-opacity));
}

.hover\:text-green-600:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 35, 60, var(--tw-text-opacity));
}

.hover\:text-green-700:hover {
    --tw-text-opacity: 1;
    color: rgba(224, 18, 48, var(--tw-text-opacity));
}

/* --- backgrounds --------------------------------------------------------- */
.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 246, 236, var(--tw-bg-opacity));
}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 237, 219, var(--tw-bg-opacity));
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 35, 60, var(--tw-bg-opacity));
}

.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 35, 60, var(--tw-bg-opacity));
}

.bg-green-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(224, 18, 48, var(--tw-bg-opacity));
}

.bg-green-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(67, 15, 36, var(--tw-bg-opacity));
}

.hover\:bg-green-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 237, 219, var(--tw-bg-opacity));
}

.hover\:bg-green-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(247, 223, 200, var(--tw-bg-opacity));
}

.hover\:bg-green-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(247, 223, 200, var(--tw-bg-opacity));
}

.hover\:bg-green-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(224, 18, 48, var(--tw-bg-opacity));
}

.hover\:bg-green-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(224, 18, 48, var(--tw-bg-opacity));
}

.hover\:bg-green-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(196, 16, 42, var(--tw-bg-opacity));
}

/* Not present in this Tailwind build (no `active` variant compiled), so this
   adds the state the markup was already asking for. */
.active\:bg-green-800:active {
    --tw-bg-opacity: 1;
    background-color: rgba(67, 15, 36, var(--tw-bg-opacity));
}

/* --- borders ------------------------------------------------------------- */
.border-green-100 {
    --tw-border-opacity: 1;
    border-color: rgba(240, 220, 198, var(--tw-border-opacity));
}

.border-green-400 {
    --tw-border-opacity: 1;
    border-color: rgba(232, 199, 168, var(--tw-border-opacity));
}

.border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgba(255, 35, 60, var(--tw-border-opacity));
}

.border-green-600 {
    --tw-border-opacity: 1;
    border-color: rgba(255, 35, 60, var(--tw-border-opacity));
}

.hover\:border-green-400:hover {
    --tw-border-opacity: 1;
    border-color: rgba(255, 35, 60, var(--tw-border-opacity));
}

.focus\:border-green-400:focus {
    --tw-border-opacity: 1;
    border-color: rgba(255, 35, 60, var(--tw-border-opacity));
}

.focus\:border-green-500:focus {
    --tw-border-opacity: 1;
    border-color: rgba(255, 35, 60, var(--tw-border-opacity));
}

/* --- focus rings --------------------------------------------------------- */
.focus\:ring-green-400:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(255, 35, 60, var(--tw-ring-opacity));
}

.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(255, 35, 60, var(--tw-ring-opacity));
}

.focus\:ring-green-600:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(255, 35, 60, var(--tw-ring-opacity));
}

/* --- destructive / error: red -> burgundy --------------------------------
   Red is now the PRIMARY brand colour, so Tailwind's red-* utilities (delete
   buttons, validation messages, error panels) can no longer also be red —
   "Spara" and "Ta bort" would be indistinguishable. Burgundy is the darkest
   brand token and reads as serious without colliding with the CTA colour.
   This is the Q-4 decision; flip this block back to reds if the client
   prefers red for destructive and a different colour for primary. */
.text-red-500 { --tw-text-opacity: 1; color: rgba(90, 22, 49, var(--tw-text-opacity)); }
.text-red-600 { --tw-text-opacity: 1; color: rgba(67, 15, 36, var(--tw-text-opacity)); }
.hover\:text-red-500:hover { --tw-text-opacity: 1; color: rgba(90, 22, 49, var(--tw-text-opacity)); }
.hover\:text-red-600:hover { --tw-text-opacity: 1; color: rgba(67, 15, 36, var(--tw-text-opacity)); }
.hover\:text-red-800:hover { --tw-text-opacity: 1; color: rgba(42, 9, 22, var(--tw-text-opacity)); }

.bg-red-50  { --tw-bg-opacity: 1; background-color: rgba(251, 234, 239, var(--tw-bg-opacity)); }
.bg-red-400 { --tw-bg-opacity: 1; background-color: rgba(107, 27, 58, var(--tw-bg-opacity)); }
.bg-red-500 { --tw-bg-opacity: 1; background-color: rgba(90, 22, 49, var(--tw-bg-opacity)); }
.hover\:bg-red-50:hover  { --tw-bg-opacity: 1; background-color: rgba(251, 234, 239, var(--tw-bg-opacity)); }
.hover\:bg-red-100:hover { --tw-bg-opacity: 1; background-color: rgba(244, 214, 223, var(--tw-bg-opacity)); }
.hover\:bg-red-400:hover { --tw-bg-opacity: 1; background-color: rgba(90, 22, 49, var(--tw-bg-opacity)); }
.hover\:bg-red-600:hover { --tw-bg-opacity: 1; background-color: rgba(67, 15, 36, var(--tw-bg-opacity)); }
.hover\:bg-red-700:hover { --tw-bg-opacity: 1; background-color: rgba(54, 12, 29, var(--tw-bg-opacity)); }

.border-red-200 { --tw-border-opacity: 1; border-color: rgba(233, 199, 211, var(--tw-border-opacity)); }
.border-red-500 { --tw-border-opacity: 1; border-color: rgba(90, 22, 49, var(--tw-border-opacity)); }
.hover\:border-red-800:hover { --tw-border-opacity: 1; border-color: rgba(42, 9, 22, var(--tw-border-opacity)); }

/* --- form control accents ------------------------------------------------
   accent-* is a Tailwind v3 utility and is absent from this v2 build, so
   these checkboxes and radios currently render in the browser default blue. */
.accent-green-500,
.accent-green-600 {
    accent-color: var(--wd-red);
}


/* ---------------------------------------------------------------------------
   5. Arbitrary-value classes the static Tailwind build never generated
   ----------------------------------------------------------------------------
   NOTE — this block changes more than colour. These classes render nothing
   today, so defining them makes elements appear that are currently invisible:
   the sidebar active-item highlight, the nav hover states, and the header
   notification dot. That is what the markup always intended. If the client
   prefers the current (broken) behaviour, delete this block only.
   ------------------------------------------------------------------------- */

.text-\[\#6acc3e\] {
    color: var(--wd-red);
}

.bg-\[\#6acc3e\] {
    background-color: var(--wd-red);
}

.hover\:text-\[\#6acc3e\]:hover {
    color: var(--wd-red);
}

.bg-\[\#f4fff0\] {
    background-color: var(--wd-beige);
}

.hover\:bg-\[\#f4fff0\]:hover {
    background-color: var(--wd-beige);
}

.border-\[\#eaf5e3\] {
    border-color: var(--wd-beige-dark);
}

.bg-\[\#eaf5e3\] {
    background-color: var(--wd-beige);
}

.text-\[\#EBF0ED\] {
    color: var(--wd-muted);
}

/* This one sits on <body>. The page ground stays white. */
.bg-\[\#f8faf8\] {
    background-color: var(--wd-white);
}

.text-\[\#222\] {
    color: var(--wd-black);
}


/* ---------------------------------------------------------------------------
   6. Helper classes and one-off rules declared in the _layout2 <style> block
   ------------------------------------------------------------------------- */

.border-green {
    border-color: var(--wd-beige-dark);
}

.color-green {
    color: var(--wd-red);
}

footer {
    font-family: var(--wd-font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--wd-burgundy);
}

/* Retarget every inline `font-family:'Gloria Hallelujah'` heading in the views
   without editing them. Phase 3 replaces the inline declarations properly. */
[style*="Gloria Hallelujah"] {
    font-family: var(--wd-font-display) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em;
}

/* Toast: the head <style> gives it a dark-green border and a green close dot. */
.toast {
    border: 2px solid var(--wd-burgundy);
    border-radius: 12px;
    font-family: var(--wd-font-ui);
    color: var(--wd-black);
}

    .toast .close {
        background: var(--wd-red);
    }


/* ---------------------------------------------------------------------------
   7. Shape language
   The reference site is noticeably rounder than the portal (10 / 20 / 28 / 30 /
   100px). This nudges the Tailwind radius scale toward it.
   Optional — delete this block to keep the current corner radii.
   ------------------------------------------------------------------------- */

.rounded {
    border-radius: .5rem;
}

.rounded-md {
    border-radius: .625rem;
}

.rounded-lg {
    border-radius: 1rem;
}

.rounded-xl {
    border-radius: 1.25rem;
}

.rounded-2xl {
    border-radius: 1.5rem;
}


/* ---------------------------------------------------------------------------
   8. Sidebar logo
   The Fruktbudet mark was ~1.2:1; the Wellday wordmark is ~3.2:1, so the logo
   box is re-fitted rather than swapped in place.
   Expanded rail is 16rem, collapsed rail is 5rem.
   ------------------------------------------------------------------------- */

.wd-logo {
    display: block;
    width: 100%;
    max-width: 11rem;
    height: auto;
    margin: 0 auto;
    transition: max-width .3s;
}

.sidebar-collapsed .wd-logo {
    max-width: 3.25rem;
}

/* Beige panel behind the sidebar logo, mirroring the login page's logo bar.
   The bar is flush with the top of the rounded sidebar, so it has to follow the
   sidebar's corners — including the square top-left of the collapsed rail. */
.wd-logo-bar {
    background-color: var(--wd-beige);
    border-radius: 1.25rem 1.25rem 0 0;
}

.sidebar-collapsed .wd-logo-bar {
    border-top-left-radius: 0;
}


/* ===========================================================================
   9. Legacy stack — login and forgot-password
   ---------------------------------------------------------------------------
   These pages run on _Layoutwithoutlogin.cshtml: Bootstrap + assets/css/style.css,
   not Tailwind. Nothing above this point reaches them, so they get their own
   overrides. This file is linked after style.css in that layout too.

   Every rule below is scoped to `.wd-legacy` (set on that layout's <body>) so
   none of it leaks into the Tailwind portal — `header` in particular also
   exists in _layout2.cshtml as the burger/notification bar.
   ========================================================================= */

/* style.css sets `body { background-color: #f5f5f5 }`. Page ground stays white. */
body.wd-legacy {
    background-color: var(--wd-white);
}

/* The top logo bar. */
.wd-legacy header {
    background-color: var(--wd-beige);
}

/* The old mark was square (242x242) shown at 70px wide; the Wellday wordmark is
   ~3.2:1 and needs the room. */
.wd-legacy header .logo a {
    max-width: 160px;
}

/* The login card itself. */
.wd-legacy .site-main .login {
    background: var(--wd-beige);
    border-radius: 1.25rem;
    padding: 28px;
}

/* Page and panel headings: green -> red, handwriting -> Feijoa. */
.wd-legacy .main-content h1,
.wd-legacy .main-content .column-title,
.wd-legacy .site-main .membership .content-row h1,
.wd-legacy .site-main .login h1,
.wd-legacy .modal .modal-content .modal-title,
.wd-legacy .site-main h2.edit-subscription-header {
    color: var(--wd-red);
    font-family: var(--wd-font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* Primary buttons: green fill -> red fill. */
.wd-legacy .main-content form input[type="submit"],
.wd-legacy .main-content form button,
.wd-legacy .main-content.products ul li a.btn,
.wd-legacy .site-main .membership .btns a,
.wd-legacy .site-main .membership .btns button,
.wd-legacy .site-main .login button[type="submit"],
.wd-legacy .modal .modal-content button:not(.close, .qty-btn, .search-btn),
.wd-legacy .site-main .subscription-products table button,
.wd-legacy div.btns .btn,
.wd-legacy .site-main.subscription-page aside ul li .btn,
.wd-legacy .site-main .dt-container button.btn {
    background-color: var(--wd-red);
    font-family: var(--wd-font-ui);
    font-weight: 600;
    border-radius: 100px;
}

    .wd-legacy .main-content form input[type="submit"]:hover,
    .wd-legacy .main-content form input[type="submit"]:focus,
    .wd-legacy .main-content form button:hover,
    .wd-legacy .main-content form button:focus,
    .wd-legacy .main-content.products ul li a.btn:hover,
    .wd-legacy .main-content.products ul li a.btn:focus,
    .wd-legacy .site-main .membership .btns a.btn:hover,
    .wd-legacy .site-main .membership .btns a.btn:focus,
    .wd-legacy .site-main .membership .btns button:hover,
    .wd-legacy .site-main .membership .btns button:focus,
    .wd-legacy .site-main .login button[type="submit"]:hover,
    .wd-legacy .site-main .login button[type="submit"]:focus,
    .wd-legacy .modal .modal-content button:not(.close, .qty-btn, .search-btn):hover,
    .wd-legacy .modal .modal-content button:not(.close, .qty-btn, .search-btn):focus,
    .wd-legacy .site-main .subscription-products table button:hover,
    .wd-legacy .site-main .subscription-products table button:focus,
    .wd-legacy div.btns .btn:hover,
    .wd-legacy div.btns .btn:focus,
    .wd-legacy .site-main.subscription-page aside ul li .btn:hover,
    .wd-legacy .site-main.subscription-page aside ul li .btn:focus,
    .wd-legacy .site-main .dt-container button.btn:hover,
    .wd-legacy .site-main .dt-container button.btn:focus {
        background-color: var(--wd-red-dark);
    }

/* Links and hover states that were green. */
.wd-legacy header nav ul li.active > a,
.wd-legacy header nav ul li a:hover,
.wd-legacy header nav ul li a:focus,
.wd-legacy .site-main .login form .form-group a.forgot-pass:hover,
.wd-legacy .site-main .login form .form-group a.forgot-pass:focus,
.wd-legacy .main-content .info-text a {
    color: var(--wd-red);
}

    .wd-legacy .main-content .info-text a:hover,
    .wd-legacy .main-content .info-text a:focus {
        color: var(--wd-red-dark);
    }

/* Breadcrumbs (e.g. /logga-in/glomt_losen/). style.css colours the trail and the
   current page green, and the separator is an SVG with fill="#77b54e" baked in.
   The chevron is inlined here in red so assets/images/angle-right.svg — which the
   legacy pages also use — is left untouched. */
.wd-legacy .breadcrumb-container ul li a,
.wd-legacy .breadcrumb-container ul li span,
.wd-legacy .breadcrumb-container ul li:last-child {
    color: var(--wd-red);
}

/* The first crumb stays near-black, as it was. */
.wd-legacy .breadcrumb-container ul li:first-child a {
    color: var(--wd-black);
}

.wd-legacy .breadcrumb-container ul li:not(:last-child):after {
    background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%227.708%22%20height=%2214%22%20viewBox=%220%200%207.708%2014%22%3E%3Cpath%20d=%22M7.5,6.5,1.208.207a.707.707,0,0,0-1,1L6,7l-5.8,5.794a.707.707,0,0,0,1,1L7.5,7.5A.713.713,0,0,0,7.5,6.5Z%22%20fill=%22%23FF233C%22/%3E%3C/svg%3E") 0 50% no-repeat;
}

/* Inputs sit on beige inside the login card, so the underline needs contrast. */
.wd-legacy .site-main .login form .form-group input {
    border-bottom: 1px solid rgba(15, 15, 15, .35);
    color: var(--wd-black);
}

    .wd-legacy .site-main .login form .form-group input:focus {
        border-bottom-color: var(--wd-red);
        outline: none;
    }