body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* SVG rendering optimizations */
svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: optimizeQuality;
}

/* Fix for iOS SVG rendering during animations */
img[src$=".svg"] {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hide reCAPTCHA badge for web (compliant with Google terms if disclosure is shown elsewhere) */
.grecaptcha-badge { visibility: hidden !important; }

/* Explicit media queries for SEO tools */
@media screen and (max-width: 600px) {
  .mobile-optimized {
    padding: 16px;
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  .tablet-optimized {
    padding: 24px;
  }
}

@media screen and (min-width: 961px) {
  .desktop-optimized {
    padding: 32px;
  }
}

/* Centralized responsive page container.
   Safe area margins are handled in safeArea.css */
.page-content {
  padding: 16px;
}

@media screen and (min-width: 600px) {
  .page-content {
    padding: 24px;
  }
}

@media screen and (min-width: 1200px) {
  .page-content {
    padding: 32px;
  }
}

/* Additional responsive classes */
@media screen and (max-width: 600px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 601px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* Print media query for better print layouts */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none; /* Prevents text selection in Safari */ /* Prevents text selection in Firefox */ /* Prevents text selection in Internet Explorer/Edge */
    user-select: none; /* Prevents text selection in other browsers */
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

/* SVG rendering optimizations */
svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
}

/* Fix for iOS SVG rendering during animations */
img[src$=".svg"] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Hide reCAPTCHA badge for web (compliant with Google terms if disclosure is shown elsewhere) */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Material-UI component overrides for safe area handling */
/* Fix AppBar position */
.MuiAppBar-root {
    top: var(--safe-area-top) !important;
}

/* Fix permanent drawer position (desktop only) */
.MuiDrawer-paperAnchorLeft:not(.MuiDrawer-paperTemporary) {
    top: var(--safe-area-top) !important;
    height: calc(100% - var(--safe-area-top)) !important;
}

/* Ensure temporary drawer (mobile) starts from screen edge */
.MuiDrawer-paperAnchorLeft.MuiDrawer-paperTemporary {
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
}

/* Fix Dialog position */
.MuiDialog-paper {
    top: var(--safe-area-top) !important;
}
/* Safe Area CSS Variables */
:root {
  /* Centralized header heights for all breakpoints */
  --header-height: 40px; /* xs: mobile */
  /* Project bottom tab bar (Review/Activity) — mobile & tablet-portrait only */
  --footer-height: 56px;
  /* Project side rail (Review/Activity) — phone landscape only, see below */
  --side-nav-width: 0px;
  --side-nav-edge-buffer: 0px;
  /* Inline Review/Activity Tabs strip (desktop/tablet-landscape, see below).
     Must match ProjectNav.tsx's Tabs minHeight (44px) + borderBottom (1px) —
     content sized against the header alone (no tabs subtracted) ends up
     exactly this much too tall, forcing a page-level scrollbar even though
     the grid's own internal scroll was meant to be the only one. */
  --project-tabs-height: 0px;
  /* Baseline cosmetic breathing room below scrollable content, layered on
     top of whatever --safe-footer-height/safe-area-bottom already reserves
     for hardware/chrome — without it, a scrolled-to-bottom list's last item
     sits flush against the screen edge. */
  --content-bottom-spacing: 16px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --safe-area-left: 0px;
  --safe-area-right: 0px;
}

/* md: mobile */
@media (min-width: 600px) {
  :root {
    --header-height: 44px; /* sm: tablet */
  }
}

/* lg: large tablet, desktop — same breakpoint DashboardLayout uses to switch
   from a temporary drawer to a permanent sidebar. Above it, the project tab
   bar becomes an inline Tabs strip instead, so there's no fixed footer chrome. */
@media (min-width: 1200px) {
  :root {
    --header-height: 52px;
    --footer-height: 0px;
    --project-tabs-height: 45px;
  }
}

/* Phone landscape: short viewport height means the bottom bar would eat too
   much of what little vertical space is left after the header. Swap it for a
   narrow icon-only rail instead, on whichever edge useSideRailEdge() (see
   safeAreaService.ts) says is safe. Height is the signal (not width) so this
   doesn't fire for landscape tablets, which stay on the portrait bottom-bar
   layout below the `lg` breakpoint. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --footer-height: 0px;
    --side-nav-width: 48px;
    --side-nav-edge-buffer: 8px;
  }
}

/* Usage: For page content below header, use margin-top: calc(var(--safe-area-top) + var(--header-height));
   For header, use height: calc(var(--safe-area-top) + var(--header-height)); padding-top: var(--safe-area-top); */
:root {
  --safe-header-height: calc(var(--safe-area-top) + var(--header-height));
  --safe-footer-height: calc(var(--footer-height) + var(--safe-area-bottom));
  --safe-side-nav-width: calc(var(--side-nav-width) + var(--side-nav-edge-buffer));
}

/* Main layout container - for content that needs to be below fixed header.
   Only reserves genuine hardware safe-area (a notch/rounded corner on one
   side in landscape) — no cosmetic gutter on top of it. Every page already
   supplies its own internal padding (MUI Container gutters, explicit p:{}),
   so this was a redundant extra inset that had the actual side effect of
   clipping swiped/dragged cards short of the true screen edge. */
.main-container {
  margin-top: calc(0px + 40px);
  margin-top: var(--safe-header-height);
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
}

/* Desktop/sidebar mode: Remove left safe area from main content, apply to sidebar and header only */
@media (min-width: 1200px) {
  .main-container {
    padding-left: 0 !important;
  }
  .safe-area-appbar-dashboard {
    padding-left: 0 !important;
  }
  .sidebar-safe-area {
    padding-left: 0px !important;
    padding-left: var(--safe-area-left) !important;
  }
}

/* Sidebar safe area utility class */
.sidebar-safe-area {
  /* Mobile/drawer mode: no left padding by default */
  padding-left: 0;
}


/* Layout container - for full page layouts that need all safe area padding */
.layout-container {
  padding-top: 0px;
  padding-top: var(--safe-area-top);
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
}

/* Landing layout container - unified solution for all platforms */
.landing-layout-container {
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
}

/* Landing main content - uses safe header height for proper positioning */
.landing-main-content {
  margin-top: calc(0px + 40px);
  margin-top: var(--safe-header-height);
}

/* App content container - for dashboard pages that need safe area content padding */
.app-content-container {
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
}

.safe-area-appbar {
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  /* max(), not the bare inset: on a device/orientation with no real right
     inset (--safe-area-right: 0, e.g. the browser, or phone landscape on a
     device without a notch on that edge), the header's rightmost icons would
     otherwise sit flush against the rounded corner. --side-nav-edge-buffer is
     already exactly "0 normally, a small fixed buffer in phone landscape" —
     reusing it here gives the header the same minimum clearance the rail
     already keeps for itself, without adding a new variable or affecting any
     other breakpoint/orientation. */
  padding-right: max(0px, 0px);
  padding-right: max(var(--safe-area-right), var(--side-nav-edge-buffer));
}

/* Fixed bottom project tab bar: background fills all the way to the edge
   (there's no notch to dodge on the bottom, unlike top/left/right), so only
   the tap targets get horizontal safe-area padding plus a bottom inset. */
.safe-area-tabbar {
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
}

/* Fixed-edge project rail (phone landscape): mirrors .safe-area-tabbar but
   for the vertical case — background fills to whichever edge it's on, tap
   targets get the bottom inset for that edge's corner. Position/padding are
   driven by the notch-on-right body class (set in safeAreaService.ts) so
   they update at paint time, not on React's next render. */
.safe-area-siderail {
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
  right: 0;
  left: auto;
  padding-right: 0px;
  padding-right: var(--side-nav-edge-buffer);
  padding-left: 0;
}

body.notch-on-right .safe-area-siderail {
  right: auto;
  left: 0;
  padding-right: 0;
  padding-left: 0px;
  padding-left: var(--side-nav-edge-buffer);
}

/* Utility classes for padding with safe area insets */
.safe-area-padding {
  padding-top: 0px;
  padding-top: var(--safe-area-top);
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
  padding-left: 0px;
  padding-left: var(--safe-area-left);
  padding-right: 0px;
  padding-right: var(--safe-area-right);
}

.safe-area-padding-top {
  padding-top: 0px;
  padding-top: var(--safe-area-top);
}

.safe-area-padding-bottom {
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
}

.safe-area-padding-left {
  padding-left: 0px;
  padding-left: var(--safe-area-left);
}

.safe-area-padding-right {
  padding-right: 0px;
  padding-right: var(--safe-area-right);
}

/* Utility classes for margin with safe area insets */
.safe-area-margin {
  margin-top: 0px;
  margin-top: var(--safe-area-top);
  margin-bottom: 0px;
  margin-bottom: var(--safe-area-bottom);
  margin-left: 0px;
  margin-left: var(--safe-area-left);
  margin-right: 0px;
  margin-right: var(--safe-area-right);
}

.safe-area-margin-top {
  margin-top: 0px;
  margin-top: var(--safe-area-top);
}

.safe-area-margin-bottom {
  margin-bottom: 0px;
  margin-bottom: var(--safe-area-bottom);
}

.safe-area-margin-left {
  margin-left: 0px;
  margin-left: var(--safe-area-left);
}

.safe-area-margin-right {
  margin-right: 0px;
  margin-right: var(--safe-area-right);
}

/* Fixed position elements with safe area insets */
.safe-area-fixed-top {
  position: fixed;
  top: 0;
  padding-top: 0px;
  padding-top: var(--safe-area-top);
}

.safe-area-fixed-bottom {
  position: fixed;
  bottom: 0;
  padding-bottom: 0px;
  padding-bottom: var(--safe-area-bottom);
}

/* Header component with safe area */
.app-header-safe {
  height: calc(0px + 40px);
  height: var(--safe-header-height);
  padding-top: 0px;
  padding-top: var(--safe-area-top);
}

/* Drawer safe area for mobile - unified approach for all platforms */
.drawer-safe {
  margin-left: 0px;
  margin-left: var(--safe-area-left);
  margin-right: 0px;
  margin-right: var(--safe-area-right);
}

/* Drawer safe area for mobile - with top margin (when not overlapping header) */
.drawer-safe-with-top {
  margin-left: 0px;
  margin-left: var(--safe-area-left);
  margin-right: 0px;
  margin-right: var(--safe-area-right);
  margin-top: 0px;
  margin-top: var(--safe-area-top);
}

/* Background safe area extension */
.safe-area-background-top {
  height: 0px;
  height: var(--safe-area-top);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1400;
  pointer-events: none;
}

/* For full-height layouts with safe areas */
.full-height-safe {
  min-height: calc(100vh - 0px - 0px);
  min-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));
}


/*# sourceMappingURL=main.2648db59.css.map*/