/* ── 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.
─────────────────────────────────────────────────────────────────────────── */

/* Roboto – Light 300 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/roboto-300.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;
}

/* Roboto – Light 300 Italic */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/roboto-300italic.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;
}

/* Roboto – Regular 400 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/roboto-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;
}

/* Roboto – Regular 400 Italic */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/roboto-400italic.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;
}

/* Roboto – Medium 500 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/roboto-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;
}

/* Roboto – Medium 500 Italic */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/roboto-500italic.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;
}

/* Roboto – Bold 700 */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-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;
}

/* Roboto – Bold 700 Italic */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-700italic.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;
}

/* Martel Sans – Regular 400 */
@font-face {
    font-family: 'Martel Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/martelsans-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;
}

/* Martel Sans – SemiBold 600 */
@font-face {
    font-family: 'Martel Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/martelsans-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;
}

/* Martel Sans – Bold 700 */
@font-face {
    font-family: 'Martel Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/martelsans-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;
}

/* Martel Sans – ExtraBold 800 */
@font-face {
    font-family: 'Martel Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/martelsans-800.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: #228be6 !important;
}

.workspace-card-hover.create-card:hover {
    border-color: #40c057 !important;
}

.workspace-card-hover.invitations-card:hover {
    border-color: #fab005 !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;
}

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

#upload-dropzone {
    border: 2px dashed var(--mantine-color-blue-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-blue-light);
    border-color: var(--mantine-color-blue-6);
}

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

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

/* Distinct header background and spacing */
#files-table-container thead th {
    background-color: var(--mantine-color-gray-1) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--mantine-color-gray-3) !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 gray */
.file-row:hover td {
    background-color: var(--mantine-color-gray-1) !important;
}

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

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

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

tr.file-row-active:hover td {
    background-color: var(--mantine-color-blue-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-gray-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;
}