/* ── Self-hosted fonts ─────────────────────────────────────────────────────
   Declare @font-face here so the browser loads fonts from our own origin
   instead of fetching them from fonts.googleapis.com / fonts.gstatic.com.
   This eliminates Firefox's "blocked at visibility level 2" fingerprinting
   warnings caused by dash-mantine-components auto-injecting Google Font links
   when a font name is present in the Mantine theme (fields.js:535).

   Files live in src/assets/fonts/ and are served by Dash at /assets/fonts/.
   Run src/assets/fonts/download_fonts.py once to populate the directory.
─────────────────────────────────────────────────────────────────────────── */

/* Plus Jakarta Sans – Bold 700 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/plusjakartasans-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* Outfit – Regular 400 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/outfit-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* Outfit – Medium 500 */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/outfit-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* Sora – SemiBold 600 */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/sora-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

/* Add your custom styles here */
.workspace-select [data-value="add_new"] {
    font-weight: bold;
    font-style: italic;
}
.workflow-starter-container {
    width: 65%;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .workflow-starter-container {
        width: 80%;
    }
}
@media (max-width: 480px) {
    .workflow-starter-container {
        width: 95%;
    }
}

/* Workspace card hover effects */
.workspace-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--mantine-color-cantasks-primary-6) !important;
}

.workspace-card-hover.create-card:hover {
    border-color: var(--mantine-color-cantasks-tertiary-6) !important;
}

.workspace-card-hover.invitations-card:hover {
    border-color: var(--mantine-color-cantasks-secondary-5) !important;
}

/* Workspace dropdown visibility controls */
/* Desktop (md and above): show in header, hide in navbar */
@media (min-width: 769px) {
    .workspace-dropdown-desktop {
        /* Controlled by callback, just ensure it's not overridden */
    }
    .workspace-dropdown-mobile {
        display: none !important;
    }
}

/* Mobile portrait (below md breakpoint): hide in header, show in navbar */
@media (max-width: 768px) {
    .workspace-dropdown-desktop {
        display: none !important;
    }
    .workspace-dropdown-mobile {
        /* Controlled by callback, just ensure it's not overridden */
    }
}

/* Fix NavLink icon alignment */
.mantine-NavLink-section[data-position="left"] {
    display: flex;
    align-items: center;
}

.mantine-NavLink-section[data-position="left"] svg {
    display: block;
}

/* Fix alignment for dynamically updated NavLinks */
#navbar-dashboard-link,
#navbar-workers-link,
#navbar-tasks-link,
#navbar-menu-switch-workspace {
    display: flex !important;
    align-items: center !important;
}

#navbar-dashboard-link .mantine-NavLink-body,
#navbar-workers-link .mantine-NavLink-body,
#navbar-tasks-link .mantine-NavLink-body,
#navbar-menu-switch-workspace .mantine-NavLink-body {
    flex: 1;
}

/* ── Component Defaults from Design System ─────────────────────────────── */

/* Buttons */
.mantine-Button-root {
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    border-radius: 16px !important; /* rounded-lg */
    height: 44px !important;
    padding: 0 20px !important;
}

.mantine-Button-root[data-variant="filled"] {
    background-color: var(--mantine-color-cantasks-primary-6) !important;
    color: #1A1A1A !important; /* on-primary */
}

.mantine-Button-root[data-variant="filled"]:hover {
    background-color: var(--mantine-color-cantasks-secondary-6) !important;
}

.mantine-Button-root[data-variant="default"] {
    background-color: #FFFFFF !important; /* surface-container */
    color: #1A1A1A !important; /* on-surface */
    border: 1px solid rgba(112, 128, 144, 0.2) !important;
}

/* Cards (Paper) */
.mantine-Paper-root {
    border-radius: 16px !important; /* rounded-lg */
    color: #1A1A1A !important; /* on-surface */
}

/* Inputs */
.mantine-Input-input {
    background-color: #FFFFFF !important; /* surface-container */
    color: #1A1A1A !important; /* on-surface */
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    border-radius: 8px !important; /* rounded-md */
    height: 44px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(112, 128, 144, 0.2) !important;
}

.mantine-Input-input:focus,
.mantine-Input-input:focus-within {
    border-color: var(--mantine-color-cantasks-primary-6) !important;
    box-shadow: 0 0 0 2px var(--mantine-color-cantasks-primary-6) !important;
}

/* Badges */
.mantine-Badge-root {
    border-radius: 9999px !important; /* rounded-full */
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ── File Upload Dropzone ─────────────────────────────────────────────── */

#upload-dropzone {
    border: 2px dashed var(--mantine-color-cantasks-primary-4);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

#upload-dropzone:hover {
    background: var(--mantine-color-cantasks-primary-0);
    border-color: var(--mantine-color-cantasks-primary-6);
}

