/*
 * HiSerge - Excalidraw-inspired styling
 * Hand-drawn aesthetic with whiteboard canvas feel
 */

/* CSS Custom Properties - Excalidraw palette */
:root {
  /* Primary colors */
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-hover: #5753d0;

  /* Gray scale */
  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;

  /* Surface colors */
  --color-surface: #ffffff;
  --color-surface-high: #f1f0ff;
  --color-surface-low: #ececf4;
  --color-canvas: #f5f5f5;

  /* Text */
  --color-text-primary: #1b1b1f;
  --color-text-secondary: #5c5c5c;
  --color-text-muted: #7a7a7a;

  /* Status */
  --color-danger: #db6965;
  --color-danger-hover: #c75a56;
  --color-danger-light: #fce8e7;
  --color-warning: #f5c354;
  --color-warning-bg: #fceeca;
  --color-success: #65bb6a;
  --color-success-hover: #5aa85e;
  --color-success-bg: #cafccc;

  /* Shadows */
  --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Hand-drawn aesthetic */
  --border-hand-drawn: 2px solid var(--color-gray-80);
  --shadow-hand-drawn-sm: 1px 1px 0 0 var(--color-gray-80);
  --shadow-hand-drawn: 2px 2px 0 0 var(--color-gray-80);
  --shadow-hand-drawn-lg: 3px 3px 0 0 var(--color-gray-80);
  --radius-hand-drawn-sm: 2px 6px 4px 5px;
  --radius-hand-drawn: 4px 8px 6px 7px;
  --radius-hand-drawn-lg: 3px 12px 10px 8px;
  --radius-hand-drawn-tooltip: 4px 10px 8px 6px;

  /* Font */
  --font-family: "Assistant", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main > * {
  flex: 1;
  min-height: 0;
}

body {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-canvas);
  /* Dot grid pattern like Excalidraw whiteboard */
  background-image: radial-gradient(circle, var(--color-gray-30) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-30);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-40);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  body {
    background-size: 16px 16px;
  }

  .org-chart-container {
    padding: var(--space-sm);
  }

  .org-chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .org-chart-header h1 {
    text-align: center;
  }

  .org-chart-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .filter-select {
    flex: 1;
    min-width: 120px;
  }

  .org-chart-tree {
    align-items: flex-start;
    padding: var(--space-lg);
  }

  .employee-children {
    flex-direction: column;
    align-items: flex-start;
  }

  .employee-children > .employee-wrapper {
    margin: calc(var(--space-lg) / 2) 0;
  }

  .org-node {
    min-width: 100%;
    max-width: 100%;
  }

  /* Hide horizontal lines on mobile */
  .employee-children > .employee-wrapper::after {
    display: none;
  }

  /* Rotate gap drop zones to horizontal on mobile */
  body.is-dragging .sibling-drop-gap {
    width: auto;
    height: 24px;
    min-height: auto;
    min-width: 60px;
  }

  body.is-dragging .sibling-drop-gap::before {
    top: 50%;
    bottom: auto;
    left: 10%;
    right: 10%;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }

  .sibling-drop-gap.gap-active::before {
    height: 4px;
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
  }
}