/* WarpIt V2 - Custom styles (supplement Tailwind CDN) */

/* Smooth defaults */
*, *::before, *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Portal theme CSS custom properties (defaults, overridden per-portal in <style> block) */
:root {
    --portal-primary: #4f46e5;
    --portal-primary-hover: #4338ca;
    --portal-primary-light: #eef2ff;
    --portal-secondary: #10b981;
    --portal-secondary-hover: #059669;
    --portal-accent: #f59e0b;
    --portal-nav-bg: #ffffff;
    --portal-nav-text: #374151;
    --portal-footer-bg: #111827;
    --portal-footer-text: #9ca3af;
}

/* Form input baseline (Tailwind CDN doesn't include forms plugin) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="color"],
textarea,
select {
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* --- Navigation --- */

#main-nav {
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(8px);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--portal-nav-text);
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.nav-link:hover {
    color: var(--portal-primary);
    background-color: var(--portal-primary-light);
}

/* Popover menus in lists (CRM fb149b90) — see "Popover menus" in site.js. While a row Actions,
   Columns or filter menu is open, the sticky cell or toolbar holding it is raised above the rest
   of the list so later rows cannot paint over the menu. */
.wi-popover-lift { z-index: 1000 !important; }

/* Dropdown container */
.nav-dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 13rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    padding: 0.375rem;
    z-index: 60;
    animation: dropdownIn 0.15s ease-out;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-dropdown.open > .dropdown-menu { display: block; }

.dropdown-item {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
    white-space: nowrap;
    border-radius: 0.375rem;
    transition: all 0.1s ease;
}
.dropdown-item:hover {
    background-color: var(--portal-primary-light);
    color: var(--portal-primary);
}

/* --- Mobile menu --- */

.mobile-section {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.mobile-section-title {
    padding: 0.375rem 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}
.mobile-link {
    display: block;
    padding: 0.625rem 1rem 0.625rem 1.5rem;
    font-size: 0.875rem;
    color: #374151;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-right: 0.5rem;
    transition: all 0.1s ease;
}
.mobile-link:hover {
    background-color: var(--portal-primary-light);
    color: var(--portal-primary);
}

/* --- Buttons --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--portal-primary), var(--portal-primary-hover));
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.15s ease;
}
.btn-primary:hover {
    filter: brightness(0.9);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* --- Cards --- */
.card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
    border-color: #e5e7eb;
}

/* --- Footer --- */
.portal-footer {
    background: var(--portal-footer-bg);
    color: var(--portal-footer-text);
    padding: 2rem 0;
    margin-top: 3rem;
    font-size: 0.8125rem;
}
.portal-footer a {
    color: var(--portal-footer-text);
    opacity: 0.8;
    transition: opacity 0.15s;
}
.portal-footer a:hover {
    opacity: 1;
    color: white;
}

/* --- Portal-themed overrides for Tailwind inline classes --- */
/* These allow bg-portal-primary etc. to work via Tailwind config */
.bg-portal-primary { background-color: var(--portal-primary) !important; }
.bg-portal-primary-hover:hover { background-color: var(--portal-primary-hover) !important; }
.bg-portal-primary-light { background-color: var(--portal-primary-light) !important; }
.bg-portal-secondary { background-color: var(--portal-secondary) !important; }
.bg-portal-secondary-hover:hover { background-color: var(--portal-secondary-hover) !important; }
.text-portal-primary { color: var(--portal-primary) !important; }
.text-portal-secondary { color: var(--portal-secondary) !important; }
.border-portal-primary { border-color: var(--portal-primary) !important; }
.ring-portal-primary { --tw-ring-color: var(--portal-primary) !important; }

/* --- Impact banner (Danny Task Ref 25) ---
   Server-rendered tiles that wrap by default (no JS = everything visible). The component's
   script sets data-js while it measures and pages through tiles that do not fit on one line;
   tiles never shrink, so the measurement is their natural width. */
.wi-impact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    transition: opacity 0.3s ease;
}
.wi-impact[data-js] { flex-wrap: nowrap; overflow: hidden; }
.wi-impact--fade { opacity: 0; }
.wi-impact__tile { flex: 0 0 auto; }
.wi-impact--band { column-gap: 1rem; row-gap: 1rem; }

/* --- Print / "Download PDF" (Tweaks R2 8.1/16.1) ---
   Every report tab's Download PDF button is window.print(); these rules make the
   printed page just the report: no nav, no toolbars, no widget, white background. */