#upload-dropzone.drag-over {
    background: var(--mantine-color-cantasks-primary-0);
    border-color: var(--mantine-color-cantasks-primary-7);
    border-style: solid;
}

/* ── File Table Header ─────────────────────────────────────────────── */

/* Distinct header background and spacing */
#files-table-container thead th {
    background-color: var(--mantine-color-cantasks-neutral-0) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--mantine-color-cantasks-neutral-2) !important;
    font-weight: 600;
}

/* ── File Table Row Interaction States ─────────────────────────────── */

/* Checkbox left padding */
.file-row td:first-child {
    padding-left: 16px !important;
}

#files-table-container thead th:first-child {
    padding-left: 16px !important;
}

/* Vertical spacing: force taller cells via padding on td */
.file-row td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    transition: background-color 0.15s ease;
}

/* Hover: light neutral */
.file-row:hover td {
    background-color: var(--mantine-color-cantasks-neutral-0) !important;
}

/* Checkbox-selected (bulk): primary tint */
tr.file-row-selected td {
    background-color: var(--mantine-color-cantasks-primary-0) !important;
}

tr.file-row-selected:hover td {
    background-color: var(--mantine-color-cantasks-primary-1) !important;
}

/* Active (clicked for preview): deeper primary — distinct from checkbox selection */
tr.file-row-active td {
    background-color: var(--mantine-color-cantasks-primary-2) !important;
}

tr.file-row-active:hover td {
    background-color: var(--mantine-color-cantasks-primary-3) !important;
}

/* ── Onboarding checklist responsive card layouts ───────────────────────────
   Each step card renders two sibling divs:
     .checklist-desktop-layout  — vertical stack (icon / text / button)
     .checklist-mobile-layout   — horizontal row  (icon | text | action)

   Below md (< 992 px): show mobile row, hide desktop stack.
   At md+   (≥ 992 px): show desktop stack, hide mobile row.
   The 992 px threshold matches Mantine's "md" breakpoint.
─────────────────────────────────────────────────────────────────────────── */

/* Mobile / Tablet default: show horizontal row, hide vertical stack */
.checklist-desktop-layout {
    display: none;
}
.checklist-mobile-layout {
    display: block;
}

/* Desktop (md+): flip — show vertical stack, hide horizontal row */
@media (min-width: 992px) {
    .checklist-desktop-layout {
        display: block;
        height: 100%;
    }
    .checklist-mobile-layout {
        display: none;
    }
}

/* ── Homepage full-bleed background ────────────────────────────────────────
   Applied when the home page sets data-home-page="true" on <body>.
   All ancestors of the page content (AppShell wrappers) are made transparent
   so the background image/colour covers edge-to-edge with no white borders.
─────────────────────────────────────────────────────────────────────────── */

body[data-home-page] {
    background: var(--home-bg, var(--mantine-color-cantasks-neutral-0)) no-repeat center center / cover !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body[data-home-page] #app-content,
body[data-home-page] #appshell,
body[data-home-page] .mantine-AppShell-root,
body[data-home-page] .mantine-AppShell-main {
    background: transparent !important;
    --app-shell-padding: 0px !important;
    padding: 0 !important;
    min-height: 100vh;
}

/* Option 1 — Radial gradient overlay for text readability.
   A fixed pseudo-element sits above the background image but below all
   content (z-index 0 vs content at z-index 1+), darkening the edges and
   centre so text is legible on any photo. */
body[data-home-page]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure the page content stack sits above the overlay */
body[data-home-page] #app-content > *,
body[data-home-page] #appshell > *,
body[data-home-page] .mantine-AppShell-main > * {
    position: relative;
    z-index: 1;
}

/* Option 4 — Text shadow for bare text elements on the home page.
   Applies a soft drop-shadow to every dmc.Text / span inside the home
   page that does NOT sit inside a button or input (those have their own
   background). */
body[data-home-page] .mantine-Text-root:not(.mantine-Button-label):not(.mantine-Input-input),
body[data-home-page] .mantine-Anchor-root {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Do NOT apply text-shadow inside buttons, inputs, badges, modals or drawers */
body[data-home-page] .mantine-Button-root .mantine-Text-root,
body[data-home-page] .mantine-Badge-root .mantine-Text-root,
body[data-home-page] .mantine-Input-wrapper .mantine-Text-root,
body[data-home-page] .mantine-Modal-root .mantine-Text-root,
body[data-home-page] .mantine-Drawer-root .mantine-Text-root,
body[data-home-page] .mantine-Notification-root .mantine-Text-root {
    text-shadow: none;
}