/**
 * Signature Canvas and Toolbar Styles
 * Enhanced signature drawing with professional tools
 */

/* Signature Canvas Container */
.signature-canvas-container {
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container-low);
}

#signatureCanvas {
  width: 100%;
  height: auto;
  display: block;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-small);
  cursor: crosshair;
  touch-action: none; /* Prevent scrolling while drawing */
}

#signatureCanvas:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Signature Toolbar */
.signature-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  margin-top: var(--md-sys-spacing-3);
  flex-wrap: wrap;
}

.signature-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  flex: 1;
  flex-wrap: wrap;
}

.signature-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  flex-wrap: wrap;
}

/* Pen Controls */
.pen-controls {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-2);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-medium);
}

.pen-control-group {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
}

.pen-control-label {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

/* Pen Size Slider */
.pen-size-control {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
}

#penSize {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--md-sys-color-surface-variant);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#penSize::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  cursor: pointer;
  transition: transform 150ms var(--easing-standard);
}

#penSize::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  cursor: pointer;
  border: none;
  transition: transform 150ms var(--easing-standard);
}

#penSize:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

#penSize:hover::-moz-range-thumb {
  transform: scale(1.2);
}

#penSize:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.pen-size-value {
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  min-width: 32px;
  text-align: center;
}

/* Pen Color Picker */
.pen-color-control {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
}

#penColor {
  width: 40px;
  height: 32px;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#penColor::-webkit-color-swatch-wrapper {
  padding: 0;
}

#penColor::-webkit-color-swatch {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

#penColor::-moz-color-swatch {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

#penColor:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Signature Action Buttons */
.signature-actions {
  display: flex;
  gap: var(--md-sys-spacing-2);
  align-items: center;
}

/* Icon buttons for undo/redo */
.md3-icon-button-sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms var(--easing-standard);
  position: relative;
  overflow: hidden;
}

.md3-icon-button-sm:hover:not(:disabled) {
  background: var(--md-sys-color-surface-variant);
  border-color: var(--md-sys-color-on-surface);
}

.md3-icon-button-sm:active:not(:disabled) {
  transform: scale(0.95);
}

.md3-icon-button-sm:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  border-color: var(--md-sys-color-outline-variant);
}

.md3-icon-button-sm:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Icons using SVG or Unicode */
.icon-undo::before {
  content: '↶';
  font-size: 20px;
  font-weight: bold;
}

.icon-redo::before {
  content: '↷';
  font-size: 20px;
  font-weight: bold;
}

/* Helper text */
.signature-helper-text {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-1);
}

/* Responsive adjustments */
@media (max-width: 599px) {
  .signature-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .signature-toolbar-left,
  .signature-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .pen-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .pen-control-group {
    justify-content: space-between;
  }

  #penSize {
    width: 100%;
    flex: 1;
  }

  .signature-actions {
    width: 100%;
    justify-content: stretch;
  }

  .signature-actions button {
    flex: 1;
  }
}

/* Print styles - hide toolbar */
@media print {
  .signature-toolbar,
  .signature-helper-text {
    display: none !important;
  }

  .signature-canvas-container {
    border: none;
    padding: 0;
    background: transparent;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .signature-canvas-container {
  background: var(--md-sys-color-surface-container);
}

[data-theme="dark"] #signatureCanvas {
  background: #ffffff;
}

/* Accessibility - high contrast mode */
@media (prefers-contrast: high) {
  #signatureCanvas {
    border: 2px solid currentColor;
  }

  .pen-controls {
    border: 1px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #penSize::-webkit-slider-thumb,
  #penSize::-moz-range-thumb,
  .md3-icon-button-sm {
    transition: none;
  }
}