@media print {
    nav, footer, aside, .no-print, #wi-issue-widget, #wi-impact-banner { display: none !important; }
    body { background: #fff !important; }
    .shadow, .shadow-lg, .shadow-sm { box-shadow: none !important; }
}

/* ---------------------------------------------------------------------------
   Product Tour (Danny Task Ref 6, CRM cd4f1c9c). Spotlight overlay driven by
   js/product-tour.js: four dim panels leave a real hole over the element being
   described, so the user reads the live interface rather than a screenshot.

   Plain rgba only — no color-mix()/oklch() anywhere in app CSS, because the
   issue-report widget rasterises the page with html2canvas and those functions
   break it (see the issue-report widget notes).
   --------------------------------------------------------------------------- */
.wi-tour-root { position: fixed; inset: 0; z-index: 2000; }

.wi-tour-dim {
    position: fixed;
    background: rgba(17, 24, 39, 0.55);
    z-index: 2000;
}

.wi-tour-ring {
    position: fixed;
    z-index: 2001;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(79, 70, 229, 0.55);
    pointer-events: none;
}

.wi-tour-card {
    position: fixed;
    z-index: 2002;
    width: min(22rem, calc(100vw - 24px));
    background: #fff;
    border-radius: 0.85rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
    padding: 1rem 1.1rem 0.9rem;
    outline: none;
}

.wi-tour-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wi-tour-progress { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #6b7280; }
.wi-tour-close { font-size: 0.75rem; color: #6b7280; background: none; border: 0; cursor: pointer; padding: 0.15rem 0.2rem; }
.wi-tour-close:hover { color: #111827; text-decoration: underline; }

.wi-tour-title { margin: 0.4rem 0 0; font-size: 1rem; font-weight: 700; color: #111827; }
.wi-tour-body { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.45; color: #374151; }

.wi-tour-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.wi-tour-actions button {
    font-size: 0.8125rem; font-weight: 600; border-radius: 0.5rem;
    padding: 0.4rem 0.95rem; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151;
}
.wi-tour-actions button:hover { background: #f9fafb; }
.wi-tour-next { background: var(--portal-primary, #4f46e5) !important; border-color: transparent !important; color: #fff !important; }
.wi-tour-next:hover { background: var(--portal-primary-hover, #4338ca) !important; }

.wi-tour-ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.wi-tour-cta {
    font-size: 0.8125rem; font-weight: 600; border-radius: 0.5rem; padding: 0.45rem 0.95rem;
    border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; text-decoration: none;
}
.wi-tour-cta:hover { background: #f9fafb; }
.wi-tour-cta-primary { background: var(--portal-primary, #4f46e5); border-color: transparent; color: #fff; }
.wi-tour-cta-primary:hover { background: var(--portal-primary-hover, #4338ca); }

/* A spotlit nav dropdown must stay above the dim panels so its items are readable — but ONLY
   while the tour is running, or every dropdown would outrank the rest of the page. */
body.wi-tour-active .nav-dropdown.open > .dropdown-menu { z-index: 2001; }

@media print { .wi-tour-root, #wi-tour-welcome { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .wi-tour-card, .wi-tour-ring { transition: none !important; }
}

/* Admin Service Tour (CRM f29115f6): the same card, with room for the Act buttons, the
   ready-written message and the final "what is done" list, plus the "Continue the tour" bar.
   Scoped to .wi-tour-card-admin / .wi-tour-bar so the standard tour's card is untouched. */
.wi-tour-card-admin { width: min(25rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.wi-tour-card-admin [hidden] { display: none !important; }
.wi-tour-hint { margin: 0.5rem 0 0; font-size: 0.75rem; color: #6b7280; }
.wi-tour-lines { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.8125rem; color: #374151; }
.wi-tour-lines li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-top: 1px solid #f3f4f6; }
.wi-tour-line-state { flex-shrink: 0; font-weight: 600; color: #4b5563; }
.wi-tour-act { margin-top: 0.8rem; padding-top: 0.75rem; border-top: 1px solid #f3f4f6; }
.wi-tour-act-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wi-tour-act-buttons button {
    font-size: 0.8125rem; font-weight: 600; border-radius: 0.5rem;
    padding: 0.45rem 0.95rem; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151;
}
.wi-tour-act-buttons button:hover { background: #f9fafb; }
.wi-tour-act-buttons .wi-tour-donow { background: var(--portal-primary, #4f46e5); border-color: transparent; color: #fff; }
.wi-tour-act-buttons .wi-tour-donow:hover { background: var(--portal-primary-hover, #4338ca); }
.wi-tour-act-buttons .wi-tour-donow:disabled { opacity: 0.6; cursor: default; }
.wi-tour-act-note { margin: 0.45rem 0 0; font-size: 0.75rem; color: #4b5563; }
.wi-tour-act-note:empty { display: none; }
.wi-tour-compose { margin-top: 0.6rem; padding: 0.65rem 0.75rem; border-radius: 0.5rem; background: #f9fafb; border: 1px solid #e5e7eb; }
.wi-tour-compose-heading { margin: 0; font-size: 0.8125rem; font-weight: 600; color: #111827; }
.wi-tour-compose-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.wi-tour-compose-note { margin: 0.45rem 0 0; font-size: 0.75rem; color: #6b7280; }

.wi-tour-bar {
    position: fixed; z-index: 1900; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: min(36rem, calc(100vw - 24px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
}
.wi-tour-bar-text { flex: 1 1 12rem; margin: 0; font-size: 0.8125rem; color: #374151; }

@media print { .wi-tour-bar { display: none !important; } }

/* ---------------------------------------------------------------------------
   Admin-authored HTML (SafeHtml.Render puts every piece of it in this box).
   Transfer terms, collection instructions, organisation guidelines, the join-page
   message, welcome and home content, the pause banner and agreement text. One
   organisation's Company Admin writes it; other organisations read it, and on the
   join page so do people who are not signed in. The sanitiser strips script, forms
   and layering CSS, but it cannot stop an ordinary negative margin sliding the text
   over the content next to it. This box clips it to its own area (security sweep
   review, 2026-09-22):
     - contain: paint clips everything the content draws to the box, and makes the
       box the containing block for anything positioned inside it;
     - overflow is the same clip for any browser without contain;
     - overflow-x is auto, not hidden, so a wide table scrolls sideways instead of
       being cut off. Content pushed LEFT by a negative margin cannot be scrolled to,
       so it stays clipped;
     - overflow-wrap lets a long link or word wrap rather than run out of the box.
   Both properties make the box its own formatting context, so the first and last
   child's margins no longer collapse through it; the two child rules keep the
   spacing the text had before the box existed.
   Plain properties only: no color-mix()/oklch() in app CSS (html2canvas).
   --------------------------------------------------------------------------- */
.wi-safe-html {
    overflow: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    contain: paint;
    overflow-wrap: break-word;
}
.wi-safe-html > :first-child { margin-top: 0; }
.wi-safe-html > :last-child { margin-bottom: 0; }
.wi-safe-html img { max-width: 100%; height: auto; }

/* On paper there is nothing to draw over and nothing to scroll, and a clipped box is
   not reliably split across pages in every browser, which would cut a long agreement
   off at the end of the first sheet. Printing lays the text out as it always did. */
@media print {
    .wi-safe-html { overflow: visible; contain: none; }
}

/* ---------------------------------------------------------------------------
   Contextual help [i] (Level 2 help, Danny's Task ref 8; Pages/Shared/_HelpTip.cshtml).
   A small round "i" beside a label; tapping it opens a short panel. The panel is
   absolutely positioned so the shared <details> popover code in site.js places it
   inside the viewport and closes it on a click elsewhere or Escape.
   --------------------------------------------------------------------------- */
.wi-help { position: relative; display: inline-block; vertical-align: middle; line-height: 1; }
.wi-help > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    border: 1px solid #9ca3af;
    color: #4b5563;
    background: #ffffff;
    font: italic 700 0.6875rem/1 Georgia, 'Times New Roman', serif;
    user-select: none;
}
.wi-help > summary::-webkit-details-marker { display: none; }
.wi-help > summary::marker { content: ''; }
.wi-help > summary:hover,
.wi-help[open] > summary { border-color: var(--portal-primary); color: var(--portal-primary); background: var(--portal-primary-light); }
.wi-help > summary:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.wi-help-panel {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.25rem;
    z-index: 40;
    width: 20rem;
    max-width: calc(100vw - 1rem);
    padding: 0.75rem 0.875rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    color: #4b5563;
    font-style: normal;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-family: inherit;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
}
.wi-help-panel p + p { margin-top: 0.5rem; }
.wi-help-panel .wi-help-title { font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
@media print { .wi-help { display: none; } }