/**
 * PAINT CSS - Windows XP Style
 * 
 * Estilos para o Paint nostálgico
 */

#paint-window {
  display: none;
}

.paint-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--xp-gray-light);
}

.paint-toolbar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--xp-gray-mid);
  border-bottom: 1px solid var(--xp-gray-border);
}

.paint-tool-btn {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: var(--xp-gray-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition-fast);
}

.paint-tool-btn:hover {
  border: 1px solid #0066cc;
  background: #ddeeff;
}

.paint-tool-btn.active {
  border: 1px solid #0066cc;
  background: #cce8ff;
}

.paint-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.paint-tools {
  width: 60px;
  background: var(--xp-gray-mid);
  border-right: 1px solid var(--xp-gray-border);
  padding: 8px 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-content: start;
}

.paint-tool {
  width: 24px;
  height: 24px;
  border: 1px solid var(--xp-gray-border);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.paint-tool:hover {
  border: 1px solid #0066cc;
}

.paint-tool.active {
  border: 2px solid #0066cc;
  background: #e8f4ff;
}

.paint-canvas-container {
  flex: 1;
  overflow: auto;
  background: #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.paint-canvas {
  background: white;
  cursor: crosshair;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.paint-colors {
  height: 50px;
  background: var(--xp-gray-mid);
  border-top: 1px solid var(--xp-gray-border);
  padding: 5px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.paint-color-indicators {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paint-color-box {
  width: 30px;
  height: 18px;
  border: 1px solid var(--xp-black);
  cursor: pointer;
}

.paint-color-palette {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 2px;
}

.paint-color {
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  cursor: pointer;
  transition: var(--transition-fast);
}

.paint-color:hover {
  transform: scale(1.1);
  border: 2px solid var(--xp-black);
}

.paint-size-control {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.paint-size-control label {
  font-size: var(--font-size-sm);
}

.paint-size-control input {
  width: 80px;
}

/* Cursor personalizado para cada ferramenta */
.paint-canvas.cursor-pencil { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="2" fill="black"/></svg>') 8 8, crosshair; }
.paint-canvas.cursor-brush { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="4" fill="black"/></svg>') 8 8, crosshair; }
.paint-canvas.cursor-eraser { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="10" height="10" x="3" y="3" fill="white" stroke="black"/></svg>') 8 8, crosshair; }
.paint-canvas.cursor-fill { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 2 L14 8 L8 14 L2 8 Z" fill="black"/></svg>') 8 8, crosshair; }