/* ==========================================================================
   PEN 11 DESIGN SYSTEM - 04-CANVAS.CSS
   Pen 11 Warm Sand / Cream Neo-morphic Floating Dock, Flyouts, Popovers,
   Canvas Backdrops, Custom Hardware Cursors & Screen Overlay HUD
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floating Pen 11 Neo-morphic Toolbar Mockup
   Warm Sand/Cream Dock (#F5E8D5) with #D6C3A1 Border & 20px Radius
   -------------------------------------------------------------------------- */
.pen-toolbar-container {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 15px 10px;
  background: #F5E8D5;
  border: 1px solid #D6C3A1;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  user-select: none;
  z-index: 500;
  max-height: 600px;
  transition: max-height 240ms cubic-bezier(0.65, 0, 0.35, 1),
              padding 240ms cubic-bezier(0.65, 0, 0.35, 1),
              box-shadow 200ms ease;
  overflow: visible;
}

[data-theme="dark"] .pen-toolbar-container {
  background: #2a2620;
  border: 1px solid #5a4f40;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Collapsed Toolbar State (for 🙈 hidden canvas state) - 240ms InOutCubic shrink */
.pen-toolbar-container.collapsed {
  max-height: 80px;
  padding-bottom: 8px;
  overflow: hidden;
}

.pen-toolbar-container .toolbar-collapsible {
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 1;
  transform: scale(1);
}

.pen-toolbar-container.collapsed .toolbar-collapsible {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.toolbar-flyout-item {
  transition: background-color 150ms ease;
}

.toolbar-flyout-item:hover {
  background: rgba(124, 92, 53, 0.12) !important;
}

/* Toolbar Drag Grip Handle (40x12px pill) */
.toolbar-drag-handle {
  width: 40px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  padding: 0;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  touch-action: none;
}

.toolbar-drag-handle:active {
  cursor: grabbing;
}

.toolbar-drag-pill {
  width: 30px;
  height: 6px;
  background-color: #D6C3A1;
  border-radius: 3px;
  transition: background-color 150ms ease;
}

[data-theme="dark"] .toolbar-drag-pill,
[data-theme-resolved="dark"] .toolbar-drag-pill {
  background-color: #5a4f40;
}

.toolbar-drag-handle:hover .toolbar-drag-pill {
  background-color: #C6B18D;
}

/* Tool Group Dividers */
.toolbar-divider {
  width: 24px;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  background-color: #D6C3A1;
  border: none;
  margin: 2px 0;
  border-radius: 1px;
}

[data-theme="dark"] .toolbar-divider,
[data-theme-resolved="dark"] .toolbar-divider {
  background-color: #5a4f40;
}

/* Toolbar Action Item / Tool Button */
.toolbar-tool-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 18px;
  border: none;
  background-color: #E6D5B8;
  color: #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  line-height: normal;
  text-decoration: none;
  font-style: normal;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 120ms ease,
              transform 120ms ease,
              border 120ms ease,
              box-shadow 120ms ease;
}

.toolbar-tool-btn .material-symbols-rounded {
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.toolbar-tool-btn svg,
.tb-svg-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
  user-select: none;
}

.toolbar-tool-btn span {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

[data-theme="dark"] .toolbar-tool-btn,
[data-theme-resolved="dark"] .toolbar-tool-btn {
  background-color: #3e372e;
  color: #f0e6d6;
}

.toolbar-tool-btn:hover {
  background-color: #D6C3A1;
  transform: scale(1.06);
}

[data-theme="dark"] .toolbar-tool-btn:hover,
[data-theme-resolved="dark"] .toolbar-tool-btn:hover {
  background-color: #52493d;
}

.toolbar-tool-btn:active {
  background-color: #C6B18D;
  transform: scale(0.96);
}

[data-theme="dark"] .toolbar-tool-btn:active,
[data-theme-resolved="dark"] .toolbar-tool-btn:active {
  background-color: #655b4c;
}

.toolbar-tool-btn.active {
  background-color: #B5A07A;
  border: 2px solid #555555;
  box-sizing: border-box;
}

[data-theme="dark"] .toolbar-tool-btn.active,
[data-theme-resolved="dark"] .toolbar-tool-btn.active {
  background-color: #7d6e59;
  border: 2px solid #d6c3a1;
}

.toolbar-tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Tooltips */
.toolbar-tool-btn[title] {
  position: relative;
}

/* --------------------------------------------------------------------------
   2. Floating Popovers & Flyouts (Shape Menu & 12-Color Floating Palette)
   -------------------------------------------------------------------------- */

/* Monkey / Cursor Submenu Flyout (Horizontal 2-Button Row matching Desktop App) */
.toolbar-monkey-flyout {
  position: absolute;
  top: 0;
  right: calc(100% + 14px);
  background: #F5E8D5;
  border: 1px solid #D6C3A1;
  border-radius: 24px;
  padding: 6px 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 600;
  animation: flyoutFadeIn 180ms cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

[data-theme="dark"] .toolbar-monkey-flyout,
[data-theme-resolved="dark"] .toolbar-monkey-flyout {
  background: #2a2620;
  border: 1px solid #5a4f40;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Shape Flyout Grid */
.toolbar-shape-flyout {
  position: absolute;
  top: -10px;
  right: calc(100% + 14px);
  background: #F5E8D5;
  border: 1px solid #D6C3A1;
  border-radius: 20px;
  padding: 12px 14px 14px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 600;
  animation: flyoutFadeIn 180ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] .toolbar-shape-flyout,
[data-theme-resolved="dark"] .toolbar-shape-flyout {
  background: #2a2620;
  border: 1px solid #5a4f40;
}

.shape-flyout-title {
  color: #333333;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

[data-theme="dark"] .shape-flyout-title,
[data-theme-resolved="dark"] .shape-flyout-title {
  color: #f0e6d6;
}

.shape-flyout-grid {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  gap: 8px;
}

/* Floating 12-Color Palette */
.toolbar-palette-popover {
  position: absolute;
  top: -40px;
  right: calc(100% + 14px);
  background: #F5E8D5;
  border: 1px solid #D6C3A1;
  border-radius: 20px;
  padding: 12px 14px 16px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 600;
  animation: flyoutFadeIn 180ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] .toolbar-palette-popover,
[data-theme-resolved="dark"] .toolbar-palette-popover {
  background: #2a2620;
  border: 1px solid #5a4f40;
}

.palette-title {
  color: #333333;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

[data-theme="dark"] .palette-title,
[data-theme-resolved="dark"] .palette-title {
  color: #f0e6d6;
}

/* 3 Rows x 4 Columns Color Grid */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  grid-template-rows: repeat(3, 28px);
  gap: 8px;
}

.palette-color-btn {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid #D6C3A1;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-sizing: border-box;
}

[data-theme="dark"] .palette-color-btn,
[data-theme-resolved="dark"] .palette-color-btn {
  border: 1px solid #5a4f40;
}

.palette-color-btn:hover {
  transform: scale(1.15);
}

.palette-color-btn.active {
  transform: scale(1.12);
  border: 2px solid currentColor !important;
  box-shadow: 0 0 15px currentColor !important;
}

/* White color special border in light background */
.palette-color-btn[data-hex="#FFFFFF"] {
  border: 1px solid #C6B18D;
}

.palette-color-btn[data-hex="#FFFFFF"].active {
  border: 2px solid #555555 !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9) !important;
}

@keyframes flyoutFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   3. Interactive Canvas Backdrops (Whiteboard, Blackboard & Transparent)
   -------------------------------------------------------------------------- */
.canvas-stage-wrapper {
  position: relative;
  width: 100%;
  min-height: 320px;
  height: clamp(320px, 52vh, 480px);
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-level2);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 479px) {
  /* Shorter canvas on compact phones so hero content above is reachable */
  .canvas-stage-wrapper {
    min-height: 280px;
    height: clamp(280px, 46vh, 380px);
    border-radius: 20px;
  }
}

@media (min-width: 480px) and (max-width: 599px) {
  .canvas-stage-wrapper {
    min-height: 340px;
    height: clamp(340px, 50vh, 440px);
  }
}

@media (min-width: 600px) {
  .canvas-stage-wrapper {
    min-height: 500px;
    height: 560px;
  }
}

@media (min-width: 840px) {
  .canvas-stage-wrapper {
    min-height: 700px;
    height: clamp(680px, 75vh, 850px);
  }
}

/* Whiteboard Canvas Backdrop */
.canvas-backdrop-whiteboard {
  background-color: #ffffff;
  background-image: radial-gradient(rgba(0, 97, 164, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Blackboard Canvas Backdrop */
.canvas-backdrop-blackboard {
  background-color: #1a1e24;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Desktop Transparent Annotation Backdrop */
.canvas-backdrop-transparent {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #6dd5ed 100%);
  position: relative;
}

.canvas-backdrop-transparent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0V0zm1 1h38v38H1V1z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* The Active HTML5 Canvas Element */
.pen-interactive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   4. Custom Hardware Cursors, Inking Hide & Menu Reset
   -------------------------------------------------------------------------- */
/* Pen Tool - Exact Desktop App Inking Cursor from main.py (Hotspot at center dot 32 32) */
.cursor-pen,
.cursor-pen canvas {
  cursor: url('../assets/cursor_pen.png') 32 32, crosshair;
}

/* Highlighter Tool - Exact Desktop App Inking Cursor from main.py (Hotspot at center box 32 32) */
.cursor-highlighter,
.cursor-highlighter canvas {
  cursor: url('../assets/cursor_highlighter.png') 32 32, cell;
}

/* Eraser Tool - Exact Desktop App Dual-Ring Cursor from main.py (Hotspot at center 32 32) */
.cursor-eraser,
.cursor-eraser canvas {
  cursor: url('../assets/cursor_eraser.png') 32 32, not-allowed;
}

.cursor-pointer,
.cursor-pointer canvas {
  cursor: default;
}

/* Hide cursor icon while actively drawing / inking on canvas ONLY for Pen tool */
.canvas-stage-wrapper.cursor-pen.is-drawing,
.canvas-stage-wrapper.cursor-pen.is-drawing canvas,
.pen-canvas-container.cursor-pen.is-drawing,
.pen-canvas-container.cursor-pen.is-drawing canvas {
  cursor: none !important;
}

/* Ensure Eraser and Highlighter cursors remain 100% visible while actively drawing/erasing */
.canvas-stage-wrapper.cursor-eraser.is-drawing,
.canvas-stage-wrapper.cursor-eraser.is-drawing canvas,
.pen-canvas-container.cursor-eraser.is-drawing,
.pen-canvas-container.cursor-eraser.is-drawing canvas {
  cursor: url('../assets/cursor_eraser.png') 32 32, not-allowed !important;
}

.canvas-stage-wrapper.cursor-highlighter.is-drawing,
.canvas-stage-wrapper.cursor-highlighter.is-drawing canvas,
.pen-canvas-container.cursor-highlighter.is-drawing,
.pen-canvas-container.cursor-highlighter.is-drawing canvas {
  cursor: url('../assets/cursor_highlighter.png') 32 32, cell !important;
}

/* Reset to standard UI cursors whenever hovering over main toolbar or sub-menu flyouts */
.pen-toolbar-container,
.toolbar-palette-popover,
.toolbar-shape-flyout,
.toolbar-monkey-flyout,
.canvas-hud-top-right,
.canvas-hud-bottom-left,
.pen-toolbar-container *,
.toolbar-palette-popover *,
.toolbar-shape-flyout *,
.toolbar-monkey-flyout *,
.canvas-hud-top-right *,
.canvas-hud-bottom-left * {
  cursor: default;
}

.toolbar-tool-btn,
.palette-color-btn,
.toolbar-flyout-item,
.hud-pill,
.toolbar-tool-btn *,
.palette-color-btn *,
.toolbar-flyout-item * {
  cursor: pointer !important;
}

.toolbar-drag-handle,
.toolbar-drag-pill,
.toolbar-drag-handle * {
  cursor: grab !important;
}

.toolbar-drag-handle:active,
.toolbar-drag-pill:active {
  cursor: grabbing !important;
}

/* HUD Overlay Controls */
.canvas-hud-top-right {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
}

.canvas-hud-bottom-left {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
}

.hud-pill {
  pointer-events: auto;
  padding: 6px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  background: rgba(30, 30, 30, 0.75);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: var(--md-sys-typescale-font-mono);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--pen-glass-shadow-sm);
}

.hud-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
}

/* --------------------------------------------------------------------------
   5. Mobile Smartphone Responsive Rules (<600px)
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .pen-toolbar-container {
    top: 8px !important;
    right: 8px !important;
    padding: 6px 5px 8px 5px;
    gap: 4px;
    border-radius: 16px;
    max-height: calc(100% - 16px);
  }

  .toolbar-drag-handle {
    width: 32px;
    height: 10px;
    margin-bottom: 0;
  }

  .toolbar-drag-pill {
    width: 22px;
    height: 4px;
  }

  .toolbar-divider {
    width: 20px;
    height: 2px;
    margin: 1px 0;
  }

  .toolbar-tool-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 16px;
  }

  .toolbar-tool-btn .material-symbols-rounded {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .toolbar-tool-btn svg {
    width: 18px;
    height: 18px;
  }

  .toolbar-palette-popover {
    top: 0 !important;
    right: calc(100% + 6px) !important;
    padding: 8px 10px 10px 10px;
    max-width: calc(100vw - 72px);
    border-radius: 16px;
  }

  .palette-title {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .palette-grid {
    grid-template-columns: repeat(4, 22px);
    grid-template-rows: repeat(3, 22px);
    gap: 5px;
  }

  .palette-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 11px;
  }

  .toolbar-shape-flyout {
    top: 0 !important;
    right: calc(100% + 6px) !important;
    padding: 8px 10px 10px 10px;
    border-radius: 16px;
  }

  .shape-flyout-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .shape-flyout-grid {
    grid-template-columns: repeat(2, 28px);
    gap: 5px;
  }

  .shape-flyout-grid .toolbar-tool-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .toolbar-monkey-flyout {
    top: 0 !important;
    right: calc(100% + 6px) !important;
    padding: 4px 6px;
    gap: 4px;
    border-radius: 20px;
  }

  .toolbar-monkey-flyout .toolbar-tool-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .canvas-hud-top-right {
    display: none !important;
  }

  .canvas-hud-bottom-left {
    bottom: 8px;
    left: 8px;
  }

  .canvas-hud-bottom-left .hud-pill {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* --------------------------------------------------------------------------
   6. Extra-small phones (≤359px) canvas toolbar safety
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  /* Slightly shrink toolbar buttons on very tiny screens */
  .toolbar-tool-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 14px;
  }

  .toolbar-tool-btn .material-symbols-rounded {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .toolbar-tool-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Clamp flyout max-width to ensure it never clips off the left edge */
  .toolbar-palette-popover,
  .toolbar-shape-flyout,
  .toolbar-monkey-flyout {
    max-width: calc(100vw - 56px) !important;
    box-sizing: border-box;
  }

  /* Smaller palette grid on tiny phones */
  .palette-grid {
    grid-template-columns: repeat(4, 18px);
    grid-template-rows: repeat(3, 18px);
    gap: 4px;
  }

  .palette-color-btn {
    width: 18px;
    height: 18px;
    border-radius: 9px;
  }
}