/* Generated by tailwindcss-rails, rewritten by Kaktus to inline engine.css and avoid an absolute-path @import that would 404 when served by Propshaft. */

/* Kaktus engine — tells Tailwind to scan engine views for utility classes */
@source "/usr/local/bundle/ruby/3.4.0/bundler/gems/kaktus-88c99cffc70a/app/views";

/* Alert classes used dynamically in toast_controller.js — not in any template, so must be safelisted */
@source inline("alert-success alert-warning");

@layer components {
    /* Flash toast container. Mobile: bottom-center. Top-center (the old default)
       lands under the notch / Dynamic Island in a Hotwire Native shell, where the
       WKWebView is edge-to-edge and `top` measures from the true screen top. So
       anchor at the bottom, above the home indicator via the safe-area inset.
       Apps with a floating bottom tab bar raise --kaktus-toast-bottom so a
       centered toast clears the bar (e.g. CleverMontessori sets it under
       body.so-canvas). Desktop (>= md): top-right corner. */
    .kaktus-toast-container {
        @apply fixed z-50 space-y-2 left-1/2 -translate-x-1/2 md:top-18 md:left-auto md:translate-x-0 md:right-2;
        bottom: var(--kaktus-toast-bottom, calc(env(safe-area-inset-bottom) + 1rem));
    }
}

/* Desktop (>= md) is top-anchored via md:top-18 above; clear the mobile bottom
   anchor so the fixed box isn't stretched between top and bottom. Unlayered so
   it wins over the layered base at md regardless of source order. */
@media (width >= 48rem) {
    .kaktus-toast-container {
        bottom: auto;
    }
}

/* ─── Kaktus UI primitives ──────────────────────────────────────────────
   Tokens with neutral defaults; consumer apps override in their own theme.
   No literal color/font values in the classes themselves — values resolve
   through these tokens or through Tailwind utilities applied via @apply. */
@layer components {
    :root {
        --kx-page-app-max-width: 66rem;
        --kx-page-doc-max-width: 48rem;

        --kx-card-bg:      var(--color-base-100);
        --kx-card-border:  1px solid var(--color-base-300);
        --kx-card-radius:  0.75rem;
        --kx-card-padding: 1.5rem;

        --kx-actions-gap: 0.5rem;
    }

    /* Page shell — three semantic width regimes (docs/decisions/cross-cutting/page-width-regimes.md).
       Alignment belongs to each regime: :app keeps a stable left edge, :doc centers. */
    .kx-page       { /* common hook */ }
    .kx-page-app   { max-width: var(--kx-page-app-max-width); }
    .kx-page-media { /* full width; the layout's container governs */ }
    .kx-page-doc   { max-width: var(--kx-page-doc-max-width); @apply mx-auto; }
    .kx-page-header   { @apply flex items-center justify-between gap-3 mb-6; }
    .kx-page-title    { @apply text-2xl font-bold; }
    .kx-page-heading  { @apply mt-4 mb-6; }

    /* Card surface */
    .kx-card {
        background: var(--kx-card-bg);
        border: var(--kx-card-border);
        border-radius: var(--kx-card-radius);
        padding: var(--kx-card-padding);
    }
    .kx-card-header { @apply flex items-center justify-between gap-3 mb-4; }
    .kx-card-title  { @apply text-xl font-bold; }
    .kx-card-body   { /* no extra styles by default */ }

    /* Action cluster */
    .kx-actions {
        @apply flex items-center shrink-0;
        gap: var(--kx-actions-gap);
    }

    /* Version-history diff highlights (Kaktus::HtmlDiff output) */
    .ins-block {
        @apply bg-success/20 px-0.5 rounded-sm;
        text-decoration: none;
    }
    .del-block {
        @apply bg-error/20 line-through px-0.5 rounded-sm;
    }
    /* Line-through doesn't render on images. Use a visible outline + tint instead. */
    .ins-block > img {
        @apply outline outline-2 outline-success rounded-sm;
    }
    .del-block > img {
        @apply outline outline-2 outline-error rounded-sm opacity-60 grayscale;
    }
}

/* ─── Auth layout (sign in / sign up / password reset) ───────────────────────
   The engine ships layouts/auth.html.erb (KAK-105): a panel that goes edge-to-edge
   on mobile (the panel IS the page — seamless full-bleed) and floats as a card from
   the sm breakpoint up, safe-area aware in the Hotwire Native shell.

   daisyUI sets NO background on <body>, so a single body.kaktus-auth rule wins the
   cascade with no !important. These defaults are LAYERED (@layer components), so a
   consumer app's own plain (unlayered) body.kaktus-auth / .kaktus-auth-panel rule
   always overrides them regardless of source order or specificity — that's how an
   app re-assigns the surface colours (or the font) without an !important fight.

   Default scheme = TaskFlow's: panel base-100; page base-200 on desktop and base-100
   on mobile (so the mobile page matches the panel and the full-bleed is seamless).
   An app wanting the inverse (e.g. CleverMontessori's cream panel on a white page)
   overrides these two surfaces in its own stylesheet. The layout itself carries NO
   colour — structure only — so the scheme stays app-driven and dark-mode-correct
   (the surfaces resolve through whatever the app's theme defines for base-100/200). */
@layer components {
    body.kaktus-auth {
        font-family: "Inter", sans-serif;
        background-color: var(--color-base-100); /* mobile: page == panel, seamless */
    }
    .kaktus-auth-panel {
        background-color: var(--color-base-100);
    }
    /* Desktop: the card floats on a distinct page surface. */
    @media (width >= 40rem) {
        body.kaktus-auth {
            background-color: var(--color-base-200);
        }
    }
}

/* Native shell (Hotwire Native): viewport-fit=cover makes the WKWebView edge-to-edge,
   so reserve the safe-area insets on the centering body. Android's WebView ignores
   env() (the inset is reserved natively at the activity root), so this reads 0 there
   — no double inset; iOS honours it with viewport-fit=cover. Unlayered (behavioural,
   not a themeable surface). */
body.kaktus-auth.native-app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}